v0.10.0

Add storage labels to 'All Notes' and figure a better solution to the dull storage notes list view

.boostnoterc.sample

@@ -10,7 +10,6 @@
         "theme": "monokai"
     },
     "hotkey": {
-        "toggleFinder": "Cmd + Alt + S",
         "toggleMain": "Cmd + Alt + L"
     },
     "isSideNavFolded": false,

.gitignore

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

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 node_js:
-  - stable
-  - lts/*
+  - 6
 script:
   - npm run lint && npm run test
   - 'if [[ ${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH} = "master" ]]; then npm install -g grunt npm@5.2 && grunt pre-build; fi'

LICENSE

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

browser/components/CodeEditor.js

@@ -2,10 +2,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
 import path from 'path'
 import copyImage from 'browser/main/lib/dataApi/copyImage'
 import { findStorage } from 'browser/lib/findStorage'
 import fs from 'fs'
+import eventEmitter from 'browser/main/lib/eventEmitter'
 
 CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
 
@@ -46,13 +48,48 @@ export default class CodeEditor extends React.Component {
     this.loadStyleHandler = (e) => {
       this.editor.refresh()
     }
+    this.searchHandler = (e, msg) => this.handleSearch(msg)
+    this.searchState = null
+  }
+
+  handleSearch (msg) {
+    const cm = this.editor
+    const component = this
+
+    if (component.searchState) cm.removeOverlay(component.searchState)
+    if (msg.length < 3) return
+
+    cm.operation(function () {
+      component.searchState = makeOverlay(msg, 'searching')
+      cm.addOverlay(component.searchState)
+
+      function makeOverlay (query, style) {
+        query = new RegExp(query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'), 'gi')
+        return {
+          token: function (stream) {
+            query.lastIndex = stream.pos
+            var match = query.exec(stream.string)
+            if (match && match.index === stream.pos) {
+              stream.pos += match[0].length || 1
+              return style
+            } else if (match) {
+              stream.pos = match.index
+            } else {
+              stream.skipToEnd()
+            }
+          }
+        }
+      }
+    })
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
   }
 
   componentDidMount () {
     this.value = this.props.value
+
     this.editor = CodeMirror(this.refs.root, {
       value: this.props.value,
-      lineNumbers: true,
+      lineNumbers: this.props.displayLineNumbers,
       lineWrapping: true,
       theme: this.props.theme,
       indentUnit: this.props.indentSize,
@@ -62,6 +99,7 @@ export default class CodeEditor extends React.Component {
       scrollPastEnd: this.props.scrollPastEnd,
       inputStyle: 'textarea',
       dragDrop: false,
+      autoCloseBrackets: true,
       extraKeys: {
         Tab: function (cm) {
           const cursor = cm.getCursor()
@@ -69,7 +107,7 @@ export default class CodeEditor extends React.Component {
           if (cm.somethingSelected()) cm.indentSelection('add')
           else {
             const tabs = cm.getOption('indentWithTabs')
-            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)\] )?$/)) {
+            if (line.trimLeft().match(/^(-|\*|\+) (\[( |x)] )?$/)) {
               cm.execCommand('goLineStart')
               if (tabs) {
                 cm.execCommand('insertTab')
@@ -89,7 +127,7 @@ export default class CodeEditor extends React.Component {
         'Cmd-T': function (cm) {
           // Do nothing
         },
-        Enter: 'newlineAndIndentContinueMarkdownList',
+        Enter: 'boostNewLineAndIndentContinueMarkdownList',
         'Ctrl-C': (cm) => {
           if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
             document.execCommand('copy')
@@ -104,6 +142,10 @@ export default class CodeEditor extends React.Component {
     this.editor.on('blur', this.blurHandler)
     this.editor.on('change', this.changeHandler)
     this.editor.on('paste', this.pasteHandler)
+    eventEmitter.on('top:search', this.searchHandler)
+
+    eventEmitter.emit('code:init')
+    this.editor.on('scroll', this.scrollHandler)
 
     const editorTheme = document.getElementById('editorTheme')
     editorTheme.addEventListener('load', this.loadStyleHandler)
@@ -123,6 +165,8 @@ export default class CodeEditor extends React.Component {
     this.editor.off('blur', this.blurHandler)
     this.editor.off('change', this.changeHandler)
     this.editor.off('paste', this.pasteHandler)
+    eventEmitter.off('top:search', this.searchHandler)
+    this.editor.off('scroll', this.scrollHandler)
     const editorTheme = document.getElementById('editorTheme')
     editorTheme.removeEventListener('load', this.loadStyleHandler)
   }
@@ -154,6 +198,10 @@ export default class CodeEditor extends React.Component {
       this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
     }
 
+    if (prevProps.displayLineNumbers !== this.props.displayLineNumbers) {
+      this.editor.setOption('lineNumbers', this.props.displayLineNumbers)
+    }
+
     if (prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
       this.editor.setOption('scrollPastEnd', this.props.scrollPastEnd)
     }
@@ -224,32 +272,72 @@ export default class CodeEditor extends React.Component {
   }
 
   handlePaste (editor, e) {
-    const dataTransferItem = e.clipboardData.items[0]
-    if (!dataTransferItem.type.match('image')) return
-
-    const blob = dataTransferItem.getAsFile()
-    const reader = new FileReader()
-    let base64data
-
-    reader.readAsDataURL(blob)
-    reader.onloadend = () => {
-      base64data = reader.result.replace(/^data:image\/png;base64,/, '')
-      base64data += base64data.replace('+', ' ')
-      const binaryData = new Buffer(base64data, 'base64').toString('binary')
-      const imageName = Math.random().toString(36).slice(-16)
-      const storagePath = findStorage(this.props.storageKey).path
-      const imageDir = path.join(storagePath, 'images')
-      if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
-      const imagePath = path.join(imageDir, `${imageName}.png`)
-      fs.writeFile(imagePath, binaryData, 'binary')
-      const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
-      this.insertImageMd(imageMd)
+    const clipboardData = e.clipboardData
+    const dataTransferItem = clipboardData.items[0]
+    const pastedTxt = clipboardData.getData('text')
+    const isURL = (str) => {
+      const matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/
+      return matcher.test(str)
     }
+    if (dataTransferItem.type.match('image')) {
+      const blob = dataTransferItem.getAsFile()
+      const reader = new FileReader()
+      let base64data
+
+      reader.readAsDataURL(blob)
+      reader.onloadend = () => {
+        base64data = reader.result.replace(/^data:image\/png;base64,/, '')
+        base64data += base64data.replace('+', ' ')
+        const binaryData = new Buffer(base64data, 'base64').toString('binary')
+        const imageName = Math.random().toString(36).slice(-16)
+        const storagePath = findStorage(this.props.storageKey).path
+        const imageDir = path.join(storagePath, 'images')
+        if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir)
+        const imagePath = path.join(imageDir, `${imageName}.png`)
+        fs.writeFile(imagePath, binaryData, 'binary')
+        const imageMd = `![${imageName}](${path.join('/:storage', `${imageName}.png`)})`
+        this.insertImageMd(imageMd)
+      }
+    } else if (this.props.fetchUrlTitle && isURL(pastedTxt)) {
+      this.handlePasteUrl(e, editor, pastedTxt)
+    }
+  }
+
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(e)
+    }
+  }
+
+  handlePasteUrl (e, editor, pastedTxt) {
+    e.preventDefault()
+    const taggedUrl = `<${pastedTxt}>`
+    editor.replaceSelection(taggedUrl)
+
+    fetch(pastedTxt, {
+      method: 'get'
+    }).then((response) => {
+      return (response.text())
+    }).then((response) => {
+      const parsedResponse = (new window.DOMParser()).parseFromString(response, 'text/html')
+      const value = editor.getValue()
+      const cursor = editor.getCursor()
+      const LinkWithTitle = `[${parsedResponse.title}](${pastedTxt})`
+      const newValue = value.replace(taggedUrl, LinkWithTitle)
+      editor.setValue(newValue)
+      editor.setCursor(cursor)
+    }).catch((e) => {
+      const value = editor.getValue()
+      const newValue = value.replace(taggedUrl, pastedTxt)
+      const cursor = editor.getCursor()
+      editor.setValue(newValue)
+      editor.setCursor(cursor)
+    })
   }
 
   render () {
     const { className, fontSize } = this.props
-    let fontFamily = this.props.className
+    let fontFamily = this.props.fontFamily
     fontFamily = _.isString(fontFamily) && fontFamily.length > 0
       ? [fontFamily].concat(defaultEditorFontFamily)
       : defaultEditorFontFamily

browser/components/MarkdownEditor.js

@@ -5,7 +5,7 @@ import styles from './MarkdownEditor.styl'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import { findStorage } from 'browser/lib/findStorage'
+import {findStorage} from 'browser/lib/findStorage'
 
 class MarkdownEditor extends React.Component {
   constructor (props) {
@@ -92,7 +92,9 @@ class MarkdownEditor extends React.Component {
     if (this.state.isLocked) return
     this.setState({ keyPressed: new Set() })
     const { config } = this.props
-    if (config.editor.switchPreview === 'BLUR') {
+    if (config.editor.switchPreview === 'BLUR' ||
+        (config.editor.switchPreview === 'DBL_CLICK' && this.state.status === 'CODE')
+    ) {
       const cursorPosition = this.refs.code.editor.getCursor()
       this.setState({
         status: 'PREVIEW'
@@ -104,6 +106,20 @@ class MarkdownEditor extends React.Component {
     }
   }
 
+  handleDoubleClick (e) {
+    if (this.state.isLocked) return
+    this.setState({keyPressed: new Set()})
+    const { config } = this.props
+    if (config.editor.switchPreview === 'DBL_CLICK') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+      })
+    }
+  }
+
   handlePreviewMouseDown (e) {
     this.previewMouseDownedAt = new Date()
   }
@@ -242,8 +258,10 @@ class MarkdownEditor extends React.Component {
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
           indentSize={editorIndentSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
           scrollPastEnd={config.editor.scrollPastEnd}
           storageKey={storageKey}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
           onChange={(e) => this.handleChange(e)}
           onBlur={(e) => this.handleBlur(e)}
         />
@@ -260,9 +278,10 @@ class MarkdownEditor extends React.Component {
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
           indentSize={editorIndentSize}
-          scrollPastEnd={config.editor.scrollPastEnd}
+          scrollPastEnd={config.preview.scrollPastEnd}
           ref='preview'
           onContextMenu={(e) => this.handleContextMenu(e)}
+          onDoubleClick={(e) => this.handleDoubleClick(e)}
           tabIndex='0'
           value={this.state.renderValue}
           onMouseUp={(e) => this.handlePreviewMouseUp(e)}

browser/components/MarkdownPreview.js

@@ -3,15 +3,16 @@ import React from 'react'
 import markdown from 'browser/lib/markdown'
 import _ from 'lodash'
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
 import SequenceDiagram from 'js-sequence-diagrams'
 import eventEmitter from 'browser/main/lib/eventEmitter'
-import fs from 'fs'
 import htmlTextHelper from 'browser/lib/htmlTextHelper'
 import copy from 'copy-to-clipboard'
 import mdurl from 'mdurl'
+import exportNote from 'browser/main/lib/dataApi/exportNote'
 
 const { remote } = require('electron')
 const { app } = remote
@@ -22,8 +23,12 @@ const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
 const appPath = 'file://' + (process.env.NODE_ENV === 'production'
   ? app.getAppPath()
   : path.resolve())
+const CSS_FILES = [
+  `${appPath}/node_modules/katex/dist/katex.min.css`,
+  `${appPath}/node_modules/codemirror/lib/codemirror.css`
+]
 
-function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd) {
   return `
 @font-face {
   font-family: 'Lato';
@@ -47,6 +52,7 @@ ${markdownStyle}
 body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
+  ${scrollPastEnd && 'padding-bottom: 90vh;'}
 }
 code {
   font-family: '${codeBlockFontFamily.join("','")}';
@@ -114,10 +120,13 @@ export default class MarkdownPreview extends React.Component {
     this.contextMenuHandler = (e) => this.handleContextMenu(e)
     this.mouseDownHandler = (e) => this.handleMouseDown(e)
     this.mouseUpHandler = (e) => this.handleMouseUp(e)
+    this.DoubleClickHandler = (e) => this.handleDoubleClick(e)
+    this.scrollHandler = _.debounce(this.handleScroll.bind(this), 100, {leading: false, trailing: true})
     this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
     this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
     this.saveAsTextHandler = () => this.handleSaveAsText()
     this.saveAsMdHandler = () => this.handleSaveAsMd()
+    this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
     this.printHandler = () => this.handlePrint()
 
     this.linkClickHandler = this.handlelinkClick.bind(this)
@@ -143,13 +152,21 @@ export default class MarkdownPreview extends React.Component {
     this.props.onCheckboxClick(e)
   }
 
+  handleScroll (e) {
+    if (this.props.onScroll) {
+      this.props.onScroll(e)
+    }
+  }
+
   handleContextMenu (e) {
-    if (!this.props.onContextMenu) return
     this.props.onContextMenu(e)
   }
 
+  handleDoubleClick (e) {
+    if (this.props.onDoubleClick != null) this.props.onDoubleClick(e)
+  }
+
   handleMouseDown (e) {
-    if (!this.props.onMouseDown) return
     if (e.target != null) {
       switch (e.target.tagName) {
         case 'A':
@@ -176,25 +193,64 @@ export default class MarkdownPreview extends React.Component {
     this.exportAsDocument('md')
   }
 
+  handleSaveAsHtml () {
+    this.exportAsDocument('html', (noteContent, exportTasks) => {
+      const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme} = this.getStyleParams()
+
+      const inlineStyles = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+      const body = markdown.render(noteContent)
+      const files = [this.GetCodeThemeLink(codeBlockTheme), ...CSS_FILES]
+
+      files.forEach((file) => {
+        file = file.replace('file://', '')
+        exportTasks.push({
+          src: file,
+          dst: 'css'
+        })
+      })
+
+      let styles = ''
+      files.forEach((file) => {
+        styles += `<link rel="stylesheet" href="css/${path.basename(file)}">`
+      })
+
+      return `<html>
+                 <head>
+                   <style id="style">${inlineStyles}</style>
+                   ${styles}
+                 </head>
+                 <body>${body}</body>
+              </html>`
+    })
+  }
+
   handlePrint () {
     this.refs.root.contentWindow.print()
   }
 
-  exportAsDocument (fileType) {
+  exportAsDocument (fileType, contentFormatter) {
     const options = {
       filters: [
-        { name: 'Documents', extensions: [fileType] }
+        {name: 'Documents', extensions: [fileType]}
       ],
       properties: ['openFile', 'createDirectory']
     }
+
     dialog.showSaveDialog(remote.getCurrentWindow(), options,
-    (filename) => {
-      if (filename) {
-        fs.writeFile(filename, this.props.value, (err) => {
-          if (err) throw err
+        (filename) => {
+          if (filename) {
+            const content = this.props.value
+            const storage = this.props.storagePath
+
+            exportNote(storage, content, filename, contentFormatter)
+                .then((res) => {
+                  dialog.showMessageBox(remote.getCurrentWindow(), {type: 'info', message: `Exported to ${filename}`})
+                }).catch((err) => {
+                  dialog.showErrorBox('Export error', err ? err.message || err : 'Unexpected error during export')
+                  throw err
+                })
+          }
         })
-      }
-    })
   }
 
   fixDecodedURI (node) {
@@ -211,21 +267,29 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.setAttribute('sandbox', 'allow-scripts')
     this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
 
-    this.refs.root.contentWindow.document.head.innerHTML = `
+    let styles = `
       <style id='style'></style>
-      <link rel="stylesheet" href="${appPath}/node_modules/katex/dist/katex.min.css">
-      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
       <link rel="stylesheet" id="codeTheme">
+      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     `
+
+    CSS_FILES.forEach((file) => {
+      styles += `<link rel="stylesheet" href="${file}">`
+    })
+
+    this.refs.root.contentWindow.document.head.innerHTML = styles
     this.rewriteIframe()
     this.applyStyle()
 
     this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('dblclick', this.DoubleClickHandler)
     this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
     this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('scroll', this.scrollHandler)
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
+    eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
     eventEmitter.on('print', this.printHandler)
   }
 
@@ -233,10 +297,13 @@ export default class MarkdownPreview extends React.Component {
     this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
     this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
     this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dblclick', this.DoubleClickHandler)
     this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
     this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('scroll', this.scrollHandler)
     eventEmitter.off('export:save-text', this.saveAsTextHandler)
     eventEmitter.off('export:save-md', this.saveAsMdHandler)
+    eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
     eventEmitter.off('print', this.printHandler)
   }
 
@@ -248,31 +315,38 @@ export default class MarkdownPreview extends React.Component {
       prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
       prevProps.lineNumber !== this.props.lineNumber ||
       prevProps.showCopyNotification !== this.props.showCopyNotification ||
-      prevProps.theme !== this.props.theme) {
+      prevProps.theme !== this.props.theme ||
+      prevProps.scrollPastEnd !== this.props.scrollPastEnd) {
       this.applyStyle()
       this.rewriteIframe()
     }
   }
 
-  applyStyle () {
-    const { fontSize, lineNumber, codeBlockTheme } = this.props
+  getStyleParams () {
+    const { fontSize, lineNumber, codeBlockTheme, scrollPastEnd } = this.props
     let { fontFamily, codeBlockFontFamily } = this.props
     fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
-      ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
-      : defaultFontFamily
+        ? fontFamily.split(',').map(fontName => fontName.trim()).concat(defaultFontFamily)
+        : defaultFontFamily
     codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
-      ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
-      : defaultCodeBlockFontFamily
+        ? codeBlockFontFamily.split(',').map(fontName => fontName.trim()).concat(defaultCodeBlockFontFamily)
+        : defaultCodeBlockFontFamily
 
-    this.setCodeTheme(codeBlockTheme)
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+    return {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd}
   }
 
-  setCodeTheme (theme) {
+  applyStyle () {
+    const {fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, scrollPastEnd} = this.getStyleParams()
+
+    this.getWindow().document.getElementById('codeTheme').href = this.GetCodeThemeLink(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd)
+  }
+
+  GetCodeThemeLink (theme) {
     theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
       : 'elegant'
-    this.getWindow().document.getElementById('codeTheme').href = theme.startsWith('solarized')
+    return theme.startsWith('solarized')
       ? `${appPath}/node_modules/codemirror/theme/solarized.css`
       : `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
@@ -302,10 +376,6 @@ export default class MarkdownPreview extends React.Component {
     }
     this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
 
-    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
-      el.parentNode.parentNode.style.listStyleType = 'none'
-    })
-
     _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
       this.fixDecodedURI(el)
       el.addEventListener('click', this.anchorClickHandler)

browser/components/MarkdownSplitEditor.js

@@ -2,6 +2,7 @@ import React from 'react'
 import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import { findStorage } from 'browser/lib/findStorage'
+import _ from 'lodash'
 
 import styles from './MarkdownSplitEditor.styl'
 import CSSModules from 'browser/lib/CSSModules'
@@ -12,6 +13,7 @@ class MarkdownSplitEditor extends React.Component {
     this.value = props.value
     this.focus = () => this.refs.code.focus()
     this.reload = () => this.refs.code.reload()
+    this.userScroll = true
   }
 
   handleOnChange () {
@@ -19,6 +21,49 @@ class MarkdownSplitEditor extends React.Component {
     this.props.onChange()
   }
 
+  handleScroll (e) {
+    const previewDoc = _.get(this, 'refs.preview.refs.root.contentWindow.document')
+    const codeDoc = _.get(this, 'refs.code.editor.doc')
+    let srcTop, srcHeight, targetTop, targetHeight
+
+    if (this.userScroll) {
+      if (e.doc) {
+        srcTop = _.get(e, 'doc.scrollTop')
+        srcHeight = _.get(e, 'doc.height')
+        targetTop = _.get(previewDoc, 'body.scrollTop')
+        targetHeight = _.get(previewDoc, 'body.scrollHeight')
+      } else {
+        srcTop = _.get(previewDoc, 'body.scrollTop')
+        srcHeight = _.get(previewDoc, 'body.scrollHeight')
+        targetTop = _.get(codeDoc, 'scrollTop')
+        targetHeight = _.get(codeDoc, 'height')
+      }
+
+      const distance = (targetHeight * srcTop / srcHeight) - targetTop
+      const framerate = 1000 / 60
+      const frames = 20
+      const refractory = frames * framerate
+
+      this.userScroll = false
+
+      let frame = 0
+      let scrollPos, time
+      const timer = setInterval(() => {
+        time = frame / frames
+        scrollPos = time < 0.5
+                  ? 2 * time * time // ease in
+                  : -1 + (4 - 2 * time) * time // ease out
+        if (e.doc) _.set(previewDoc, 'body.scrollTop', targetTop + scrollPos * distance)
+        else _.get(this, 'refs.code.editor').scrollTo(0, targetTop + scrollPos * distance)
+        if (frame >= frames) {
+          clearInterval(timer)
+          setTimeout(() => { this.userScroll = true }, refractory)
+        }
+        frame++
+      }, framerate)
+    }
+  }
+
   handleCheckboxClick (e) {
     e.preventDefault()
     e.stopPropagation()
@@ -45,6 +90,10 @@ class MarkdownSplitEditor extends React.Component {
   render () {
     const { config, value, storageKey } = this.props
     const storage = findStorage(storageKey)
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
     const previewStyle = {}
     if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
     return (
@@ -57,10 +106,15 @@ class MarkdownSplitEditor extends React.Component {
           theme={config.editor.theme}
           keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          displayLineNumbers={config.editor.displayLineNumbers}
           indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
           scrollPastEnd={config.editor.scrollPastEnd}
+          fetchUrlTitle={config.editor.fetchUrlTitle}
           storageKey={storageKey}
           onChange={this.handleOnChange.bind(this)}
+          onScroll={this.handleScroll.bind(this)}
        />
         <MarkdownPreview
           style={previewStyle}
@@ -72,10 +126,12 @@ class MarkdownSplitEditor extends React.Component {
           codeBlockTheme={config.preview.codeBlockTheme}
           codeBlockFontFamily={config.editor.fontFamily}
           lineNumber={config.preview.lineNumber}
+          scrollPastEnd={config.preview.scrollPastEnd}
           ref='preview'
           tabInde='0'
           value={value}
           onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          onScroll={this.handleScroll.bind(this)}
           showCopyNotification={config.ui.showCopyNotification}
           storagePath={storage.path}
        />

browser/components/NoteItem.js

@@ -46,11 +46,22 @@ const TagElementList = (tags) => {
  * @param {Function} handleDragStart
  * @param {string} dateDisplay
  */
-const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
+const NoteItem = ({
+  isActive,
+  note,
+  dateDisplay,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storageName,
+  folderName,
+  viewType
+}) => (
   <div styleName={isActive
-      ? 'item--active'
-      : 'item'
-    }
+    ? 'item--active'
+    : 'item'
+  }
     key={`${note.storage}-${note.key}`}
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
@@ -68,23 +79,33 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
           : <span styleName='item-title-empty'>Empty</span>
         }
       </div>
+      {['ALL', 'STORAGE'].includes(viewType) && <div styleName='item-middle'>
+        <div styleName='item-middle-time'>{dateDisplay}</div>
+        <div styleName='item-middle-app-meta'>
+          <div title={viewType === 'ALL' ? storageName : viewType === 'STORAGE' ? folderName : null} styleName='item-middle-app-meta-label'>
+            {viewType === 'ALL' && storageName}
+            {viewType === 'STORAGE' && folderName}
+          </div>
+        </div>
+      </div>}
 
-      <div styleName='item-bottom-time'>{dateDisplay}</div>
-      {note.isStarred
-        ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
-      }
-      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
-        ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
-      }
-      {note.type === 'MARKDOWN_NOTE'
-        ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
-        : ''
-      }
       <div styleName='item-bottom'>
         <div styleName='item-bottom-tagList'>
           {note.tags.length > 0
             ? TagElementList(note.tags)
-            : <span styleName='item-bottom-tagList-empty' />
+            : <span style={{ fontStyle: 'italic', opacity: 0.5 }} styleName='item-bottom-tagList-empty'>No tags</span>
+          }
+        </div>
+        <div>
+          {note.isStarred
+            ? <img styleName='item-star' src='../resources/icon/icon-starred.svg' /> : ''
+          }
+          {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+            ? <i styleName='item-pin' className='fa fa-thumb-tack' /> : ''
+          }
+          {note.type === 'MARKDOWN_NOTE'
+            ? <TodoProcess todoStatus={getTodoStatus(note.content)} />
+            : ''
           }
         </div>
       </div>

browser/components/NoteItem.styl

@@ -90,6 +90,26 @@ $control-height = 30px
   font-weight normal
   color $ui-inactive-text-color
 
+.item-middle
+  font-size 13px
+  padding-left 2px
+  padding-bottom 2px
+
+.item-middle-time
+  color $ui-inactive-text-color
+  display inline-block
+
+.item-middle-app-meta
+  float right
+  .item-middle-app-meta-label
+    opacity 0.4
+    color $ui-inactive-text-color
+    padding 0 3px
+    white-space nowrap
+    text-overflow ellipsis
+    overflow hidden
+    max-width 200px
+
 .item-bottom
   position relative
   bottom 0px
@@ -124,9 +144,7 @@ $control-height = 30px
   padding-bottom 2px
 
 .item-star
-  position absolute
-  right -6px
-  bottom 23px
+  position relative
   width 16px
   height 16px
   color alpha($ui-favorite-star-button-color, 60%)
@@ -135,9 +153,7 @@ $control-height = 30px
   border-radius 17px
 
 .item-pin
-  position absolute
-  right 0px
-  bottom 2px
+  position relative
   width 34px
   height 34px
   color #E54D42
@@ -192,7 +208,7 @@ body[data-theme="dark"]
       .item-bottom-tagList-item
         transition 0.15s
         background-color alpha(white, 10%)
-        color $ui-dark-text-color  
+        color $ui-dark-text-color
 
   .item-wrapper
     border-color alpha($ui-dark-button--active-backgroundColor, 60%)
@@ -266,7 +282,7 @@ body[data-theme="solarized-dark"]
       .item-bottom-tagList-item
         transition 0.15s
         background-color alpha($ui-solarized-dark-noteList-backgroundColor, 10%)
-        color $ui-solarized-dark-text-color  
+        color $ui-solarized-dark-text-color
 
   .item-wrapper
     border-color alpha($ui-solarized-dark-button--active-backgroundColor, 60%)
@@ -304,4 +320,4 @@ body[data-theme="solarized-dark"]
 
   .item-bottom-tagList-empty
     color $ui-inactive-text-color
-    vertical-align middle
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -14,11 +14,20 @@ import styles from './NoteItemSimple.styl'
  * @param {Function} handleNoteContextMenu
  * @param {Function} handleDragStart
  */
-const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu, handleDragStart, pathname }) => (
+const NoteItemSimple = ({
+  isActive,
+  isAllNotesView,
+  note,
+  handleNoteClick,
+  handleNoteContextMenu,
+  handleDragStart,
+  pathname,
+  storage
+}) => (
   <div styleName={isActive
-      ? 'item-simple--active'
-      : 'item-simple'
-    }
+    ? '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}`)}
@@ -30,7 +39,7 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
         ? <i styleName='item-simple-title-icon' className='fa fa-fw fa-code' />
         : <i styleName='item-simple-title-icon' className='fa fa-fw fa-file-text-o' />
       }
-      {note.isPinned && !pathname.match(/\/home|\/starred|\/trash/)
+      {note.isPinned && !pathname.match(/\/starred|\/trash/)
         ? <i styleName='item-pin' className='fa fa-thumb-tack' />
         : ''
       }
@@ -38,6 +47,11 @@ const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu
         ? note.title
         : <span styleName='item-simple-title-empty'>Empty</span>
       }
+      {isAllNotesView && <div styleName='item-simple-right'>
+        <span styleName='item-simple-right-storageName'>
+          {storage.name}
+        </span>
+      </div>}
     </div>
   </div>
 )

browser/components/NoteItemSimple.styl

@@ -124,7 +124,7 @@ body[data-theme="dark"]
       .item-simple-bottom-tagList-item
         transition 0.15s
         background-color alpha(white, 10%)
-        color $ui-dark-text-color  
+        color $ui-dark-text-color
 
   .item-simple--active
     border-color $ui-dark-borderColor
@@ -188,7 +188,7 @@ body[data-theme="solarized-dark"]
       .item-simple-bottom-tagList-item
         transition 0.15s
         background-color alpha(white, 10%)
-        color $ui-solarized-dark-text-color  
+        color $ui-solarized-dark-text-color
 
   .item-simple--active
     border-color $ui-solarized-dark-borderColor
@@ -206,4 +206,9 @@ body[data-theme="solarized-dark"]
       // background-color alpha($ui-dark-button--active-backgroundColor, 60%)
       color #c0392b
       .item-simple-bottom-tagList-item
-        background-color alpha(#fff, 20%)
+        background-color alpha(#fff, 20%)
+.item-simple-right
+  float right
+  .item-simple-right-storageName
+    padding-left 4px
+    opacity 0.4

browser/components/SideNavFilter.js

@@ -17,7 +17,7 @@ import styles from './SideNavFilter.styl'
 const SideNavFilter = ({
   isFolded, isHomeActive, handleAllNotesButtonClick,
   isStarredActive, handleStarredButtonClick, isTrashedActive, handleTrashedButtonClick, counterDelNote,
-  counterTotalNote, counterStarredNote
+  counterTotalNote, counterStarredNote, handleFilterButtonContextMenu
 }) => (
   <div styleName={isFolded ? 'menu--folded' : 'menu'}>
 
@@ -26,9 +26,9 @@ const SideNavFilter = ({
     >
       <div styleName='iconWrap'>
         <img src={isHomeActive
-            ? '../resources/icon/icon-all-active.svg'
-            : '../resources/icon/icon-all.svg'
-          }
+          ? '../resources/icon/icon-all-active.svg'
+          : '../resources/icon/icon-all.svg'
+        }
         />
       </div>
       <span styleName='menu-button-label'>All Notes</span>
@@ -40,9 +40,9 @@ const SideNavFilter = ({
     >
       <div styleName='iconWrap'>
         <img src={isStarredActive
-            ? '../resources/icon/icon-star-active.svg'
-            : '../resources/icon/icon-star-sidenav.svg'
-          }
+          ? '../resources/icon/icon-star-active.svg'
+          : '../resources/icon/icon-star-sidenav.svg'
+        }
         />
       </div>
       <span styleName='menu-button-label'>Starred</span>
@@ -54,12 +54,12 @@ const SideNavFilter = ({
     >
       <div styleName='iconWrap'>
         <img src={isTrashedActive
-            ? '../resources/icon/icon-trash-active.svg'
-            : '../resources/icon/icon-trash-sidenav.svg'
-          }
+          ? '../resources/icon/icon-trash-active.svg'
+          : '../resources/icon/icon-trash-sidenav.svg'
+        }
         />
       </div>
-      <span styleName='menu-button-label'>Trash</span>
+      <span onContextMenu={handleFilterButtonContextMenu} styleName='menu-button-label'>Trash</span>
       <span styleName='counters'>{counterDelNote}</span>
     </button>
 

browser/components/SideNavFilter.styl

@@ -92,7 +92,6 @@ body[data-theme="white"]
     color $ui-inactive-text-color
 
   .menu-button--active
-    @extend .menu-button
     color #e74c3c
     background-color $ui-button--active-backgroundColor
     .menu-button-label
@@ -109,7 +108,6 @@ body[data-theme="white"]
         color $ui-text-color
 
   .menu-button-star--active
-    @extend .menu-button
     color #F9BF3B
     background-color $ui-button--active-backgroundColor
     .menu-button-label
@@ -126,7 +124,6 @@ body[data-theme="white"]
         color $ui-text-color
 
   .menu-button-trash--active
-    @extend .menu-button
     color #5D9E36
     background-color $ui-button--active-backgroundColor
     .menu-button-label

browser/components/TagListItem.js

@@ -12,10 +12,11 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem, isActive}) => (
+const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
   <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
+      <span styleName='tagList-item-count'> {count}</span>
     </span>
   </button>
 )

browser/components/TagListItem.styl

@@ -48,6 +48,9 @@
   overflow hidden
   text-overflow ellipsis
 
+.tagList-item-count
+  padding 0 3px
+
 body[data-theme="white"]
   .tagList-item
     color $ui-inactive-text-color
@@ -63,6 +66,8 @@ body[data-theme="white"]
     color $ui-text-color
     &:hover
       background-color alpha($ui-button--active-backgroundColor, 60%)
+  .tagList-item-count
+    color $ui-text-color
 
 body[data-theme="dark"]
   .tagList-item
@@ -81,4 +86,6 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 50%)
     &:hover
       color $ui-dark-text-color
-      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+      background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+  .tagList-item-count
+    color $ui-dark-button--active-color

browser/components/TodoListPercentage.styl

@@ -1,6 +1,6 @@
 .percentageBar
   position absolute
-  top 50px
+  top 72px
   right 0px
   left 0px
   background-color #DADFE1

browser/components/markdown.styl

@@ -76,7 +76,7 @@ body
     justify-content left
 li
   label.taskListItem
-    margin-left -2em
+    margin-left -1.8em
     &.checked
       text-decoration line-through
       opacity 0.5
@@ -105,7 +105,6 @@ a
   border-radius 5px
   margin -5px
   transition .1s
-  display inline-block
   img
     vertical-align sub
   &:hover
@@ -179,6 +178,8 @@ ul
   margin-bottom 1em
   li
     display list-item
+    &.taskListItem
+      list-style none
     p
       margin 0
   &>li>ul, &>li>ol
@@ -219,6 +220,7 @@ pre
     background-color white
   &.CodeMirror
     height initial
+    flex-wrap wrap
     &>code
       flex 1
       overflow-x auto
@@ -228,6 +230,13 @@ pre
     padding 0
     border none
     border-radius 0
+  &>span.filename
+    width 100%
+    border-radius: 5px 0px 0px 0px
+    margin -8px 100% 8px -8px
+    padding 0px 6px
+    background-color #777;
+    color white
   &>span.lineNumber
     display none
     font-size 1em
@@ -336,8 +345,29 @@ body[data-theme="dark"]
     background-color themeDarkBorder
     color themeDarkText
 
+themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor
+themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
+themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
+themeSolarizedDarkTableBorder = themeDarkBorder
 
 body[data-theme="solarized-dark"]
   color $ui-solarized-dark-text-color
   border-color themeDarkBorder
   background-color $ui-solarized-dark-noteDetail-backgroundColor
+  table
+    thead
+      tr
+        background-color themeSolarizedDarkTableHead
+      th
+        border-color themeSolarizedDarkTableBorder
+        &:last-child
+          border-right solid 1px themeSolarizedDarkTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeSolarizedDarkTableOdd
+      tr:nth-child(2n)
+        background-color themeSolarizedDarkTableEven
+      td
+        border-color themeSolarizedDarkTableBorder
+        &:last-child
+          border-right solid 1px themeSolarizedDarkTableBorder

browser/finder/FinderMain.styl

@@ -1,156 +0,0 @@
-$search-height = 50px
-$nav-width = 175px
-$list-width = 250px
-
-.root
-  absolute top left right bottom
-
-.search
-  height $search-height
-  padding 10px
-  box-sizing border-box
-  border-bottom $ui-border
-  text-align center
-
-.search-input
-  height 30px
-  width 100%
-  margin 0 auto
-  font-size 18px
-  border none
-  outline none
-  text-align center
-  background-color transparent
-
-.result
-  absolute left right bottom
-  top $search-height
-  background-color $ui-noteDetail-backgroundColor
-
-.result-nav
-  user-select none
-  absolute left top bottom
-  width $nav-width
-  background-color $ui-backgroundColor
-
-.result-nav-filter
-  margin-bottom 10px
-
-.result-nav-filter-option
-  height 25px
-  line-height 25px
-  padding 0 10px
-  label
-    cursor pointer
-
-.result-nav-menu
-  navButtonColor()
-  height 32px
-  padding 0 10px
-  font-size 14px
-  width 100%
-  outline none
-  text-align left
-  line-height 32px
-  box-sizing border-box
-  cursor pointer
-
-.result-nav-menu--active
-  @extend .result-nav-menu
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.result-nav-storageList
-  absolute bottom left right
-  top 110px + 32px + 10px + 10px + 20px
-  overflow-y auto
-
-.result-list
-  user-select none
-  absolute top bottom
-  left $nav-width
-  width $list-width
-  box-sizing border-box
-  overflow-y auto
-  box-shadow 2px 0 15px -8px #b1b1b1
-  z-index 1
-
-.result-detail
-  absolute top bottom right
-  left $nav-width + $list-width
-  background-color $ui-noteDetail-backgroundColor
-
-body[data-theme="dark"]
-  .root
-    background-color $ui-dark-backgroundColor
-  .search
-    border-color $ui-dark-borderColor
-  .search-input
-    color $ui-dark-text-color
-
-  .result
-    background-color $ui-dark-noteList-backgroundColor
-
-  .result-nav
-    background-color $ui-dark-backgroundColor
-    label
-      color $ui-dark-text-color
-
-  .result-nav-menu
-    navDarkButtonColor()
-
-  .result-nav-menu--active
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
-  .result-list
-    border-color $ui-dark-borderColor
-    box-shadow none
-    top 0
-
-  .result-detail
-    absolute top bottom right
-    left $nav-width + $list-width
-    background-color $ui-dark-noteDetail-backgroundColor
-
-
-
-body[data-theme="solarized-dark"]
-  .root
-    background-color $ui-solarized-dark-backgroundColor
-  .search
-    border-color $ui-solarized-dark-borderColor
-  .search-input
-    color $ui-dark-text-color
-
-  .result
-    background-color $ui-solarized-dark-backgroundColor
-
-  .result-nav
-    background-color $ui-solarized-dark-backgroundColor
-    label
-      color $ui-dark-text-color
-
-  .result-nav-menu
-    navDarkButtonColor()
-
-  .result-nav-menu--active
-    background-color $ui-solarized-dark-button-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
-  .result-list
-    border-color $ui-solarized-dark-borderColor
-    box-shadow none
-    top 0
-
-  .result-detail
-    absolute top bottom right
-    left $nav-width + $list-width
-    background-color $ui-solarized-dark-backgroundColor
-

browser/finder/NoteDetail.js

@@ -1,210 +0,0 @@
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteDetail.styl'
-import MarkdownPreview from 'browser/components/MarkdownPreview'
-import MarkdownEditor from 'browser/components/MarkdownEditor'
-import CodeEditor from 'browser/components/CodeEditor'
-import CodeMirror from 'codemirror'
-import { findStorage } from 'browser/lib/findStorage'
-
-const electron = require('electron')
-const { clipboard } = electron
-const path = require('path')
-
-function pass (name) {
-  switch (name) {
-    case 'ejs':
-      return 'Embedded Javascript'
-    case 'html_ruby':
-      return 'Embedded Ruby'
-    case 'objectivec':
-      return 'Objective C'
-    case 'text':
-      return 'Plain Text'
-    default:
-      return name
-  }
-}
-function notify (title, options) {
-  if (global.process.platform === 'win32') {
-    options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
-  }
-  return new window.Notification(title, options)
-}
-
-class NoteDetail extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      snippetIndex: 0
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.note !== this.props.note) {
-      this.setState({
-        snippetIndex: 0
-      }, () => {
-        if (nextProps.note.type === 'SNIPPET_NOTE') {
-          nextProps.note.snippets.forEach((snippet, index) => {
-            this.refs['code-' + index].reload()
-          })
-        }
-      })
-    }
-  }
-
-  selectPriorSnippet () {
-    const { note } = this.props
-    if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
-      this.setState({
-        snippetIndex: (this.state.snippetIndex + note.snippets.length - 1) % note.snippets.length
-      })
-    }
-  }
-
-  selectNextSnippet () {
-    const { note } = this.props
-    if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
-      this.setState({
-        snippetIndex: (this.state.snippetIndex + 1) % note.snippets.length
-      })
-    }
-  }
-
-  saveToClipboard () {
-    const { note } = this.props
-
-    if (note.type === 'MARKDOWN_NOTE') {
-      clipboard.writeText(note.content)
-    } else {
-      clipboard.writeText(note.snippets[this.state.snippetIndex].content)
-    }
-
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!',
-      silent: true
-    })
-  }
-
-  handleTabButtonClick (e, index) {
-    this.setState({
-      snippetIndex: index
-    })
-  }
-
-  render () {
-    const { note, config } = this.props
-    if (note == null) {
-      return (
-        <div styleName='root' />
-      )
-    }
-
-    let editorFontSize = parseInt(config.editor.fontSize, 10)
-    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
-    let editorIndentSize = parseInt(config.editor.indentSize, 10)
-    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
-
-    const storage = findStorage(note.storage)
-
-    if (note.type === 'SNIPPET_NOTE') {
-      const tabList = note.snippets.map((snippet, index) => {
-        const isActive = this.state.snippetIndex === index
-        return <div styleName={isActive
-            ? 'tabList-item--active'
-            : 'tabList-item'
-          }
-          key={index}
-        >
-          <button styleName='tabList-item-button'
-            onClick={(e) => this.handleTabButtonClick(e, index)}
-          >
-            {snippet.name.trim().length > 0
-              ? snippet.name
-              : <span styleName='tabList-item-unnamed'>
-                Unnamed
-              </span>
-            }
-          </button>
-        </div>
-      })
-
-      const viewList = note.snippets.map((snippet, index) => {
-        const isActive = this.state.snippetIndex === index
-
-        let syntax = CodeMirror.findModeByName(pass(snippet.mode))
-        if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
-
-        return <div styleName='tabView'
-          key={index}
-          style={{zIndex: isActive ? 5 : 4}}
-        >
-          {snippet.mode === 'markdown'
-            ? <MarkdownEditor styleName='tabView-content'
-              config={config}
-              value={snippet.content}
-              ref={'code-' + index}
-              storageKey={note.storage}
-            />
-            : <CodeEditor styleName='tabView-content'
-              mode={snippet.mode}
-              value={snippet.content}
-              theme={config.editor.theme}
-              fontFamily={config.editor.fontFamily}
-              fontSize={editorFontSize}
-              indentType={config.editor.indentType}
-              indentSize={editorIndentSize}
-              keyMap={config.editor.keyMap}
-              scrollPastEnd={config.editor.scrollPastEnd}
-              readOnly
-              ref={'code-' + index}
-            />
-          }
-        </div>
-      })
-
-      return (
-        <div styleName='root'>
-          <div styleName='description'>
-            <textarea styleName='description-textarea'
-              style={{
-                fontFamily: config.preview.fontFamily,
-                fontSize: parseInt(config.preview.fontSize, 10)
-              }}
-              ref='description'
-              placeholder='Description...'
-              value={note.description}
-              readOnly
-            />
-          </div>
-          <div styleName='tabList'>
-            {tabList}
-          </div>
-          {viewList}
-        </div>
-      )
-    }
-
-    return (
-      <MarkdownPreview styleName='root'
-        theme={config.ui.theme}
-        fontSize={config.preview.fontSize}
-        fontFamily={config.preview.fontFamily}
-        codeBlockTheme={config.preview.codeBlockTheme}
-        codeBlockFontFamily={config.editor.fontFamily}
-        lineNumber={config.preview.lineNumber}
-        indentSize={editorIndentSize}
-        value={note.content}
-        showCopyNotification={config.ui.showCopyNotification}
-        storagePath={storage.path}
-      />
-    )
-  }
-}
-
-NoteDetail.propTypes = {
-}
-
-export default CSSModules(NoteDetail, styles)

browser/finder/NoteDetail.styl

@@ -1,129 +0,0 @@
-@import('../main/Detail/DetailVars.styl')
-
-.root
-  absolute top bottom left right
-  bottom 30px
-  margin 0 25px
-  height 100%
-  width 365px
-  background-color $ui-noteDetail-backgroundColor
-
-.description
-  absolute top left right
-  height 80px
-  box-sizing border-box
-
-.description-textarea
-  display block
-  height 100%
-  width 100%
-  resize none
-  border none
-  padding 10px
-  line-height 1.6
-  box-sizing border-box
-  background-color $ui-noteDetail-backgroundColor
-
-.tabList
-  absolute left right
-  top 80px
-  box-sizing border-box
-  height 30px
-  display flex
-  background-color $ui-noteDetail-backgroundColor
-
-.tabList-item
-  position relative
-  flex 1
-  overflow hidden
-  &:hover
-    background-color $ui-button--hover-backgroundColorg
-
-.tabList-item--active
-  @extend .tabList-item
-  border-bottom $ui-border
-
-.tabList-item-button
-  width 100%
-  height 29px
-  overflow ellipsis
-  text-align left
-  padding-right 30px
-  padding-left 10px
-  border none
-  background-color transparent
-  transition 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-
-.tabView
-  absolute left right bottom
-  top 130px
-
-.tabView-content
-  absolute top left right bottom
-  box-sizing border-box
-  height 100%
-  width 100%
-
-body[data-theme="dark"]
-  .root
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .description
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .description-textarea
-    background-color $ui-dark-noteDetail-backgroundColor
-    color white
-
-  .tabList
-    background-color $ui-dark-noteDetail-backgroundColor
-
-  .tabList-item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-
-  .tabList-item-button
-    border none
-    color $ui-dark-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-    &:hover
-      color white
-      background-color $ui-dark-button--hover-backgroundColor
-  
-
-body[data-theme="solarized-dark"]
-  .root
-    background-color $ui-solarized-dark-backgroundColor
-
-  .description
-    border-color $ui-dark-borderColor
-    background-color $ui-solarized-dark-backgroundColor
-
-  .description-textarea
-    background-color $ui-solarized-dark-backgroundColor
-    color white
-
-  .tabList
-    background-color $ui-solarized-dark-backgroundColor
-
-  .tabList-item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-dark-button--hover-backgroundColor
-
-  .tabList-item-button
-    border none
-    color $ui-dark-text-color
-    background-color transparent
-    transition color background-color 0.15s
-    border-left 4px solid transparent
-    &:hover
-      color white
-      background-color $ui-dark-button--hover-backgroundColor
-

browser/finder/NoteList.js

@@ -1,90 +0,0 @@
-import React from 'react'
-import NoteItem from 'browser/components/NoteItem'
-import moment from 'moment'
-
-class NoteList extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      range: 0
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (this.props.search !== nextProps.search) {
-      this.resetScroll()
-    }
-  }
-
-  componentDidUpdate () {
-    const { index } = this.props
-
-    if (index > -1) {
-      const list = this.refs.root
-      const item = list.childNodes[index]
-      if (item == null) return null
-
-      const overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
-      if (overflowBelow) {
-        list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
-      }
-      const overflowAbove = list.scrollTop > item.offsetTop
-      if (overflowAbove) {
-        list.scrollTop = item.offsetTop
-      }
-    }
-  }
-
-  resetScroll () {
-    this.refs.root.scrollTop = 0
-    this.setState({
-      range: 0
-    })
-  }
-
-  handleScroll (e) {
-    const { notes } = this.props
-
-    if (e.target.offsetHeight + e.target.scrollTop > e.target.scrollHeight - 100 && notes.length > this.state.range * 10 + 10) {
-      this.setState({
-        range: this.state.range + 1
-      })
-    }
-  }
-
-  render () {
-    const { notes, index } = this.props
-
-    const notesList = notes
-      .slice(0, 10 + 10 * this.state.range)
-      .map((note, _index) => {
-        const isActive = (index === _index)
-        const key = `${note.storage}-${note.key}`
-        const dateDisplay = moment(note.updatedAt).fromNow()
-
-        return (
-          <NoteItem
-            isActive={isActive}
-            note={note}
-            dateDisplay={dateDisplay}
-            key={key}
-            handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
-          />
-        )
-      })
-    return (
-      <div className={this.props.className}
-        onScroll={(e) => this.handleScroll(e)}
-        ref='root'
-      >
-        {notesList}
-      </div>
-    )
-  }
-}
-
-NoteList.propTypes = {
-}
-
-export default NoteList

browser/finder/StorageSection.js

@@ -1,77 +0,0 @@
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './StorageSection.styl'
-import StorageItem from 'browser/components/StorageItem'
-
-class StorageSection extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isOpen: true
-    }
-  }
-
-  handleToggleButtonClick (e) {
-    this.setState({
-      isOpen: !this.state.isOpen
-    })
-  }
-
-  handleHeaderClick (e) {
-    const { storage } = this.props
-    this.props.handleStorageButtonClick(e, storage.key)
-  }
-
-  handleFolderClick (e, folder) {
-    const { storage } = this.props
-    this.props.handleFolderButtonClick(e, storage.key, folder.key)
-  }
-
-  render () {
-    const { storage, filter } = this.props
-    const folderList = storage.folders
-      .map(folder => (
-        <StorageItem
-          key={folder.key}
-          isActive={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key}
-          handleButtonClick={(e) => this.handleFolderClick(e, folder)}
-          folderName={folder.name}
-          folderColor={folder.color}
-          isFolded={false}
-        />
-      ))
-
-    return (
-      <div styleName='root'>
-        <div styleName='header'>
-          <button styleName='header-toggleButton'
-            onClick={(e) => this.handleToggleButtonClick(e)}
-          >
-            <i className={this.state.isOpen
-                ? 'fa fa-caret-down'
-                : 'fa fa-caret-right'
-              }
-            />
-          </button>
-          <button styleName={filter.type === 'STORAGE' && filter.storage === storage.key
-              ? 'header-name--active'
-              : 'header-name'
-            }
-            onClick={(e) => this.handleHeaderClick(e)}
-          >{storage.name}</button>
-        </div>
-        {this.state.isOpen &&
-          <div styleName='folderList'>
-            {folderList}
-          </div>
-        }
-      </div>
-    )
-  }
-}
-
-StorageSection.propTypes = {
-}
-
-export default CSSModules(StorageSection, styles)

browser/finder/StorageSection.styl

@@ -1,85 +0,0 @@
-.root
-  position relative
-
-.header
-  height 26px
-.header-toggleButton
-  absolute top left
-  width 25px
-  height 26px
-  navButtonColor()
-  border none
-  outline none
-.header-name
-  display block
-  height 26px
-  navButtonColor()
-  padding 0 10px 0 25px
-  font-size 14px
-  width 100%
-  text-align left
-  line-height 26px
-  box-sizing border-box
-  cursor pointer
-  outline none
-
-.header-name--active
-  @extend .header-name
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item
-  display block
-  width 100%
-  height 26px
-  navButtonColor()
-  padding 0 10px 0 25px
-  font-size 14px
-  width 100%
-  text-align left
-  line-height 26px
-  box-sizing border-box
-  cursor pointer
-  outline none
-  padding 0 10px
-  margin 2px 0
-  height 26px
-  line-height 26px
-  border-width 0 0 0 6px
-  border-style solid
-  border-color transparent
-
-.folderList-item--active
-  @extend .folderList-item
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-body[data-theme="dark"]
-  .header-toggleButton
-    navDarkButtonColor()
-  .header-name
-    navDarkButtonColor()
-
-  .header-name--active
-    @extend .header-name
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    &:hover
-      background-color $ui-button--active-backgroundColor
-
-  .folderList-item
-    navDarkButtonColor()
-    border-width 0 0 0 6px
-    border-style solid
-    border-color transparent
-
-  .folderList-item--active
-    @extend .folderList-item
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    &:hover
-      background-color $ui-button--active-backgroundColor

browser/finder/index.js

@@ -1,357 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { connect, Provider } from 'react-redux'
-import _ from 'lodash'
-import store from './store'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './FinderMain.styl'
-import StorageSection from './StorageSection'
-import NoteList from './NoteList'
-import NoteDetail from './NoteDetail'
-import SideNavFilter from 'browser/components/SideNavFilter'
-import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
-require('!!style!css!stylus?sourceMap!../main/global.styl')
-require('../lib/customMeta')
-require('./ipcClient.js')
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu } = remote
-
-function hideFinder () {
-  const finderWindow = remote.getCurrentWindow()
-  if (global.process.platform === 'win32') {
-    finderWindow.blur()
-    finderWindow.hide()
-  }
-  if (global.process.platform === 'darwin') {
-    Menu.sendActionToFirstResponder('hide:')
-  }
-  remote.getCurrentWindow().hide()
-}
-
-require('!!style!css!stylus?sourceMap!../styles/finder/index.styl')
-
-class FinderMain extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      search: '',
-      index: 0,
-      filter: {
-        includeSnippet: true,
-        includeMarkdown: false,
-        type: 'ALL',
-        storage: null,
-        folder: null
-      }
-    }
-
-    this.focusHandler = (e) => this.handleWindowFocus(e)
-    this.blurHandler = (e) => this.handleWindowBlur(e)
-  }
-
-  componentDidMount () {
-    this.refs.search.focus()
-    window.addEventListener('focus', this.focusHandler)
-    window.addEventListener('blur', this.blurHandler)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('focus', this.focusHandler)
-    window.removeEventListener('blur', this.blurHandler)
-  }
-
-  handleWindowFocus (e) {
-    this.refs.search.focus()
-  }
-
-  handleWindowBlur (e) {
-    this.setState({
-      search: ''
-    })
-  }
-
-  handleKeyDown (e) {
-    this.refs.search.focus()
-    if (e.keyCode === 9) {
-      if (e.shiftKey) {
-        this.refs.detail.selectPriorSnippet()
-      } else {
-        this.refs.detail.selectNextSnippet()
-      }
-      e.preventDefault()
-    }
-    if (e.keyCode === 38) {
-      this.selectPrevious()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 40) {
-      this.selectNext()
-      e.preventDefault()
-    }
-
-    if (e.keyCode === 13) {
-      this.refs.detail.saveToClipboard()
-      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('COPY_FINDER')
-      hideFinder()
-      e.preventDefault()
-    }
-    if (e.keyCode === 27) {
-      hideFinder()
-      e.preventDefault()
-    }
-    if (e.keyCode === 91 || e.metaKey) {
-      return
-    }
-  }
-
-  handleSearchChange (e) {
-    this.setState({
-      search: e.target.value,
-      index: 0
-    })
-  }
-
-  selectArticle (article) {
-    this.setState({currentArticle: article})
-  }
-
-  selectPrevious () {
-    if (this.state.index > 0) {
-      this.setState({
-        index: this.state.index - 1
-      })
-    }
-  }
-
-  selectNext () {
-    if (this.state.index < this.noteCount - 1) {
-      this.setState({
-        index: this.state.index + 1
-      })
-    }
-  }
-
-  handleOnlySnippetCheckboxChange (e) {
-    const { filter } = this.state
-    filter.includeSnippet = e.target.checked
-    this.setState({
-      filter: filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleOnlyMarkdownCheckboxChange (e) {
-    const { filter } = this.state
-    filter.includeMarkdown = e.target.checked
-    this.refs.list.resetScroll()
-    this.setState({
-      filter: filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleAllNotesButtonClick (e) {
-    const { filter } = this.state
-    filter.type = 'ALL'
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleStarredButtonClick (e) {
-    const { filter } = this.state
-    filter.type = 'STARRED'
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleStorageButtonClick (e, storage) {
-    const { filter } = this.state
-    filter.type = 'STORAGE'
-    filter.storage = storage
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleFolderButtonClick (e, storage, folder) {
-    const { filter } = this.state
-    filter.type = 'FOLDER'
-    filter.storage = storage
-    filter.folder = folder
-    this.refs.list.resetScroll()
-    this.setState({
-      filter,
-      index: 0
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  handleNoteClick (e, index) {
-    this.setState({
-      index
-    }, () => {
-      this.refs.search.focus()
-    })
-  }
-
-  render () {
-    const { data, config } = this.props
-    const { filter, search } = this.state
-    const storageList = []
-    for (const key in data.storageMap) {
-      const storage = data.storageMap[key]
-      const item = (
-        <StorageSection
-          filter={filter}
-          storage={storage}
-          key={storage.key}
-          handleStorageButtonClick={(e, storage) => this.handleStorageButtonClick(e, storage)}
-          handleFolderButtonClick={(e, storage, folder) => this.handleFolderButtonClick(e, storage, folder)}
-        />
-      )
-      storageList.push(item)
-    }
-    let notes = []
-    let noteIds
-
-    switch (filter.type) {
-      case 'STORAGE':
-        noteIds = data.storageNoteMap[filter.storage]
-        break
-      case 'FOLDER':
-        noteIds = data.folderNoteMap[filter.storage + '-' + filter.folder]
-        break
-      case 'STARRED':
-        noteIds = data.starredSet
-    }
-    if (noteIds != null) {
-      noteIds.forEach((id) => {
-        notes.push(data.noteMap[id])
-      })
-    } else {
-      for (const key in data.noteMap) {
-        notes.push(data.noteMap[key])
-      }
-    }
-
-    if (!filter.includeSnippet && filter.includeMarkdown) {
-      notes = notes.filter((note) => note.type === 'MARKDOWN_NOTE')
-    } else if (filter.includeSnippet && !filter.includeMarkdown) {
-      notes = notes.filter((note) => note.type === 'SNIPPET_NOTE')
-    }
-
-    if (search.trim().length > 0) {
-      const needle = new RegExp(_.escapeRegExp(search.trim()), 'i')
-      notes = notes.filter((note) => note.title.match(needle))
-    }
-    notes = notes
-      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
-
-    const activeNote = notes[this.state.index]
-    this.noteCount = notes.length
-
-    return (
-      <div className='Finder'
-        styleName='root'
-        ref='-1'
-        onKeyDown={(e) => this.handleKeyDown(e)}
-      >
-        <div styleName='search'>
-          <input
-            styleName='search-input'
-            ref='search'
-            value={search}
-            placeholder='Search...'
-            onChange={(e) => this.handleSearchChange(e)}
-          />
-        </div>
-        <div styleName='result'>
-          <div styleName='result-nav'>
-            <div styleName='result-nav-filter'>
-              <div styleName='result-nav-filter-option'>
-                <label>
-                  <input type='checkbox'
-                    checked={filter.includeSnippet}
-                    onChange={(e) => this.handleOnlySnippetCheckboxChange(e)}
-                  /> Only Snippets</label>
-              </div>
-              <div styleName='result-nav-filter-option'>
-                <label>
-                  <input type='checkbox'
-                    checked={filter.includeMarkdown}
-                    onChange={(e) => this.handleOnlyMarkdownCheckboxChange(e)}
-                  /> Only Markdown</label>
-              </div>
-            </div>
-            <SideNavFilter
-              isHomeActive={filter.type === 'ALL'}
-              handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
-              isStarredActive={filter.type === 'STARRED'}
-              handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
-            />
-            <div styleName='result-nav-storageList'>
-              {storageList}
-            </div>
-          </div>
-          <NoteList styleName='result-list'
-            storageMap={data.storageMap}
-            notes={notes}
-            ref='list'
-            search={search}
-            index={this.state.index}
-            handleNoteClick={(e, _index) => this.handleNoteClick(e, _index)}
-          />
-          <div styleName='result-detail'>
-            <NoteDetail
-              note={activeNote}
-              config={config}
-              ref='detail'
-            />
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-FinderMain.propTypes = {
-  dispatch: PropTypes.func
-}
-
-var Finder = connect((x) => x)(CSSModules(FinderMain, styles))
-
-function refreshData () {
-  // let data = dataStore.getData(true)
-}
-
-ReactDOM.render((
-  <Provider store={store}>
-    <Finder />
-  </Provider>
-), document.getElementById('content'), function () {
-  refreshData()
-})

browser/finder/ipcClient.js

@@ -1,126 +0,0 @@
-const nodeIpc = require('node-ipc')
-const { remote, ipcRenderer } = require('electron')
-const { app, Menu } = remote
-const path = require('path')
-const store = require('./store')
-const consts = require('browser/lib/consts')
-
-nodeIpc.config.id = 'finder'
-nodeIpc.config.retry = 1500
-nodeIpc.config.silent = true
-
-function killFinder () {
-  const finderWindow = remote.getCurrentWindow()
-  finderWindow.removeAllListeners()
-  if (global.process.platform === 'darwin') {
-    // Only OSX has another app process.
-    nodeIpc.of.node.emit('quit-from-finder')
-  } else {
-    finderWindow.close()
-  }
-}
-
-function toggleFinder () {
-  const finderWindow = remote.getCurrentWindow()
-  if (global.process.platform === 'darwin') {
-    if (finderWindow.isVisible()) {
-      finderWindow.hide()
-      Menu.sendActionToFirstResponder('hide:')
-    } else {
-      nodeIpc.of.node.emit('request-data-from-finder')
-      finderWindow.show()
-    }
-  } else {
-    if (finderWindow.isVisible()) {
-      finderWindow.blur()
-      finderWindow.hide()
-    } else {
-      nodeIpc.of.node.emit('request-data-from-finder')
-      finderWindow.show()
-      finderWindow.focus()
-    }
-  }
-}
-
-nodeIpc.connectTo(
-  'node',
-  path.join(app.getPath('userData'), 'boostnote.service'),
-  function () {
-    nodeIpc.of.node.on('error', function (err) {
-      console.log(err)
-    })
-    nodeIpc.of.node.on('connect', function () {
-      console.log('Conncted successfully')
-    })
-    nodeIpc.of.node.on('disconnect', function () {
-      console.log('disconnected')
-    })
-
-    nodeIpc.of.node.on('open-finder', function () {
-      toggleFinder()
-    })
-
-    ipcRenderer.on('open-finder-from-tray', function () {
-      toggleFinder()
-    })
-    ipcRenderer.on('open-main-from-tray', function () {
-      nodeIpc.of.node.emit('open-main-from-finder')
-    })
-
-    ipcRenderer.on('quit-from-tray', function () {
-      nodeIpc.of.node.emit('quit-from-finder')
-      killFinder()
-    })
-
-    nodeIpc.of.node.on('throttle-data', function (payload) {
-      console.log('Received data from Main renderer')
-      store.default.dispatch({
-        type: 'THROTTLE_DATA',
-        data: payload
-      })
-    })
-
-    nodeIpc.of.node.on('config-renew', function (payload) {
-      const { config } = payload
-      if (config.ui.theme === 'dark') {
-        document.body.setAttribute('data-theme', 'dark')
-      } else if (config.ui.theme === 'white') {
-        document.body.setAttribute('data-theme', 'white')
-      } else if (config.ui.theme === 'solarized-dark') {
-        document.body.setAttribute('data-theme', 'solarized-dark')
-      } else {
-        document.body.setAttribute('data-theme', 'default')
-      }
-
-      let editorTheme = document.getElementById('editorTheme')
-      if (editorTheme == null) {
-        editorTheme = document.createElement('link')
-        editorTheme.setAttribute('id', 'editorTheme')
-        editorTheme.setAttribute('rel', 'stylesheet')
-        document.head.appendChild(editorTheme)
-      }
-
-      config.editor.theme = consts.THEMES.some((theme) => theme === config.editor.theme)
-        ? config.editor.theme
-        : 'default'
-
-      if (config.editor.theme !== 'default') {
-        editorTheme.setAttribute('href', '../node_modules/codemirror/theme/' + config.editor.theme + '.css')
-      }
-
-      store.default.dispatch({
-        type: 'SET_CONFIG',
-        config: config
-      })
-    })
-
-    nodeIpc.of.node.on('quit-finder-app', function () {
-      nodeIpc.of.node.emit('quit-finder-app-confirm')
-      killFinder()
-    })
-  }
-)
-
-const ipc = {}
-
-module.exports = ipc

browser/finder/store.js

@@ -1,51 +0,0 @@
-import { combineReducers, createStore } from 'redux'
-import { routerReducer } from 'react-router-redux'
-import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
-
-const defaultData = {
-  storageMap: {},
-  noteMap: {},
-  starredSet: [],
-  storageNoteMap: {},
-  folderNoteMap: {},
-  tagNoteMap: {}
-}
-
-function data (state = defaultData, action) {
-  switch (action.type) {
-    case 'THROTTLE_DATA':
-      console.log(action)
-      state = action.data
-  }
-  return state
-}
-
-function config (state = DEFAULT_CONFIG, action) {
-  switch (action.type) {
-    case 'INIT_CONFIG':
-    case 'SET_CONFIG':
-      return Object.assign({}, state, action.config)
-    case 'SET_IS_SIDENAV_FOLDED':
-      state.isSideNavFolded = action.isFolded
-      return Object.assign({}, state)
-    case 'SET_ZOOM':
-      state.zoom = action.zoom
-      return Object.assign({}, state)
-    case 'SET_LIST_WIDTH':
-      state.listWidth = action.listWidth
-      return Object.assign({}, state)
-    case 'SET_UI':
-      return Object.assign({}, state, action.config)
-  }
-  return state
-}
-
-const reducer = combineReducers({
-  data,
-  config,
-  routing: routerReducer
-})
-
-const store = createStore(reducer)
-
-export default store

browser/lib/context.js

@@ -2,7 +2,7 @@ const { remote } = require('electron')
 const { Menu, MenuItem } = remote
 
 function popup (templates) {
-  let menu = new Menu()
+  const menu = new Menu()
   templates.forEach((item) => {
     menu.append(new MenuItem(item))
   })

browser/lib/customMeta.js

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

browser/lib/markdown.js

@@ -3,15 +3,17 @@ import emoji from 'markdown-it-emoji'
 import math from '@rokt33r/markdown-it-math'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import {lastFindInArray} from './utils'
 
 // FIXME We should not depend on global variable.
 const katex = window.katex
 const config = ConfigManager.get()
 
-function createGutter (str) {
-  const lc = (str.match(/\n/g) || []).length
+function createGutter (str, firstLineNumber) {
+  if (Number.isNaN(firstLineNumber)) firstLineNumber = 1
+  const lastLineNumber = (str.match(/\n/g) || []).length + firstLineNumber - 1
   const lines = []
-  for (let i = 1; i <= lc; i++) {
+  for (let i = firstLineNumber; i <= lastLineNumber; i++) {
     lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
   }
   return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
@@ -24,17 +26,24 @@ var md = markdownit({
   xhtmlOut: true,
   breaks: true,
   highlight: function (str, lang) {
-    if (lang === 'flowchart') {
+    const delimiter = ':'
+    const langInfo = lang.split(delimiter)
+    const langType = langInfo[0]
+    const fileName = langInfo[1] || ''
+    const firstLineNumber = parseInt(langInfo[2], 10)
+
+    if (langType === 'flowchart') {
       return `<pre class="flowchart">${str}</pre>`
     }
-    if (lang === 'sequence') {
+    if (langType === 'sequence') {
       return `<pre class="sequence">${str}</pre>`
     }
     return '<pre class="code">' +
-    createGutter(str) +
-    '<code class="' + lang + '">' +
-    str +
-    '</code></pre>'
+      '<span class="filename">' + fileName + '</span>' +
+      createGutter(str, firstLineNumber) +
+      '<code class="' + langType + '">' +
+      str +
+      '</code></pre>'
   }
 })
 md.use(emoji, {
@@ -57,7 +66,7 @@ md.use(math, {
   blockRenderer: function (str) {
     let output = ''
     try {
-      output = katex.renderToString(str.trim(), {displayMode: true})
+      output = katex.renderToString(str.trim(), { displayMode: true })
     } catch (err) {
       output = `<div class="katex-error">${err.message}</div>`
     }
@@ -76,7 +85,17 @@ md.use(require('markdown-it-named-headers'), {
   }
 })
 md.use(require('markdown-it-kbd'))
-md.use(require('markdown-it-plantuml'))
+
+const deflate = require('markdown-it-plantuml/lib/deflate')
+md.use(require('markdown-it-plantuml'), '', {
+  generateSource: function (umlCode) {
+    const s = unescape(encodeURIComponent(umlCode))
+    const zippedCode = deflate.encode64(
+      deflate.zip_deflate(`@startuml\n${s}\n@enduml`, 9)
+    )
+    return `http://www.plantuml.com/plantuml/svg/${zippedCode}`
+  }
+})
 
 // Override task item
 md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
@@ -110,18 +129,25 @@ md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
   state.line = nextLine
 
   token = state.push('paragraph_open', 'p', 1)
-  token.map = [ startLine, state.line ]
+  token.map = [startLine, state.line]
 
   if (state.parentType === 'list') {
     const match = content.match(/^\[( |x)\] ?(.+)/i)
     if (match) {
+      const liToken = lastFindInArray(state.tokens, token => token.type === 'list_item_open')
+      if (liToken) {
+        if (!liToken.attrs) {
+          liToken.attrs = []
+        }
+        liToken.attrs.push(['class', 'taskListItem'])
+      }
       content = `<label class='taskListItem${match[1] !== ' ' ? ' checked' : ''}' for='checkbox-${startLine + 1}'><input type='checkbox'${match[1] !== ' ' ? ' checked' : ''} id='checkbox-${startLine + 1}'/> ${content.substring(4, content.length)}</label>`
     }
   }
 
   token = state.push('inline', '', 0)
   token.content = content
-  token.map = [ startLine, state.line ]
+  token.map = [startLine, state.line]
   token.children = []
 
   token = state.push('paragraph_close', 'p', -1)

browser/lib/utils.js

@@ -0,0 +1,11 @@
+export function lastFindInArray (array, callback) {
+  for (let i = array.length - 1; i >= 0; --i) {
+    if (callback(array[i], i, array)) {
+      return array[i]
+    }
+  }
+}
+
+export default {
+  lastFindInArray
+}

browser/main/Detail/Detail.styl

@@ -20,11 +20,13 @@
 body[data-theme="dark"]
   .root
     background-color $ui-dark-backgroundColor
+    border-left 1px solid $ui-dark-borderColor
   .empty-message
     color $ui-dark-inactive-text-color
     
 body[data-theme="solarized-dark"]
   .root
     background-color $ui-solarized-dark-noteDetail-backgroundColor
+    border-left 1px solid $ui-solarized-dark-borderColor
   .empty-message
     color $ui-solarized-dark-text-color

browser/main/Detail/FolderSelect.styl

@@ -3,20 +3,14 @@
   border solid 1px transparent
   vertical-align middle
   border-radius 2px
+  height 30px
   transition 0.15s
   user-select none
   margin-right 10px
-  &:hover
-    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color $ui-noteDetail-backgroundColor = #fff
   border-color $ui-input--focus-borderColor
-  width 154px
-  height 30px
-  &:hover
-    border-color $ui-input--focus-borderColor = #fff
 
 .idle
   position relative

browser/main/Detail/FullscreenButton.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FullscreenButton.styl'
+
+const FullscreenButton = ({
+ onClick
+}) => (
+  <button styleName='control-fullScreenButton' title='Fullscreen' onMouseDown={(e) => onClick(e)}>
+    <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+    <span styleName='tooltip'>Fullscreen</span>
+  </button>
+)
+
+FullscreenButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(FullscreenButton, styles)

browser/main/Detail/FullscreenButton.styl

@@ -0,0 +1,22 @@
+.control-fullScreenButton
+  top 80px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/InfoButton.js

@@ -10,6 +10,7 @@ const InfoButton = ({
     onClick={(e) => onClick(e)}
   >
     <img className='infoButton' src='../resources/icon/icon-info.svg' />
+    <span styleName='tooltip'>Info</span>
   </button>
 )
 

browser/main/Detail/InfoButton.styl

@@ -1,6 +1,21 @@
 .control-infoButton
   top 10px
   topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 .infoButton
   padding 0px

browser/main/Detail/InfoPanel.js

@@ -2,77 +2,97 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
+import copy from 'copy-to-clipboard'
 
-const InfoPanel = ({
-  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type, print
-}) => (
-  <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
-    <div>
-      <p styleName='modification-date'>{updatedAt}</p>
-      <p styleName='modification-date-desc'>MODIFICATION DATE</p>
-    </div>
+class InfoPanel extends React.Component {
+  copyNoteLink () {
+    const {noteLink} = this.props
+    this.refs.noteLink.select()
+    copy(noteLink)
+  }
 
-    <hr />
-
-    {type === 'SNIPPET_NOTE'
-      ? ''
-      : <div styleName='count-wrap'>
-        <div styleName='count-number'>
-          <p styleName='infoPanel-defaul-count'>{wordCount}</p>
-          <p styleName='infoPanel-sub-count'>Words</p>
+  render () {
+    const {
+      storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml, wordCount, letterCount, type, print
+    } = this.props
+    return (
+      <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
+        <div>
+          <p styleName='modification-date'>{updatedAt}</p>
+          <p styleName='modification-date-desc'>MODIFICATION DATE</p>
         </div>
-        <div styleName='count-number'>
-          <p styleName='infoPanel-defaul-count'>{letterCount}</p>
-          <p styleName='infoPanel-sub-count'>Letters</p>
+
+        <hr />
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <div styleName='count-wrap'>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{wordCount}</p>
+              <p styleName='infoPanel-sub-count'>Words</p>
+            </div>
+            <div styleName='count-number'>
+              <p styleName='infoPanel-defaul-count'>{letterCount}</p>
+              <p styleName='infoPanel-sub-count'>Letters</p>
+            </div>
+          </div>
+        }
+
+        {type === 'SNIPPET_NOTE'
+          ? ''
+          : <hr />
+        }
+
+        <div>
+          <p styleName='infoPanel-default'>{storageName}</p>
+          <p styleName='infoPanel-sub'>STORAGE</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{folderName}</p>
+          <p styleName='infoPanel-sub'>FOLDER</p>
+        </div>
+
+        <div>
+          <p styleName='infoPanel-default'>{createdAt}</p>
+          <p styleName='infoPanel-sub'>CREATION DATE</p>
+        </div>
+
+        <div>
+          <input styleName='infoPanel-noteLink' ref='noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
+          <button onClick={() => this.copyNoteLink()} styleName='infoPanel-copyButton'>
+            <i className='fa fa-clipboard' />
+          </button>
+          <p styleName='infoPanel-sub'>NOTE LINK</p>
+        </div>
+
+        <hr />
+
+        <div id='export-wrap'>
+          <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
+            <i className='fa fa-file-code-o' />
+            <p>.md</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
+            <i className='fa fa-file-text-o' />
+            <p>.txt</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
+            <i className='fa fa-html5' />
+            <p>.html</p>
+          </button>
+
+          <button styleName='export--enable' onClick={(e) => print(e)}>
+            <i className='fa fa-print' />
+            <p>Print</p>
+          </button>
         </div>
       </div>
-    }
-
-    {type === 'SNIPPET_NOTE'
-      ? ''
-      : <hr />
-    }
-
-    <div>
-      <p styleName='infoPanel-default'>{storageName}</p>
-      <p styleName='infoPanel-sub'>STORAGE</p>
-    </div>
-
-    <div>
-      <p styleName='infoPanel-default'>{folderName}</p>
-      <p styleName='infoPanel-sub'>FOLDER</p>
-    </div>
-
-    <div>
-      <p styleName='infoPanel-default'>{createdAt}</p>
-      <p styleName='infoPanel-sub'>CREATION DATE</p>
-    </div>
-
-    <div>
-      <input styleName='infoPanel-noteLink' value={noteLink} onClick={(e) => { e.target.select() }} />
-      <p styleName='infoPanel-sub'>NOTE LINK</p>
-    </div>
-
-    <hr />
-
-    <div id='export-wrap'>
-      <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
-        <i className='fa fa-file-code-o fa-fw' />
-        <p>.md</p>
-      </button>
-
-      <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
-        <i className='fa fa-file-text-o fa-fw' />
-        <p>.txt</p>
-      </button>
-
-      <button styleName='export--enable' onClick={(e) => print(e)}>
-        <i className='fa fa-print fa-fw' />
-        <p>Print</p>
-      </button>
-    </div>
-  </div>
-)
+    )
+  }
+}
 
 InfoPanel.propTypes = {
   storageName: PropTypes.string.isRequired,
@@ -82,6 +102,7 @@ InfoPanel.propTypes = {
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
   exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired,
   wordCount: PropTypes.number,
   letterCount: PropTypes.number,
   type: PropTypes.string.isRequired,

browser/main/Detail/InfoPanel.styl

@@ -11,11 +11,10 @@
 .control-infoButton-panel
   z-index 200
   margin-top 0px
-  right 0
+  right 25px
   position absolute
   padding 20px 25px 0 25px
   width 300px
-  height 350px
   overflow auto
   background-color $ui-noteList-backgroundColor
   box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
@@ -41,12 +40,12 @@
   box-shadow 2px 12px 15px 2px rgba(0, 0, 0, 0.1), 2px 1px 50px 2px rgba(0, 0, 0, 0.1)
   border-radius 2px
 
-.count-wrap 
+.count-wrap
 	display flex
 	position relative
 	width 100%
 
-.count-number 
+.count-number
 	position relative
 	display block
 	width 50%
@@ -70,26 +69,41 @@
   color $ui-text-color
 
 .infoPanel-sub
-  font-size 14px
+  font-size 12px
+  font-weight 600
   color $ui-inactive-text-color
   padding-bottom 8px
 
 .infoPanel-noteLink
   padding-right 5px
-  width 200px
+  width 210px
   height 25px
-  margin-bottom 6px
+  margin 6px 0
+
+.infoPanel-copyButton
+  outline none
+  font-size 16px
+  color #A0A0A0
+  background-color transparent
+  border none
+  margin 0 5px
+  border-radius 5px
+  cursor pointer
+  &:hover
+    transition 0.2s
+    background-color alpha($ui-button--hover-backgroundColor, 30%)
+    color $ui-inactive-text-color
 
 .infoPanel-trash
-  color #EA4447		
-  font-weight 600		
+  color #EA4447
+  font-weight 600
   font-size 14px
   width 70px
   background-color rgba(226,33,113,0.1)
-  border none		
+  border none
   outline none
-  border-radius 2px		
-  margin-right 5px		
+  border-radius 2px
+  margin-right 5px
   padding 2px 5px
 
 [id=export-wrap]
@@ -160,4 +174,44 @@ body[data-theme="dark"]
     p
       color $ui-dark-inactive-text-color
       &:hover
-        color $ui-dark-text-color
+        color $ui-dark-text-color
+
+body[data-theme="solarized-dark"]
+  .control-infoButton-panel
+    background-color $ui-solarized-dark-noteList-backgroundColor
+
+  .control-infoButton-panel-trash
+    background-color $ui-solarized-ark-noteList-backgroundColor
+
+  .modification-date
+    color $ui-solarized-ark-text-color
+
+  .modification-date-desc
+    color $ui-inactive-text-color
+
+  .infoPanel-defaul-count
+    color $ui-solarized-dark-text-color
+
+  .infoPanel-sub-count
+    color $ui-inactive-text-color
+
+  .infoPanel-default
+    color $ui-solarized-ark-text-color
+
+  .infoPanel-sub
+    color $ui-inactive-text-color
+
+  .infoPanel-noteLink
+    background-color alpha($ui-solarized-dark-borderColor, 20%)
+    color $ui-solarized-dark-text-color
+
+  [id=export-wrap]
+    button
+      color $ui-dark-inactive-text-color
+      &:hover
+        background-color alpha($ui-solarized-dark-borderColor, 20%)
+        color $ui-solarized-ark-text-color
+    p
+      color $ui-dark-inactive-text-color
+      &:hover
+        color $ui-solarized-ark-text-color

browser/main/Detail/InfoPanelTrashed.js

@@ -4,7 +4,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 
 const InfoPanelTrashed = ({
-  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt
+  storageName, folderName, updatedAt, createdAt, exportAsMd, exportAsTxt, exportAsHtml
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel-trash' style={{display: 'none'}}>
     <div>
@@ -31,17 +31,22 @@ const InfoPanelTrashed = ({
 
     <div id='export-wrap'>
       <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
-        <i className='fa fa-file-code-o fa-fw' />
+        <i className='fa fa-file-code-o' />
         <p>.md</p>
       </button>
 
       <button styleName='export--enable' onClick={(e) => exportAsTxt(e)}>
-        <i className='fa fa-file-text-o fa-fw' />
+        <i className='fa fa-file-text-o' />
         <p>.txt</p>
       </button>
 
+      <button styleName='export--enable' onClick={(e) => exportAsHtml(e)}>
+        <i className='fa fa-html5' />
+        <p>.html</p>
+      </button>
+
       <button styleName='export--unable'>
-        <i className='fa fa-file-pdf-o fa-fw' />
+        <i className='fa fa-file-pdf-o' />
         <p>.pdf</p>
       </button>
     </div>
@@ -54,7 +59,8 @@ InfoPanelTrashed.propTypes = {
   updatedAt: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
-  exportAsTxt: PropTypes.func.isRequired
+  exportAsTxt: PropTypes.func.isRequired,
+  exportAsHtml: PropTypes.func.isRequired
 }
 
 export default CSSModules(InfoPanelTrashed, styles)

browser/main/Detail/MarkdownNoteDetail.js

@@ -18,18 +18,17 @@ import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import TrashButton from './TrashButton'
+import FullscreenButton from './FullscreenButton'
+import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
+import ToggleModeButton from './ToggleModeButton'
 import InfoPanel from './InfoPanel'
 import InfoPanelTrashed from './InfoPanelTrashed'
 import { formatDate } from 'browser/lib/date-formatter'
 import { getTodoPercentageOfCompleted } from 'browser/lib/getTodoStatus'
 import striptags from 'striptags'
 
-const electron = require('electron')
-const { remote } = electron
-const { dialog } = remote
-
 class MarkdownNoteDetail extends React.Component {
   constructor (props) {
     super(props)
@@ -70,24 +69,26 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   componentWillUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
     if (this.saveQueue != null) this.saveNow()
   }
 
-  componentDidUnmount () {
-    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  handleUpdateTag () {
+    const { note } = this.state
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    this.updateNote(note)
   }
 
-  handleChange (e) {
+  handleUpdateContent () {
     const { note } = this.state
-
     note.content = this.refs.content.value
-    if (this.refs.tags) note.tags = this.refs.tags.value
     note.title = markdown.strip(striptags(findNoteTitle(note.content)))
-    note.updatedAt = new Date()
+    this.updateNote(note)
+  }
 
-    this.setState({
-      note
-    }, () => {
+  updateNote (note) {
+    note.updatedAt = new Date()
+    this.setState({note}, () => {
       this.save()
     })
   }
@@ -173,41 +174,45 @@ class MarkdownNoteDetail extends React.Component {
     ee.emit('export:save-text')
   }
 
+  exportAsHtml () {
+    ee.emit('export:save-html')
+  }
+
   handleTrashButtonClick (e) {
     const { note } = this.state
     const { isTrashed } = note
+    const { confirmDeletion } = this.props
 
     if (isTrashed) {
-      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
-      })
-      if (dialogueButtonIndex === 1) return
-      const { note, dispatch } = this.props
-      dataApi
-        .deleteNote(note.storage, note.key)
-        .then((data) => {
-          const dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-          ee.once('list:moved', dispatchHandler)
-        })
+      if (confirmDeletion(true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
     } else {
-      note.isTrashed = true
+      if (confirmDeletion()) {
+        note.isTrashed = true
 
-      this.setState({
-        note
-      }, () => {
-        this.save()
-      })
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
     }
-    ee.emit('list:next')
   }
 
   handleUndoButtonClick (e) {
@@ -283,7 +288,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
-        onChange={(e) => this.handleChange(e)}
+        onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
     } else {
@@ -292,7 +297,7 @@ class MarkdownNoteDetail extends React.Component {
         config={config}
         value={note.content}
         storageKey={note.storage}
-        onChange={(e) => this.handleChange(e)}
+        onChange={this.handleUpdateContent.bind(this)}
         ignorePreviewPointerEvents={ignorePreviewPointerEvents}
       />
     }
@@ -317,10 +322,7 @@ class MarkdownNoteDetail extends React.Component {
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <i styleName='undo-button'
-          className='fa fa-undo fa-fw'
-          onClick={(e) => this.handleUndoButtonClick(e)}
-        />
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
       </div>
       <div styleName='info-right'>
         <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -332,6 +334,7 @@ class MarkdownNoteDetail extends React.Component {
           folderName={currentOption.folder.name}
           updatedAt={formatDate(note.updatedAt)}
           createdAt={formatDate(note.createdAt)}
+          exportAsHtml={this.exportAsHtml}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
         />
@@ -352,27 +355,12 @@ class MarkdownNoteDetail extends React.Component {
         <TagSelect
           ref='tags'
           value={this.state.note.tags}
-          onChange={(e) => this.handleChange(e)}
-        />
-
-        <div styleName='mode-tab'>
-          <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('SPLIT')}>
-            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-split-on.svg' : '../resources/icon/icon-mode-split-on-active.svg'} />
-          </div>
-          <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => this.handleSwitchMode('EDITOR_PREVIEW')}>
-            <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : '../resources/icon/icon-mode-markdown-off.svg'} />
-          </div>
-        </div>
-
-        <TodoListPercentage
-          percentageOfTodo={getTodoPercentageOfCompleted(note.content)}
+          onChange={this.handleUpdateTag.bind(this)}
         />
+        <TodoListPercentage percentageOfTodo={getTodoPercentageOfCompleted(note.content)} />
       </div>
       <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
+        <ToggleModeButton onClick={(e) => this.handleSwitchMode(e)} editorType={editorType} />
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
@@ -386,6 +374,7 @@ class MarkdownNoteDetail extends React.Component {
               onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
             >
               <img styleName='iconInfo' src={imgSrc} />
+              {this.state.isLocked ? <span styleName='tooltip'>Unlock</span> : <span styleName='tooltip'>Lock</span>}
             </button>
 
           return (
@@ -393,14 +382,14 @@ class MarkdownNoteDetail extends React.Component {
           )
         })()}
 
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
-        </button>
+        <FullscreenButton onClick={(e) => this.handleFullScreenButton(e)} />
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
 
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
@@ -409,6 +398,7 @@ class MarkdownNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
+          exportAsHtml={this.exportAsHtml}
           wordCount={note.content.split(' ').length}
           letterCount={note.content.replace(/\r?\n/g, '').length}
           type={note.type}
@@ -447,7 +437,8 @@ MarkdownNoteDetail.propTypes = {
   style: PropTypes.shape({
     left: PropTypes.number
   }),
-  ignorePreviewPointerEvents: PropTypes.bool
+  ignorePreviewPointerEvents: PropTypes.bool,
+  confirmDeletion: PropTypes.bool.isRequired
 }
 
 export default CSSModules(MarkdownNoteDetail, styles)

browser/main/Detail/MarkdownNoteDetail.styl

@@ -7,52 +7,45 @@
   background-color $ui-noteDetail-backgroundColor
   box-shadow none
   padding 20px 40px
+  overflow hidden
 
 .lock-button
   padding-bottom 3px
 
 .control-lockButton
-  top 150px
   topBarButtonRight()
+  position absolute
+  right 225px
+  &:hover .tooltip
+    opacity 1
+
+  .tooltip
+    tooltip()
+    position absolute
+    pointer-events none
+    top 35px
+    right -10px
+    width 50px
+    z-index 200
+    padding 5px
+    line-height normal
+    border-radius 2px
+    opacity 0
+    transition 0.1s
 
 .trashed-infopanel
-  top 40px
   position relative
 
-.control-fullScreenButton
-  top 80px
-  topBarButtonRight()
-
 .body
   absolute left right
   left 0
   right 0
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
-  margin 0 45px
+  margin 0 30px
 .body-noteEditor
   absolute top bottom left right
 
-.mode-tab
-  border 1px solid #eee
-  height 34px
-  display flex
-  align-items center
-  div
-    width 40px
-    height 100%
-    background-color #f9f9f9
-    display flex
-    align-items center
-    justify-content center
-    cursor pointer
-    &:first-child
-      border-right 1px solid #eee
-  .active
-    background-color #fff
-    box-shadow 2px 0px 7px #eee
-    z-index 1
-  
 body[data-theme="white"]
   .root
     box-shadow $note-detail-box-shadow
@@ -73,27 +66,8 @@ body[data-theme="dark"]
   .control-fullScreenButton
     topBarButtonDark()
 
-  .mode-tab
-    border 1px solid #444444
-    div
-      background-color $ui-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #444444
-    .active
-      background-color #3A404C
-      box-shadow 2px 0px 7px #444444
 
 body[data-theme="solarized-dark"]
   .root
     border-left 1px solid $ui-solarized-dark-borderColor
     background-color $ui-solarized-dark-noteDetail-backgroundColor
-
-  .mode-tab
-    border 1px solid #586E75
-    div
-      background-color $ui-solarized-dark-noteDetail-backgroundColor
-      &:first-child
-        border-right 1px solid #586E75
-    .active
-      background-color #002B36
-      box-shadow 2px 0px 7px #222222

browser/main/Detail/NoteDetailInfo.styl

@@ -1,6 +1,6 @@
 @import('DetailVars')
 
-$info-height = 50px
+$info-height = 60px
 $info-margin-under-border = 30px
 
 .info
@@ -8,11 +8,11 @@ $info-margin-under-border = 30px
   left 0
   right 0
   height $info-height
-  border-bottom 1px solid #eee
   background-color $ui-noteDetail-backgroundColor
   width 100%
   display flex
   align-items center
+  padding 0 20px
 
 .info-left
   padding 0 10px
@@ -20,7 +20,6 @@ $info-margin-under-border = 30px
   display flex
   align-items center
 
-
 .info-left-top-folderSelect
   display flex
   align-items center
@@ -45,12 +44,9 @@ $info-margin-under-border = 30px
     color $ui-button--color
 
 .info-right
-  position absolute
-  right 40px
-  top 60px
-  bottom 1px
-  padding-left 30px
   z-index 101
+  display inline-flex
+  margin-top 3px
 
 .undo-button
   width 34px

browser/main/Detail/PermanentDeleteButton.js

@@ -10,6 +10,7 @@ const PermanentDeleteButton = ({
     onClick={(e) => onClick(e)}
   >
     <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Permanent Delete</span>
   </button>
 )
 

browser/main/Detail/RestoreButton.js

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './RestoreButton.styl'
+
+const RestoreButton = ({
+  onClick
+}) => (
+  <button styleName='control-restoreButton'
+    onClick={onClick}
+  >
+    <i className='fa fa-undo fa-fw' styleName='iconRestore' />
+    <span styleName='tooltip'>Restore</span>
+  </button>
+)
+
+RestoreButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(RestoreButton, styles)

browser/main/Detail/RestoreButton.styl

@@ -0,0 +1,22 @@
+.control-restoreButton
+  top 115px
+  topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  left 25px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-restoreButton
+    topBarButtonDark()

browser/main/Detail/SnippetNoteDetail.js

@@ -11,6 +11,7 @@ import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
 import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
@@ -19,6 +20,7 @@ import _ from 'lodash'
 import { findNoteTitle } from 'browser/lib/findNoteTitle'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import TrashButton from './TrashButton'
+import RestoreButton from './RestoreButton'
 import PermanentDeleteButton from './PermanentDeleteButton'
 import InfoButton from './InfoButton'
 import InfoPanel from './InfoPanel'
@@ -175,38 +177,38 @@ class SnippetNoteDetail extends React.Component {
   handleTrashButtonClick (e) {
     const { note } = this.state
     const { isTrashed } = note
+    const { confirmDeletion } = this.props
 
     if (isTrashed) {
-      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
-        type: 'warning',
-        message: 'Confirm note deletion',
-        detail: 'This will permanently remove this note.',
-        buttons: ['Confirm', 'Cancel']
-      })
-      if (dialogueButtonIndex === 1) return
-      const { note, dispatch } = this.props
-      dataApi
-        .deleteNote(note.storage, note.key)
-        .then((data) => {
-          const dispatchHandler = () => {
-            dispatch({
-              type: 'DELETE_NOTE',
-              storageKey: data.storageKey,
-              noteKey: data.noteKey
-            })
-          }
-          ee.once('list:moved', dispatchHandler)
-        })
+      if (confirmDeletion(true)) {
+        const {note, dispatch} = this.props
+        dataApi
+          .deleteNote(note.storage, note.key)
+          .then((data) => {
+            const dispatchHandler = () => {
+              dispatch({
+                type: 'DELETE_NOTE',
+                storageKey: data.storageKey,
+                noteKey: data.noteKey
+              })
+            }
+            ee.once('list:next', dispatchHandler)
+          })
+          .then(() => ee.emit('list:next'))
+      }
     } else {
-      note.isTrashed = true
+      if (confirmDeletion()) {
+        note.isTrashed = true
 
-      this.setState({
-        note
-      }, () => {
-        this.save()
-      })
+        this.setState({
+          note
+        }, () => {
+          this.save()
+        })
+
+        ee.emit('list:next')
+      }
     }
-    ee.emit('list:next')
   }
 
   handleUndoButtonClick (e) {
@@ -380,7 +382,7 @@ class SnippetNoteDetail extends React.Component {
 
   handleModeButtonClick (e, index) {
     const menu = new Menu()
-    CodeMirror.modeInfo.forEach((mode) => {
+    CodeMirror.modeInfo.sort(function (a, b) { return a.name.localeCompare(b.name) }).forEach((mode) => {
       menu.append(new MenuItem({
         label: mode.name,
         click: (e) => this.handleModeOptionClick(index, mode.name)(e)
@@ -564,8 +566,10 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            displayLineNumbers={config.editor.displayLineNumbers}
             keyMap={config.editor.keyMap}
             scrollPastEnd={config.editor.scrollPastEnd}
+            fetchUrlTitle={config.editor.fetchUrlTitle}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -586,10 +590,7 @@ class SnippetNoteDetail extends React.Component {
 
     const trashTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <i styleName='undo-button'
-          className='fa fa-undo fa-fw'
-          onClick={(e) => this.handleUndoButtonClick(e)}
-        />
+        <RestoreButton onClick={(e) => this.handleUndoButtonClick(e)} />
       </div>
       <div styleName='info-right'>
         <PermanentDeleteButton onClick={(e) => this.handleTrashButtonClick(e)} />
@@ -603,6 +604,7 @@ class SnippetNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          exportAsHtml={this.showWarning}
         />
       </div>
     </div>
@@ -625,21 +627,23 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
-
         <StarButton
           onClick={(e) => this.handleStarButtonClick(e)}
           isActive={note.isStarred}
         />
 
-        <button styleName='control-fullScreenButton'
+        <button styleName='control-fullScreenButton' title='Fullscreen'
           onMouseDown={(e) => this.handleFullScreenButton(e)}>
-          <img styleName='iconInfo' src='../resources/icon/icon-sidebar.svg' />
+          <img styleName='iconInfo' src='../resources/icon/icon-full.svg' />
+          <span styleName='tooltip'>Fullscreen</span>
         </button>
 
         <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}
@@ -729,7 +733,8 @@ SnippetNoteDetail.propTypes = {
   style: PropTypes.shape({
     left: PropTypes.number
   }),
-  ignorePreviewPointerEvents: PropTypes.bool
+  ignorePreviewPointerEvents: PropTypes.bool,
+  confirmDeletion: PropTypes.bool.isRequired
 }
 
 export default CSSModules(SnippetNoteDetail, styles)

browser/main/Detail/SnippetNoteDetail.styl

@@ -9,8 +9,7 @@
 
 .body
   absolute left right
-  left $snippet-note-detail-left-margin
-  right $snippet-note-detail-right-margin
+  margin 0 30px
   top $info-height + $info-margin-under-border
   bottom $statusBar-height
   background-color $ui-noteDetail-backgroundColor
@@ -70,6 +69,21 @@
   top 80px
   margin-bottom 10px
   topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 70px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 body[data-theme="white"]
   .root

browser/main/Detail/StarButton.js

@@ -46,14 +46,14 @@ class StarButton extends React.Component {
         onMouseDown={(e) => this.handleMouseDown(e)}
         onMouseUp={(e) => this.handleMouseUp(e)}
         onMouseLeave={(e) => this.handleMouseLeave(e)}
-        onClick={this.props.onClick}
-      >
+        onClick={this.props.onClick}>
         <img styleName='icon'
           src={this.state.isActive || this.props.isActive
             ? '../resources/icon/icon-starred.svg'
             : '../resources/icon/icon-star.svg'
           }
         />
+        <span styleName='tooltip'>Star</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -4,6 +4,22 @@
   &:hover
     transition 0.2s
     color alpha($ui-favorite-star-button-color, 0.6)
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 115px
+  width 40px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 .root--active
   @extend .root

browser/main/Detail/TagSelect.js

@@ -64,7 +64,8 @@ class TagSelect extends React.Component {
   submitTag () {
     AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
     let { value } = this.props
-    const newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+    newTag = newTag.charAt(0) === '#' ? newTag.substring(1) : newTag
 
     if (newTag.length <= 0) {
       this.setState({

browser/main/Detail/TagSelect.styl

@@ -6,7 +6,8 @@
   width 100%
   overflow-x scroll
   white-space nowrap
-  margin-right 10px
+  margin-top 31px
+  position absolute
 
 .root::-webkit-scrollbar
   display none

browser/main/Detail/ToggleModeButton.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ToggleModeButton.styl'
+
+const ToggleModeButton = ({
+  onClick, editorType
+}) => (
+  <div styleName='control-toggleModeButton'>
+    <div styleName={editorType === 'SPLIT' ? 'active' : 'non-active'} onClick={() => onClick('SPLIT')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '../resources/icon/icon-mode-markdown-off-active.svg' : ''} />
+    </div>
+    <div styleName={editorType === 'EDITOR_PREVIEW' ? 'active' : 'non-active'} onClick={() => onClick('EDITOR_PREVIEW')}>
+      <img styleName='item-star' src={editorType === 'EDITOR_PREVIEW' ? '' : '../resources/icon/icon-mode-split-on-active.svg'} />
+    </div>
+    <span styleName='tooltip'>Toggle Mode</span>
+  </div>
+)
+
+ToggleModeButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  editorType: PropTypes.string.Required
+}
+
+export default CSSModules(ToggleModeButton, styles)

browser/main/Detail/ToggleModeButton.styl

@@ -0,0 +1,58 @@
+.control-toggleModeButton
+  height 25px
+  border-radius 50px
+  background-color #F4F4F4
+  width 52px
+  display flex
+  align-items center
+  position: relative
+  top 2px
+  .active
+    background-color #1EC38B
+    width 33px
+    height 24px
+    box-shadow 2px 0px 7px #eee
+    z-index 1
+
+  div
+    width 40px
+    height 100%
+    border-radius 50%
+    display flex
+    align-items center
+    justify-content center
+    cursor pointer
+
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 33px
+  left -10px
+  z-index 200
+  width 80px
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .control-fullScreenButton
+    topBarButtonDark()
+
+  .control-toggleModeButton
+      background-color #3A404C
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #444444
+
+body[data-theme="solarized-dark"]
+  .control-toggleModeButton
+      background-color #002B36
+    .active
+      background-color #1EC38B
+      box-shadow 2px 0px 7px #222222

browser/main/Detail/TrashButton.js

@@ -10,6 +10,7 @@ const TrashButton = ({
     onClick={(e) => onClick(e)}
   >
     <img styleName='iconInfo' src='../resources/icon/icon-trash.svg' />
+    <span styleName='tooltip'>Trash</span>
   </button>
 )
 

browser/main/Detail/TrashButton.styl

@@ -1,6 +1,21 @@
 .control-trashButton
   top 115px
   topBarButtonRight()
+  &:hover .tooltip
+    opacity 1
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 50px
+  right 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
 
 .control-trashButton--in-trash
   top 60px

browser/main/Detail/index.js

@@ -32,6 +32,26 @@ class Detail extends React.Component {
     ee.off('detail:delete', this.deleteHandler)
   }
 
+  confirmDeletion (permanent) {
+    if (this.props.config.ui.confirmDeletion || permanent) {
+      const electron = require('electron')
+      const { remote } = electron
+      const { dialog } = remote
+
+      const alertConfig = {
+        type: 'warning',
+        message: 'Confirm note deletion',
+        detail: 'This will permanently remove this note.',
+        buttons: ['Confirm', 'Cancel']
+      }
+
+      const dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), alertConfig)
+      return dialogueButtonIndex === 0
+    }
+
+    return true
+  }
+
   render () {
     const { location, data, config } = this.props
     let note = null
@@ -64,6 +84,7 @@ class Detail extends React.Component {
         <SnippetNoteDetail
           note={note}
           config={config}
+          confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
           ref='root'
           {..._.pick(this.props, [
             'dispatch',
@@ -80,6 +101,7 @@ class Detail extends React.Component {
       <MarkdownNoteDetail
         note={note}
         config={config}
+        confirmDeletion={(permanent) => this.confirmDeletion(permanent)}
         ref='root'
         {..._.pick(this.props, [
           'dispatch',

browser/main/Main.js

@@ -10,10 +10,13 @@ import Detail from './Detail'
 import dataApi from 'browser/main/lib/dataApi'
 import _ from 'lodash'
 import ConfigManager from 'browser/main/lib/ConfigManager'
-import modal from 'browser/main/lib/modal'
-import InitModal from 'browser/main/modals/InitModal'
 import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
 import eventEmitter from 'browser/main/lib/eventEmitter'
+import { hashHistory } from 'react-router'
+import store from 'browser/main/store'
+const path = require('path')
+const electron = require('electron')
+const { remote } = electron
 
 class Main extends React.Component {
 
@@ -48,6 +51,91 @@ class Main extends React.Component {
     }
   }
 
+  init () {
+    dataApi
+      .addStorage({
+        name: 'My Storage',
+        path: path.join(remote.app.getPath('home'), 'Boostnote')
+      })
+      .then((data) => {
+        return data
+      })
+      .then((data) => {
+        if (data.storage.folders[0] != null) {
+          return data
+        } else {
+          return dataApi
+            .createFolder(data.storage.key, {
+              color: '#1278BD',
+              name: 'Default'
+            })
+            .then((_data) => {
+              return {
+                storage: _data.storage,
+                notes: data.notes
+              }
+            })
+        }
+      })
+      .then((data) => {
+        console.log(data)
+        store.dispatch({
+          type: 'ADD_STORAGE',
+          storage: data.storage,
+          notes: data.notes
+        })
+
+        const defaultSnippetNote = dataApi
+          .createNote(data.storage.key, {
+            type: 'SNIPPET_NOTE',
+            folder: data.storage.folders[0].key,
+            title: 'Snippet note example',
+            description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
+            snippets: [
+              {
+                name: 'example.html',
+                mode: 'html',
+                content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
+              },
+              {
+                name: 'example.js',
+                mode: 'javascript',
+                content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
+              }
+            ]
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+          })
+        const 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 here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
+          })
+          .then((note) => {
+            store.dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+          })
+
+        return Promise.resolve(defaultSnippetNote)
+          .then(defaultMarkdownNote)
+          .then(() => data.storage)
+      })
+      .then((storage) => {
+        hashHistory.push('/storages/' + storage.key)
+      })
+      .catch((err) => {
+        throw err
+      })
+  }
+
   componentDidMount () {
     const { dispatch, config } = this.props
 
@@ -71,7 +159,7 @@ class Main extends React.Component {
         })
 
         if (data.storages.length < 1) {
-          modal.open(InitModal)
+          this.init()
         }
       })
 

browser/main/NewNoteButton/index.js

@@ -86,7 +86,7 @@ class NewNoteButton extends React.Component {
             onClick={(e) => this.handleNewNoteButtonClick(e)}>
             <img styleName='iconTag' src='../resources/icon/icon-newnote.svg' />
             <span styleName='control-newNoteButton-tooltip'>
-              Make a Note {OSX ? '⌘' : '^'} + n
+              Make a note {OSX ? '⌘' : 'Ctrl'} + N
             </span>
           </button>
         </div>

browser/main/NoteList/index.js

@@ -11,10 +11,8 @@ import NoteItem from 'browser/components/NoteItem'
 import NoteItemSimple from 'browser/components/NoteItemSimple'
 import searchFromNotes from 'browser/lib/search'
 import fs from 'fs'
+import path from 'path'
 import { hashHistory } from 'react-router'
-import markdown from 'browser/lib/markdownTextHelper'
-import { findNoteTitle } from 'browser/lib/findNoteTitle'
-import store from 'browser/main/store'
 import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
 
 const { remote } = require('electron')
@@ -68,6 +66,10 @@ class NoteList extends React.Component {
     this.deleteNote = this.deleteNote.bind(this)
     this.focusNote = this.focusNote.bind(this)
     this.pinToTop = this.pinToTop.bind(this)
+    this.getNoteStorage = this.getNoteStorage.bind(this)
+    this.getNoteFolder = this.getNoteFolder.bind(this)
+    this.getViewType = this.getViewType.bind(this)
+    this.restoreNote = this.restoreNote.bind(this)
 
     // TODO: not Selected noteKeys but SelectedNote(for reusing)
     this.state = {
@@ -111,14 +113,27 @@ class NoteList extends React.Component {
 
   componentDidUpdate (prevProps) {
     const { location } = this.props
+    const { selectedNoteKeys } = this.state
+    const visibleNoteKeys = this.notes.map(note => `${note.storage}-${note.key}`)
+    const note = this.notes[0]
+    const prevKey = prevProps.location.query.key
+    const noteKey = visibleNoteKeys.includes(prevKey) ? prevKey : note && `${note.storage}-${note.key}`
 
-    if (this.notes.length > 0 && location.query.key == null) {
+    if (note && location.query.key == null) {
       const { router } = this.context
       if (!location.pathname.match(/\/searched/)) this.contextNotes = this.getContextNotes()
+
+      // A visible note is an active note
+      if (!selectedNoteKeys.includes(noteKey)) {
+        if (selectedNoteKeys.length === 1) selectedNoteKeys.pop()
+        selectedNoteKeys.push(noteKey)
+        ee.emit('list:moved')
+      }
+
       router.replace({
         pathname: location.pathname,
         query: {
-          key: this.notes[0].storage + '-' + this.notes[0].key
+          key: noteKey
         }
       })
       return
@@ -171,9 +186,8 @@ class NoteList extends React.Component {
     if (this.notes == null || this.notes.length === 0) {
       return
     }
-    let { router } = this.context
-    let { location } = this.props
-    let { selectedNoteKeys, shiftKeyDown } = this.state
+    let { selectedNoteKeys } = this.state
+    const { shiftKeyDown } = this.state
 
     let targetIndex = this.getTargetIndex()
 
@@ -199,9 +213,8 @@ class NoteList extends React.Component {
     if (this.notes == null || this.notes.length === 0) {
       return
     }
-    let { router } = this.context
-    let { location } = this.props
-    let { selectedNoteKeys, shiftKeyDown } = this.state
+    let { selectedNoteKeys } = this.state
+    const { shiftKeyDown } = this.state
 
     let targetIndex = this.getTargetIndex()
     const isTargetLastNote = targetIndex === this.notes.length - 1
@@ -235,24 +248,13 @@ class NoteList extends React.Component {
       return
     }
 
-    const { router } = this.context
-    const { location } = this.props
-
-    let targetIndex = this.getTargetIndex()
-
-    if (targetIndex < 0) targetIndex = 0
-
-    const selectedNoteKeys = []
-    const nextNoteKey = this.getNoteKeyFromTargetIndex(targetIndex)
-    selectedNoteKeys.push(nextNoteKey)
-
-    this.focusNote(selectedNoteKeys, nextNoteKey)
+    const selectedNoteKeys = [noteHash]
+    this.focusNote(selectedNoteKeys, noteHash)
 
     ee.emit('list:moved')
   }
 
   handleNoteListKeyDown (e) {
-    const { shiftKeyDown } = this.state
     if (e.metaKey || e.ctrlKey) return true
 
     if (e.keyCode === 65 && !e.shiftKey) {
@@ -294,7 +296,7 @@ class NoteList extends React.Component {
   getNotes () {
     const { data, params, location } = this.props
 
-    if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) {
+    if (location.pathname.match(/\/home/) || location.pathname.match(/alltags/)) {
       const allNotes = data.noteMap.map((note) => note)
       this.contextNotes = allNotes
       return allNotes
@@ -365,9 +367,10 @@ class NoteList extends React.Component {
   }
 
   handleNoteClick (e, uniqueKey) {
-    let { router } = this.context
-    let { location } = this.props
-    let { shiftKeyDown, selectedNoteKeys } = this.state
+    const { router } = this.context
+    const { location } = this.props
+    let { selectedNoteKeys } = this.state
+    const { shiftKeyDown } = this.state
 
     if (shiftKeyDown && selectedNoteKeys.includes(uniqueKey)) {
       const newSelectedNoteKeys = selectedNoteKeys.filter((noteKey) => noteKey !== uniqueKey)
@@ -453,43 +456,79 @@ class NoteList extends React.Component {
 
     const pinLabel = note.isPinned ? 'Remove pin' : 'Pin to Top'
     const deleteLabel = 'Delete Note'
+    const cloneNote = 'Clone Note'
+    const restoreNote = 'Restore Note'
 
     const menu = new Menu()
-    if (!location.pathname.match(/\/home|\/starred|\/trash/)) {
+    if (!location.pathname.match(/\/starred|\/trash/)) {
       menu.append(new MenuItem({
         label: pinLabel,
         click: this.pinToTop
       }))
     }
+
+    if (location.pathname.match(/\/trash/)) {
+      menu.append(new MenuItem({
+        label: restoreNote,
+        click: this.restoreNote
+      }))
+    }
+
     menu.append(new MenuItem({
       label: deleteLabel,
       click: this.deleteNote
     }))
+    menu.append(new MenuItem({
+      label: cloneNote,
+      click: this.cloneNote.bind(this)
+    }))
     menu.popup()
   }
 
-  pinToTop () {
+  updateSelectedNotes (updateFunc, cleanSelection = true) {
     const { selectedNoteKeys } = this.state
     const { dispatch } = this.props
     const notes = this.notes.map((note) => Object.assign({}, note))
     const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
 
+    if (!_.isFunction(updateFunc)) {
+      console.warn('Update function is not defined. No update will happen')
+      updateFunc = (note) => { return note }
+    }
+
     Promise.all(
-      selectedNotes.map((note) => {
-        note.isPinned = !note.isPinned
-        return dataApi
-          .updateNote(note.storage, note.key, note)
-      })
-    )
-    .then((updatedNotes) => {
-      updatedNotes.forEach((note) => {
-        dispatch({
-          type: 'UPDATE_NOTE',
-          note
+        selectedNotes.map((note) => {
+          note = updateFunc(note)
+          return dataApi
+              .updateNote(note.storage, note.key, note)
         })
-      })
+    )
+        .then((updatedNotes) => {
+          updatedNotes.forEach((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note
+            })
+          })
+        })
+
+    if (cleanSelection) {
+      this.selectNextNote()
+    }
+  }
+
+  pinToTop () {
+    this.updateSelectedNotes((note) => {
+      note.isPinned = !note.isPinned
+      return note
+    })
+  }
+
+  restoreNote () {
+    this.updateSelectedNotes((note) => {
+      note.isTrashed = false
+      return note
     })
-    this.setState({ selectedNoteKeys: [] })
   }
 
   deleteNote () {
@@ -555,6 +594,42 @@ class NoteList extends React.Component {
     this.setState({ selectedNoteKeys: [] })
   }
 
+  cloneNote () {
+    const { selectedNoteKeys } = this.state
+    const { dispatch, location } = this.props
+    const { storage, folder } = this.resolveTargetFolder()
+    const notes = this.notes.map((note) => Object.assign({}, note))
+    const selectedNotes = findNotesByKeys(notes, selectedNoteKeys)
+    const firstNote = selectedNotes[0]
+    const eventName = firstNote.type === 'MARKDOWN_NOTE' ? 'ADD_MARKDOWN' : 'ADD_SNIPPET'
+
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent(eventName)
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_ALLNOTE')
+    dataApi
+      .createNote(storage.key, {
+        type: firstNote.type,
+        folder: folder.key,
+        title: firstNote.title + ' copy',
+        content: firstNote.content
+      })
+      .then((note) => {
+        const uniqueKey = note.storage + '-' + note.key
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+
+        this.setState({
+          selectedNoteKeys: [uniqueKey]
+        })
+
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {key: uniqueKey}
+        })
+      })
+  }
+
   importFromFile () {
     const options = {
       filters: [
@@ -592,7 +667,7 @@ class NoteList extends React.Component {
           const newNote = {
             content: content,
             folder: folder.key,
-            title: markdown.strip(findNoteTitle(content)),
+            title: path.basename(filepath, path.extname(filepath)),
             type: 'MARKDOWN_NOTE',
             createdAt: birthtime,
             updatedAt: mtime
@@ -651,15 +726,34 @@ class NoteList extends React.Component {
     })
   }
 
+  getNoteStorage (note) { // note.storage = storage key
+    return this.props.data.storageMap.toJS()[note.storage]
+  }
+
+  getNoteFolder (note) { // note.folder = folder key
+    return _.find(this.getNoteStorage(note).folders, ({ key }) => key === note.folder)
+  }
+
+  getViewType () {
+    const { pathname } = this.props.location
+    const folder = /\/folders\/[a-zA-Z0-9]+/.test(pathname)
+    const storage = /\/storages\/[a-zA-Z0-9]+/.test(pathname) && !folder
+    const allNotes = pathname === '/home'
+    if (allNotes) return 'ALL'
+    if (folder) return 'FOLDER'
+    if (storage) return 'STORAGE'
+  }
+
   render () {
-    let { location, notes, config, dispatch } = this.props
-    let { selectedNoteKeys } = this.state
-    let sortFunc = config.sortBy === 'CREATED_AT'
+    const { location, config } = this.props
+    let { notes } = this.props
+    const { selectedNoteKeys } = this.state
+    const sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
       : config.sortBy === 'ALPHABETICAL'
       ? sortByAlphabetical
       : sortByUpdatedAt
-    const sortedNotes = location.pathname.match(/\/home|\/starred|\/trash/)
+    const sortedNotes = location.pathname.match(/\/starred|\/trash/)
         ? this.getNotes().sort(sortFunc)
         : this.sortByPin(this.getNotes().sort(sortFunc))
     this.notes = notes = sortedNotes.filter((note) => {
@@ -686,6 +780,8 @@ class NoteList extends React.Component {
       }
     })
 
+    const viewType = this.getViewType()
+
     const noteList = notes
       .map(note => {
         if (note == null) {
@@ -699,7 +795,6 @@ class NoteList extends React.Component {
           config.sortBy === 'CREATED_AT'
             ? note.createdAt : note.updatedAt
         ).fromNow('D')
-        const key = `${note.storage}-${note.key}`
 
         if (isDefault) {
           return (
@@ -712,6 +807,9 @@ class NoteList extends React.Component {
               handleNoteClick={this.handleNoteClick.bind(this)}
               handleDragStart={this.handleDragStart.bind(this)}
               pathname={location.pathname}
+              folderName={this.getNoteFolder(note).name}
+              storageName={this.getNoteStorage(note).name}
+              viewType={viewType}
             />
           )
         }
@@ -725,6 +823,9 @@ class NoteList extends React.Component {
             handleNoteClick={this.handleNoteClick.bind(this)}
             handleDragStart={this.handleDragStart.bind(this)}
             pathname={location.pathname}
+            folderName={this.getNoteFolder(note).name}
+            storageName={this.getNoteStorage(note).name}
+            viewType={viewType}
           />
         )
       })
@@ -739,16 +840,17 @@ class NoteList extends React.Component {
           <div styleName='control-sortBy'>
             <i className='fa fa-angle-down' />
             <select styleName='control-sortBy-select'
+              title='Select filter mode'
               value={config.sortBy}
               onChange={(e) => this.handleSortByChange(e)}
             >
-              <option value='UPDATED_AT'>Updated</option>
-              <option value='CREATED_AT'>Created</option>
-              <option value='ALPHABETICAL'>Alphabetically</option>
+              <option title='Sort by update time' value='UPDATED_AT'>Updated</option>
+              <option title='Sort by create time' value='CREATED_AT'>Created</option>
+              <option title='Sort alphabetically' value='ALPHABETICAL'>Alphabetically</option>
             </select>
           </div>
           <div styleName='control-button-area'>
-            <button styleName={config.listStyle === 'DEFAULT'
+            <button title='Default View' styleName={config.listStyle === 'DEFAULT'
                 ? 'control-button--active'
                 : 'control-button'
               }
@@ -756,7 +858,7 @@ class NoteList extends React.Component {
             >
               <img styleName='iconTag' src='../resources/icon/icon-column.svg' />
             </button>
-            <button styleName={config.listStyle === 'SMALL'
+            <button title='Compressed View' styleName={config.listStyle === 'SMALL'
                 ? 'control-button--active'
                 : 'control-button'
               }

browser/main/SideNav/ListButton.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SwitchButton.styl'
+
+const ListButton = ({
+  onClick, isTagActive
+}) => (
+  <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={onClick}>
+    <img src={isTagActive
+        ? '../resources/icon/icon-list.svg'
+        : '../resources/icon/icon-list-active.svg'
+    }
+    />
+    <span styleName='tooltip'>Notes</span>
+  </button>
+)
+
+ListButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isTagActive: PropTypes.bool.isRequired
+}
+
+export default CSSModules(ListButton, styles)

browser/main/SideNav/PreferenceButton.js

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './PreferenceButton.styl'
+
+const PreferenceButton = ({
+  onClick
+}) => (
+  <button styleName='top-menu-preference' onClick={(e) => onClick(e)}>
+    <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
+    <span styleName='tooltip'>Preferences</span>
+  </button>
+)
+
+PreferenceButton.propTypes = {
+  onClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(PreferenceButton, styles)

browser/main/SideNav/PreferenceButton.styl

@@ -0,0 +1,51 @@
+.top-menu-preference
+  navButtonColor()
+  position absolute
+  top 22px
+  right 10px
+  width 2em
+  background-color transparent
+  &:hover
+    color $ui-button-default--active-backgroundColor
+    background-color transparent
+    .tooltip
+      opacity 1
+  &:active, &:active:hover
+    color $ui-button-default--active-backgroundColor
+
+body[data-theme="white"]
+  .top-menu-preference
+    navWhiteButtonColor()
+    background-color transparent
+    &:hover
+      color #0B99F1
+      background-color transparent
+    &:active, &:active:hover
+      color #0B99F1
+      background-color transparent
+
+body[data-theme="dark"]
+  .top-menu-preference
+    navDarkButtonColor()
+    background-color transparent
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      background-color transparent
+
+
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 26px
+  left -20px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s

browser/main/SideNav/SideNav.styl

@@ -11,19 +11,6 @@
 .top
   padding-bottom 15px
 
-.top-menu-preference
-  navButtonColor()
-  position absolute
-  top 22px
-  right 10px
-  width 2em
-  background-color transparent
-  &:hover
-    color $ui-button-default--active-backgroundColor
-    background-color transparent
-  &:active, &:active:hover
-    color $ui-button-default--active-backgroundColor
-
 .switch-buttons
   background-color transparent
   border 0
@@ -31,21 +18,7 @@
   display flex
   text-align center
 
-.non-active-button
-  color $ui-inactive-text-color
-  font-size 16px
-  border 0
-  background-color transparent
-  transition 0.2s
-  display flex
-  text-align center
-  margin-right 4px;
-  &:hover
-    color alpha(#239F86, 60%)
 
-.active-button
-  @extend .non-active-button
-  color $ui-button-default--active-backgroundColor
   
 .top-menu-label
   margin-left 5px
@@ -109,33 +82,6 @@ body[data-theme="white"]
     background-color #f9f9f9
     color $ui-text-color
 
-  .top-menu-preference
-    navWhiteButtonColor()
-    background-color transparent
-    &:hover
-      color #0B99F1
-      background-color transparent
-    &:active, &:active:hover
-      color #0B99F1
-      background-color transparent
-
-  .non-active-button
-    color $ui-inactive-text-color
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .tag-title
-    p
-      color $ui-text-color
-
-  .non-active-button
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .active-button
-    @extend .non-active-button
-    color #0B99F1
-
 body[data-theme="dark"]
   .root, .root--folded
     border-right 1px solid $ui-dark-borderColor
@@ -145,25 +91,6 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
-  .top-menu-preference
-    navDarkButtonColor()
-    background-color transparent
-    &:active
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      background-color transparent
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      background-color transparent
-
-  .non-active-button
-    color alpha($ui-dark-text-color, 60%)
-    &:hover
-      color alpha(#0B99F1, 60%)
-
-  .tag-title
-    p
-      color alpha($ui-dark-text-color, 60%)
-
 body[data-theme="solarized-dark"]
   .root, .root--folded
     background-color $ui-solarized-dark-backgroundColor

browser/main/SideNav/StorageItem.js

@@ -8,11 +8,10 @@ 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'
 import _ from 'lodash'
 
 const { remote } = require('electron')
-const { Menu, MenuItem, dialog } = remote
+const { Menu, dialog } = remote
 
 class StorageItem extends React.Component {
   constructor (props) {
@@ -24,18 +23,20 @@ class StorageItem extends React.Component {
   }
 
   handleHeaderContextMenu (e) {
-    const menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Add Folder',
-      click: (e) => this.handleAddFolderButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      type: 'separator'
-    }))
-    menu.append(new MenuItem({
-      label: 'Unlink Storage',
-      click: (e) => this.handleUnlinkStorageClick(e)
-    }))
+    const menu = Menu.buildFromTemplate([
+      {
+        label: 'Add Folder',
+        click: (e) => this.handleAddFolderButtonClick(e)
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Unlink Storage',
+        click: (e) => this.handleUnlinkStorageClick(e)
+      }
+    ])
+
     menu.popup()
   }
 
@@ -89,18 +90,36 @@ class StorageItem extends React.Component {
   }
 
   handleFolderButtonContextMenu (e, folder) {
-    const menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Rename Folder',
-      click: (e) => this.handleRenameFolderClick(e, folder)
-    }))
-    menu.append(new MenuItem({
-      type: 'separator'
-    }))
-    menu.append(new MenuItem({
-      label: 'Delete Folder',
-      click: (e) => this.handleFolderDeleteClick(e, folder)
-    }))
+    const menu = Menu.buildFromTemplate([
+      {
+        label: 'Rename Folder',
+        click: (e) => this.handleRenameFolderClick(e, folder)
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Export Folder',
+        submenu: [
+          {
+            label: 'Export as txt',
+            click: (e) => this.handleExportFolderClick(e, folder, 'txt')
+          },
+          {
+            label: 'Export as md',
+            click: (e) => this.handleExportFolderClick(e, folder, 'md')
+          }
+        ]
+      },
+      {
+        type: 'separator'
+      },
+      {
+        label: 'Delete Folder',
+        click: (e) => this.handleFolderDeleteClick(e, folder)
+      }
+    ])
+
     menu.popup()
   }
 
@@ -112,6 +131,31 @@ class StorageItem extends React.Component {
     })
   }
 
+  handleExportFolderClick (e, folder, fileType) {
+    const options = {
+      properties: ['openDirectory', 'createDirectory'],
+      buttonLabel: 'Select directory',
+      title: 'Select a folder to export the files to',
+      multiSelections: false
+    }
+    dialog.showOpenDialog(remote.getCurrentWindow(), options,
+    (paths) => {
+      if (paths && paths.length === 1) {
+        const { storage, dispatch } = this.props
+        dataApi
+          .exportFolder(storage.key, folder.key, fileType, paths[0])
+          .then((data) => {
+            dispatch({
+              type: 'EXPORT_FOLDER',
+              storage: data.storage,
+              folderKey: data.folderKey,
+              fileType: data.fileType
+            })
+          })
+      }
+    })
+  }
+
   handleFolderDeleteClick (e, folder) {
     const index = dialog.showMessageBox(remote.getCurrentWindow(), {
       type: 'warning',

browser/main/SideNav/SwitchButton.styl

@@ -0,0 +1,59 @@
+.non-active-button
+  color $ui-inactive-text-color
+  font-size 16px
+  border 0
+  background-color transparent
+  transition 0.2s
+  display flex
+  text-align center
+  margin-right 4px
+  position relative
+  &:hover
+    color alpha(#239F86, 60%)
+    .tooltip
+      opacity 1
+
+.active-button
+  @extend .non-active-button
+  color $ui-button-default--active-backgroundColor
+
+.tooltip
+  tooltip()
+  position absolute
+  pointer-events none
+  top 22px
+  left -2px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="white"]
+  .non-active-button
+    color $ui-inactive-text-color
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color $ui-text-color
+
+  .non-active-button
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .active-button
+    @extend .non-active-button
+    color #0B99F1
+
+body[data-theme="dark"]
+  .non-active-button
+    color alpha($ui-dark-text-color, 60%)
+    &:hover
+      color alpha(#0B99F1, 60%)
+
+  .tag-title
+    p
+      color alpha($ui-dark-text-color, 60%)

browser/main/SideNav/TagButton.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SwitchButton.styl'
+
+const TagButton = ({
+  onClick, isTagActive
+}) => (
+  <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={onClick}>
+    <img src={isTagActive
+        ? '../resources/icon/icon-tag-active.svg'
+        : '../resources/icon/icon-tag.svg'
+    }
+    />
+    <span styleName='tooltip'>Tags</span>
+  </button>
+)
+
+TagButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isTagActive: PropTypes.bool.isRequired
+}
+
+export default CSSModules(TagButton, styles)

browser/main/SideNav/index.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
+const { remote } = require('electron')
+const { Menu } = remote
+import dataApi from 'browser/main/lib/dataApi'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
@@ -11,6 +14,9 @@ import SideNavFilter from 'browser/components/SideNavFilter'
 import StorageList from 'browser/components/StorageList'
 import NavToggleButton from 'browser/components/NavToggleButton'
 import EventEmitter from 'browser/main/lib/eventEmitter'
+import PreferenceButton from './PreferenceButton'
+import ListButton from './ListButton'
+import TagButton from './TagButton'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -83,9 +89,10 @@ class SideNav extends React.Component {
             isTrashedActive={isTrashedActive}
             handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
-            counterTotalNote={data.noteMap._map.size}
+            counterTotalNote={data.noteMap._map.size - data.trashedSet._set.size}
             counterStarredNote={data.starredSet._set.size}
             counterDelNote={data.trashedSet._set.size}
+            handleFilterButtonContextMenu={this.handleFilterButtonContextMenu.bind(this)}
           />
 
           <StorageList storageList={storageList} />
@@ -110,18 +117,21 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location } = this.props
-    const tagList = data.tagNoteMap.map((tag, key) => {
-      return key
+    const tagList = data.tagNoteMap.map((tag, name) => {
+      return { name, size: tag.size }
     })
     return (
-      tagList.map(tag => (
-        <TagListItem
-          name={tag}
-          handleClickTagListItem={this.handleClickTagListItem.bind(this)}
-          isActive={this.getTagActive(location.pathname, tag)}
-          key={tag}
-        />
-      ))
+      tagList.map(tag => {
+        return (
+          <TagListItem
+            name={tag.name}
+            handleClickTagListItem={this.handleClickTagListItem.bind(this)}
+            isActive={this.getTagActive(location.pathname, tag)}
+            key={tag.name}
+            count={tag.size}
+          />
+        )
+      })
     )
   }
 
@@ -136,6 +146,34 @@ class SideNav extends React.Component {
     router.push(`/tags/${name}`)
   }
 
+  emptyTrash (entries) {
+    const { dispatch } = this.props
+    const deletionPromises = entries.map((storageAndNoteKey) => {
+      const storageKey = storageAndNoteKey.split('-')[0]
+      const noteKey = storageAndNoteKey.split('-')[1]
+      return dataApi.deleteNote(storageKey, noteKey)
+    })
+    Promise.all(deletionPromises)
+    .then((arrayOfStorageAndNoteKeys) => {
+      arrayOfStorageAndNoteKeys.forEach(({ storageKey, noteKey }) => {
+        dispatch({ type: 'DELETE_NOTE', storageKey, noteKey })
+      })
+    })
+    .catch((err) => {
+      console.error('Cannot Delete note: ' + err)
+    })
+    console.log('Trash emptied')
+  }
+
+  handleFilterButtonContextMenu (event) {
+    const { data } = this.props
+    const entries = data.trashedSet.toJS()
+    const menu = Menu.buildFromTemplate([
+      { label: 'Empty Trash', click: () => this.emptyTrash(entries) }
+    ])
+    menu.popup()
+  }
+
   render () {
     const { data, location, config, dispatch } = this.props
 
@@ -162,27 +200,11 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>
-              <img src={isTagActive
-                  ? '../resources/icon/icon-list.svg'
-                  : '../resources/icon/icon-list-active.svg'
-                }
-              />
-            </button>
-            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>
-              <img src={isTagActive
-                  ? '../resources/icon/icon-tag-active.svg'
-                  : '../resources/icon/icon-tag.svg'
-                }
-              />
-            </button>
+            <ListButton onClick={this.handleSwitchFoldersButtonClick.bind(this)} isTagActive={isTagActive} />
+            <TagButton onClick={this.handleSwitchTagsButtonClick.bind(this)} isTagActive={isTagActive} />
           </div>
           <div>
-            <button styleName='top-menu-preference'
-              onClick={(e) => this.handleMenuButtonClick(e)}
-            >
-              <img styleName='iconTag' src='../resources/icon/icon-setting.svg' />
-            </button>
+            <PreferenceButton onClick={this.handleMenuButtonClick} />
           </div>
         </div>
         {this.SideNavComponent(isFolded, storageList)}

browser/main/StatusBar/StatusBar.styl

@@ -21,19 +21,20 @@
     color white
 
 .zoom
-  navButtonColor()
-  color rgba(0,0,0,.54)
-  height 20px
-  display flex
-  padding 0
-  align-items center
-  background-color transparent
-  &:hover
-    color $ui-active-color
-  &:active
-    color $ui-active-color
-  span
-    margin-left 5px
+  display none
+  // navButtonColor()
+  // color rgba(0,0,0,.54)
+  // height 20px
+  // display flex
+  // padding 0
+  // align-items center
+  // background-color transparent
+  // &:hover
+  //   color $ui-active-color
+  // &:active
+  //   color $ui-active-color
+  // span
+  //   margin-left 5px
   
 .update
   navButtonColor()

browser/main/StatusBar/index.js

@@ -63,7 +63,7 @@ class StatusBar extends React.Component {
         {status.updateReady
           ? <button onClick={this.updateApp} styleName='update'>
             <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-            </button>
+          </button>
           : null
         }
       </div>

browser/main/TopBar/index.js

@@ -22,14 +22,18 @@ class TopBar extends React.Component {
     this.focusSearchHandler = () => {
       this.handleOnSearchFocus()
     }
+
+    this.codeInitHandler = this.handleCodeInit.bind(this)
   }
 
   componentDidMount () {
     ee.on('top:focus-search', this.focusSearchHandler)
+    ee.on('code:init', this.codeInitHandler)
   }
 
   componentWillUnmount () {
     ee.off('top:focus-search', this.focusSearchHandler)
+    ee.off('code:init', this.codeInitHandler)
   }
 
   handleKeyDown (e) {
@@ -73,14 +77,16 @@ class TopBar extends React.Component {
 
   handleSearchChange (e) {
     const { router } = this.context
+    const keyword = this.refs.searchInput.value
     if (this.state.isAlphabet || this.state.isConfirmTranslation) {
       router.push('/searched')
     } else {
       e.preventDefault()
     }
     this.setState({
-      search: this.refs.searchInput.value
+      search: keyword
     })
+    ee.emit('top:search', keyword)
   }
 
   handleSearchFocus (e) {
@@ -115,6 +121,10 @@ class TopBar extends React.Component {
     }
   }
 
+  handleCodeInit () {
+    ee.emit('top:search', this.refs.searchInput.value)
+  }
+
   render () {
     const { config, style, location } = this.props
     return (

browser/main/global.styl

@@ -97,7 +97,7 @@ body[data-theme="dark"]
 .CodeMirror
   font-family inherit !important
   line-height 1.4em
-  height 96%
+  height 100%
 .CodeMirror > div > textarea
   margin-bottom -1em
 .CodeMirror-focused .CodeMirror-selected

browser/main/lib/ConfigManager.js

@@ -18,7 +18,6 @@ export const DEFAULT_CONFIG = {
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   amaEnabled: true,
   hotkey: {
-    toggleFinder: OSX ? 'Cmd + Alt + S' : 'Super + Alt + S',
     toggleMain: OSX ? 'Cmd + Alt + L' : 'Super + Alt + E'
   },
   ui: {
@@ -34,9 +33,11 @@ export const DEFAULT_CONFIG = {
     fontFamily: win ? 'Segoe UI' : 'Monaco, Consolas',
     indentType: 'space',
     indentSize: '2',
+    displayLineNumbers: true,
     switchPreview: 'BLUR', // Available value: RIGHTCLICK, BLUR
     scrollPastEnd: false,
-    type: 'SPLIT'
+    type: 'SPLIT',
+    fetchUrlTitle: true
   },
   preview: {
     fontSize: '14',
@@ -46,7 +47,8 @@ export const DEFAULT_CONFIG = {
     latexInlineOpen: '$',
     latexInlineClose: '$',
     latexBlockOpen: '$$',
-    latexBlockClose: '$$'
+    latexBlockClose: '$$',
+    scrollPastEnd: false
   }
 }
 

browser/main/lib/dataApi/copyFile.js

@@ -0,0 +1,31 @@
+const fs = require('fs')
+const path = require('path')
+
+/**
+ * @description Copy a file from source to destination
+ * @param {String} srcPath
+ * @param {String} dstPath
+ * @return {Promise} an image path
+ */
+function copyFile (srcPath, dstPath) {
+  if (!path.extname(dstPath)) {
+    dstPath = path.join(dstPath, path.basename(srcPath))
+  }
+
+  return new Promise((resolve, reject) => {
+    const dstFolder = path.dirname(dstPath)
+    if (!fs.existsSync(dstFolder)) fs.mkdirSync(dstFolder)
+
+    const input = fs.createReadStream(srcPath)
+    const output = fs.createWriteStream(dstPath)
+
+    output.on('error', reject)
+    input.on('error', reject)
+    input.on('end', () => {
+      resolve(dstPath)
+    })
+    input.pipe(output)
+  })
+}
+
+module.exports = copyFile

browser/main/lib/dataApi/exportFolder.js

@@ -0,0 +1,61 @@
+import { findStorage } from 'browser/lib/findStorage'
+import resolveStorageData from './resolveStorageData'
+import resolveStorageNotes from './resolveStorageNotes'
+import * as path from 'path'
+import * as fs from 'fs'
+
+/**
+ * @param {String} storageKey
+ * @param {String} folderKey
+ * @param {String} fileType
+ * @param {String} exportDir
+ *
+ * @return {Object}
+ * ```
+ * {
+ *   storage: Object,
+ *   folderKey: String,
+ *   fileType: String,
+ *   exportDir: String
+ * }
+ * ```
+ */
+
+function exportFolder (storageKey, folderKey, fileType, exportDir) {
+  let targetStorage
+  try {
+    targetStorage = findStorage(storageKey)
+  } catch (e) {
+    return Promise.reject(e)
+  }
+
+  return resolveStorageData(targetStorage)
+    .then(function assignNotes (storage) {
+      return resolveStorageNotes(storage)
+        .then((notes) => {
+          return {
+            storage,
+            notes
+          }
+        })
+    })
+    .then(function exportNotes (data) {
+      const { storage, notes } = data
+
+      notes
+        .filter(note => note.folder === folderKey && note.isTrashed === false && note.type === 'MARKDOWN_NOTE')
+        .forEach(snippet => {
+          const notePath = path.join(exportDir, `${snippet.title}.${fileType}`)
+          fs.writeFileSync(notePath, snippet.content)
+        })
+
+      return {
+        storage,
+        folderKey,
+        fileType,
+        exportDir
+      }
+    })
+}
+
+module.exports = exportFolder

browser/main/lib/dataApi/exportNote.js

@@ -0,0 +1,110 @@
+import copyFile from 'browser/main/lib/dataApi/copyFile'
+import {findStorage} from 'browser/lib/findStorage'
+
+const fs = require('fs')
+const path = require('path')
+
+const LOCAL_STORED_REGEX = /!\[(.*?)\]\(\s*?\/:storage\/(.*\.\S*?)\)/gi
+const IMAGES_FOLDER_NAME = 'images'
+
+/**
+ * Export note together with images
+ *
+ * If images is stored in the storage, creates 'images' subfolder in target directory
+ * and copies images to it. Changes links to images in the content of the note
+ *
+ * @param {String} storageKey or storage path
+ * @param {String} noteContent Content to export
+ * @param {String} targetPath Path to exported file
+ * @param {function} outputFormatter
+ * @return {Promise.<*[]>}
+ */
+function exportNote (storageKey, noteContent, targetPath, outputFormatter) {
+  const storagePath = path.isAbsolute(storageKey) ? storageKey : findStorage(storageKey).path
+  const exportTasks = []
+
+  if (!storagePath) {
+    throw new Error('Storage path is not found')
+  }
+
+  let exportedData = noteContent.replace(LOCAL_STORED_REGEX, (match, dstFilename, srcFilename) => {
+    if (!path.extname(dstFilename)) {
+      dstFilename += path.extname(srcFilename)
+    }
+
+    const dstRelativePath = path.join(IMAGES_FOLDER_NAME, dstFilename)
+
+    exportTasks.push({
+      src: path.join(IMAGES_FOLDER_NAME, srcFilename),
+      dst: dstRelativePath
+    })
+
+    return `![${dstFilename}](${dstRelativePath})`
+  })
+
+  if (outputFormatter) {
+    exportedData = outputFormatter(exportedData, exportTasks)
+  }
+
+  const tasks = prepareTasks(exportTasks, storagePath, path.dirname(targetPath))
+
+  return Promise.all(tasks.map((task) => copyFile(task.src, task.dst)))
+  .then(() => {
+    return saveToFile(exportedData, targetPath)
+  }).catch((err) => {
+    rollbackExport(tasks)
+    throw err
+  })
+}
+
+function prepareTasks (tasks, storagePath, targetPath) {
+  return tasks.map((task) => {
+    if (!path.isAbsolute(task.src)) {
+      task.src = path.join(storagePath, task.src)
+    }
+
+    if (!path.isAbsolute(task.dst)) {
+      task.dst = path.join(targetPath, task.dst)
+    }
+
+    return task
+  })
+}
+
+function saveToFile (data, filename) {
+  return new Promise((resolve, reject) => {
+    fs.writeFile(filename, data, (err) => {
+      if (err) return reject(err)
+
+      resolve(filename)
+    })
+  })
+}
+
+/**
+ * Remove exported files
+ * @param tasks Array of copy task objects. Object consists of two mandatory fields – `src` and `dst`
+ */
+function rollbackExport (tasks) {
+  const folders = new Set()
+  tasks.forEach((task) => {
+    let fullpath = task.dst
+
+    if (!path.extname(task.dst)) {
+      fullpath = path.join(task.dst, path.basename(task.src))
+    }
+
+    if (fs.existsSync(fullpath)) {
+      fs.unlink(fullpath)
+      folders.add(path.dirname(fullpath))
+    }
+  })
+
+  folders.forEach((folder) => {
+    if (fs.readdirSync(folder).length === 0) {
+      fs.rmdir(folder)
+    }
+  })
+}
+
+export default exportNote

browser/main/lib/dataApi/index.js

@@ -7,6 +7,7 @@ const dataApi = {
   updateFolder: require('./updateFolder'),
   deleteFolder: require('./deleteFolder'),
   reorderFolder: require('./reorderFolder'),
+  exportFolder: require('./exportFolder'),
   createNote: require('./createNote'),
   updateNote: require('./updateNote'),
   deleteNote: require('./deleteNote'),

browser/main/lib/ipcClient.js

@@ -18,26 +18,12 @@ nodeIpc.connectTo(
       console.log(err)
     })
     nodeIpc.of.node.on('connect', function () {
-      console.log('Conncted successfully')
+      console.log('Connected successfully')
       ipcRenderer.send('config-renew', {config: ConfigManager.get()})
     })
     nodeIpc.of.node.on('disconnect', function () {
       console.log('disconnected')
     })
-
-    nodeIpc.of.node.on('request-data-from-finder', function () {
-      console.log('throttle')
-      var { data } = store.getState()
-      console.log(data.starredSet.toJS())
-      nodeIpc.of.node.emit('throttle-data', {
-        storageMap: data.storageMap.toJS(),
-        noteMap: data.noteMap.toJS(),
-        starredSet: data.starredSet.toJS(),
-        storageNoteMap: data.storageNoteMap.toJS(),
-        folderNoteMap: data.folderNoteMap.toJS(),
-        tagNoteMap: data.tagNoteMap.toJS()
-      })
-    })
   }
 )
 

browser/main/modals/CreateFolderModal.styl

@@ -29,7 +29,7 @@
   width 490px
   padding 0 5px
   margin 10px 0
-  border 1px solid #C9C9C9 // TODO: use variable.
+  border 1px solid $ui-input--create-folder-modal
   border-radius 2px
   background-color transparent
   outline none
@@ -68,7 +68,7 @@ body[data-theme="dark"]
     color $ui-dark-text-color
 
   .control-folder-input
-    border 1px solid #C9C9C9 // TODO: use variable.
+    border 1px solid $ui-input--create-folder-modal
     color white
 
    .description
@@ -76,3 +76,29 @@ body[data-theme="dark"]
 
   .control-confirmButton
     colorDarkPrimaryButton()
+
+body[data-theme="solarized-dark"]
+  .root
+    modalSolarizedDark()
+    width 500px
+    height 270px
+    overflow hidden
+    position relative
+
+  .header
+    background-color transparent
+    border-color $ui-dark-borderColor
+    color $ui-solarized-dark-text-color
+
+  .control-folder-label
+    color $ui-solarized-dark-text-color
+
+  .control-folder-input
+    border 1px solid $ui-input--create-folder-modal
+    color white
+
+   .description
+    color $ui-inactive-text-color
+
+  .control-confirmButton
+    colorSolarizedDarkPrimaryButton()

browser/main/modals/InitModal.js

@@ -1,254 +0,0 @@
-import React from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './InitModal.styl'
-import dataApi from 'browser/main/lib/dataApi'
-import store from 'browser/main/store'
-import { hashHistory } from 'react-router'
-import _ from 'lodash'
-
-const CSON = require('@rokt33r/season')
-const path = require('path')
-const electron = require('electron')
-const { remote } = electron
-
-function browseFolder () {
-  const dialog = remote.dialog
-
-  const defaultPath = remote.app.getPath('home')
-  return new Promise((resolve, reject) => {
-    dialog.showOpenDialog({
-      title: 'Select Directory',
-      defaultPath,
-      properties: ['openDirectory', 'createDirectory']
-    }, function (targetPaths) {
-      if (targetPaths == null) return resolve('')
-      resolve(targetPaths[0])
-    })
-  })
-}
-
-class InitModal extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      path: path.join(remote.app.getPath('home'), 'Boostnote'),
-      migrationRequested: true,
-      isLoading: true,
-      data: null,
-      legacyStorageExists: false,
-      isSending: false
-    }
-  }
-
-  handlePathChange (e) {
-    this.setState({
-      path: e.target.value
-    })
-  }
-
-  componentDidMount () {
-    let data = null
-    try {
-      data = CSON.readFileSync(path.join(remote.app.getPath('userData'), 'local.json'))
-    } catch (err) {
-      console.error(err)
-    }
-    const newState = {
-      isLoading: false
-    }
-    if (data != null) {
-      newState.legacyStorageExists = true
-      newState.data = data
-    }
-    this.setState(newState, () => {
-      this.refs.createButton.focus()
-    })
-  }
-
-  handlePathBrowseButtonClick (e) {
-    browseFolder()
-      .then((targetPath) => {
-        if (targetPath.length > 0) {
-          this.setState({
-            path: targetPath
-          })
-        }
-      })
-      .catch((err) => {
-        console.error('BrowseFAILED')
-        console.error(err)
-      })
-  }
-
-  handleSubmitButtonClick (e) {
-    this.setState({
-      isSending: true
-    }, () => {
-      dataApi
-        .addStorage({
-          name: 'My Storage',
-          path: this.state.path
-        })
-        .then((data) => {
-          if (this.state.migrationRequested && _.isObject(this.state.data) && _.isArray(this.state.data.folders) && _.isArray(this.state.data.articles)) {
-            return dataApi.migrateFromV5Storage(data.storage.key, this.state.data)
-          }
-          return data
-        })
-        .then((data) => {
-          if (data.storage.folders[0] != null) {
-            return data
-          } else {
-            return dataApi
-              .createFolder(data.storage.key, {
-                color: '#1278BD',
-                name: 'Default'
-              })
-              .then((_data) => {
-                return {
-                  storage: _data.storage,
-                  notes: data.notes
-                }
-              })
-          }
-        })
-        .then((data) => {
-          console.log(data)
-          store.dispatch({
-            type: 'ADD_STORAGE',
-            storage: data.storage,
-            notes: data.notes
-          })
-
-          const defaultSnippetNote = dataApi
-            .createNote(data.storage.key, {
-              type: 'SNIPPET_NOTE',
-              folder: data.storage.folders[0].key,
-              title: 'Snippet note example',
-              description: 'Snippet note example\nYou can store a series of snippets as a single note, like Gist.',
-              snippets: [
-                {
-                  name: 'example.html',
-                  mode: 'html',
-                  content: '<html>\n<body>\n<h1 id=\'hello\'>Enjoy Boostnote!</h1>\n</body>\n</html>'
-                },
-                {
-                  name: 'example.js',
-                  mode: 'javascript',
-                  content: 'var boostnote = document.getElementById(\'enjoy\').innerHTML\n\nconsole.log(boostnote)'
-                }
-              ]
-            })
-            .then((note) => {
-              store.dispatch({
-                type: 'UPDATE_NOTE',
-                note: note
-              })
-            })
-          const 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 here to edit markdown :wave:\n\n<iframe width="560" height="315" src="https://www.youtube.com/embed/L0qNPLsvmyM" frameborder="0" allowfullscreen></iframe>\n\n## Docs :memo:\n- [Boostnote | Boost your happiness, productivity and creativity.](https://hackernoon.com/boostnote-boost-your-happiness-productivity-and-creativity-315034efeebe)\n- [Cloud Syncing & Backups](https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup)\n- [How to sync your data across Desktop and Mobile apps](https://github.com/BoostIO/Boostnote/wiki/Sync-Data-Across-Desktop-and-Mobile-apps)\n- [Convert data from **Evernote** to Boostnote.](https://github.com/BoostIO/Boostnote/wiki/Evernote)\n- [Keyboard Shortcuts](https://github.com/BoostIO/Boostnote/wiki/Keyboard-Shortcuts)\n- [Keymaps in Editor mode](https://github.com/BoostIO/Boostnote/wiki/Keymaps-in-Editor-mode)\n- [How to set syntax highlight in Snippet note](https://github.com/BoostIO/Boostnote/wiki/Syntax-Highlighting)\n\n---\n\n## Article Archive :books:\n- [Reddit English](http://bit.ly/2mOJPu7)\n- [Reddit Spanish](https://www.reddit.com/r/boostnote_es/)\n- [Reddit Chinese](https://www.reddit.com/r/boostnote_cn/)\n- [Reddit Japanese](https://www.reddit.com/r/boostnote_jp/)\n\n---\n\n## Community :beers:\n- [GitHub](http://bit.ly/2AWWzkD)\n- [Twitter](http://bit.ly/2z8BUJZ)\n- [Facebook Group](http://bit.ly/2jcca8t)'
-            })
-            .then((note) => {
-              store.dispatch({
-                type: 'UPDATE_NOTE',
-                note: note
-              })
-            })
-
-          return Promise.resolve(defaultSnippetNote)
-            .then(defaultMarkdownNote)
-            .then(() => data.storage)
-        })
-        .then((storage) => {
-          hashHistory.push('/storages/' + storage.key)
-          this.props.close()
-        })
-        .catch((err) => {
-          this.setState({
-            isSending: false
-          })
-          throw err
-        })
-    })
-  }
-
-  handleMigrationRequestedChange (e) {
-    this.setState({
-      migrationRequested: e.target.checked
-    })
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 27) {
-      this.props.close()
-    }
-  }
-
-  render () {
-    if (this.state.isLoading) {
-      return <div styleName='root--loading'>
-        <i styleName='spinner' className='fa fa-spin fa-spinner' />
-        <div styleName='loadingMessage'>Preparing initialization...</div>
-      </div>
-    }
-    return (
-      <div styleName='root'
-        tabIndex='-1'
-        onKeyDown={(e) => this.handleKeyDown(e)}
-      >
-        <div styleName='body'>
-          <div styleName='body-welcome'>
-            Welcome to Boostnote!
-          </div>
-          <div styleName='body-description'>
-           Please select a directory for data storage.
-          </div>
-          <div styleName='body-path'>
-            <input styleName='body-path-input'
-              placeholder='Select Folder'
-              value={this.state.path}
-              onChange={(e) => this.handlePathChange(e)}
-            />
-            <button styleName='body-path-button'
-              onClick={(e) => this.handlePathBrowseButtonClick(e)}
-            >
-              ...
-            </button>
-          </div>
-
-          {this.state.legacyStorageExists &&
-            <div styleName='body-migration'>
-              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)} /> Migrate old data from the legacy app v0.5</label>
-            </div>
-          }
-
-          <div styleName='body-control'>
-            <button styleName='body-control-createButton'
-              ref='createButton'
-              onClick={(e) => this.handleSubmitButtonClick(e)}
-              disabled={this.state.isSending}
-            >
-              {this.state.isSending
-                ? <span>
-                  <i className='fa fa-spin fa-spinner' /> Loading...
-                </span>
-                : 'CREATE'
-              }
-            </button>
-          </div>
-        </div>
-
-      </div>
-    )
-  }
-}
-
-InitModal.propTypes = {
-}
-
-export default CSSModules(InitModal, styles)

browser/main/modals/InitModal.styl

@@ -1,76 +0,0 @@
-.root
-  modal()
-  background-color #fff
-  max-width 100vw
-  max-height 100vh
-  overflow hidden
-  margin 0
-  padding 150px 0
-  position relative
-.root--loading
-  @extend .root
-  text-align center
-.spinner
-  font-size 100px
-  margin 35px auto
-  color $ui-text-color
-.loadingMessage
-  color $ui-text-color
-  margin 15px auto 35px
-
-.body
-  padding 30px
-
-.body-welcome
-  text-align center
-  margin-bottom 25px
-  font-size 32px
-  color $ui-text-color
-
-.body-description
-  font-size 16px
-  color $ui-text-color
-  text-align center
-  margin-bottom 25px
-
-.body-path
-  margin 0 auto 25px
-  width 330px
-
-.body-path-input
-  height 40px
-  vertical-align middle
-  width 300px
-  font-size 14px
-  border-style solid
-  border-width 1px 0 1px 1px
-  border-color $border-color
-  border-top-left-radius 2px
-  border-bottom-left-radius 2px
-  padding 0 5px
-
-.body-path-button
-  height 42px
-  width 30px
-  font-size 16px
-  font-weight 600
-  border none
-  border-top-right-radius 2px
-  border-bottom-right-radius 2px
-  colorPrimaryButton()
-  vertical-align middle
-.body-migration
-  margin 0 auto 25px
-  text-align center
-
-.body-control
-  text-align center
-
-.body-control-createButton
-  colorPrimaryButton()
-  font-size 14px
-  font-weight 600
-  border none
-  border-radius 2px
-  height 40px
-  padding 0 25px

browser/main/modals/NewNoteModal.js

@@ -35,14 +35,16 @@ class NewNoteModal extends React.Component {
         content: ''
       })
       .then((note) => {
+        const noteHash = `${note.storage}-${note.key}`
         dispatch({
           type: 'UPDATE_NOTE',
           note: note
         })
         hashHistory.push({
           pathname: location.pathname,
-          query: {key: note.storage + '-' + note.key}
+          query: {key: noteHash}
         })
+        ee.emit('list:jump', noteHash)
         ee.emit('detail:focus')
         this.props.close()
       })
@@ -73,14 +75,16 @@ class NewNoteModal extends React.Component {
         }]
       })
       .then((note) => {
+        const noteHash = `${note.storage}-${note.key}`
         dispatch({
           type: 'UPDATE_NOTE',
           note: note
         })
         hashHistory.push({
           pathname: location.pathname,
-          query: {key: note.storage + '-' + note.key}
+          query: {key: noteHash}
         })
+        ee.emit('list:jump', noteHash)
         ee.emit('detail:focus')
         this.props.close()
       })
@@ -106,7 +110,7 @@ class NewNoteModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>Make a Note</div>
+          <div styleName='title'>Make a note</div>
         </div>
         <ModalEscButton handleEscButtonClick={(e) => this.handleCloseButtonClick(e)} />
         <div styleName='control'>

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -76,8 +76,8 @@
       color #1EC38B
     .error
       color red
-
-
+    .warning
+      color #FFA500
 
 .group-control-leftButton
   colorDefaultButton()
@@ -89,9 +89,9 @@
   margin-right 10px
 
 .group-control-rightButton
-  position absolute
-  top 10px
-  right 20px
+  position fixed
+  top 80px
+  right 100px
   colorPrimaryButton()
   border none
   border-radius 2px

browser/main/modals/PreferencesModal/Crowdfunding.js

@@ -22,18 +22,18 @@ class Crowdfunding extends React.Component {
     return (
       <div styleName='root'>
         <div styleName='header'>Crowdfunding</div>
-        <p>Dear all,</p>
+        <p>Dear everyone,</p>
         <br />
-        <p>Thanks for your using!</p>
-        <p>Boostnote is used in about 200 countries and regions, it is a awesome developer community.</p>
+        <p>Thank you for using Boostnote!</p>
+        <p>Boostnote is used in about 200 different countries and regions by an awesome community of developers.</p>
         <br />
         <p>To continue supporting this growth, and to satisfy community expectations,</p>
-        <p>we would like to invest more time in this project.</p>
+        <p>we would like to invest more time and resources in this project.</p>
         <br />
-        <p>If you like this project and see its potential, you can help!</p>
+        <p>If you like this project and see its potential, you can help by supporting us on OpenCollective!</p>
         <br />
         <p>Thanks,</p>
-        <p>Boostnote maintainers.</p>
+        <p>Boostnote maintainers</p>
         <br />
         <button styleName='cf-link'>
           <a href='https://opencollective.com/boostnoteio' onClick={(e) => this.handleLinkClick(e)}>Support via OpenCollective</a>

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -32,6 +32,7 @@ class HotkeyTab extends React.Component {
         message: err.message != null ? err.message : 'Error occurs!'
       }})
     }
+    this.oldHotkey = this.state.config.hotkey
     ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
     ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
   }
@@ -53,6 +54,7 @@ class HotkeyTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
+    this.props.haveToSave()
   }
 
   handleHintToggleButtonClick (e) {
@@ -64,12 +66,20 @@ class HotkeyTab extends React.Component {
   handleHotkeyChange (e) {
     const { config } = this.state
     config.hotkey = {
-      toggleFinder: this.refs.toggleFinder.value,
       toggleMain: this.refs.toggleMain.value
     }
     this.setState({
       config
     })
+    if (_.isEqual(this.oldHotkey, config.hotkey)) {
+      this.props.haveToSave()
+    } else {
+      this.props.haveToSave({
+        tab: 'Hotkey',
+        type: 'warning',
+        message: 'You have to save!'
+      })
+    }
   }
 
   clearMessage () {
@@ -92,9 +102,9 @@ class HotkeyTab extends React.Component {
     return (
       <div styleName='root'>
         <div styleName='group'>
-          <div styleName='group-header'>Hotkey</div>
+          <div styleName='group-header'>Hotkeys</div>
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Main</div>
+            <div styleName='group-section-label'>Show/Hide Boostnote</div>
             <div styleName='group-section-control'>
               <input styleName='group-section-control-input'
                 onChange={(e) => this.handleHotkeyChange(e)}
@@ -104,24 +114,13 @@ class HotkeyTab extends React.Component {
               />
             </div>
           </div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder (Quick search)</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleFinder'
-                value={config.hotkey.toggleFinder}
-                type='text'
-              />
-            </div>
-          </div>
           <div styleName='group-control'>
             <button styleName='group-control-leftButton'
               onClick={(e) => this.handleHintToggleButtonClick(e)}
             >
               {this.state.isHotkeyHintOpen
-                ? 'Hide Hint'
-                : 'Hint?'
+                ? 'Hide Help'
+                : 'Help'
               }
             </button>
             <button styleName='group-control-rightButton'
@@ -161,7 +160,8 @@ class HotkeyTab extends React.Component {
 }
 
 HotkeyTab.propTypes = {
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
 }
 
 export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/InfoTab.js

@@ -31,7 +31,7 @@ class InfoTab extends React.Component {
   }
 
   handleSaveButtonClick (e) {
-    let newConfig = {
+    const newConfig = {
       amaEnabled: this.state.config.amaEnabled
     }
 
@@ -83,7 +83,7 @@ class InfoTab extends React.Component {
               >GitHub</a>
             </li>
             <li>
-              <a href='https://medium.com/boostnote'
+              <a href='https://boostlog.io/@junp1234'
                 onClick={(e) => this.handleLinkClick(e)}
               >Blog</a>
             </li>
@@ -102,7 +102,7 @@ class InfoTab extends React.Component {
 
         <hr />
 
-        <div styleName='header--sub'>Info</div>
+        <div styleName='header--sub'>About</div>
 
         <div styleName='top'>
           <div styleName='icon-space'>
@@ -128,7 +128,7 @@ class InfoTab extends React.Component {
             >Development</a> : Development configurations for Boostnote.
           </li>
           <li styleName='cc'>
-            Copyright (C) 2017 Maisin&Co.
+            Copyright (C) 2017 - 2018 BoostIO
           </li>
           <li styleName='cc'>
             License: GPL v3
@@ -137,17 +137,19 @@ class InfoTab extends React.Component {
 
         <hr styleName='separate-line' />
 
-        <div styleName='policy'>Data collection policy</div>
-        <div>We collect only the number of DAU for Boostnote and **DO NOT collect** any detail information such as your note content.</div>
+        <div styleName='policy'>Analytics</div>
+        <div>Boostnote collects anonymous data for the sole purpose of improving the application, and strictly does not collect any personal information such the contents of your notes.</div>
         <div>You can see how it works on <a href='https://github.com/BoostIO/Boostnote' onClick={(e) => this.handleLinkClick(e)}>GitHub</a>.</div>
-        <div>This data is only used for Boostnote improvements.</div>
+        <br />
+        <div>You can choose to enable or disable this option.</div>
         <input onChange={(e) => this.handleConfigChange(e)}
           checked={this.state.config.amaEnabled}
           ref='amaEnabled'
           type='checkbox'
         />
-        Enable to send analytics to our servers<br />
+        Enable analytics to help improve Boostnote<br />
         <button styleName='policy-submit' onClick={(e) => this.handleSaveButtonClick(e)}>Save</button>
+        <br />
         {this.infoMessage()}
       </div>
     )

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -42,6 +42,8 @@ top-bar--height = 50px
   background-color transparent
   color $ui-text-color
   font-size 16px
+  .saving--warning
+    haveToSave()
 
 .nav-button--active
   @extend .nav-button
@@ -49,6 +51,8 @@ top-bar--height = 50px
   background-color $ui-button--active-backgroundColor
   &:hover
     color $ui-text-color
+  .saving--warning
+    haveToSave()
 
 .nav-button-icon
   display block

browser/main/modals/PreferencesModal/StorageItem.styl

@@ -84,3 +84,17 @@ body[data-theme="dark"]
     top 25px
     z-index 10
     white-space nowrap
+
+body[data-theme="solarized-dark"]
+  .header
+    border-color $ui-solarized-dark-button-backgroundColor
+
+  .header-label-path
+    color $ui-solarized-dark-text-color
+  .header-label-editButton
+    color $ui-solarized-dark-text-color
+
+  .header-control-button
+    border-color $ui-solarized-dark-button-backgroundColor
+    background-color $ui-solarized-dark-button-backgroundColor
+    color $ui-solarized-dark-text-color

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -78,7 +78,7 @@ class StoragesTab extends React.Component {
           <button styleName='list-control-addStorageButton'
             onClick={(e) => this.handleAddStorageButton(e)}
           >
-            <i className='fa fa-plus' /> Add Storage
+            <i className='fa fa-plus' /> Add Storage Location
           </button>
         </div>
       </div>
@@ -167,7 +167,7 @@ class StoragesTab extends React.Component {
                 <option value='FILESYSTEM'>File System</option>
               </select>
               <div styleName='addStorage-body-section-type-description'>
-                3rd party cloud integration:
+                Setting up 3rd-party cloud storage integration:{' '}
                 <a href='https://github.com/BoostIO/Boostnote/wiki/Cloud-Syncing-and-Backup'
                   onClick={(e) => this.handleLinkClick(e)}
                 >Cloud-Syncing-and-Backup</a>
@@ -196,7 +196,7 @@ class StoragesTab extends React.Component {
           <div styleName='addStorage-body-control'>
             <button styleName='addStorage-body-control-createButton'
               onClick={(e) => this.handleAddStorageCreateButton(e)}
-            >Create</button>
+            >Add</button>
             <button styleName='addStorage-body-control-cancelButton'
               onClick={(e) => this.handleAddStorageCancelButton(e)}
             >Cancel</button>

browser/main/modals/PreferencesModal/Tab.styl

@@ -20,3 +20,8 @@ $tab--dark-text-color = #E5E5E5
 body[data-theme="dark"]
   .header
     color $tab--dark-text-color
+
+haveToSave()
+  color #FFA500
+  font-size 10px
+  margin-top 3px

browser/main/modals/PreferencesModal/UiTab.js

@@ -7,11 +7,11 @@ import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
 import ReactCodeMirror from 'react-codemirror'
 import CodeMirror from 'codemirror'
+import 'codemirror-mode-elixir'
+import _ from 'lodash'
 
 const OSX = global.process.platform === 'darwin'
 
-import _ from 'lodash'
-
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 
@@ -62,6 +62,7 @@ class UiTab extends React.Component {
       ui: {
         theme: this.refs.uiTheme.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
+        confirmDeletion: this.refs.confirmDeletion.checked,
         disableDirectWrite: this.refs.uiD2w != null
           ? this.refs.uiD2w.checked
           : false
@@ -72,9 +73,11 @@ class UiTab extends React.Component {
         fontFamily: this.refs.editorFontFamily.value,
         indentType: this.refs.editorIndentType.value,
         indentSize: this.refs.editorIndentSize.value,
+        displayLineNumbers: this.refs.editorDisplayLineNumbers.checked,
         switchPreview: this.refs.editorSwitchPreview.value,
         keyMap: this.refs.editorKeyMap.value,
-        scrollPastEnd: this.refs.scrollPastEnd.checked
+        scrollPastEnd: this.refs.scrollPastEnd.checked,
+        fetchUrlTitle: this.refs.editorFetchUrlTitle.checked
       },
       preview: {
         fontSize: this.refs.previewFontSize.value,
@@ -84,7 +87,8 @@ class UiTab extends React.Component {
         latexInlineOpen: this.refs.previewLatexInlineOpen.value,
         latexInlineClose: this.refs.previewLatexInlineClose.value,
         latexBlockOpen: this.refs.previewLatexBlockOpen.value,
-        latexBlockClose: this.refs.previewLatexBlockClose.value
+        latexBlockClose: this.refs.previewLatexBlockClose.value,
+        scrollPastEnd: this.refs.previewScrollPastEnd.checked
       }
     }
 
@@ -93,8 +97,19 @@ class UiTab extends React.Component {
     if (newCodemirrorTheme !== codemirrorTheme) {
       checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(' ')[0]}.css`)
     }
-
-    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })
+    this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme }, () => {
+      const {ui, editor, preview} = this.props.config
+      this.currentConfig = {ui, editor, preview}
+      if (_.isEqual(this.currentConfig, this.state.config)) {
+        this.props.haveToSave()
+      } else {
+        this.props.haveToSave({
+          tab: 'UI',
+          type: 'warning',
+          message: 'You have to save!'
+        })
+      }
+    })
   }
 
   handleSaveUIClick (e) {
@@ -111,6 +126,7 @@ class UiTab extends React.Component {
       config: newConfig
     })
     this.clearMessage()
+    this.props.haveToSave()
   }
 
   clearMessage () {
@@ -135,10 +151,10 @@ class UiTab extends React.Component {
     return (
       <div styleName='root'>
         <div styleName='group'>
-          <div styleName='group-header'>UI</div>
+          <div styleName='group-header'>Interface</div>
 
           <div styleName='group-section'>
-            Color Theme
+            Interface Theme
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -161,6 +177,16 @@ class UiTab extends React.Component {
               Show &quot;Saved to Clipboard&quot; notification when copying
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.confirmDeletion}
+                ref='confirmDeletion'
+                type='checkbox'
+              />&nbsp;
+              Show a confirmation dialog when deleting notes
+            </label>
+          </div>
           {
             global.process.platform === 'win32'
             ? <div styleName='group-checkBoxSection'>
@@ -170,7 +196,7 @@ class UiTab extends React.Component {
                   refs='uiD2w'
                   disabled={OSX}
                   type='checkbox'
-                />
+                />&nbsp;
                 Disable Direct Write(It will be applied after restarting)
               </label>
             </div>
@@ -258,6 +284,7 @@ class UiTab extends React.Component {
                 onChange={(e) => this.handleUIChange(e)}
               >
                 <option value='BLUR'>When Editor Blurred</option>
+                <option value='DBL_CLICK'>When Editor Blurred, Edit On Double Click</option>
                 <option value='RIGHTCLICK'>On Right Click</option>
               </select>
             </div>
@@ -280,6 +307,17 @@ class UiTab extends React.Component {
             </div>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.displayLineNumbers}
+                ref='editorDisplayLineNumbers'
+                type='checkbox'
+              />&nbsp;
+              Show line numbers in the editor
+            </label>
+          </div>
+
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -291,6 +329,17 @@ class UiTab extends React.Component {
             </label>
           </div>
 
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.editor.fetchUrlTitle}
+                ref='editorFetchUrlTitle'
+                type='checkbox'
+              />&nbsp;
+              Bring in web page title when pasting URL on editor
+            </label>
+          </div>
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
@@ -333,6 +382,16 @@ class UiTab extends React.Component {
               </select>
             </div>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.preview.scrollPastEnd}
+                ref='previewScrollPastEnd'
+                type='checkbox'
+              />&nbsp;
+              Allow preview to scroll past the last line
+            </label>
+          </div>
           <div styleName='group-checkBoxSection'>
             <label>
               <input onChange={(e) => this.handleUIChange(e)}
@@ -412,7 +471,8 @@ UiTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
-  dispatch: PropTypes.func
+  dispatch: PropTypes.func,
+  haveToSave: PropTypes.func
 }
 
 export default CSSModules(UiTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
 import HotkeyTab from './HotkeyTab'
 import UiTab from './UiTab'
@@ -11,13 +10,16 @@ import ModalEscButton from 'browser/components/ModalEscButton'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './PreferencesModal.styl'
 import RealtimeNotification from 'browser/components/RealtimeNotification'
+import _ from 'lodash'
 
 class Preferences extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      currentTab: 'STORAGES'
+      currentTab: 'STORAGES',
+      UIAlert: '',
+      HotkeyAlert: ''
     }
   }
 
@@ -58,6 +60,7 @@ class Preferences extends React.Component {
           <HotkeyTab
             dispatch={dispatch}
             config={config}
+            haveToSave={alert => this.setState({HotkeyAlert: alert})}
           />
         )
       case 'UI':
@@ -65,6 +68,7 @@ class Preferences extends React.Component {
           <UiTab
             dispatch={dispatch}
             config={config}
+            haveToSave={alert => this.setState({UIAlert: alert})}
           />
         )
       case 'CROWDFUNDING':
@@ -90,23 +94,29 @@ class Preferences extends React.Component {
   }
 
   getContentBoundingBox () {
-    const node = ReactDOM.findDOMNode(this.refs.content)
-    return node.getBoundingClientRect()
+    return this.refs.content.getBoundingClientRect()
+  }
+
+  haveToSaveNotif (type, message) {
+    return (
+      <p styleName={`saving--${type}`}>{message}</p>
+    )
   }
 
   render () {
     const content = this.renderContent()
 
     const tabs = [
-      {target: 'STORAGES', label: 'Storages'},
-      {target: 'HOTKEY', label: 'Hotkey'},
-      {target: 'UI', label: 'UI'},
-      {target: 'INFO', label: 'Community / Info'},
+      {target: 'STORAGES', label: 'Storage'},
+      {target: 'HOTKEY', label: 'Hotkeys', Hotkey: this.state.HotkeyAlert},
+      {target: 'UI', label: 'Interface', UI: this.state.UIAlert},
+      {target: 'INFO', label: 'About'},
       {target: 'CROWDFUNDING', label: 'Crowdfunding'}
     ]
 
     const navButtons = tabs.map((tab) => {
       const isActive = this.state.currentTab === tab.target
+      const isUiHotkeyTab = _.isObject(tab[tab.label]) && tab.label === tab[tab.label].tab
       return (
         <button styleName={isActive
             ? 'nav-button--active'
@@ -118,6 +128,7 @@ class Preferences extends React.Component {
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
+          {isUiHotkeyTab ? this.haveToSaveNotif(tab[tab.label].type, tab[tab.label].message) : null}
         </button>
       )
     })

browser/main/store.js

@@ -87,8 +87,13 @@ function data (state = defaultDataMap(), action) {
           state.trashedSet = new Set(state.trashedSet)
           if (note.isTrashed) {
             state.trashedSet.add(uniqueKey)
+            state.starredSet.delete(uniqueKey)
           } else {
             state.trashedSet.delete(uniqueKey)
+
+            if (note.isStarred) {
+              state.starredSet.add(uniqueKey)
+            }
           }
         }
 
@@ -349,6 +354,11 @@ function data (state = defaultDataMap(), action) {
       state.storageMap = new Map(state.storageMap)
       state.storageMap.set(action.storage.key, action.storage)
       return state
+    case 'EXPORT_FOLDER':
+      state = Object.assign({}, state)
+      state.storageMap = new Map(state.storageMap)
+      state.storageMap.set(action.storage.key, action.storage)
+      return state
     case 'DELETE_FOLDER':
       {
         state = Object.assign({}, state)

browser/styles/finder/index.styl

@@ -1,129 +0,0 @@
-@import '../../../node_modules/nib/lib/nib'
-@import '../vars'
-@import '../mixins/*'
-global-reset()
-@import '../shared/*'
-@import '../theme/*'
-
-iptBgColor = #E6E6E6
-iptFocusBorderColor = #369DCD
-
-DEFAULT_FONTS = 'Lato', 'MS Gothic', 'Malgun Gothic', 'Sans-serif'
-
-body
-  font-family DEFAULT_FONTS
-  color textColor
-  font-size fontSize
-  width 100%
-  height 100%
-  overflow hidden
-button, input
-  font-family DEFAULT_FONTS
-
-.Finder
-  absolute top bottom left right
-  .FinderInput
-    padding 11px
-    margin 0 auto
-    height 55px
-    box-sizing border-box
-    border-bottom solid 1px borderColor
-    background-color iptBgColor
-    z-index 200
-    input
-      display block
-      width 100%
-      border solid 1px borderColor
-      padding 0 10px
-      font-size 1em
-      height 33px
-      border-radius 5px
-      box-sizing border-box
-      border-radius 5px
-      &:focus, &.focus
-        border-color iptFocusBorderColor
-        outline none
-  .FinderList
-    absolute left bottom
-    top 55px
-    border-right solid 1px borderColor
-    box-sizing border-box
-    width 250px
-    overflow-y auto
-    z-index 0
-    user-select none
-    &>ul>li
-      .articleItem
-        padding 10px
-        border solid 2px transparent
-        box-sizing border-box
-        cursor pointer
-        white-space nowrap
-        overflow-x hidden
-        text-overflow ellipsis
-      .divider
-        box-sizing border-box
-        border-bottom solid 1px borderColor
-      &.active
-        .articleItem
-          border-color brandColor
-
-  .FinderDetail
-    absolute right bottom
-    top 55px
-    left 250px
-    box-shadow 0px 0px 10px 0 #CCC
-    z-index 100
-    .header
-      absolute top left right
-      height 55px
-      box-sizing border-box
-      padding 0 10px
-      border-bottom solid 1px borderColor
-      line-height 55px
-      font-size 18px
-      white-space nowrap
-      text-overflow ellipsis
-      overflow-x hidden
-      clearfix()
-      .left
-        float left
-      .right
-        float right
-        button
-          border-radius 16.5px
-          cursor pointer
-          height 33px
-          width 33px
-          border none
-          margin-right 5px
-          font-size 18px
-          color inactiveTextColor
-          background-color transparent
-          padding 0
-          .tooltip
-            tooltip()
-          &.clipboardBtn .tooltip
-            margin-left -160px
-            margin-top 25px
-          &:hover
-            color textColor
-            .tooltip
-              opacity 1
-    .content
-      position absolute
-      top 55px
-      padding 10px
-      bottom 0
-      left 0
-      right 0
-      box-sizing border-box
-      overflow-y auto
-      .MarkdownPreview
-        marked()
-        &.empty
-          color lighten(inactiveTextColor, 10%)
-          user-select none
-          font-size 14px
-      .CodeEditor
-        absolute top bottom left right

browser/styles/index.styl

@@ -46,6 +46,7 @@ tooltip()
 // UI Input
 $ui-input--focus-borderColor = #369DCD
 $ui-input--disabled-backgroundColor = #DDD
+$ui-input--create-folder-modal = #C9C9C9
 
 // Parts
 $ui-favorite-star-button-color = #FFC216
@@ -187,7 +188,6 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonRight()
-  position absolute
   width 34px
   height 34px
   border-radius 17px
@@ -339,4 +339,12 @@ $ui-solarized-dark-button-backgroundColor = #002b36
 $ui-solarized-dark-button--active-color = #93a1a1
 $ui-solarized-dark-button--active-backgroundColor = #073642
 $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
-$ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+$ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
+
+modalSolarizedDark()
+  position relative
+  z-index $modal-z-index
+  width 100%
+  background-color $ui-solarized-dark-backgroundColor
+  overflow hidden
+  border-radius $modal-border-radius

browser/styles/theme/dark.styl

@@ -378,52 +378,10 @@ body[data-theme="dark"]
                 &:hover
                   color themeDarkFocusButton
 
-  .Finder
-    .FinderInput
-      color themeDarkText
-      border-color themeDarkBorder
-      background-color themeDarkBackground
-
-      input
-        color themeDarkText
-        border-color lighten(themeDarkBackground, 10%)
-        background-color lighten(themeDarkBackground, 10%)
-
-        &:focus
-          border-color themeDarkTopicColor
-
-    .FinderList
-      color themeDarkText
-      border-color themeDarkBorder
-      background-color themeDarkList
-
-      .divider
-        border-color themeDarkBorder
-
-    .FinderDetail
-      color themeDarkText
-      border-color themeDarkBorder
-      background-color themeDarkPreview
-      box-shadow 0px 0px 10px 0 darken(themeDarkBorder, 20%);
-
-      .header
-        border-color themeDarkBorder
-
-        .right
-          .clipboardBtn
-            transition 0.1s
-
-            &:hover
-              color themeDarkFocusButton
-
-            .tooltip
-              background-color themeDarkTooltip
-
   .ArticleDetail-panel
     border-radius 0
 
   // Markdown Preview
-  .Finder .FinderDetail .content,
   .ArticleDetail .ArticleDetail-panel .ArticleEditor
     .MarkdownPreview
       color themeDarkText

contributing.md

@@ -9,7 +9,7 @@ Thank you for your help in advance.
 
 ### 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 BoostIO.
 
 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.
@@ -27,7 +27,7 @@ Because GPL v3 is too strict to be compatible with any other License, We thought
 
 ### Об авторских правах Pull Request
 
-Если вы делаете pull request, значит вы согласны передать авторские права на изменения кода в Maisin&Co.
+Если вы делаете pull request, значит вы согласны передать авторские права на изменения кода в BoostIO.
 
 Это не означает, что Boostnote станет платным приложением. Если мы захотим заработать немного денег, мы найдем другой способ. Например, использование облачного хранилища, интеграцией мобильных приложений или другими специальными функциями.
 Так как лицензия GPL v3 слишком строгая, чтобы быть совместимой с любой другой лицензией, мы думаем, что нужно заменить лицензию на более свободную (например, BSD, MIT).
@@ -45,7 +45,7 @@ Because GPL v3 is too strict to be compatible with any other License, We thought
 
 ### Pull Request의 저작권에 관하여
 
-당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 Maisin&Co에 양도한다는 것에 동의한다는 의미입니다.
+당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다.
 
 이것은 Boostnote가 유료화가 되는 것을 의미하는 건 아닙니다. 만약 우리가 자금이 필요하다면, 우리는 클라우드 연동, 모바일 앱 통합 혹은 특수한 기능 같은 것을 사용해 수입 창출을 시도할 것입니다.
 GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무 엄격하므로, 우리는 BSD, MIT 라이센스와 같은 더 자유로운 라이센스로 교체하는 것을 생각하고 있습니다.
@@ -63,7 +63,7 @@ GPL v3 라이센스는 다른 라이센스와 혼합해 사용하기엔 너무
 
 ### Pull requestの著作権について
 
-Pull requestをすることはその変化分のコードの著作権をMaisin&Co.に譲渡することに同意することになります。
+Pull requestをすることはその変化分のコードの著作権をBoostIOに譲渡することに同意することになります。
 
 アプリケーションのLicenseをいつでも変える選択肢を残したいと思うからです。
 これはいずれかBoostnoteが有料の商用アプリになる可能性がある話ではありません。
@@ -83,7 +83,7 @@ Pull requestをすることはその変化分のコードの著作権をMaisin&C
 感谢您对我们的支持。  
 
 ### 关于您提供的Pull Request的著作权（版权）问题
-如果您提供了一个Pull Request，这表示您将您所修改的代码的著作权移交给Maisin&Co。  
+如果您提供了一个Pull Request，这表示您将您所修改的代码的著作权移交给BoostIO。  
 
 这并不表示Boostnote会成为一个需要付费的软件。如果我们想获得收益，我们会尝试一些其他的方法，比如说云存储、绑定手机软件等。  
 因为GPLv3过于严格，不能和其他的一些协议兼容，所以我们有可能在将来会把BoostNote的协议改为一些较为宽松的协议，比如说BSD、MIT。  

index.js

@@ -4,11 +4,6 @@ const path = require('path')
 
 var error = null
 
-function isFinderCalled () {
-  var argv = process.argv.slice(1)
-  return argv.some((arg) => arg.match(/--finder/))
-}
-
 function execMainApp () {
   const appRootPath = path.join(process.execPath, '../..')
   const updateDotExePath = path.join(appRootPath, 'Update.exe')
@@ -78,8 +73,4 @@ function execMainApp () {
   require('./lib/main-app')
 }
 
-if (isFinderCalled()) {
-  require('./lib/finder-app')
-} else {
-  execMainApp()
-}
+execMainApp()

lib/finder-app.js

@@ -1,14 +0,0 @@
-const electron = require('electron')
-const app = electron.app
-
-app.on('ready', function () {
-  if (process.platform === 'darwin') {
-    app.dock.hide()
-  }
-
-  /* eslint-disable */
-  finderWindow = require('./finder-window')
-  /* eslint-enable */
-})
-
-module.exports = app

lib/finder-window.js

@@ -1,101 +0,0 @@
-const electron = require('electron')
-const { app } = electron
-const BrowserWindow = electron.BrowserWindow
-const Menu = electron.Menu
-const MenuItem = electron.MenuItem
-const Tray = electron.Tray
-const path = require('path')
-
-var config = {
-  width: 840,
-  height: 540,
-  show: false,
-  frame: false,
-  resizable: false,
-  zoomFactor: 1.0,
-  webPreferences: {
-    blinkFeatures: 'OverlayScrollbars'
-  },
-  skipTaskbar: true,
-  standardWindow: false
-}
-
-if (process.platform === 'darwin') {
-  config['always-on-top'] = true
-}
-
-var finderWindow = new BrowserWindow(config)
-
-var url = path.resolve(__dirname, './finder.html')
-
-finderWindow.loadURL('file://' + url)
-finderWindow.setSkipTaskbar(true)
-
-if (process.platform === 'darwin') {
-  finderWindow.setVisibleOnAllWorkspaces(true)
-}
-
-finderWindow.on('blur', function () {
-  hideFinder()
-})
-
-finderWindow.on('close', function (e) {
-  e.preventDefault()
-  finderWindow.hide()
-})
-
-var trayIcon = process.platform === 'darwin' || process.platform === 'win32'
-  ? path.join(__dirname, '../resources/tray-icon-default.png')
-  : path.join(__dirname, '../resources/tray-icon.png')
-var appIcon = new Tray(trayIcon)
-appIcon.setToolTip('Boostnote')
-if (process.platform === 'darwin') {
-  appIcon.setPressedImage(path.join(__dirname, '../resources/tray-icon-dark.png'))
-}
-
-var trayMenu = new Menu()
-trayMenu.append(new MenuItem({
-  label: 'Open Main window',
-  click: function () {
-    finderWindow.webContents.send('open-main-from-tray')
-  }
-}))
-
-if (process.env.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon') {
-  trayMenu.append(new MenuItem({
-    label: 'Open Finder window',
-    click: function () {
-      finderWindow.webContents.send('open-finder-from-tray')
-    }
-  }))
-}
-
-trayMenu.append(new MenuItem({
-  label: 'Quit',
-  click: function () {
-    finderWindow.webContents.send('quit-from-tray')
-  }
-}))
-
-appIcon.setContextMenu(trayMenu)
-appIcon.on('click', function (e) {
-  e.preventDefault()
-  appIcon.popUpContextMenu(trayMenu)
-})
-
-function hideFinder () {
-  if (process.platform === 'win32') {
-    finderWindow.minimize()
-    return
-  }
-  if (process.platform === 'darwin') {
-    Menu.sendActionToFirstResponder('hide:')
-  }
-  finderWindow.hide()
-}
-
-app.on('before-quit', function (e) {
-  finderWindow.removeAllListeners()
-})
-
-module.exports = finderWindow