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

v0.8.12

.babelrc

@@ -1,20 +1,14 @@
 {
-  "stage": 0,
+  "presets": ["react", "es2015"],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": {
-          "transforms": [{
-            "transform": "react-transform-hmr",
-            "imports": ["react"],
-            "locals": ["module"]
-          }, {
-            "transform": "react-transform-catch-errors",
-            "imports": ["react", "redbox-react"]
-          }]
-        }
-      }
+      "presets": ["react-hmre"]
+    },
+    "test": {
+      "presets": ["react", "es2015"],
+      "plugins": [
+        [ "babel-plugin-webpack-alias", { "config": "${PWD}/webpack.config.js" } ]
+      ]
     }
   }
 }

.eslintignore

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

.eslintrc

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

.gitignore

@@ -1,6 +1,10 @@
+.DS_Store
 .env
+Desktop.ini
+Thumbs.db
 node_modules/*
 !node_modules/boost
-Boost-darwin-x64/
-backup/
-compiled
+/dist
+/compiled
+/secret
+*.log

.gitmodules

@@ -1,4 +0,0 @@
-[submodule "submodules/ace"]
-	path = submodules/ace
-	url = https://github.com/ajaxorg/ace-builds.git
-	branch = master

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - 'stable'
+  - 'lts/*'
+
+script: npm run lint && npm run test

Backers.md

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

ISSUE_TEMPLATE.md

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

LICENSE

@@ -0,0 +1,18 @@
+GPL-3.0
+
+Boostnote - an open source note-taking app made for programmers just like you.
+
+Copyright (C) 2017 Maisin&Co., Inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.

appdmg.json

@@ -0,0 +1,11 @@
+{
+  "title": "Boostnote",
+  "icon": "resources/dmg.icns",
+  "background": "resources/boostnote-install.png",
+  "icon-size": 80,
+  "contents": [
+    { "x": 448, "y": 344, "type": "link", "path": "/Applications" },
+    { "x": 192, "y": 344, "type": "file", "path": "dist/Boostnote-darwin-x64/Boostnote.app" }
+  ]
+
+}

atom-lib/finder-window.js

@@ -1,30 +0,0 @@
-const electron = require('electron')
-const BrowserWindow = electron.BrowserWindow
-const path = require('path')
-
-var finderWindow = new BrowserWindow({
-  width: 640,
-  height: 400,
-  show: false,
-  frame: false,
-  resizable: false,
-  'zoom-factor': 1.0,
-  'always-on-top': true,
-  'web-preferences': {
-    'overlay-scrollbars': true,
-    'skip-taskbar': true
-  },
-  'standard-window': false
-})
-
-var url = path.resolve(__dirname, '../browser/finder/index.html')
-
-finderWindow.loadURL('file://' + url)
-
-finderWindow.on('blur', function () {
-  finderWindow.hide()
-})
-
-finderWindow.setVisibleOnAllWorkspaces(true)
-
-module.exports = finderWindow

atom-lib/main-window.js

@@ -1,25 +0,0 @@
-const electron = require('electron')
-const BrowserWindow = electron.BrowserWindow
-const path = require('path')
-
-var mainWindow = new BrowserWindow({
-  width: 1080,
-  height: 720,
-  'zoom-factor': 1.0,
-  'web-preferences': {
-    'overlay-scrollbars': true
-  },
-  'standard-window': false
-})
-
-const url = path.resolve(__dirname, '../browser/main/index.html')
-
-mainWindow.loadURL('file://' + url)
-
-mainWindow.setVisibleOnAllWorkspaces(true)
-
-mainWindow.webContents.on('new-window', function (e) {
-  e.preventDefault()
-})
-
-module.exports = mainWindow

atom-lib/menu-template.js

@@ -1,122 +0,0 @@
-const electron = require('electron')
-const BrowserWindow = electron.BrowserWindow
-
-module.exports = [
-  {
-    label: 'Electron',
-    submenu: [
-      {
-        label: 'About Boost',
-        selector: 'orderFrontStandardAboutPanel:'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        label: 'Services',
-        submenu: []
-      },
-      {
-        type: 'separator'
-      },
-      {
-        label: 'Hide Boost',
-        accelerator: 'Command+H',
-        selector: 'hide:'
-      },
-      {
-        label: 'Hide Others',
-        accelerator: 'Command+Shift+H',
-        selector: 'hideOtherApplications:'
-      },
-      {
-        label: 'Show All',
-        selector: 'unhideAllApplications:'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        label: 'Quit',
-        accelerator: 'Command+Q',
-        selector: 'terminate:'
-      }
-    ]
-  },
-  {
-    label: 'Edit',
-    submenu: [
-      {
-        label: 'Undo',
-        accelerator: 'Command+Z',
-        selector: 'undo:'
-      },
-      {
-        label: 'Redo',
-        accelerator: 'Shift+Command+Z',
-        selector: 'redo:'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        label: 'Cut',
-        accelerator: 'Command+X',
-        selector: 'cut:'
-      },
-      {
-        label: 'Copy',
-        accelerator: 'Command+C',
-        selector: 'copy:'
-      },
-      {
-        label: 'Paste',
-        accelerator: 'Command+V',
-        selector: 'paste:'
-      },
-      {
-        label: 'Select All',
-        accelerator: 'Command+A',
-        selector: 'selectAll:'
-      }
-    ]
-  },
-  {
-    label: 'View',
-    submenu: [
-      {
-        label: 'Reload',
-        accelerator: 'Command+R',
-        click: function () {
-          BrowserWindow.getFocusedWindow().reload()
-        }
-      }
-    ]
-  },
-  {
-    label: 'Window',
-    submenu: [
-      {
-        label: 'Minimize',
-        accelerator: 'Command+M',
-        selector: 'performMiniaturize:'
-      },
-      {
-        label: 'Close',
-        accelerator: 'Command+W',
-        selector: 'performClose:'
-      },
-      {
-        type: 'separator'
-      },
-      {
-        label: 'Bring All to Front',
-        selector: 'arrangeInFront:'
-      }
-    ]
-  },
-  {
-    label: 'Help',
-    submenu: []
-  }
-]

browser/components/CodeEditor.js

@@ -0,0 +1,247 @@
+import React, { PropTypes } from 'react'
+import _ from 'lodash'
+import CodeMirror from 'codemirror'
+import path from 'path'
+import copyImage from 'browser/main/lib/dataApi/copyImage'
+
+CodeMirror.modeURL = '../node_modules/codemirror/mode/%N/%N.js'
+
+const defaultEditorFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
+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
+  }
+}
+
+export default class CodeEditor extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.changeHandler = (e) => this.handleChange(e)
+    this.blurHandler = (editor, e) => {
+      if (e == null) return null
+      let el = e.relatedTarget
+      while (el != null) {
+        if (el === this.refs.root) {
+          return
+        }
+        el = el.parentNode
+      }
+      this.props.onBlur != null && this.props.onBlur(e)
+    }
+    this.loadStyleHandler = (e) => {
+      this.editor.refresh()
+    }
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+    this.editor = CodeMirror(this.refs.root, {
+      value: this.props.value,
+      lineNumbers: true,
+      lineWrapping: true,
+      theme: this.props.theme,
+      indentUnit: this.props.indentSize,
+      tabSize: this.props.indentSize,
+      indentWithTabs: this.props.indentType !== 'space',
+      keyMap: this.props.keyMap,
+      inputStyle: 'textarea',
+      dragDrop: false,
+      extraKeys: {
+        Tab: function (cm) {
+          const cursor = cm.getCursor()
+          const line = cm.getLine(cursor.line)
+          if (cm.somethingSelected()) cm.indentSelection('add')
+          else {
+            const tabs = cm.getOption('indentWithTabs')
+            if (line.trimLeft() === '- ' || line.trimLeft() === '* ' || line.trimLeft() === '+ ') {
+              cm.execCommand('goLineStart')
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+              cm.execCommand('goLineEnd')
+            } else {
+              if (tabs) {
+                cm.execCommand('insertTab')
+              } else {
+                cm.execCommand('insertSoftTab')
+              }
+            }
+          }
+        },
+        'Cmd-T': function (cm) {
+          // Do nothing
+        },
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        'Ctrl-C': (cm) => {
+          if (cm.getOption('keyMap').substr(0, 3) === 'vim') {
+            document.execCommand('copy')
+          }
+          return CodeMirror.Pass
+        }
+      }
+    })
+
+    this.setMode(this.props.mode)
+
+    this.editor.on('blur', this.blurHandler)
+    this.editor.on('change', this.changeHandler)
+
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.addEventListener('load', this.loadStyleHandler)
+  }
+
+  componentWillUnmount () {
+    this.editor.off('blur', this.blurHandler)
+    this.editor.off('change', this.changeHandler)
+    let editorTheme = document.getElementById('editorTheme')
+    editorTheme.removeEventListener('load', this.loadStyleHandler)
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    let needRefresh = false
+    if (prevProps.mode !== this.props.mode) {
+      this.setMode(this.props.mode)
+    }
+    if (prevProps.theme !== this.props.theme) {
+      this.editor.setOption('theme', this.props.theme)
+      // editor should be refreshed after css loaded
+    }
+    if (prevProps.fontSize !== this.props.fontSize) {
+      needRefresh = true
+    }
+    if (prevProps.fontFamily !== this.props.fontFamily) {
+      needRefresh = true
+    }
+    if (prevProps.keyMap !== this.props.keyMap) {
+      needRefresh = true
+    }
+
+    if (prevProps.indentSize !== this.props.indentSize) {
+      this.editor.setOption('indentUnit', this.props.indentSize)
+      this.editor.setOption('tabSize', this.props.indentSize)
+    }
+    if (prevProps.indentType !== this.props.indentType) {
+      this.editor.setOption('indentWithTabs', this.props.indentType !== 'space')
+    }
+
+    if (needRefresh) {
+      this.editor.refresh()
+    }
+  }
+
+  setMode (mode) {
+    let syntax = CodeMirror.findModeByName(pass(mode))
+    if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+
+    this.editor.setOption('mode', syntax.mime)
+    CodeMirror.autoLoadMode(this.editor, syntax.mode)
+  }
+
+  handleChange (e) {
+    this.value = this.editor.getValue()
+    if (this.props.onChange) {
+      this.props.onChange(e)
+    }
+  }
+
+  moveCursorTo (row, col) {
+  }
+
+  scrollToLine (num) {
+  }
+
+  focus () {
+    this.editor.focus()
+  }
+
+  blur () {
+    this.editor.blur()
+  }
+
+  reload () {
+    // Change event shouldn't be fired when switch note
+    this.editor.off('change', this.changeHandler)
+    this.value = this.props.value
+    this.editor.setValue(this.props.value)
+    this.editor.clearHistory()
+    this.editor.on('change', this.changeHandler)
+    this.editor.refresh()
+  }
+
+  setValue (value) {
+    let cursor = this.editor.getCursor()
+    this.editor.setValue(value)
+    this.editor.setCursor(cursor)
+  }
+
+  handleDropImage (e) {
+    e.preventDefault()
+    const imagePath = e.dataTransfer.files[0].path
+    const filename = path.basename(imagePath)
+
+    copyImage(imagePath, this.props.storageKey).then((imagePath) => {
+      const imageMd = `![${filename}](${path.join('/:storage', imagePath)})`
+      this.insertImageMd(imageMd)
+    })
+  }
+
+  insertImageMd (imageMd) {
+    const textarea = this.editor.getInputField()
+    const cm = this.editor
+    textarea.value = `${textarea.value.substr(0, textarea.selectionStart)}${imageMd}${textarea.value.substr(textarea.selectionEnd)}`
+  }
+
+  render () {
+    let { className, fontFamily, fontSize } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.length > 0
+      ? [fontFamily].concat(defaultEditorFontFamily)
+      : defaultEditorFontFamily
+    return (
+      <div
+        className={className == null
+          ? 'CodeEditor'
+          : `CodeEditor ${className}`
+        }
+        ref='root'
+        tabIndex='-1'
+        style={{
+          fontFamily: fontFamily.join(', '),
+          fontSize: fontSize
+        }}
+        onDrop={(e) => this.handleDropImage(e)}
+      />
+    )
+  }
+}
+
+CodeEditor.propTypes = {
+  value: PropTypes.string,
+  mode: PropTypes.string,
+  className: PropTypes.string,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  readOnly: PropTypes.bool
+}
+
+CodeEditor.defaultProps = {
+  readOnly: false,
+  theme: 'xcode',
+  keyMap: 'sublime',
+  fontSize: 14,
+  fontFamily: 'Monaco, Consolas',
+  indentSize: 4,
+  indentType: 'space'
+}

browser/components/MarkdownEditor.js

@@ -0,0 +1,283 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './MarkdownEditor.styl'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownPreview from 'browser/components/MarkdownPreview'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+const _ = require('lodash')
+
+class MarkdownEditor extends React.Component {
+  constructor (props) {
+    super(props)
+
+    // char codes for ctrl + w
+    this.escapeFromEditor = [17, 87]
+
+    // ctrl + shift + ;
+    this.supportMdSelectionBold = [16, 17, 186]
+
+    this.state = {
+      status: 'PREVIEW',
+      renderValue: props.value,
+      keyPressed: new Set(),
+      isLocked: false
+    }
+
+    this.lockEditorCode = () => this.handleLockEditor()
+  }
+
+  componentDidMount () {
+    this.value = this.refs.code.value
+    eventEmitter.on('editor:lock', this.lockEditorCode)
+  }
+
+  componentDidUpdate () {
+    this.value = this.refs.code.value
+  }
+
+  componentWillReceiveProps (props) {
+    if (props.value !== this.props.value) {
+      this.queueRendering(props.value)
+    }
+  }
+
+  componentWillUnmount () {
+    this.cancelQueue()
+    eventEmitter.off('editor:lock', this.lockEditorCode)
+  }
+
+  queueRendering (value) {
+    clearTimeout(this.renderTimer)
+    this.renderTimer = setTimeout(() => {
+      this.renderPreview(value)
+    }, 500)
+  }
+
+  cancelQueue () {
+    clearTimeout(this.renderTimer)
+  }
+
+  renderPreview (value) {
+    this.setState({
+      renderValue: value
+    })
+  }
+
+  handleChange (e) {
+    this.value = this.refs.code.value
+    this.props.onChange(e)
+  }
+
+  handleContextMenu (e) {
+    let { config } = this.props
+    if (config.editor.switchPreview === 'RIGHTCLICK') {
+      let newStatus = this.state.status === 'PREVIEW'
+        ? 'CODE'
+        : 'PREVIEW'
+      this.setState({
+        status: newStatus
+      }, () => {
+        if (newStatus === 'CODE') {
+          this.refs.code.focus()
+        } else {
+          this.refs.code.blur()
+          this.refs.preview.focus()
+        }
+        eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+      })
+    }
+  }
+
+  handleBlur (e) {
+    if (this.state.isLocked) return
+    this.setState({ keyPressed: new Set() })
+    let { config } = this.props
+    if (config.editor.switchPreview === 'BLUR') {
+      let cursorPosition = this.refs.code.editor.getCursor()
+      this.setState({
+        status: 'PREVIEW'
+      }, () => {
+        this.refs.preview.focus()
+        this.refs.preview.scrollTo(cursorPosition.line)
+      })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+    }
+  }
+
+  handlePreviewMouseDown (e) {
+    this.previewMouseDownedAt = new Date()
+  }
+
+  handlePreviewMouseUp (e) {
+    let { config } = this.props
+    if (config.editor.switchPreview === 'BLUR' && new Date() - this.previewMouseDownedAt < 200) {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+      eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    let idMatch = /checkbox-([0-9]+)/
+    let checkedMatch = /\[x\]/i
+    let uncheckedMatch = /\[ \]/
+    if (idMatch.test(e.target.getAttribute('id'))) {
+      let lineIndex = parseInt(e.target.getAttribute('id').match(idMatch)[1], 10) - 1
+      let lines = this.refs.code.value
+        .split('\n')
+
+      let targetLine = lines[lineIndex]
+
+      if (targetLine.match(checkedMatch)) {
+        lines[lineIndex] = targetLine.replace(checkedMatch, '[ ]')
+      }
+      if (targetLine.match(uncheckedMatch)) {
+        lines[lineIndex] = targetLine.replace(uncheckedMatch, '[x]')
+      }
+      this.refs.code.setValue(lines.join('\n'))
+    }
+  }
+
+  focus () {
+    if (this.state.status === 'PREVIEW') {
+      this.setState({
+        status: 'CODE'
+      }, () => {
+        this.refs.code.focus()
+      })
+    } else {
+      this.refs.code.focus()
+    }
+    eventEmitter.emit('topbar:togglelockbutton', this.state.status)
+  }
+
+  reload () {
+    this.refs.code.reload()
+    this.cancelQueue()
+    this.renderPreview(this.props.value)
+  }
+
+  handleKeyDown (e) {
+    if (this.state.status !== 'CODE') return false
+    const keyPressed = this.state.keyPressed
+    keyPressed.add(e.keyCode)
+    this.setState({ keyPressed })
+    let isNoteHandlerKey = (el) => { return keyPressed.has(el) }
+    if (keyPressed.size === this.escapeFromEditor.length &&
+        !this.state.isLocked && this.state.status === 'CODE' &&
+        this.escapeFromEditor.every(isNoteHandlerKey)) {
+      document.activeElement.blur()
+    }
+    if (keyPressed.size === this.supportMdSelectionBold.length && this.supportMdSelectionBold.every(isNoteHandlerKey)) {
+      this.addMdAroundWord('**')
+    }
+  }
+
+  addMdAroundWord (mdElement) {
+    if (this.refs.code.editor.getSelection()) {
+      return this.addMdAroundSelection(mdElement)
+    }
+    const currentCaret = this.refs.code.editor.getCursor()
+    const word = this.refs.code.editor.findWordAt(currentCaret)
+    const cmDoc = this.refs.code.editor.getDoc()
+    cmDoc.replaceRange(mdElement, word.anchor)
+    cmDoc.replaceRange(mdElement, { line: word.head.line, ch: word.head.ch + mdElement.length })
+  }
+
+  addMdAroundSelection (mdElement) {
+    this.refs.code.editor.replaceSelection(`${mdElement}${this.refs.code.editor.getSelection()}${mdElement}`)
+  }
+
+  handleKeyUp (e) {
+    const keyPressed = this.state.keyPressed
+    keyPressed.delete(e.keyCode)
+    this.setState({ keyPressed })
+  }
+
+  handleLockEditor () {
+    this.setState({ isLocked: !this.state.isLocked })
+  }
+
+  render () {
+    let { className, value, config, storageKey } = this.props
+
+    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
+
+    let previewStyle = {}
+    if (this.props.ignorePreviewPointerEvents) previewStyle.pointerEvents = 'none'
+
+    const cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+    const storage = _.find(cachedStorageList, {key: storageKey})
+    if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+
+    return (
+      <div className={className == null
+          ? 'MarkdownEditor'
+          : `MarkdownEditor ${className}`
+        }
+        onContextMenu={(e) => this.handleContextMenu(e)}
+        tabIndex='-1'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+        onKeyUp={(e) => this.handleKeyUp(e)}
+      >
+        <CodeEditor styleName={this.state.status === 'CODE'
+            ? 'codeEditor'
+            : 'codeEditor--hide'
+          }
+          ref='code'
+          mode='GitHub Flavored Markdown'
+          value={value}
+          theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
+          fontFamily={config.editor.fontFamily}
+          fontSize={editorFontSize}
+          indentType={config.editor.indentType}
+          indentSize={editorIndentSize}
+          storageKey={storageKey}
+          onChange={(e) => this.handleChange(e)}
+          onBlur={(e) => this.handleBlur(e)}
+        />
+        <MarkdownPreview styleName={this.state.status === 'PREVIEW'
+            ? 'preview'
+            : 'preview--hide'
+          }
+          style={previewStyle}
+          theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
+          fontSize={config.preview.fontSize}
+          fontFamily={config.preview.fontFamily}
+          codeBlockTheme={config.preview.codeBlockTheme}
+          codeBlockFontFamily={config.editor.fontFamily}
+          lineNumber={config.preview.lineNumber}
+          indentSize={editorIndentSize}
+          ref='preview'
+          onContextMenu={(e) => this.handleContextMenu(e)}
+          tabIndex='0'
+          value={this.state.renderValue}
+          onMouseUp={(e) => this.handlePreviewMouseUp(e)}
+          onMouseDown={(e) => this.handlePreviewMouseDown(e)}
+          onCheckboxClick={(e) => this.handleCheckboxClick(e)}
+          storagePath={storage.path}
+        />
+      </div>
+    )
+  }
+}
+
+MarkdownEditor.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(MarkdownEditor, styles)

browser/components/MarkdownEditor.styl

@@ -0,0 +1,27 @@
+.root
+  position relative
+
+.codeEditor
+  absolute top bottom left right
+
+.hide
+  z-index 0
+  opacity 0
+  pointer-events none
+
+.codeEditor--hide
+  @extend .codeEditor
+  @extend .hide
+
+.preview
+  display block
+  absolute top bottom left right
+  z-index 100
+  background-color white
+  height 100%
+  width 100%
+
+.preview--hide
+  @extend .preview
+  @extend .hide
+

browser/components/MarkdownPreview.js

@@ -0,0 +1,422 @@
+import React, { PropTypes } from 'react'
+import markdown from 'browser/lib/markdown'
+import _ from 'lodash'
+import CodeMirror from 'codemirror'
+import consts from 'browser/lib/consts'
+import Raphael from 'raphael'
+import flowchart from 'flowchart'
+import SequenceDiagram from 'js-sequence-diagrams'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+import fs from 'fs'
+import htmlTextHelper from 'browser/lib/htmlTextHelper'
+import copy from 'copy-to-clipboard'
+
+const { remote } = require('electron')
+const { app } = remote
+const path = require('path')
+const dialog = remote.dialog
+
+const markdownStyle = require('!!css!stylus?sourceMap!./markdown.styl')[0][1]
+const appPath = 'file://' + (process.env.NODE_ENV === 'production'
+  ? app.getAppPath()
+  : path.resolve())
+
+function buildStyle (fontFamily, fontSize, codeBlockFontFamily, lineNumber) {
+  return `
+@font-face {
+  font-family: 'Lato';
+  src: url('${appPath}/resources/fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       url('${appPath}/resources/fonts/Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+${markdownStyle}
+body {
+  font-family: ${fontFamily.join(', ')};
+  font-size: ${fontSize}px;
+}
+code {
+  font-family: ${codeBlockFontFamily.join(', ')};
+  background-color: rgba(0,0,0,0.04);
+  color: #CC305F;
+}
+.lineNumber {
+  ${lineNumber && 'display: block !important;'}
+  font-family: ${codeBlockFontFamily.join(', ')};
+}
+
+.clipboardButton {
+  color: rgba(147,147,149,0.8);;
+  fill: rgba(147,147,149,1);;
+  border-radius: 50%;
+  margin: 7px;
+  border: none;
+  background-color: transparent;
+  outline: none;
+  height: 32px;
+  width: 32px;
+  cursor: pointer;
+}
+
+.clipboardButton:hover {
+  transition: 0.2s;
+  color: #939395;
+  fill: #939395;
+  background-color: rgba(0,0,0,0.1);
+}
+
+h1, h2 {
+  border: none;
+}
+
+h1 {
+  padding-bottom: 4px;
+  margin: 1em 0 8px;
+}
+
+h2 {
+  padding-bottom: 0.2em;
+  margin: 1em 0 0.37em;
+}
+
+body p {
+  white-space: normal;
+}
+`
+}
+
+const { shell } = require('electron')
+const OSX = global.process.platform === 'darwin'
+
+const defaultFontFamily = ['helvetica', 'arial', 'sans-serif']
+if (!OSX) {
+  defaultFontFamily.unshift('\'Microsoft YaHei\'')
+  defaultFontFamily.unshift('meiryo')
+}
+const defaultCodeBlockFontFamily = ['Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', 'monospace']
+
+export default class MarkdownPreview extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.contextMenuHandler = (e) => this.handleContextMenu(e)
+    this.mouseDownHandler = (e) => this.handleMouseDown(e)
+    this.mouseUpHandler = (e) => this.handleMouseUp(e)
+    this.anchorClickHandler = (e) => this.handlePreviewAnchorClick(e)
+    this.checkboxClickHandler = (e) => this.handleCheckboxClick(e)
+    this.saveAsTextHandler = () => this.handleSaveAsText()
+    this.saveAsMdHandler = () => this.handleSaveAsMd()
+
+    this.linkClickHandler = this.handlelinkClick.bind(this)
+  }
+
+  handlePreviewAnchorClick (e) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    let anchor = e.target.closest('a')
+    let href = anchor.getAttribute('href')
+    if (_.isString(href) && href.match(/^#/)) {
+      let targetElement = this.refs.root.contentWindow.document.getElementById(href.substring(1, href.length))
+      if (targetElement != null) {
+        this.getWindow().scrollTo(0, targetElement.offsetTop)
+      }
+    } else {
+      shell.openExternal(href)
+    }
+  }
+
+  handleCheckboxClick (e) {
+    this.props.onCheckboxClick(e)
+  }
+
+  handleContextMenu (e) {
+    this.props.onContextMenu(e)
+  }
+
+  handleMouseDown (e) {
+    if (e.target != null) {
+      switch (e.target.tagName) {
+        case 'A':
+        case 'INPUT':
+          return null
+      }
+    }
+    if (this.props.onMouseDown != null) this.props.onMouseDown(e)
+  }
+
+  handleMouseUp (e) {
+    if (e.target != null && e.target.tagName === 'A') {
+      return null
+    }
+    if (this.props.onMouseUp != null) this.props.onMouseUp(e)
+  }
+
+  handleSaveAsText () {
+    this.exportAsDocument('txt')
+  }
+
+  handleSaveAsMd () {
+    this.exportAsDocument('md')
+  }
+
+  exportAsDocument (fileType) {
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: [fileType] }
+      ],
+      properties: ['openFile', 'createDirectory']
+    }
+    dialog.showSaveDialog(remote.getCurrentWindow(), options,
+    (filename) => {
+      if (filename) {
+        fs.writeFile(filename, this.props.value, (err) => {
+          if (err) throw err
+        })
+      }
+    })
+  }
+
+  componentDidMount () {
+    this.refs.root.setAttribute('sandbox', 'allow-scripts')
+    this.refs.root.contentWindow.document.body.addEventListener('contextmenu', this.contextMenuHandler)
+
+    this.refs.root.contentWindow.document.head.innerHTML = `
+      <style id='style'></style>
+      <link rel="stylesheet" href="${appPath}/node_modules/katex/dist/katex.min.css">
+      <link rel="stylesheet" href="${appPath}/node_modules/codemirror/lib/codemirror.css">
+      <link rel="stylesheet" id="codeTheme">
+    `
+    this.rewriteIframe()
+    this.applyStyle()
+
+    this.refs.root.contentWindow.document.addEventListener('mousedown', this.mouseDownHandler)
+    this.refs.root.contentWindow.document.addEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.addEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.addEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.on('export:save-text', this.saveAsTextHandler)
+    eventEmitter.on('export:save-md', this.saveAsMdHandler)
+  }
+
+  componentWillUnmount () {
+    this.refs.root.contentWindow.document.body.removeEventListener('contextmenu', this.contextMenuHandler)
+    this.refs.root.contentWindow.document.removeEventListener('mousedown', this.mouseDownHandler)
+    this.refs.root.contentWindow.document.removeEventListener('mouseup', this.mouseUpHandler)
+    this.refs.root.contentWindow.document.removeEventListener('drop', this.preventImageDroppedHandler)
+    this.refs.root.contentWindow.document.removeEventListener('dragover', this.preventImageDroppedHandler)
+    eventEmitter.off('export:save-text', this.saveAsTextHandler)
+    eventEmitter.off('export:save-md', this.saveAsMdHandler)
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.value !== this.props.value) this.rewriteIframe()
+    if (prevProps.fontFamily !== this.props.fontFamily ||
+      prevProps.fontSize !== this.props.fontSize ||
+      prevProps.codeBlockFontFamily !== this.props.codeBlockFontFamily ||
+      prevProps.codeBlockTheme !== this.props.codeBlockTheme ||
+      prevProps.lineNumber !== this.props.lineNumber ||
+      prevProps.theme !== this.props.theme) {
+      this.applyStyle()
+      this.rewriteIframe()
+    }
+  }
+
+  applyStyle () {
+    let { fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme } = this.props
+    fontFamily = _.isString(fontFamily) && fontFamily.trim().length > 0
+      ? [fontFamily].concat(defaultFontFamily)
+      : defaultFontFamily
+    codeBlockFontFamily = _.isString(codeBlockFontFamily) && codeBlockFontFamily.trim().length > 0
+      ? [codeBlockFontFamily].concat(defaultCodeBlockFontFamily)
+      : defaultCodeBlockFontFamily
+
+    this.setCodeTheme(codeBlockTheme)
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle(fontFamily, fontSize, codeBlockFontFamily, lineNumber, codeBlockTheme, lineNumber)
+  }
+
+  setCodeTheme (theme) {
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
+      ? theme
+      : 'elegant'
+    this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
+  }
+
+  rewriteIframe () {
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.anchorClickHandler)
+    })
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.removeEventListener('click', this.checkboxClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.removeEventListener('click', this.linkClickHandler)
+    })
+
+    let { value, theme, indentSize, codeBlockTheme, storagePath } = this.props
+
+    this.refs.root.contentWindow.document.body.setAttribute('data-theme', theme)
+
+    const codeBlocks = value.match(/(```)(.|[\n])*?(```)/g)
+    if (codeBlocks !== null) {
+      codeBlocks.forEach((codeBlock) => {
+        value = value.replace(codeBlock, htmlTextHelper.encodeEntities(codeBlock))
+      })
+    }
+    this.refs.root.contentWindow.document.body.innerHTML = markdown.render(value)
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.taskListItem'), (el) => {
+      el.parentNode.parentNode.style.listStyleType = 'none'
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.anchorClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('input[type="checkbox"]'), (el) => {
+      el.addEventListener('click', this.checkboxClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('a'), (el) => {
+      el.addEventListener('click', this.linkClickHandler)
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('img'), (el) => {
+      if (!/\/:storage/.test(el.src)) return
+      el.src = `file:///${path.join(storagePath, 'images', path.basename(el.src))}`
+    })
+
+    codeBlockTheme = consts.THEMES.some((_theme) => _theme === codeBlockTheme)
+      ? codeBlockTheme
+      : 'default'
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.code code'), (el) => {
+      let syntax = CodeMirror.findModeByName(el.className)
+      if (syntax == null) syntax = CodeMirror.findModeByName('Plain Text')
+      CodeMirror.requireMode(syntax.mode, () => {
+        let content = htmlTextHelper.decodeEntities(el.innerHTML)
+        const copyIcon = document.createElement('i')
+        copyIcon.innerHTML = '<button class="clipboardButton"><svg width="13" height="13" viewBox="0 0 1792 1792" ><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg></button>'
+        copyIcon.onclick = (e) => {
+          copy(content)
+          this.notify('Saved to Clipboard!', {
+            body: 'Paste it wherever you want!',
+            silent: true
+          })
+        }
+        el.parentNode.appendChild(copyIcon)
+        el.innerHTML = ''
+        el.parentNode.className += ` cm-s-${codeBlockTheme} CodeMirror`
+        CodeMirror.runMode(content, syntax.mime, el, {
+          tabSize: indentSize
+        })
+      })
+    })
+    let opts = {}
+    // if (this.props.theme === 'dark') {
+    //   opts['font-color'] = '#DDD'
+    //   opts['line-color'] = '#DDD'
+    //   opts['element-color'] = '#DDD'
+    //   opts['fill'] = '#3A404C'
+    // }
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        let diagram = flowchart.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, opts)
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'flowchart-error'
+        el.innerHTML = 'Flowchart parse error: ' + e.message
+      }
+    })
+
+    _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
+      Raphael.setWindow(this.getWindow())
+      try {
+        let diagram = SequenceDiagram.parse(htmlTextHelper.decodeEntities(el.innerHTML))
+        el.innerHTML = ''
+        diagram.drawSVG(el, {theme: 'simple'})
+        _.forEach(el.querySelectorAll('a'), (el) => {
+          el.addEventListener('click', this.anchorClickHandler)
+        })
+      } catch (e) {
+        console.error(e)
+        el.className = 'sequence-error'
+        el.innerHTML = 'Sequence diagram parse error: ' + e.message
+      }
+    })
+  }
+
+  focus () {
+    this.refs.root.focus()
+  }
+
+  getWindow () {
+    return this.refs.root.contentWindow
+  }
+
+  scrollTo (targetRow) {
+    let blocks = this.getWindow().document.querySelectorAll('body>[data-line]')
+
+    for (let index = 0; index < blocks.length; index++) {
+      let block = blocks[index]
+      let row = parseInt(block.getAttribute('data-line'))
+      if (row > targetRow || index === blocks.length - 1) {
+        block = blocks[index - 1]
+        block != null && this.getWindow().scrollTo(0, block.offsetTop)
+        break
+      }
+    }
+  }
+
+  preventImageDroppedHandler (e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  notify (title, options) {
+    if (global.process.platform === 'win32') {
+      options.icon = path.join('file://', global.__dirname, '../../resources/app.png')
+    }
+    return new window.Notification(title, options)
+  }
+
+  handlelinkClick (e) {
+    const noteHash = e.target.href.split('/').pop()
+    const regexIsNoteLink = /^(.{20})-(.{20})$/
+    if (regexIsNoteLink.test(noteHash)) {
+      eventEmitter.emit('list:jump', noteHash)
+    }
+  }
+
+  render () {
+    let { className, style, tabIndex } = this.props
+    return (
+      <iframe className={className != null
+          ? 'MarkdownPreview ' + className
+          : 'MarkdownPreview'
+        }
+        style={style}
+        tabIndex={tabIndex}
+        ref='root'
+      />
+    )
+  }
+}
+
+MarkdownPreview.propTypes = {
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  className: PropTypes.string,
+  value: PropTypes.string,
+  storagePath: PropTypes.string
+}

browser/components/ModalEscButton.js

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

browser/components/ModalEscButton.styl

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

browser/components/NoteItem.js

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

browser/components/NoteItem.styl

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

browser/components/NoteItemSimple.js

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

browser/components/NoteItemSimple.styl

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

browser/components/SideNavFilter.js

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

browser/components/SideNavFilter.styl

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

browser/components/SnippetTab.js

@@ -0,0 +1,132 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetTab.styl'
+import context from 'browser/lib/context'
+
+class SnippetTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isRenaming: false,
+      name: props.snippet.name
+    }
+  }
+
+  componentWillUpdate (nextProps) {
+    if (nextProps.snippet.name !== this.props.snippet.name) {
+      this.setState({
+        name: nextProps.snippet.name
+      })
+    }
+  }
+
+  handleClick (e) {
+    this.props.onClick(e)
+  }
+
+  handleContextMenu (e) {
+    context.popup([
+      {
+        label: 'Rename',
+        click: (e) => this.handleRenameClick(e)
+      }
+    ])
+  }
+
+  handleRenameClick (e) {
+    this.startRenaming()
+  }
+
+  handleNameInputBlur (e) {
+    this.handleRename()
+  }
+
+  handleNameInputChange (e) {
+    this.setState({
+      name: e.target.value
+    })
+  }
+
+  handleNameInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        this.handleRename()
+        break
+      case 27:
+        this.setState({
+          name: this.props.snippet.name,
+          isRenaming: false
+        })
+        break
+    }
+  }
+
+  handleRename () {
+    this.setState({
+      isRenaming: false
+    }, () => {
+      if (this.props.snippet.name !== this.state.name) {
+        this.props.onRename(this.state.name)
+      }
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.props.onDelete(e)
+  }
+
+  startRenaming () {
+    this.setState({
+      isRenaming: true
+    }, () => {
+      this.refs.name.focus()
+      this.refs.name.select()
+    })
+  }
+
+  render () {
+    let { isActive, snippet, isDeletable } = this.props
+    return (
+      <div styleName={isActive
+          ? 'root--active'
+          : 'root'
+        }
+      >
+        {!this.state.isRenaming
+          ? <button styleName='button'
+            onClick={(e) => this.handleClick(e)}
+            onDoubleClick={(e) => this.handleRenameClick(e)}
+            onContextMenu={(e) => this.handleContextMenu(e)}
+          >
+            {snippet.name.trim().length > 0
+              ? snippet.name
+              : <span styleName='button-unnamed'>
+                Unnamed
+              </span>
+            }
+          </button>
+          : <input styleName='input'
+            ref='name'
+            value={this.state.name}
+            onChange={(e) => this.handleNameInputChange(e)}
+            onBlur={(e) => this.handleNameInputBlur(e)}
+            onKeyDown={(e) => this.handleNameInputKeyDown(e)}
+          />
+        }
+        {isDeletable &&
+          <button styleName='deleteButton'
+            onClick={(e) => this.handleDeleteButtonClick(e)}
+          >
+            <i className='fa fa-times' />
+          </button>
+        }
+      </div>
+    )
+  }
+}
+
+SnippetTab.propTypes = {
+}
+
+export default CSSModules(SnippetTab, styles)

browser/components/SnippetTab.styl

@@ -0,0 +1,91 @@
+.root
+  position relative
+  flex 1
+  overflow hidden
+  &:hover
+    .deleteButton
+      color $ui-inactive-text-color
+      &:hover
+        background-color darken($ui-backgroundColor, 15%)
+      &:active
+        color white
+        background-color $ui-active-color
+
+.root--active
+  @extend .root
+  min-width 100px
+  border-bottom $ui-border
+
+.button
+  width 100%
+  height 29px
+  overflow ellipsis
+  text-align left
+  padding-right 30px
+  border none
+  background-color transparent
+  transition 0.15s
+  border-left 4px solid transparent
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+
+.deleteButton
+  position absolute
+  top 5px
+  height 20px
+  right 5px
+  width 20px
+  text-align center
+  border none
+  padding 0
+  color transparent
+  background-color transparent
+  border-radius 2px
+
+.input
+  height 29px
+  border $ui-active-color
+  padding 0 5px
+  width 100%
+  outline none
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color $ui-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .root--active
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      .deleteButton
+        color $ui-dark-inactive-text-color
+        &:hover
+          background-color darken($ui-dark-button--hover-backgroundColor, 15%)
+        &:active
+          color $ui-dark-text-color
+          background-color $ui-dark-button--active-backgroundColor
+
+  .button
+    border none
+    color $ui-dark-text-color
+    background-color transparent
+    transition color background-color 0.15s
+    border-left 4px solid transparent
+    &:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--hover-backgroundColor
+
+  .input
+    background-color $ui-dark-button--hover-backgroundColor
+    color $ui-dark-text-color

browser/components/StorageItem.js

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

browser/components/StorageItem.styl

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

browser/components/TodoListPercentage.js

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

browser/components/TodoListPercentage.styl

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

browser/components/markdown.styl

@@ -0,0 +1,318 @@
+global-reset()
+
+borderColor = #D0D0D0 // using
+highlightenBorderColor = darken(borderColor, 20%)
+invBorderColor = #404849
+brandBorderColor = #3FB399
+
+focusBorderColor = #369DCD
+
+buttonBorderColor = #4C4C4C
+
+lightButtonColor = #898989
+
+hoverBackgroundColor= transparentify(#444, 4%) // using
+
+inactiveTextColor = #888 // using
+textColor = #4D4D4D // using
+backgroundColor= white
+fontSize= 14px // using
+
+shadowColor= #C5C5C5
+
+invBackgroundColor = #4C4C4C
+invTextColor = white
+
+btnColor = #888
+btnHighlightenColor = #000
+
+brandColor = #2BAC8F
+
+popupShadow = 0 0 5px 0 #888
+
+
+tableHeadBgColor = white
+tableOddBgColor = #F9F9F9
+tableEvenBgColor = white
+
+facebookColor= #3b5998
+githubBtn= #201F1F
+
+// using
+successBackgroundColor= #E0F0D9
+successTextColor= #3E753F
+errorBackgroundColor= #F2DEDE
+errorTextColor= #A64444
+infoBackgroundColor= #D9EDF7
+infoTextColor= #34708E
+
+popupZIndex= 500
+
+body
+  font-size 16px
+  padding 15px
+  font-family helvetica, arial, sans-serif
+  line-height 1.6
+  overflow-x hidden
+  background-color $ui-noteDetail-backgroundColor
+  .katex
+    font 400 1.2em 'KaTeX_Main'
+    line-height 1.2em
+    white-space nowrap
+    text-indent 0
+  .katex .mfrac>.vlist>span:nth-child(2)
+    top 0 !important
+  .katex-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    margin -5px
+    border-radius 5px
+  .flowchart-error, .sequence-error
+    background-color errorBackgroundColor
+    color errorTextColor
+    padding 5px
+    border-radius 5px
+    justify-content left
+li
+  label.taskListItem
+    margin-left -2em
+div.math-rendered
+  text-align center
+.math-failed
+  background-color alpha(red, 0.1)
+  color darken(red, 15%)
+  padding 5px
+  margin 5px 0
+  border-radius 5px
+sup
+  position relative
+  top -.4em
+  font-size 0.8em
+  vertical-align top
+sub
+  position relative
+  bottom -.4em
+  font-size 0.8em
+  vertical-align top
+a
+  color brandColor
+  text-decoration none
+  padding 5px
+  border-radius 5px
+  margin -5px
+  transition .1s
+  display inline-block
+  img
+    vertical-align sub
+  &:hover
+    color lighten(brandColor, 5%)
+    text-decoration underline
+    background-color alpha(#FFC95C, 0.3)
+  &:visited
+    color brandColor
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 15px 0
+h1, h2, h3, h4, h5, h6
+  font-weight bold
+h1
+  font-size 2.25em
+  padding-bottom 0.3em
+  line-height 1.2em
+  border-bottom solid 1px borderColor
+  margin 1em 0 0.44em
+  &:first-child
+    margin-top 0
+h2
+  font-size 1.75em
+  padding-bottom 0.3em
+  line-height 1.225em
+  border-bottom solid 1px borderColor
+  margin 1em 0 0.57em
+  &:first-child
+    margin-top 0
+h3
+  font-size 1.5em
+  line-height 1.43em
+  margin 1em 0 0.66em
+h4
+  font-size 1.25em
+  line-height 1.4em
+  margin 1em 0 0.8em
+h5
+  font-size 1em
+  line-height 1.4em
+  margin 1em 0 1em
+h6
+  font-size 1em
+  line-height 1.4em
+  margin 1em 0 1em
+  color #777
+p
+  line-height 1.6em
+  margin 0 0 1em
+  white-space pre-line
+img
+  max-width 100%
+strong, b
+  font-weight bold
+em, i
+  font-style italic
+s, del, strike
+  text-decoration line-through
+u
+  text-decoration underline
+blockquote
+  border-left solid 4px brandBorderColor
+  margin 0 0 1em
+  padding 0 25px
+ul
+  list-style-type disc
+  padding-left 2em
+  margin-bottom 1em
+  li
+    display list-item
+    p
+      margin 0
+  &>li>ul, &>li>ol
+    margin 0
+  &>li>ul
+    list-style-type circle
+    &>li>ul
+      list-style-type square
+ol
+  list-style-type decimal
+  padding-left 2em
+  margin-bottom 1em
+  li
+    display list-item
+    p
+      margin 0
+  &>li>ul, &>li>ol
+    margin 0
+code
+  padding 0.2em 0.4em
+  background-color #f7f7f7
+  border-radius 3px
+  font-size 1em
+  text-decoration none
+  margin-right 2px
+pre
+  padding 0.5em !important
+  border solid 1px #D1D1D1
+  border-radius 5px
+  overflow-x auto
+  margin 0 0 1em
+  display flex
+  line-height 1.4em
+  &.flowchart, &.sequence
+    display flex
+    justify-content center
+    background-color white
+  &.CodeMirror
+    height initial
+    &>code
+      flex 1
+      overflow-x auto
+  code
+    background-color inherit
+    margin 0
+    padding 0
+    border none
+    border-radius 0
+  &>span.lineNumber
+    display none
+    font-size 1em
+    padding 0.5em 0
+    margin -0.5em 0.5em -0.5em -0.5em
+    border-right 1px solid
+    text-align right
+    border-top-left-radius 4px
+    border-bottom-left-radius 4px
+    &.CodeMirror-gutters
+      position initial
+      top initial
+      left initial
+      min-height 0 !important
+    &>span
+      display block
+      padding 0 .5em 0
+table
+  display block
+  width 100%
+  margin 0 0 1em
+  thead
+    tr
+      background-color tableHeadBgColor
+    th
+      border-style solid
+      padding 6px 13px
+      line-height 1.6
+      border-width 1px 0 2px 1px
+      border-color borderColor
+      font-weight bold
+      &:last-child
+        border-right solid 1px borderColor
+  tbody
+    tr:nth-child(2n + 1)
+      background-color tableOddBgColor
+    tr:nth-child(2n)
+      background-color tableEvenBgColor
+    td
+      border-style solid
+      padding 6px 13px
+      line-height 1.6
+      border-width 0 0 1px 1px
+      border-color borderColor
+      &:last-child
+        border-right solid 1px borderColor
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkText = #f9f9f9
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+
+body[data-theme="dark"]
+  color themeDarkText
+  border-color themeDarkBorder
+  background-color themeDarkPreview
+  a:hover
+    background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+  code
+    color #EA6730
+    border-color darken(themeDarkBorder, 10%)
+    background-color lighten(themeDarkPreview, 5%)
+
+  pre
+    border-color lighten(#21252B, 20%)
+    code
+      background-color transparent
+
+  label.taskListItem
+    background-color themeDarkPreview
+  table
+    thead
+      tr
+        background-color themeDarkTableHead
+      th
+        border-color themeDarkTableBorder
+        &:last-child
+          border-right solid 1px themeDarkTableBorder
+    tbody
+      tr:nth-child(2n + 1)
+        background-color themeDarkTableOdd
+      tr:nth-child(2n)
+        background-color themeDarkTableEven
+      td
+        border-color themeDarkTableBorder
+        &:last-child
+          border-right solid 1px themeDarkTableBorder

browser/finder/FinderDetail.js

@@ -1,44 +0,0 @@
-import React, { PropTypes } from 'react'
-import CodeEditor from 'boost/components/CodeEditor'
-import MarkdownPreview from 'boost/components/MarkdownPreview'
-import ModeIcon from 'boost/components/ModeIcon'
-
-export default class FinderDetail extends React.Component {
-  render () {
-    let { activeArticle } = this.props
-
-    if (activeArticle != null) {
-      return (
-        <div className='FinderDetail'>
-          <div className='header'>
-            <div className='left'>
-            <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}
-            </div>
-            <div className='right'>
-              <button onClick={this.props.saveToClipboard} className='clipboardBtn'>
-                <i className='fa fa-clipboard fa-fw'/>
-                <span className='tooltip'>Copy to clipboard (Enter)</span>
-              </button>
-            </div>
-          </div>
-          <div className='content'>
-            {activeArticle.mode === 'markdown'
-              ? <MarkdownPreview content={activeArticle.content}/>
-              : <CodeEditor readOnly mode={activeArticle.mode} code={activeArticle.content}/>
-            }
-          </div>
-        </div>
-      )
-    }
-    return (
-      <div className='FinderDetail'>
-        <div className='nothing'>Nothing selected</div>
-      </div>
-    )
-  }
-}
-
-FinderDetail.propTypes = {
-  activeArticle: PropTypes.shape(),
-  saveToClipboard: PropTypes.func
-}

browser/finder/FinderInput.js

@@ -1,16 +0,0 @@
-import React, { PropTypes } from 'react'
-
-export default class FinderInput extends React.Component {
-  render () {
-    return (
-      <div className='FinderInput'>
-        <input ref='input' value={this.props.value} onChange={this.props.handleSearchChange} type='text'/>
-      </div>
-    )
-  }
-}
-
-FinderInput.propTypes = {
-  handleSearchChange: PropTypes.func,
-  value: PropTypes.string
-}

browser/finder/FinderList.js

@@ -1,71 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ModeIcon from 'boost/components/ModeIcon'
-import { selectArticle } from './actions'
-
-export default class FinderList extends React.Component {
-  componentDidUpdate () {
-    var index = this.props.articles.indexOf(this.props.activeArticle)
-    var el = ReactDOM.findDOMNode(this)
-    var li = el.querySelectorAll('li')[index]
-
-    if (li == null) {
-      return
-    }
-
-    var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
-    if (overflowBelow) {
-      el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
-    }
-    var overflowAbove = el.scrollTop > li.offsetTop
-    if (overflowAbove) {
-      el.scrollTop = li.offsetTop
-    }
-  }
-
-  handleArticleClick (article) {
-    return (e) => {
-      let { dispatch } = this.props
-      dispatch(selectArticle(article.key))
-    }
-  }
-
-  render () {
-    let articleElements = this.props.articles.map(function (article) {
-      if (article == null) {
-        return (
-          <li className={isActive ? 'active' : ''}>
-            <div className='articleItem'>Undefined</div>
-            <div className='divider'/>
-          </li>
-        )
-      }
-
-      var isActive = this.props.activeArticle != null && (article.key === this.props.activeArticle.key)
-      return (
-        <li key={'article-' + article.key} onClick={this.handleArticleClick(article)} className={isActive ? 'active' : ''}>
-          <div className='articleItem'>
-            <ModeIcon mode={article.mode}/> {article.title}</div>
-          <div className='divider'/>
-        </li>
-      )
-    }.bind(this))
-
-    return (
-      <div className='FinderList'>
-        <ul>
-          {articleElements}
-        </ul>
-      </div>
-    )
-  }
-}
-
-FinderList.propTypes = {
-  articles: PropTypes.array,
-  activeArticle: PropTypes.shape({
-    type: PropTypes.string,
-    key: PropTypes.string
-  }),
-  dispatch: PropTypes.func
-}

browser/finder/FinderMain.styl

@@ -0,0 +1,118 @@
+$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 80px + 32px + 10px + 10px
+  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

browser/finder/NoteDetail.js

@@ -0,0 +1,209 @@
+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'
+
+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 () {
+    let { 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 () {
+    let { note } = this.props
+    if (note.type === 'SNIPPET_NOTE' && note.snippets.length > 1) {
+      this.setState({
+        snippetIndex: (this.state.snippetIndex + 1) % note.snippets.length
+      })
+    }
+  }
+
+  saveToClipboard () {
+    let { 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 () {
+    let { 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 cachedStorageList = JSON.parse(localStorage.getItem('storages'))
+    if (!_.isArray(cachedStorageList)) throw new Error('Target storage doesn\'t exist.')
+    const storage = _.find(cachedStorageList, {key: note.storage})
+    if (storage === undefined) throw new Error('Target storage doesn\'t exist.')
+
+    if (note.type === 'SNIPPET_NOTE') {
+      let tabList = note.snippets.map((snippet, index) => {
+        let isActive = this.state.snippetIndex === index
+        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>
+      })
+
+      let viewList = note.snippets.map((snippet, index) => {
+        let 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}
+            />
+            : <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}
+              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}
+        storagePath={storage.path}
+      />
+    )
+  }
+}
+
+NoteDetail.propTypes = {
+}
+
+export default CSSModules(NoteDetail, styles)

browser/finder/NoteDetail.styl

@@ -0,0 +1,97 @@
+@import('../main/Detail/DetailVars.styl')
+
+.root
+  absolute top bottom left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  height 100%
+  width 365px
+  background-color $ui-noteDetail-backgroundColor
+
+.description
+  absolute top left right
+  height 80px
+  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

browser/finder/NoteList.js

@@ -0,0 +1,90 @@
+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 () {
+    let { index } = this.props
+
+    if (index > -1) {
+      let list = this.refs.root
+      let item = list.childNodes[index]
+      if (item == null) return null
+
+      let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+      if (overflowBelow) {
+        list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
+      }
+      let overflowAbove = list.scrollTop > item.offsetTop
+      if (overflowAbove) {
+        list.scrollTop = item.offsetTop
+      }
+    }
+  }
+
+  resetScroll () {
+    this.refs.root.scrollTop = 0
+    this.setState({
+      range: 0
+    })
+  }
+
+  handleScroll (e) {
+    let { 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 () {
+    let { notes, index } = this.props
+
+    let 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

@@ -0,0 +1,77 @@
+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) {
+    let { storage } = this.props
+    this.props.handleStorageButtonClick(e, storage.key)
+  }
+
+  handleFolderClick (e, folder) {
+    let { storage } = this.props
+    this.props.handleFolderButtonClick(e, storage.key, folder.key)
+  }
+
+  render () {
+    let { storage, filter } = this.props
+    let 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

@@ -0,0 +1,85 @@
+.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/actions.js

@@ -1,39 +0,0 @@
-export const SELECT_ARTICLE = 'SELECT_ARTICLE'
-export const SEARCH_ARTICLE = 'SEARCH_ARTICLE'
-export const REFRESH_DATA = 'REFRESH_DATA'
-
-export function selectArticle (key) {
-  return {
-    type: SELECT_ARTICLE,
-    data: { key }
-  }
-}
-
-export function searchArticle (input) {
-  return {
-    type: SEARCH_ARTICLE,
-    data: { input }
-  }
-}
-
-export function refreshData (data) {
-  console.log('refreshing data')
-  let { folders, articles } = data
-
-  return {
-    type: REFRESH_DATA,
-    data: {
-      articles,
-      folders
-    }
-  }
-}
-
-export default {
-  SELECT_ARTICLE,
-  SEARCH_ARTICLE,
-  REFRESH_DATA,
-  selectArticle,
-  searchArticle,
-  refreshData
-}

browser/finder/index.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-
-  <title>Boost Finder</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-
-
-  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
-  <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
-  <link rel="stylesheet" href="../../node_modules/highlight.js/styles/xcode.css">
-  <link rel="shortcut icon" href="favicon.ico">
-
-  <style>
-  @font-face {
-    font-family: 'Lato';
-    src: url('../../resources/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
-         url('../../resources/Lato-Regular.woff') format('woff'), /* Modern Browsers */
-         url('../../resources/Lato-Regular.ttf') format('truetype');
-    font-style: normal;
-    font-weight: normal;
-    text-rendering: optimizeLegibility;
-  }
-  </style>
-</head>
-<body>
-  <div id="content"></div>
-  <script src="../../submodules/ace/src-min/ace.js"></script>
-  <script>
-    const electron = require('electron')
-    electron.webFrame.setZoomLevelLimits(1, 1)
-    var scriptUrl = process.env.BOOST_ENV === 'development'
-      ? 'http://localhost:8080/assets/finder.js'
-      : '../../compiled/finder.js'
-    var scriptEl=document.createElement('script')
-    scriptEl.setAttribute("type","text/javascript")
-    scriptEl.setAttribute("src", scriptUrl)
-    document.getElementsByTagName("head")[0].appendChild(scriptEl)
-  </script>
-</body>
-</html>

browser/finder/index.js

@@ -1,45 +1,88 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { connect, Provider } from 'react-redux'
-import reducer from './reducer'
-import { createStore } from 'redux'
-import FinderInput from './FinderInput'
-import FinderList from './FinderList'
-import FinderDetail from './FinderDetail'
-import actions, { selectArticle, searchArticle } from './actions'
 import _ from 'lodash'
-import dataStore from 'boost/dataStore'
+import ipc from './ipcClient'
+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')
 
 const electron = require('electron')
-const { remote, clipboard } = electron
+const { remote } = electron
+const { Menu } = remote
 
-var hideFinder = remote.getGlobal('hideFinder')
-
-function notify (...args) {
-  return new window.Notification(...args)
+function hideFinder () {
+  let finderWindow = remote.getCurrentWindow()
+  if (global.process.platform === 'win32') {
+    finderWindow.blur()
+    finderWindow.hide()
+  }
+  if (global.process.platform === 'darwin') {
+    Menu.sendActionToFirstResponder('hide:')
+  }
+  remote.getCurrentWindow().hide()
 }
 
-require('../styles/finder/index.styl')
-
-const FOLDER_FILTER = 'FOLDER_FILTER'
-const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
-const TEXT_FILTER = 'TEXT_FILTER'
-const TAG_FILTER = 'TAG_FILTER'
+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 () {
-    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+    this.refs.search.focus()
+    window.addEventListener('focus', this.focusHandler)
+    window.addEventListener('blur', this.blurHandler)
   }
 
-  handleClick (e) {
-    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  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()
@@ -51,29 +94,25 @@ class FinderMain extends React.Component {
     }
 
     if (e.keyCode === 13) {
-      this.saveToClipboard()
+      this.refs.detail.saveToClipboard()
+      AwsMobileAnalyticsConfig.recordDynamicCustomEvent('COPY_FINDER')
+      hideFinder()
       e.preventDefault()
     }
     if (e.keyCode === 27) {
       hideFinder()
       e.preventDefault()
     }
-  }
-
-  saveToClipboard () {
-    let { activeArticle } = this.props
-    clipboard.writeText(activeArticle.content)
-
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!'
-    })
-    hideFinder()
+    if (e.keyCode === 91 || e.metaKey) {
+      return
+    }
   }
 
   handleSearchChange (e) {
-    let { dispatch } = this.props
-
-    dispatch(searchArticle(e.target.value))
+    this.setState({
+      search: e.target.value,
+      index: 0
+    })
   }
 
   selectArticle (article) {
@@ -81,149 +120,236 @@ class FinderMain extends React.Component {
   }
 
   selectPrevious () {
-    let { activeArticle, dispatch } = this.props
-    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
-    let previousArticle = this.refs.finderList.props.articles[index - 1]
-    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+    if (this.state.index > 0) {
+      this.setState({
+        index: this.state.index - 1
+      })
+    }
   }
 
   selectNext () {
-    let { activeArticle, dispatch } = this.props
-    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
-    let previousArticle = this.refs.finderList.props.articles[index + 1]
-    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+    if (this.state.index < this.noteCount - 1) {
+      this.setState({
+        index: this.state.index + 1
+      })
+    }
+  }
+
+  handleOnlySnippetCheckboxChange (e) {
+    let { filter } = this.state
+    filter.includeSnippet = e.target.checked
+    this.setState({
+      filter: filter,
+      index: 0
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleOnlyMarkdownCheckboxChange (e) {
+    let { filter } = this.state
+    filter.includeMarkdown = e.target.checked
+    this.refs.list.resetScroll()
+    this.setState({
+      filter: filter,
+      index: 0
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleAllNotesButtonClick (e) {
+    let { filter } = this.state
+    filter.type = 'ALL'
+    this.refs.list.resetScroll()
+    this.setState({
+      filter,
+      index: 0
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleStarredButtonClick (e) {
+    let { filter } = this.state
+    filter.type = 'STARRED'
+    this.refs.list.resetScroll()
+    this.setState({
+      filter,
+      index: 0
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleStorageButtonClick (e, storage) {
+    let { 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) {
+    let { 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 () {
-    let { articles, activeArticle, status, dispatch } = this.props
-    let saveToClipboard = () => this.saveToClipboard()
+    let { data, config } = this.props
+    let { filter, search } = this.state
+    let storageList = []
+    for (let key in data.storageMap) {
+      let storage = data.storageMap[key]
+      let 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 (let 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) {
+      let 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))
+
+    let activeNote = notes[this.state.index]
+    this.noteCount = notes.length
+
     return (
-      <div onClick={e => this.handleClick(e)} onKeyDown={e => this.handleKeyDown(e)} className='Finder'>
-        <FinderInput
-          handleSearchChange={e => this.handleSearchChange(e)}
-          ref='finderInput'
-          onChange={this.handleChange}
-          value={status.search}
-        />
-        <FinderList
-          ref='finderList'
-          activeArticle={activeArticle}
-          articles={articles}
-          dispatch={dispatch}
-          selectArticle={article => this.selectArticle(article)}
-        />
-        <FinderDetail
-          activeArticle={activeArticle}
-          saveToClipboard={saveToClipboard}
-        />
+      <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 = {
-  articles: PropTypes.array,
-  activeArticle: PropTypes.shape({
-    key: PropTypes.string,
-    tags: PropTypes.array,
-    title: PropTypes.string,
-    content: PropTypes.string
-  }),
-  status: PropTypes.shape(),
   dispatch: PropTypes.func
 }
 
-// Ignore invalid key
-function ignoreInvalidKey (key) {
-  return key.length > 0 && !key.match(/^\/\/$/) && !key.match(/^\/$/) && !key.match(/^#$/)
-}
-
-// Build filter object by key
-function buildFilter (key) {
-  if (key.match(/^\/\/.+/)) {
-    return {type: FOLDER_EXACT_FILTER, value: key.match(/^\/\/(.+)$/)[1]}
-  }
-  if (key.match(/^\/.+/)) {
-    return {type: FOLDER_FILTER, value: key.match(/^\/(.+)$/)[1]}
-  }
-  if (key.match(/^#(.+)/)) {
-    return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
-  }
-  return {type: TEXT_FILTER, value: key}
-}
-
-function remap (state) {
-  let { articles, folders, status } = state
-
-  let filters = status.search.split(' ')
-    .map(key => key.trim())
-    .filter(ignoreInvalidKey)
-    .map(buildFilter)
-
-  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
-  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
-  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
-  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
-
-  let targetFolders
-  if (folders != null) {
-    let exactTargetFolders = folders.filter(folder => {
-      return _.find(folderExactFilters, filter => folder.name.match(new RegExp(`^${filter.value}$`)))
-    })
-    let fuzzyTargetFolders = folders.filter(folder => {
-      return _.find(folderFilters, filter => folder.name.match(new RegExp(`^${filter.value}`)))
-    })
-    targetFolders = status.targetFolders = exactTargetFolders.concat(fuzzyTargetFolders)
-
-    if (targetFolders.length > 0) {
-      articles = articles.filter(article => {
-        return _.findWhere(targetFolders, {key: article.FolderKey})
-      })
-    }
-
-    if (textFilters.length > 0) {
-      articles = textFilters.reduce((articles, textFilter) => {
-        return articles.filter(article => {
-          return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
-        })
-      }, articles)
-    }
-
-    if (tagFilters.length > 0) {
-      articles = tagFilters.reduce((articles, tagFilter) => {
-        return articles.filter(article => {
-          return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
-        })
-      }, articles)
-    }
-  }
-
-  let activeArticle = _.findWhere(articles, {key: status.articleKey})
-  if (activeArticle == null) activeArticle = articles[0]
-
-  console.log(status.search)
-  return {
-    articles,
-    activeArticle,
-    status
-  }
-}
-
-var Finder = connect(remap)(FinderMain)
-var store = createStore(reducer)
+var Finder = connect((x) => x)(CSSModules(FinderMain, styles))
 
 function refreshData () {
-  let data = dataStore.getData()
-  store.dispatch(actions.refreshData(data))
-}
-
-window.onfocus = e => {
-  refreshData()
+  // let data = dataStore.getData(true)
 }
 
 ReactDOM.render((
   <Provider store={store}>
-    <Finder/>
+    <Finder />
   </Provider>
 ), document.getElementById('content'), function () {
   refreshData()

browser/finder/ipcClient.js

@@ -0,0 +1,122 @@
+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 () {
+  let 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 () {
+  let 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 {
+        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/reducer.js

@@ -1,47 +0,0 @@
-import { combineReducers } from 'redux'
-import { SELECT_ARTICLE, SEARCH_ARTICLE, REFRESH_DATA } from './actions'
-
-let initialArticles = []
-let initialFolders = []
-let initialStatus = {
-  articleKey: null,
-  search: ''
-}
-
-function status (state = initialStatus, action) {
-  switch (action.type) {
-    case SELECT_ARTICLE:
-      state.articleKey = action.data.key
-      return Object.assign({}, state)
-    case SEARCH_ARTICLE:
-      state.search = action.data.input
-      return Object.assign({}, state)
-    default:
-      return state
-  }
-}
-
-function articles (state = initialArticles, action) {
-  switch (action.type) {
-    case REFRESH_DATA:
-      return action.data.articles
-    default:
-      return state
-  }
-}
-
-function folders (state = initialFolders, action) {
-  switch (action.type) {
-    case REFRESH_DATA:
-      console.log(action)
-      return action.data.folders
-    default:
-      return state
-  }
-}
-
-export default combineReducers({
-  status,
-  folders,
-  articles
-})

browser/finder/store.js

@@ -0,0 +1,51 @@
+import { combineReducers, createStore } from 'redux'
+import { routerReducer } from 'react-router-redux'
+import { DEFAULT_CONFIG } from 'browser/main/lib/ConfigManager'
+
+let 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
+}
+
+let reducer = combineReducers({
+  data,
+  config,
+  routing: routerReducer
+})
+
+let store = createStore(reducer)
+
+export default store

browser/lib/CSSModules.js

@@ -0,0 +1,5 @@
+import CSSModules from 'react-css-modules'
+
+export default function (component, styles) {
+  return CSSModules(component, styles, {errorWhenNotFound: false})
+}

browser/lib/Mutable.js

@@ -0,0 +1,106 @@
+class MutableMap {
+  constructor (iterable) {
+    this._map = new Map(iterable)
+    Object.defineProperty(this, 'size', {
+      get: () => this._map.size,
+      set: function (value) {
+        this['size'] = value
+      }
+    })
+  }
+
+  get (...args) {
+    return this._map.get(...args)
+  }
+
+  set (...args) {
+    return this._map.set(...args)
+  }
+
+  delete (...args) {
+    return this._map.delete(...args)
+  }
+
+  has (...args) {
+    return this._map.has(...args)
+  }
+
+  clear (...args) {
+    return this._map.clear(...args)
+  }
+
+  forEach (...args) {
+    return this._map.forEach(...args)
+  }
+
+  [Symbol.iterator] () {
+    return this._map[Symbol.iterator]()
+  }
+
+  map (cb) {
+    let result = []
+    for (let [key, value] of this._map) {
+      result.push(cb(value, key))
+    }
+    return result
+  }
+
+  toJS () {
+    let result = {}
+    for (let [key, value] of this._map) {
+      if (value instanceof MutableSet || value instanceof MutableMap) {
+        value = value.toJS()
+      }
+      result[key] = value
+    }
+    return result
+  }
+}
+
+class MutableSet {
+  constructor (iterable) {
+    this._set = new Set(iterable)
+    Object.defineProperty(this, 'size', {
+      get: () => this._set.size,
+      set: function (value) {
+        this['size'] = value
+      }
+    })
+  }
+
+  add (...args) {
+    return this._set.add(...args)
+  }
+
+  delete (...args) {
+    return this._set.delete(...args)
+  }
+
+  forEach (...args) {
+    return this._set.forEach(...args)
+  }
+
+  [Symbol.iterator] () {
+    return this._set[Symbol.iterator]()
+  }
+
+  map (cb) {
+    let result = []
+    this._set.forEach(function (value, key) {
+      result.push(cb(value, key))
+    })
+
+    return result
+  }
+
+  toJS () {
+    return Array.from(this._set)
+  }
+}
+
+const Mutable = {
+  Map: MutableMap,
+  Set: MutableSet
+}
+
+module.exports = Mutable

browser/lib/consts.js

@@ -0,0 +1,36 @@
+const path = require('path')
+const fs = require('sander')
+const { remote } = require('electron')
+const { app } = remote
+
+const themePath = process.env.NODE_ENV === 'production'
+  ? path.join(app.getAppPath(), './node_modules/codemirror/theme')
+  : require('path').resolve('./node_modules/codemirror/theme')
+const themes = fs.readdirSync(themePath)
+  .map((themePath) => {
+    return themePath.substring(0, themePath.lastIndexOf('.'))
+  })
+
+const consts = {
+  FOLDER_COLORS: [
+    '#E10051',
+    '#FF8E00',
+    '#E8D252',
+    '#3FD941',
+    '#30D5C8',
+    '#2BA5F7',
+    '#B013A4'
+  ],
+  FOLDER_COLOR_NAMES: [
+    'Razzmatazz (Red)',
+    'Pizazz (Orange)',
+    'Confetti (Yellow)',
+    'Emerald (Green)',
+    'Turquoise',
+    'Dodger Blue',
+    'Violet Eggplant'
+  ],
+  THEMES: ['default'].concat(themes)
+}
+
+module.exports = consts

browser/lib/context.js

@@ -0,0 +1,17 @@
+const { remote } = require('electron')
+const { Menu, MenuItem } = remote
+
+function popup (templates) {
+  let menu = new Menu()
+  templates.forEach((item) => {
+    menu.append(new MenuItem(item))
+  })
+  menu.popup(remote.getCurrentWindow())
+}
+
+const context = {
+  popup
+}
+
+module.export = context
+export default context

browser/lib/customMeta.js

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

browser/lib/date-formatter.js

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

browser/lib/findNoteTitle.js

@@ -0,0 +1,33 @@
+export function findNoteTitle (value) {
+  let splitted = value.split('\n')
+  let title = null
+  let isInsideCodeBlock = false
+
+  splitted.some((line, index) => {
+    let trimmedLine = line.trim()
+    let trimmedNextLine = splitted[index + 1] === undefined ? '' : splitted[index + 1].trim()
+    if (trimmedLine.match('```')) {
+      isInsideCodeBlock = !isInsideCodeBlock
+    }
+    if (isInsideCodeBlock === false && (trimmedLine.match(/^# +/) || trimmedNextLine.match(/^=+$/))) {
+      title = trimmedLine
+      return true
+    }
+  })
+
+  if (title === null) {
+    title = ''
+    splitted.some((line) => {
+      if (line.trim().length > 0) {
+        title = line.trim()
+        return true
+      }
+    })
+  }
+
+  return title
+}
+
+export default {
+  findNoteTitle
+}

browser/lib/htmlTextHelper.js

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

browser/lib/keygen.js

@@ -0,0 +1,7 @@
+const crypto = require('crypto')
+const _ = require('lodash')
+
+module.exports = function (length) {
+  if (!_.isFinite(length)) length = 10
+  return crypto.randomBytes(length).toString('hex')
+}

browser/lib/markdown.js

@@ -0,0 +1,167 @@
+import markdownit from 'markdown-it'
+import emoji from 'markdown-it-emoji'
+import math from '@rokt33r/markdown-it-math'
+import _ from 'lodash'
+
+const katex = window.katex
+
+function createGutter (str) {
+  let lc = (str.match(/\n/g) || []).length
+  let lines = []
+  for (let i = 1; i <= lc; i++) {
+    lines.push('<span class="CodeMirror-linenumber">' + i + '</span>')
+  }
+  return '<span class="lineNumber CodeMirror-gutters">' + lines.join('') + '</span>'
+}
+
+var md = markdownit({
+  typographer: true,
+  linkify: true,
+  html: true,
+  xhtmlOut: true,
+  breaks: true,
+  highlight: function (str, lang) {
+    if (lang === 'flowchart') {
+      return `<pre class="flowchart">${str}</pre>`
+    }
+    if (lang === 'sequence') {
+      return `<pre class="sequence">${str}</pre>`
+    }
+    return '<pre class="code">' +
+    createGutter(str) +
+    '<code class="' + lang + '">' +
+    str +
+    '</code></pre>'
+  }
+})
+md.use(emoji, {
+  shortcuts: {}
+})
+md.use(math, {
+  inlineRenderer: function (str) {
+    let output = ''
+    try {
+      output = katex.renderToString(str.trim())
+    } catch (err) {
+      output = `<span class="katex-error">${err.message}</span>`
+    }
+    return output
+  },
+  blockRenderer: function (str) {
+    let output = ''
+    try {
+      output = katex.renderToString(str.trim(), {displayMode: true})
+    } catch (err) {
+      output = `<div class="katex-error">${err.message}</div>`
+    }
+    return output
+  }
+})
+md.use(require('markdown-it-imsize'))
+md.use(require('markdown-it-footnote'))
+// Override task item
+md.block.ruler.at('paragraph', function (state, startLine/*, endLine */) {
+  let content, terminate, i, l, token
+  let nextLine = startLine + 1
+  let terminatorRules = state.md.block.ruler.getRules('paragraph')
+  let endLine = state.lineMax
+
+  // jump line-by-line until empty one or EOF
+  for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
+    // this would be a code block normally, but after paragraph
+    // it's considered a lazy continuation regardless of what's there
+    if (state.sCount[nextLine] - state.blkIndent > 3) { continue }
+
+    // quirk for blockquotes, this line should already be checked by that rule
+    if (state.sCount[nextLine] < 0) { continue }
+
+    // Some tags can terminate paragraph without empty line.
+    terminate = false
+    for (i = 0, l = terminatorRules.length; i < l; i++) {
+      if (terminatorRules[i](state, nextLine, endLine, true)) {
+        terminate = true
+        break
+      }
+    }
+    if (terminate) { break }
+  }
+
+  content = state.getLines(startLine, nextLine, state.blkIndent, false).trim()
+
+  state.line = nextLine
+
+  token = state.push('paragraph_open', 'p', 1)
+  token.map = [ startLine, state.line ]
+
+  if (state.parentType === 'list') {
+    let match = content.match(/^\[( |x)\] ?(.+)/i)
+    if (match) {
+      content = `<label class='taskListItem' 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.children = []
+
+  token = state.push('paragraph_close', 'p', -1)
+
+  return true
+})
+
+// Add line number attribute for scrolling
+let originalRender = md.renderer.render
+md.renderer.render = function render (tokens, options, env) {
+  tokens.forEach((token) => {
+    switch (token.type) {
+      case 'heading_open':
+      case 'paragraph_open':
+      case 'blockquote_open':
+      case 'table_open':
+        token.attrPush(['data-line', token.map[0]])
+    }
+  })
+  let result = originalRender.call(md.renderer, tokens, options, env)
+  return result
+}
+window.md = md
+
+function strip (input) {
+  var output = input
+  try {
+    output = output
+      .replace(/^([\s\t]*)([\*\-\+]|\d\.)\s+/gm, '$1')
+      .replace(/\n={2,}/g, '\n')
+      .replace(/~~/g, '')
+      .replace(/`{3}.*\n/g, '')
+      .replace(/<(.*?)>/g, '$1')
+      .replace(/^[=\-]{2,}\s*$/g, '')
+      .replace(/\[\^.+?\](: .*?$)?/g, '')
+      .replace(/\s{0,2}\[.*?\]: .*?$/g, '')
+      .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
+      .replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
+      .replace(/>/g, '')
+      .replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
+      .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
+      .replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
+      .replace(/(`{3,})(.*?)\1/gm, '$2')
+      .replace(/^-{3,}\s*$/g, '')
+      .replace(/`(.+?)`/g, '$1')
+      .replace(/\n{2,}/g, '\n\n')
+  } catch (e) {
+    console.error(e)
+    return input
+  }
+  return output
+}
+
+const markdown = {
+  render: function markdown (content) {
+    if (!_.isString(content)) content = ''
+    const renderedContent = md.render(content)
+    return md.normalizeLinkText(renderedContent)
+  },
+  strip
+}
+export default markdown

browser/lib/search.js

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

browser/main/Detail/Detail.styl

@@ -0,0 +1,20 @@
+.root
+  absolute top bottom right
+
+.empty
+  height 320px
+  display flex
+  align-items center
+
+.empty-message
+  width 100%
+  font-size 42px
+  line-height 72px
+  text-align center
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .root
+    background-color $ui-dark-backgroundColor
+  .empty-message
+    color $ui-dark-inactive-text-color

browser/main/Detail/DetailVars.styl

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

browser/main/Detail/FolderSelect.js

@@ -0,0 +1,289 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './FolderSelect.styl'
+import _ from 'lodash'
+
+class FolderSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      status: 'IDLE',
+      search: '',
+      optionIndex: -1
+    }
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  handleClick (e) {
+    this.setState({
+      status: 'SEARCH',
+      optionIndex: -1
+    }, () => {
+      this.refs.search.focus()
+    })
+  }
+
+  handleFocus (e) {
+    if (this.state.status === 'IDLE') {
+      this.setState({
+        status: 'FOCUS'
+      })
+    }
+  }
+
+  handleBlur (e) {
+    if (this.state.status === 'FOCUS') {
+      this.setState({
+        status: 'IDLE'
+      })
+    }
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      case 13:
+        if (this.state.status === 'FOCUS') {
+          this.setState({
+            status: 'SEARCH',
+            optionIndex: -1
+          }, () => {
+            this.refs.search.focus()
+          })
+        }
+        break
+      case 40:
+      case 38:
+        if (this.state.status === 'FOCUS') {
+          this.setState({
+            status: 'SEARCH',
+            optionIndex: 0
+          }, () => {
+            this.refs.search.focus()
+          })
+        }
+        break
+      case 9:
+        if (e.shiftKey) {
+          e.preventDefault()
+          let tabbable = document.querySelectorAll('a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])')
+          let previousEl = tabbable[Array.prototype.indexOf.call(tabbable, this.refs.root) - 1]
+          if (previousEl != null) previousEl.focus()
+        }
+    }
+  }
+
+  handleSearchInputBlur (e) {
+    if (e.relatedTarget !== this.refs.root) {
+      this.setState({
+        status: 'IDLE'
+      })
+    }
+  }
+
+  handleSearchInputChange (e) {
+    let { folders } = this.props
+    let search = this.refs.search.value
+    let optionIndex = search.length > 0
+      ? _.findIndex(folders, (folder) => {
+        return folder.name.match(new RegExp('^' + _.escapeRegExp(search), 'i'))
+      })
+      : -1
+
+    this.setState({
+      search: this.refs.search.value,
+      optionIndex: optionIndex
+    })
+  }
+
+  handleSearchInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 40:
+        e.stopPropagation()
+        this.nextOption()
+        break
+      case 38:
+        e.stopPropagation()
+        this.previousOption()
+        break
+      case 13:
+        e.stopPropagation()
+        this.selectOption()
+        break
+      case 27:
+        e.stopPropagation()
+        this.setState({
+          status: 'FOCUS'
+        }, () => {
+          this.refs.root.focus()
+        })
+    }
+  }
+
+  nextOption () {
+    let { optionIndex } = this.state
+    let { folders } = this.props
+
+    optionIndex++
+    if (optionIndex >= folders.length) optionIndex = 0
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  previousOption () {
+    let { folders } = this.props
+    let { optionIndex } = this.state
+
+    optionIndex--
+    if (optionIndex < 0) optionIndex = folders.length - 1
+
+    this.setState({
+      optionIndex
+    })
+  }
+
+  selectOption () {
+    let { folders } = this.props
+    let optionIndex = this.state.optionIndex
+
+    let folder = folders[optionIndex]
+    if (folder != null) {
+      this.setState({
+        status: 'FOCUS'
+      }, () => {
+        this.setValue(folder.key)
+        this.refs.root.focus()
+      })
+    }
+  }
+
+  handleOptionClick (storageKey, folderKey) {
+    return (e) => {
+      e.stopPropagation()
+      this.setState({
+        status: 'FOCUS'
+      }, () => {
+        this.setValue(storageKey + '-' + folderKey)
+        this.refs.root.focus()
+      })
+    }
+  }
+
+  setValue (value) {
+    this.value = value
+    this.props.onChange()
+  }
+
+  render () {
+    let { className, data, value } = this.props
+    let splitted = value.split('-')
+    let storageKey = splitted.shift()
+    let folderKey = splitted.shift()
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    if (this.state.search.trim().length > 0) {
+      let filter = new RegExp('^' + _.escapeRegExp(this.state.search), 'i')
+      options = options.filter((option) => filter.test(option.folder.name))
+    }
+
+    let optionList = options
+      .map((option, index) => {
+        return (
+          <div styleName={index === this.state.optionIndex
+              ? 'search-optionList-item--active'
+              : 'search-optionList-item'
+            }
+            key={option.storage.key + '-' + option.folder.key}
+            onClick={(e) => this.handleOptionClick(option.storage.key, option.folder.key)(e)}
+          >
+            <span styleName='search-optionList-item-name'
+              style={{borderColor: option.folder.color}}
+            >
+              {option.folder.name}
+              <span styleName='search-optionList-item-name-surfix'>in {option.storage.name}</span>
+            </span>
+          </div>
+        )
+      })
+
+    return (
+      <div className={_.isString(className)
+          ? 'FolderSelect ' + className
+          : 'FolderSelect'
+        }
+        styleName={this.state.status === 'SEARCH'
+          ? 'root--search'
+          : this.state.status === 'FOCUS'
+          ? 'root--focus'
+          : 'root'
+        }
+        ref='root'
+        tabIndex='0'
+        onClick={(e) => this.handleClick(e)}
+        onFocus={(e) => this.handleFocus(e)}
+        onBlur={(e) => this.handleBlur(e)}
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        {this.state.status === 'SEARCH'
+          ? <div styleName='search'>
+            <input styleName='search-input'
+              ref='search'
+              value={this.state.search}
+              placeholder='Folder...'
+              onChange={(e) => this.handleSearchInputChange(e)}
+              onBlur={(e) => this.handleSearchInputBlur(e)}
+              onKeyDown={(e) => this.handleSearchInputKeyDown(e)}
+            />
+            <div styleName='search-optionList'
+              ref='optionList'
+            >
+              {optionList}
+            </div>
+          </div>
+          : <div styleName='idle'>
+            <div styleName='idle-label'>
+              <span styleName='idle-label-name'
+                style={{color: currentOption.folder.color}}
+              >
+                {currentOption.folder.name} /
+              </span>
+            </div>
+          </div>
+        }
+
+      </div>
+    )
+  }
+}
+
+FolderSelect.propTypes = {
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  folders: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    name: PropTypes.string,
+    color: PropTypes.string
+  }))
+}
+
+export default CSSModules(FolderSelect, styles)

browser/main/Detail/FolderSelect.styl

@@ -0,0 +1,131 @@
+.root
+  position relative
+  border solid 1px transparent
+  line-height 26px
+  vertical-align middle
+  border-radius 2px
+  transition 0.15s
+  user-select none
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+
+.root--search, .root--focus
+  @extend .root
+  background-color $ui-noteDetail-backgroundColor = #F4F4F4
+  border-color $ui-input--focus-borderColor
+  width 100px
+  &:hover
+    border-color $ui-input--focus-borderColor
+
+.idle
+  position relative
+  cursor pointer
+
+.idle-label
+  right 20px
+  overflow ellipsis
+
+.idle-label-name
+  font-size 14px
+  padding 2px
+
+.idle-label-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
+.idle-caret
+  absolute right top
+  height 34px
+  width 20px
+  line-height 34px
+
+.search
+  absolute top left right bottom
+  line-height 34px
+
+.search-input
+  vertical-align middle
+  position relative
+  top -2px
+  outline none
+  border none
+  height 20px
+  line-height 20px
+  background-color transparent
+  padding 0 10px
+
+.search-optionList
+  position fixed
+  max-height 450px
+  overflow auto
+  z-index 200
+  border $ui-border
+  background-color white
+  border-radius 2px
+
+.search-optionList-item
+  height 34px
+  width 250px
+  box-sizing border-box
+  padding 0 5px
+  overflow ellipsis
+  cursor pointer
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+
+.search-optionList-item--active
+  @extend .search-optionList-item
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+    color $ui-button--active-color
+.search-optionList-item-name
+  border-left solid 2px transparent
+  padding 2px 5px
+.search-optionList-item-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
+
+body[data-theme="dark"]
+  .root
+    color $ui-dark-text-color
+    &:hover
+      color white
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-dark-borderColor
+
+  .root--search, .root--focus
+    @extend .root
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-input--focus-borderColor
+    &:hover
+      background-color $ui-dark-button--hover-backgroundColor
+      border-color $ui-input--focus-borderColor
+
+  .idle-label-name-surfix
+    color $ui-dark-inactive-text-color
+
+  .search-input
+    color white
+    background-color transparent
+    border-color $ui-dark-borderColor
+
+  .search-optionList
+    color white
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-button--hover-backgroundColor
+
+  .search-optionList-item
+    &:hover
+      background-color lighten($ui-dark-button--hover-backgroundColor, 15%)
+
+  .search-optionList-item--active
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor
+      color $ui-dark-button--active-color
+  .search-optionList-item-name-surfix
+    color $ui-dark-inactive-text-color

browser/main/Detail/InfoButton.js

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

browser/main/Detail/InfoButton.styl

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

browser/main/Detail/InfoPanel.js

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

browser/main/Detail/InfoPanel.styl

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

browser/main/Detail/MarkdownNoteDetail.js

@@ -0,0 +1,406 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './MarkdownNoteDetail.styl'
+import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
+import StarButton from './StarButton'
+import TagSelect from './TagSelect'
+import FolderSelect from './FolderSelect'
+import dataApi from 'browser/main/lib/dataApi'
+import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
+import markdown from 'browser/lib/markdown'
+import StatusBar from '../StatusBar'
+import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import { formatDate } from 'browser/lib/date-formatter'
+
+const electron = require('electron')
+const { remote } = electron
+const { Menu, MenuItem, dialog } = remote
+
+class MarkdownNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isMovingNote: false,
+      note: Object.assign({
+        title: '',
+        content: ''
+      }, props.note),
+      isLockButtonShown: false,
+      isLocked: false
+    }
+    this.dispatchTimer = null
+
+    this.toggleLockButton = this.handleToggleLockButton.bind(this)
+  }
+
+  focus () {
+    this.refs.content.focus()
+  }
+
+  componentDidMount () {
+    ee.on('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+      if (this.saveQueue != null) this.saveNow()
+      this.setState({
+        note: Object.assign({}, nextProps.note)
+      }, () => {
+        this.refs.content.reload()
+        if (this.refs.tags) this.refs.tags.reset()
+      })
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.saveQueue != null) this.saveNow()
+  }
+
+  componentDidUnmount () {
+    ee.off('topbar:togglelockbutton', this.toggleLockButton)
+  }
+
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
+
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
+        numberOfTodo++
+      }
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
+        numberOfCompletedTodo++
+      }
+    })
+
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
+  }
+
+  handleChange (e) {
+    let { note } = this.state
+
+    note.content = this.refs.content.value
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    note.title = markdown.strip(findNoteTitle(note.content))
+    note.updatedAt = new Date()
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  save () {
+    clearTimeout(this.saveQueue)
+    this.saveQueue = setTimeout(() => {
+      this.saveNow()
+    }, 1000)
+  }
+
+  saveNow () {
+    let { note, dispatch } = this.props
+    clearTimeout(this.saveQueue)
+    this.saveQueue = null
+
+    dataApi
+      .updateNote(note.storage, note.key, this.state.note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+      })
+  }
+
+  handleFolderChange (e) {
+    let { note } = this.state
+    let value = this.refs.folder.value
+    let splitted = value.split('-')
+    let newStorageKey = splitted.shift()
+    let newFolderKey = splitted.shift()
+
+    dataApi
+      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          let { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            originNote: note,
+            note: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.storage + '-' + newNote.key
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
+  }
+
+  handleStarButtonClick (e) {
+    let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+
+    note.isStarred = !note.isStarred
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  exportAsFile () {
+
+  }
+
+  exportAsMd () {
+    ee.emit('export:save-md')
+  }
+
+  exportAsTxt () {
+    ee.emit('export:save-text')
+  }
+
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
+
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Delete a note',
+        detail: 'This work cannot be undone.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
+      let { note, dispatch } = this.props
+      dataApi
+        .deleteNote(note.storage, note.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          ee.once('list:moved', dispatchHandler)
+        })
+    } else {
+      note.isTrashed = true
+
+      this.setState({
+        note
+      }, () => {
+        this.save()
+      })
+    }
+    ee.emit('list:next')
+  }
+
+  handleUndoButtonClick (e) {
+    let { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+      this.refs.content.reload()
+      ee.emit('list:next')
+    })
+  }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleLockButtonMouseDown (e) {
+    e.preventDefault()
+    ee.emit('editor:lock')
+    this.setState({ isLocked: !this.state.isLocked })
+    if (this.state.isLocked) this.focus()
+  }
+
+  getToggleLockButton () {
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
+  }
+
+  handleDeleteKeyDown (e) {
+    if (e.keyCode === 27) this.handleDeleteCancelButtonClick(e)
+  }
+
+  handleToggleLockButton (event, noteStatus) {
+    // first argument event is not used
+    if (this.props.config.editor.switchPreview === 'BLUR' && noteStatus === 'CODE') {
+      this.setState({isLockButtonShown: true})
+    } else {
+      this.setState({isLockButtonShown: false})
+    }
+  }
+
+  handleFocus (e) {
+    this.focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  render () {
+    let { data, config, location } = this.props
+    let { note } = this.state
+    let storageKey = note.storage
+    let folderKey = note.folder
+
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <StarButton styleName='info-left-button'
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            ref='folder'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={(e) => this.handleChange(e)}
+        />
+        <TodoListPercentage
+          percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+        />
+      </div>
+      <div styleName='info-right'>
+        {(() => {
+          const faClassName = `fa ${this.getToggleLockButton()}`
+          const lockButtonComponent =
+            <button styleName='control-lockButton'
+              onFocus={(e) => this.handleFocus(e)}
+              onMouseDown={(e) => this.handleLockButtonMouseDown(e)}
+            >
+              <i className={faClassName} styleName='lock-button' />
+              <span styleName='control-lockButton-tooltip'>
+                {this.state.isLocked ? 'Unlock' : 'Lock'}
+              </span>
+            </button>
+          return (
+            this.state.isLockButtonShown ? lockButtonComponent : ''
+          )
+        })()}
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.exportAsMd}
+          exportAsTxt={this.exportAsTxt}
+        />
+      </div>
+    </div>
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+      >
+
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
+        <div styleName='body'>
+          <MarkdownEditor
+            ref='content'
+            styleName='body-noteEditor'
+            config={config}
+            value={this.state.note.content}
+            storageKey={this.state.note.storage}
+            onChange={(e) => this.handleChange(e)}
+            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+          />
+        </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
+        />
+      </div>
+    )
+  }
+}
+
+MarkdownNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(MarkdownNoteDetail, styles)

browser/main/Detail/MarkdownNoteDetail.styl

@@ -0,0 +1,58 @@
+@import('NoteDetailInfo')
+@import('DetailVars')
+
+.root
+  absolute top right bottom
+  border-width 0 0 1px
+  border-style solid
+  border-color $ui-borderColor
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
+
+.lock-button
+  padding-bottom 3px
+
+.control-lockButton
+  topBarButtonLight()
+
+.control-lockButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+.control-fullScreenButton
+  float right
+  padding 0 0 2px 0
+  topBarButtonLight()
+
+.body
+  absolute left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
+  bottom $statusBar-height
+
+.body-noteEditor
+  absolute top bottom left right
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
+
+  .control-lockButton
+    topBarButtonDark()
+
+  .control-lockButton-tooltip
+    darkTooltip()
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/NoteDetailInfo.styl

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

browser/main/Detail/SnippetNoteDetail.js

@@ -0,0 +1,684 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetNoteDetail.styl'
+import CodeEditor from 'browser/components/CodeEditor'
+import MarkdownEditor from 'browser/components/MarkdownEditor'
+import StarButton from './StarButton'
+import TagSelect from './TagSelect'
+import FolderSelect from './FolderSelect'
+import dataApi from 'browser/main/lib/dataApi'
+import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
+import CodeMirror from 'codemirror'
+import SnippetTab from 'browser/components/SnippetTab'
+import StatusBar from '../StatusBar'
+import context from 'browser/lib/context'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import _ from 'lodash'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import TrashButton from './TrashButton'
+import InfoButton from './InfoButton'
+import InfoPanel from './InfoPanel'
+import { formatDate } from 'browser/lib/date-formatter'
+
+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
+  }
+}
+
+const electron = require('electron')
+const { remote } = electron
+const { Menu, MenuItem, dialog } = remote
+
+class SnippetNoteDetail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isMovingNote: false,
+      snippetIndex: 0,
+      note: Object.assign({
+        description: ''
+      }, props.note, {
+        snippets: props.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.note.key !== this.props.note.key && !this.isMovingNote) {
+      if (this.saveQueue != null) this.saveNow()
+      let nextNote = Object.assign({
+        description: ''
+      }, nextProps.note, {
+        snippets: nextProps.note.snippets.map((snippet) => Object.assign({}, snippet))
+      })
+      this.setState({
+        snippetIndex: 0,
+        note: nextNote
+      }, () => {
+        let { snippets } = this.state.note
+        snippets.forEach((snippet, index) => {
+          this.refs['code-' + index].reload()
+        })
+        if (this.refs.tags) this.refs.tags.reset()
+      })
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.saveQueue != null) this.saveNow()
+  }
+
+  handleChange (e) {
+    let { note } = this.state
+
+    if (this.refs.tags) note.tags = this.refs.tags.value
+    note.description = this.refs.description.value
+    note.updatedAt = new Date()
+    note.title = findNoteTitle(note.description)
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  save () {
+    clearTimeout(this.saveQueue)
+    this.saveQueue = setTimeout(() => {
+      this.saveNow()
+    }, 1000)
+  }
+
+  saveNow () {
+    let { note, dispatch } = this.props
+    clearTimeout(this.saveQueue)
+    this.saveQueue = null
+
+    dataApi
+      .updateNote(note.storage, note.key, this.state.note)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+        AwsMobileAnalyticsConfig.recordDynamicCustomEvent('EDIT_NOTE')
+      })
+  }
+
+  handleFolderChange (e) {
+    let { note } = this.state
+    let value = this.refs.folder.value
+    let splitted = value.split('-')
+    let newStorageKey = splitted.shift()
+    let newFolderKey = splitted.shift()
+
+    dataApi
+      .moveNote(note.storage, note.key, newStorageKey, newFolderKey)
+      .then((newNote) => {
+        this.setState({
+          isMovingNote: true,
+          note: Object.assign({}, newNote)
+        }, () => {
+          let { dispatch, location } = this.props
+          dispatch({
+            type: 'MOVE_NOTE',
+            originNote: note,
+            note: newNote
+          })
+          hashHistory.replace({
+            pathname: location.pathname,
+            query: {
+              key: newNote.storage + '-' + newNote.key
+            }
+          })
+          this.setState({
+            isMovingNote: false
+          })
+        })
+      })
+  }
+
+  handleStarButtonClick (e) {
+    let { note } = this.state
+    if (!note.isStarred) AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_STAR')
+
+    note.isStarred = !note.isStarred
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+    })
+  }
+
+  exportAsFile () {
+
+  }
+
+  handleTrashButtonClick (e) {
+    let { note } = this.state
+    const { isTrashed } = note
+
+    if (isTrashed) {
+      let dialogueButtonIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Delete a note',
+        detail: 'This work cannot be undone.',
+        buttons: ['Confirm', 'Cancel']
+      })
+      if (dialogueButtonIndex === 1) return
+      let { note, dispatch } = this.props
+      dataApi
+        .deleteNote(note.storage, note.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          ee.once('list:moved', dispatchHandler)
+        })
+    } else {
+      note.isTrashed = true
+
+      this.setState({
+        note
+      }, () => {
+        this.save()
+      })
+    }
+    ee.emit('list:next')
+  }
+
+  handleUndoButtonClick (e) {
+    let { note } = this.state
+
+    note.isTrashed = false
+
+    this.setState({
+      note
+    }, () => {
+      this.save()
+      ee.emit('list:next')
+    })
+  }
+
+  handleFullScreenButton (e) {
+    ee.emit('editor:fullscreen')
+  }
+
+  handleTabPlusButtonClick (e) {
+    this.addSnippet()
+  }
+
+  handleTabButtonClick (e, index) {
+    this.setState({
+      snippetIndex: index
+    })
+  }
+
+  handleTabDeleteButtonClick (e, index) {
+    if (this.state.note.snippets.length > 1) {
+      if (this.state.note.snippets[index].content.trim().length > 0) {
+        let dialogIndex = dialog.showMessageBox(remote.getCurrentWindow(), {
+          type: 'warning',
+          message: 'Delete a snippet',
+          detail: 'This work cannot be undone.',
+          buttons: ['Confirm', 'Cancel']
+        })
+        if (dialogIndex === 0) {
+          this.deleteSnippetByIndex(index)
+        }
+      } else {
+        this.deleteSnippetByIndex(index)
+      }
+    }
+  }
+
+  deleteSnippetByIndex (index) {
+    const snippets = this.state.note.snippets.slice()
+    snippets.splice(index, 1)
+    const note = Object.assign({}, this.state.note, {snippets})
+    const snippetIndex = this.state.snippetIndex >= snippets.length
+      ? snippets.length - 1
+      : this.state.snippetIndex
+    this.setState({ note, snippetIndex }, () => {
+      this.save()
+      this.refs['code-' + this.state.snippetIndex].reload()
+    })
+  }
+
+  renameSnippetByIndex (index, name) {
+    let snippets = this.state.note.snippets.slice()
+    snippets[index].name = name
+    let syntax = CodeMirror.findModeByFileName(name.trim())
+    let mode = syntax != null ? syntax.name : null
+    if (mode != null) snippets[index].mode = mode
+    this.state.note.snippets = snippets
+
+    this.setState({
+      note: this.state.note
+    }, () => {
+      this.save()
+    })
+  }
+
+  handleModeOptionClick (index, name) {
+    return (e) => {
+      let snippets = this.state.note.snippets.slice()
+      snippets[index].mode = name
+      this.state.note.snippets = snippets
+
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  handleCodeChange (index) {
+    return (e) => {
+      let snippets = this.state.note.snippets.slice()
+      snippets[index].content = this.refs['code-' + index].value
+      this.state.note.snippets = snippets
+      this.setState({
+        note: this.state.note
+      }, () => {
+        this.save()
+      })
+    }
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      case 9:
+        if (e.ctrlKey && !e.shiftKey) {
+          e.preventDefault()
+          this.jumpNextTab()
+        } else if (e.ctrlKey && e.shiftKey) {
+          e.preventDefault()
+          this.jumpPrevTab()
+        } else if (!e.ctrlKey && !e.shiftKey && e.target === this.refs.description) {
+          e.preventDefault()
+          this.focusEditor()
+        }
+        break
+      case 76:
+        {
+          let isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.focus()
+          }
+        }
+        break
+      case 84:
+        {
+          let isSuper = global.process.platform === 'darwin'
+            ? e.metaKey
+            : e.ctrlKey
+          if (isSuper) {
+            e.preventDefault()
+            this.addSnippet()
+          }
+        }
+        break
+    }
+  }
+
+  handleModeButtonClick (e, index) {
+    let menu = new Menu()
+    CodeMirror.modeInfo.forEach((mode) => {
+      menu.append(new MenuItem({
+        label: mode.name,
+        click: (e) => this.handleModeOptionClick(index, mode.name)(e)
+      }))
+    })
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleIndentTypeButtonClick (e) {
+    context.popup([
+      {
+        label: 'tab',
+        click: (e) => this.handleIndentTypeItemClick(e, 'tab')
+      },
+      {
+        label: 'space',
+        click: (e) => this.handleIndentTypeItemClick(e, 'space')
+      }
+    ])
+  }
+
+  handleIndentSizeButtonClick (e) {
+    context.popup([
+      {
+        label: '2',
+        click: (e) => this.handleIndentSizeItemClick(e, 2)
+      },
+      {
+        label: '4',
+        click: (e) => this.handleIndentSizeItemClick(e, 4)
+      },
+      {
+        label: '8',
+        click: (e) => this.handleIndentSizeItemClick(e, 8)
+      }
+    ])
+  }
+
+  handleIndentSizeItemClick (e, indentSize) {
+    let { config, dispatch } = this.props
+    let editor = Object.assign({}, config.editor, {
+      indentSize
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  handleIndentTypeItemClick (e, indentType) {
+    let { config, dispatch } = this.props
+    let editor = Object.assign({}, config.editor, {
+      indentType
+    })
+    ConfigManager.set({
+      editor
+    })
+    dispatch({
+      type: 'SET_CONFIG',
+      config: {
+        editor
+      }
+    })
+  }
+
+  focus () {
+    this.refs.description.focus()
+  }
+
+  addSnippet () {
+    let { note } = this.state
+
+    note.snippets = note.snippets.concat([{
+      name: '',
+      mode: 'Plain Text',
+      content: ''
+    }])
+    let snippetIndex = note.snippets.length - 1
+
+    this.setState({
+      note,
+      snippetIndex
+    }, () => {
+      this.refs['tab-' + snippetIndex].startRenaming()
+    })
+  }
+
+  jumpNextTab () {
+    this.setState({
+      snippetIndex: (this.state.snippetIndex + 1) % this.state.note.snippets.length
+    }, () => {
+      this.focusEditor()
+    })
+  }
+
+  jumpPrevTab () {
+    this.setState({
+      snippetIndex: (this.state.snippetIndex - 1 + this.state.note.snippets.length) % this.state.note.snippets.length
+    }, () => {
+      this.focusEditor()
+    })
+  }
+
+  focusEditor () {
+    console.log('code-' + this.state.snippetIndex)
+    this.refs['code-' + this.state.snippetIndex].focus()
+  }
+
+  handleInfoButtonClick (e) {
+    const infoPanel = document.querySelector('.infoPanel')
+    if (infoPanel.style) infoPanel.style.display = infoPanel.style.display === 'none' ? 'inline' : 'none'
+  }
+
+  showWarning () {
+    dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Sorry!',
+      detail: 'md/text import is available only a markdown note.',
+      buttons: ['OK']
+    })
+  }
+
+  render () {
+    let { data, config, location } = this.props
+    let { note } = this.state
+
+    let storageKey = note.storage
+    let folderKey = note.folder
+
+    let editorFontSize = parseInt(config.editor.fontSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
+    let editorIndentSize = parseInt(config.editor.indentSize, 10)
+    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
+
+    let tabList = note.snippets.map((snippet, index) => {
+      let isActive = this.state.snippetIndex === index
+
+      return <SnippetTab
+        key={index}
+        ref={'tab-' + index}
+        snippet={snippet}
+        isActive={isActive}
+        onClick={(e) => this.handleTabButtonClick(e, index)}
+        onDelete={(e) => this.handleTabDeleteButtonClick(e, index)}
+        onRename={(name) => this.renameSnippetByIndex(index, name)}
+        isDeletable={note.snippets.length > 1}
+      />
+    })
+
+    let viewList = note.snippets.map((snippet, index) => {
+      let 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' || snippet.mode === 'GitHub Flavored Markdown'
+          ? <MarkdownEditor styleName='tabView-content'
+            value={snippet.content}
+            config={config}
+            onChange={(e) => this.handleCodeChange(index)(e)}
+            ref={'code-' + index}
+            ignorePreviewPointerEvents={this.props.ignorePreviewPointerEvents}
+          />
+          : <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}
+            onChange={(e) => this.handleCodeChange(index)(e)}
+            ref={'code-' + index}
+          />
+        }
+      </div>
+    })
+
+    let options = []
+    data.storageMap.forEach((storage, index) => {
+      storage.folders.forEach((folder) => {
+        options.push({
+          storage: storage,
+          folder: folder
+        })
+      })
+    })
+    let currentOption = options.filter((option) => option.storage.key === storageKey && option.folder.key === folderKey)[0]
+
+    const trashTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <i styleName='undo-button'
+          className='fa fa-undo fa-fw'
+          onClick={(e) => this.handleUndoButtonClick(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+      </div>
+    </div>
+
+    const detailTopBar = <div styleName='info'>
+      <div styleName='info-left'>
+        <StarButton styleName='info-left-button'
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+        <div styleName='info-left-top'>
+          <FolderSelect styleName='info-left-top-folderSelect'
+            value={this.state.note.storage + '-' + this.state.note.folder}
+            ref='folder'
+            data={data}
+            onChange={(e) => this.handleFolderChange(e)}
+          />
+        </div>
+
+        <TagSelect
+          ref='tags'
+          value={this.state.note.tags}
+          onChange={(e) => this.handleChange(e)}
+        />
+      </div>
+      <div styleName='info-right'>
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}
+        >
+          <i className='fa fa-expand' styleName='fullScreen-button' />
+        </button>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+        <InfoPanel
+          storageName={currentOption.storage.name}
+          folderName={currentOption.folder.name}
+          noteLink={`[${note.title}](${location.query.key})`}
+          updatedAt={formatDate(note.updatedAt)}
+          createdAt={formatDate(note.createdAt)}
+          exportAsMd={this.showWarning}
+          exportAsTxt={this.showWarning}
+        />
+      </div>
+    </div>
+
+    return (
+      <div className='NoteDetail'
+        style={this.props.style}
+        styleName='root'
+        onKeyDown={(e) => this.handleKeyDown(e)}
+      >
+        {location.pathname === '/trashed' ? trashTopBar : detailTopBar}
+
+        <div styleName='body'>
+          <div styleName='description'>
+            <textarea
+              style={{
+                fontFamily: config.preview.fontFamily,
+                fontSize: parseInt(config.preview.fontSize, 10)
+              }}
+              ref='description'
+              placeholder='Description...'
+              value={this.state.note.description}
+              onChange={(e) => this.handleChange(e)}
+            />
+          </div>
+          <div styleName='tabList'>
+            <div styleName='list'>
+              {tabList}
+            </div>
+            <button styleName='plusButton'
+              onClick={(e) => this.handleTabPlusButtonClick(e)}
+            >
+              <i className='fa fa-plus' />
+            </button>
+          </div>
+          {viewList}
+        </div>
+
+        <div styleName='override'>
+          <button
+            onClick={(e) => this.handleModeButtonClick(e, this.state.snippetIndex)}
+          >
+            {this.state.note.snippets[this.state.snippetIndex].mode == null
+              ? 'Select Syntax...'
+              : this.state.note.snippets[this.state.snippetIndex].mode
+            }&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+          <button
+            onClick={(e) => this.handleIndentTypeButtonClick(e)}
+          >
+            Indent: {config.editor.indentType}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+          <button
+            onClick={(e) => this.handleIndentSizeButtonClick(e)}
+          >
+            size: {config.editor.indentSize}&nbsp;
+            <i className='fa fa-caret-down' />
+          </button>
+        </div>
+
+        <StatusBar
+          {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
+        />
+      </div>
+    )
+  }
+}
+
+SnippetNoteDetail.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  note: PropTypes.shape({
+
+  }),
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(SnippetNoteDetail, styles)

browser/main/Detail/SnippetNoteDetail.styl

@@ -0,0 +1,105 @@
+@import('NoteDetailInfo')
+@import('DetailVars')
+
+.root
+  absolute top bottom right
+  border-width 0 0 1px
+  border-style solid
+  border-color $ui-borderColor
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
+
+.body
+  absolute left right
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
+  bottom $statusBar-height
+  background-color $ui-noteDetail-backgroundColor
+
+.body .description
+  absolute top left right
+  height 80px
+
+.body .description textarea
+  outline none
+  display block
+  height 100%
+  width 100%
+  resize none
+  border none
+  padding 10px
+  line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
+
+.tabList
+  absolute left right
+  top 80px
+  height 30px
+  display flex
+  background-color $ui-noteDetail-backgroundColor
+
+.tabList .list
+  flex 1
+  display flex
+  overflow hidden
+
+.tabList .plusButton
+  navButtonColor()
+  width 30px
+
+.tabView
+  absolute left right bottom
+  top 130px
+
+.tabView-content
+  absolute top left right bottom
+
+.override
+  absolute bottom left
+  left 60px
+  height 23px
+  z-index 1
+  button
+    navButtonColor()
+    height 24px
+    &:active .update-icon
+      color white
+
+.control-fullScreenButton
+  float right
+  padding 0 0 2px 0
+  topBarButtonLight()
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
+
+  .body
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .body .description textarea
+    background-color $ui-dark-noteDetail-backgroundColor
+    color $ui-dark-text-color
+
+  .tabList
+    background-color $ui-button--active-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
+  .tabList .list
+    border-color $ui-dark-borderColor
+
+  .tabList .plusButton
+    navDarkButtonColor()
+  .override
+    button
+      border-color $ui-dark-borderColor
+      &:hover
+        background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+        transition 0.15s
+        color $ui-dark-text-color
+
+  .control-fullScreenButton
+    topBarButtonDark()

browser/main/Detail/StarButton.js

@@ -0,0 +1,67 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StarButton.styl'
+import _ from 'lodash'
+
+class StarButton extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isActive: false
+    }
+  }
+
+  handleMouseDown (e) {
+    this.setState({
+      isActive: true
+    })
+  }
+
+  handleMouseUp (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  handleMouseLeave (e) {
+    this.setState({
+      isActive: false
+    })
+  }
+
+  render () {
+    let { className } = this.props
+
+    return (
+      <button className={_.isString(className)
+          ? 'StarButton ' + className
+          : 'StarButton'
+        }
+        styleName={this.state.isActive || this.props.isActive
+          ? 'root--active'
+          : 'root'
+        }
+        onMouseDown={(e) => this.handleMouseDown(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
+        onMouseLeave={(e) => this.handleMouseLeave(e)}
+        onClick={this.props.onClick}
+      >
+        <i styleName='icon'
+          className={this.state.isActive || this.props.isActive
+            ? 'fa fa-star'
+            : 'fa fa-star-o'
+          }
+        />
+      </button>
+    )
+  }
+}
+
+StarButton.propTypes = {
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string
+}
+
+export default CSSModules(StarButton, styles)

browser/main/Detail/StarButton.styl

@@ -0,0 +1,47 @@
+.root
+  left 7px
+  top 0
+  padding 0
+  color alpha($ui-favorite-star-button-color, 60%)
+  &:hover
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+  &:active
+    transition 0.15s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-favorite-star-button-color
+
+.root--active
+  @extend .root
+  color $ui-favorite-star-button-color
+  &:hover
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+  &:active
+    transition 0.15s
+    color $ui-favorite-star-button-color
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+
+.icon
+  transition transform 0.15s
+
+body[data-theme="dark"]
+  .root
+    &:hover
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+    &:active
+      transition 0.15s
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      color $ui-favorite-star-button-color
+
+  .root--active
+    @extend .root
+    color $ui-favorite-star-button-color
+    &:hover
+      transition 0.15s
+      color $ui-favorite-star-button-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)

browser/main/Detail/TagSelect.js

@@ -0,0 +1,150 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TagSelect.styl'
+import _ from 'lodash'
+import AwsMobileAnalyticsConfig from 'browser/main/lib/AwsMobileAnalyticsConfig'
+
+class TagSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      newTag: ''
+    }
+  }
+
+  componentDidMount () {
+    this.value = this.props.value
+  }
+
+  componentDidUpdate () {
+    this.value = this.props.value
+  }
+
+  handleNewTagInputKeyDown (e) {
+    switch (e.keyCode) {
+      case 9:
+        e.preventDefault()
+        this.submitTag()
+        break
+      case 13:
+        this.submitTag()
+        break
+      case 8:
+        if (this.refs.newTag.value.length === 0) {
+          this.removeLastTag()
+        }
+    }
+  }
+
+  removeLastTag () {
+    let { value } = this.props
+
+    value = _.isArray(value)
+      ? value.slice()
+      : []
+    value.pop()
+    value = _.uniq(value)
+
+    this.value = value
+    this.props.onChange()
+  }
+
+  reset () {
+    this.setState({
+      newTag: ''
+    })
+  }
+
+  submitTag () {
+    AwsMobileAnalyticsConfig.recordDynamicCustomEvent('ADD_TAG')
+    let { value } = this.props
+    let newTag = this.refs.newTag.value.trim().replace(/ +/g, '_')
+
+    if (newTag.length <= 0) {
+      this.setState({
+        newTag: ''
+      })
+      return
+    }
+
+    value = _.isArray(value)
+      ? value.slice()
+      : []
+    value.push(newTag)
+    value = _.uniq(value)
+
+    this.setState({
+      newTag: ''
+    }, () => {
+      this.value = value
+      this.props.onChange()
+    })
+  }
+
+  handleNewTagInputChange (e) {
+    this.setState({
+      newTag: this.refs.newTag.value
+    })
+  }
+
+  handleTagRemoveButtonClick (tag) {
+    return (e) => {
+      let { value } = this.props
+
+      value.splice(value.indexOf(tag), 1)
+      value = _.uniq(value)
+
+      this.value = value
+      this.props.onChange()
+    }
+  }
+
+  render () {
+    let { value, className } = this.props
+
+    let tagList = _.isArray(value)
+      ? value.map((tag) => {
+        return (
+          <span styleName='tag'
+            key={tag}
+          >
+            <span styleName='tag-label'>#{tag}</span>
+            <button styleName='tag-removeButton'
+              onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
+            >
+              <i className='fa fa-times fa-fw tag-removeButton-icon' />
+            </button>
+          </span>
+        )
+      })
+      : []
+
+    return (
+      <div className={_.isString(className)
+          ? 'TagSelect ' + className
+          : 'TagSelect'
+        }
+        styleName='root'
+      >
+        {tagList}
+        <input styleName='newTag'
+          ref='newTag'
+          value={this.state.newTag}
+          placeholder='Add tag...'
+          onChange={(e) => this.handleNewTagInputChange(e)}
+          onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
+        />
+      </div>
+    )
+  }
+}
+
+TagSelect.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func
+
+}
+
+export default CSSModules(TagSelect, styles)

browser/main/Detail/TagSelect.styl

@@ -0,0 +1,75 @@
+.root
+  display inline-block
+  user-select none
+  height 23px
+  vertical-align middle
+  width 300px
+  overflow-x scroll
+  white-space nowrap
+
+.root::-webkit-scrollbar
+  display none
+
+.tag
+  display inline-block
+  margin 1px 3px
+  padding 0
+  height 20px
+  background-color alpha($ui-tag-backgroundColor, 10%)
+  border-radius 3px
+  overflow hidden
+  clearfix()
+
+.tag-removeButton
+  float right
+  height 20px
+  width 18px
+  margin 0
+  padding 0
+  border-style solid
+  border-width 0
+  border-radius 20px
+  line-height 18px
+  background-color transparent
+  color $ui-button-color
+
+.tag-removeButton-icon
+  width 5px
+  padding-right 4px
+
+.tag-label
+  font-size 11px
+  font-weight 600
+  color: alpha($ui-text-color, 80%)
+  float left
+  height 20px
+  line-height 20px
+  padding 0 6px
+
+.newTag
+  display inline-block
+  margin 2px 0 15px 2px
+  vertical-align middle
+  height 18px
+  box-sizing borde-box
+  border none
+  background-color transparent
+  outline none
+  padding 0 4px
+
+body[data-theme="dark"]
+  .tag
+    background-color alpha($ui-dark-tag-backgroundColor, 60%)
+
+  .tag-removeButton
+    border-color $ui-button--focus-borderColor
+    background-color transparent
+    color $ui-button-color
+
+  .tag-label
+    color $ui-dark-text-color
+
+  .newTag
+    border-color none
+    background-color transparent
+    color $ui-dark-text-color

browser/main/Detail/TrashButton.js

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

browser/main/Detail/TrashButton.styl

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

browser/main/Detail/index.js

@@ -0,0 +1,103 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Detail.styl'
+import _ from 'lodash'
+import MarkdownNoteDetail from './MarkdownNoteDetail'
+import SnippetNoteDetail from './SnippetNoteDetail'
+import ee from 'browser/main/lib/eventEmitter'
+import StatusBar from '../StatusBar'
+
+const OSX = global.process.platform === 'darwin'
+
+class Detail extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.focusHandler = () => {
+      this.refs.root != null && this.refs.root.focus()
+    }
+    this.deleteHandler = () => {
+      this.refs.root != null && this.refs.root.handleTrashButtonClick()
+    }
+  }
+
+  componentDidMount () {
+    ee.on('detail:focus', this.focusHandler)
+    ee.on('detail:delete', this.deleteHandler)
+  }
+
+  componentWillUnmount () {
+    ee.off('detail:focus', this.focusHandler)
+    ee.off('detail:delete', this.deleteHandler)
+  }
+
+  render () {
+    let { location, data, config } = this.props
+    let note = null
+    if (location.query.key != null) {
+      let splitted = location.query.key.split('-')
+      let storageKey = splitted.shift()
+      let noteKey = splitted.shift()
+
+      note = data.noteMap.get(storageKey + '-' + noteKey)
+    }
+
+    if (note == null) {
+      return (
+        <div styleName='root'
+          style={this.props.style}
+          tabIndex='0'
+        >
+          <div styleName='empty'>
+            <div styleName='empty-message'>{OSX ? 'Command(⌘)' : 'Ctrl(^)'} + N<br />to create a new post</div>
+          </div>
+          <StatusBar
+            {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          />
+        </div>
+      )
+    }
+
+    if (note.type === 'SNIPPET_NOTE') {
+      return (
+        <SnippetNoteDetail
+          note={note}
+          config={config}
+          ref='root'
+          {..._.pick(this.props, [
+            'dispatch',
+            'data',
+            'style',
+            'ignorePreviewPointerEvents',
+            'location'
+          ])}
+        />
+      )
+    }
+
+    return (
+      <MarkdownNoteDetail
+        note={note}
+        config={config}
+        ref='root'
+        {..._.pick(this.props, [
+          'dispatch',
+          'data',
+          'style',
+          'ignorePreviewPointerEvents',
+          'location'
+        ])}
+      />
+    )
+  }
+}
+
+Detail.propTypes = {
+  dispatch: PropTypes.func,
+  style: PropTypes.shape({
+    left: PropTypes.number
+  }),
+  ignorePreviewPointerEvents: PropTypes.bool
+}
+
+export default CSSModules(Detail, styles)

browser/main/HomePage.js

@@ -1,263 +0,0 @@
-import React, { PropTypes} from 'react'
-import { connect } from 'react-redux'
-import { CREATE_MODE, EDIT_MODE, IDLE_MODE, NEW, toggleTutorial } from 'boost/actions'
-// import UserNavigator from './HomePage/UserNavigator'
-import ArticleNavigator from './HomePage/ArticleNavigator'
-import ArticleTopBar from './HomePage/ArticleTopBar'
-import ArticleList from './HomePage/ArticleList'
-import ArticleDetail from './HomePage/ArticleDetail'
-import _ from 'lodash'
-import { isModalOpen, closeModal } from 'boost/modal'
-const electron = require('electron')
-const BrowserWindow = electron.remote.BrowserWindow
-
-const TEXT_FILTER = 'TEXT_FILTER'
-const FOLDER_FILTER = 'FOLDER_FILTER'
-const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
-const TAG_FILTER = 'TAG_FILTER'
-
-class HomePage extends React.Component {
-  componentDidMount () {
-    // React自体のKey入力はfocusされていないElementからは動かないため、
-    // `window`に直接かける
-    this.keyHandler = e => this.handleKeyDown(e)
-    window.addEventListener('keydown', this.keyHandler)
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('keydown', this.keyHandler)
-  }
-
-  handleKeyDown (e) {
-    if (process.env.BOOST_ENV === 'development' && e.keyCode === 73 && e.metaKey && e.altKey) {
-      e.preventDefault()
-      e.stopPropagation()
-      BrowserWindow.getFocusedWindow().toggleDevTools()
-      return
-    }
-
-    if (isModalOpen()) {
-      if (e.keyCode === 27) closeModal()
-      return
-    }
-
-    let { status, dispatch } = this.props
-    let { nav, top, list, detail } = this.refs
-
-    if (status.isTutorialOpen) {
-      dispatch(toggleTutorial())
-      e.preventDefault()
-      return
-    }
-
-    // Search inputがfocusされていたら大体のキー入力は無視される。
-    if (top.isInputFocused() && !e.metaKey) {
-      if (e.keyCode === 13 || e.keyCode === 27) top.escape()
-      return
-    }
-
-    switch (status.mode) {
-      case CREATE_MODE:
-      case EDIT_MODE:
-        if (e.keyCode === 27) {
-          detail.handleCancelButtonClick()
-        }
-        if ((e.keyCode === 13 && e.metaKey) || (e.keyCode === 83 && e.metaKey)) {
-          detail.handleSaveButtonClick()
-        }
-        break
-      case IDLE_MODE:
-        if (e.keyCode === 69) {
-          detail.handleEditButtonClick()
-          e.preventDefault()
-        }
-        if (e.keyCode === 68) {
-          detail.handleDeleteButtonClick()
-        }
-
-        // `detail`の`openDeleteConfirmMenu`の時。
-        if (detail.state.openDeleteConfirmMenu) {
-          if (e.keyCode === 27) {
-            detail.handleDeleteCancelButtonClick()
-          }
-          if (e.keyCode === 13 && e.metaKey) {
-            detail.handleDeleteConfirmButtonClick()
-          }
-          break
-        }
-
-        // `detail`の`openDeleteConfirmMenu`が`true`なら呼ばれない。
-        if (e.keyCode === 27 || (e.keyCode === 70 && e.metaKey)) {
-          top.focusInput()
-        }
-
-        if (e.keyCode === 38) {
-          list.selectPriorArticle()
-        }
-
-        if (e.keyCode === 40) {
-          list.selectNextArticle()
-        }
-
-        if (e.keyCode === 65 || e.keyCode === 13 && e.metaKey) {
-          nav.handleNewPostButtonClick()
-          e.preventDefault()
-        }
-    }
-  }
-
-  render () {
-    let { dispatch, status, articles, allArticles, activeArticle, folders, tags, filters } = this.props
-
-    return (
-      <div className='HomePage'>
-        <ArticleNavigator
-          ref='nav'
-          dispatch={dispatch}
-          folders={folders}
-          status={status}
-          allArticles={allArticles}
-        />
-        <ArticleTopBar
-          ref='top'
-          dispatch={dispatch}
-          status={status}
-        />
-        <ArticleList
-          ref='list'
-          dispatch={dispatch}
-          folders={folders}
-          articles={articles}
-          status={status}
-          activeArticle={activeArticle}
-        />
-        <ArticleDetail
-          ref='detail'
-          dispatch={dispatch}
-          activeArticle={activeArticle}
-          folders={folders}
-          status={status}
-          tags={tags}
-          filters={filters}
-        />
-      </div>
-    )
-  }
-}
-
-// Ignore invalid key
-function ignoreInvalidKey (key) {
-  return key.length > 0 && !key.match(/^\/\/$/) && !key.match(/^\/$/) && !key.match(/^#$/)
-}
-
-// Build filter object by key
-function buildFilter (key) {
-  if (key.match(/^\/\/.+/)) {
-    return {type: FOLDER_EXACT_FILTER, value: key.match(/^\/\/(.+)$/)[1]}
-  }
-  if (key.match(/^\/.+/)) {
-    return {type: FOLDER_FILTER, value: key.match(/^\/(.+)$/)[1]}
-  }
-  if (key.match(/^#(.+)/)) {
-    return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
-  }
-  return {type: TEXT_FILTER, value: key}
-}
-
-function remap (state) {
-  let { folders, articles, status } = state
-
-  if (articles == null) articles = []
-  articles.sort((a, b) => {
-    return new Date(b.updatedAt) - new Date(a.updatedAt)
-  })
-  let allArticles = articles.slice()
-
-  let tags = _.uniq(allArticles.reduce((sum, article) => {
-    if (!_.isArray(article.tags)) return sum
-    return sum.concat(article.tags)
-  }, []))
-
-  // Filter articles
-  let filters = status.search.split(' ')
-    .map(key => key.trim())
-    .filter(ignoreInvalidKey)
-    .map(buildFilter)
-
-  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
-  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
-  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
-  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
-
-  let targetFolders
-  if (folders != null) {
-    let exactTargetFolders = folders.filter(folder => {
-      return _.find(folderExactFilters, filter => folder.name.match(new RegExp(`^${filter.value}$`)))
-    })
-    let fuzzyTargetFolders = folders.filter(folder => {
-      return _.find(folderFilters, filter => folder.name.match(new RegExp(`^${filter.value}`)))
-    })
-    targetFolders = status.targetFolders = exactTargetFolders.concat(fuzzyTargetFolders)
-
-    if (targetFolders.length > 0) {
-      articles = articles.filter(article => {
-        return _.findWhere(targetFolders, {key: article.FolderKey})
-      })
-    }
-
-    if (textFilters.length > 0) {
-      articles = textFilters.reduce((articles, textFilter) => {
-        return articles.filter(article => {
-          return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
-        })
-      }, articles)
-    }
-
-    if (tagFilters.length > 0) {
-      articles = tagFilters.reduce((articles, tagFilter) => {
-        return articles.filter(article => {
-          return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
-        })
-      }, articles)
-    }
-  }
-
-  // Grab active article
-  let activeArticle = _.findWhere(articles, {key: status.articleKey})
-  if (activeArticle == null) activeArticle = articles[0]
-
-  return {
-    folders,
-    status,
-    allArticles,
-    articles,
-    activeArticle,
-    tags,
-    filters: {
-      folder: folderFilters,
-      tag: tagFilters,
-      text: textFilters
-    }
-  }
-}
-
-HomePage.propTypes = {
-  params: PropTypes.shape({
-    userId: PropTypes.string
-  }),
-  status: PropTypes.shape({
-    userId: PropTypes.string
-  }),
-  articles: PropTypes.array,
-  allArticles: PropTypes.array,
-  activeArticle: PropTypes.shape(),
-  dispatch: PropTypes.func,
-  folders: PropTypes.array,
-  filters: PropTypes.shape({
-    folder: PropTypes.array,
-    tag: PropTypes.array,
-    text: PropTypes.array
-  })
-}
-
-export default connect(remap)(HomePage)

browser/main/HomePage/ArticleDetail.js

@@ -1,518 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import moment from 'moment'
-import _ from 'lodash'
-import ModeIcon from 'boost/components/ModeIcon'
-import MarkdownPreview from 'boost/components/MarkdownPreview'
-import CodeEditor from 'boost/components/CodeEditor'
-import {
-  IDLE_MODE,
-  EDIT_MODE,
-  switchMode,
-  switchArticle,
-  switchFolder,
-  clearSearch,
-  lockStatus,
-  unlockStatus,
-  updateArticle,
-  destroyArticle,
-  NEW
-} from 'boost/actions'
-import linkState from 'boost/linkState'
-import FolderMark from 'boost/components/FolderMark'
-import TagLink from 'boost/components/TagLink'
-import TagSelect from 'boost/components/TagSelect'
-import ModeSelect from 'boost/components/ModeSelect'
-import activityRecord from 'boost/activityRecord'
-
-const BRAND_COLOR = '#18AF90'
-
-const editDeleteTutorialElement = (
-  <svg width='300' height='500' className='tutorial'>
-    <text x='50' y='220' fill={BRAND_COLOR} fontSize='24'>Edit / Delete a post</text>
-    <text x='90' y='245' fill={BRAND_COLOR} fontSize='18'>press `e`/`d`</text>
-
-    <svg x='150' y='35'>
-      <path fill='white' d='M87.5,93.6c-16.3-5.7-30.6-16.7-39.9-31.4c-5.5-8.7-9-19.1-3.4-28.7c4.8-8.2,13.6-12.8,22.4-15.3
-        c15.7-4.5,34.4-6.2,49.7,0.4c17.3,7.4,25.6,26.3,25.7,44.4c0.1,10.4-3.4,20.9-13.1,26c-8.6,4.5-19,4.1-28.4,3.7
-        c-1.9-0.1-1.9,2.9,0,3c9.3,0.4,19.2,0.6,27.9-3.2c8.5-3.7,13.8-11.2,15.7-20.2c3.6-17.9-2.9-40.2-17.7-51.4
-        C110.8,9.1,89,9.9,70.8,14c-17.9,4-37.4,16.8-31.3,37.9C45.6,73,66.7,89.5,86.7,96.5C88.6,97.1,89.4,94.2,87.5,93.6L87.5,93.6z'/>
-      <path fill='white' d='M11.9,89.7c14.8-3.4,29.7-6,44.8-7.9c-0.5-0.6-1-1.3-1.4-1.9c-2.6,6.3-2.8,12.7-0.7,19.2
-        c0.6,1.8,3.5,1,2.9-0.8c-1.9-6-1.7-11.8,0.7-17.6c0.3-0.8-0.5-2-1.4-1.9c-15.3,1.9-30.6,4.5-45.6,8C9.3,87.3,10.1,90.2,11.9,89.7
-        L11.9,89.7z'/>
-      <path fill='white' d='M48.6,81.5c-9.4,10.4-17,22.3-22.2,35.3c-5.5,13.6-9.3,28.9-6,43.4c0.4,1.9,3.3,1.1,2.9-0.8
-        c-3.2-14,0.7-28.8,6-41.8c5.1-12.5,12.4-24,21.5-34C52,82.2,49.9,80,48.6,81.5L48.6,81.5z'/>
-    </svg>
-  </svg>
-)
-
-const tagSelectTutorialElement = (
-  <svg width='500' height='500' className='tutorial'>
-    <text x='155' y='50' fill={BRAND_COLOR} fontSize='24'>Attach some tags here!</text>
-
-    <svg x='0' y='-15'>
-      <path fill='white' d='M15.5,22.2c77.8-0.7,155.6-1.3,233.5-2c22.2-0.2,44.4-0.4,66.6-0.6c1.9,0,1.9-3,0-3
-        c-77.8,0.7-155.6,1.3-233.5,2c-22.2,0.2-44.4,0.4-66.6,0.6C13.6,19.2,13.6,22.2,15.5,22.2L15.5,22.2z'/>
-      <path fill='white' d='M130.8,25c-5.4,6.8-10.3,14-14.6,21.5c-0.8,1.4,1.2,3.2,2.4,1.8c1-1.2,2-2.4,3.1-3.7c1.2-1.5-0.9-3.6-2.1-2.1
-        c-1,1.2-2,2.4-3.1,3.7c0.8,0.6,1.6,1.2,2.4,1.8c4.2-7.3,8.9-14.3,14.2-20.9C134.1,25.6,132,23.4,130.8,25L130.8,25z'/>
-      <path fill='white' d='M132.6,22.1c8.4,5.9,16.8,11.9,25.2,17.8c1.6,1.1,3.1-1.5,1.5-2.6c-8.4-5.9-16.8-11.9-25.2-17.8
-        C132.5,18.4,131,21,132.6,22.1L132.6,22.1z'/>
-      <path fill='white' d='M132.9,18.6c0.4,6.7-0.7,13.3-3.5,19.3c-1.5,3.1-3.9,6.4-3.1,10c0.7,3.1,3.4,4.4,6.2,5.5
-        c5.1,2.1,10.5,3.1,16.1,3.2c1.9,0,1.9-3,0-3c-4.7-0.1-9.2-0.8-13.6-2.4c-3-1.1-6.2-1.9-5.4-6.6c0.4-2,2-4.1,2.8-5.9
-        c2.9-6.3,4-13.1,3.6-20.1C135.8,16.7,132.8,16.7,132.9,18.6L132.9,18.6z'/>
-    </svg>
-  </svg>
-)
-
-const modeSelectTutorialElement = (
-  <svg width='500' height='500' className='tutorial'>
-    <text x='195' y='130' fill={BRAND_COLOR} fontSize='24'>Select code syntax!!</text>
-
-    <svg x='300' y='0'>
-      <path fill='white' d='M99.9,58.8c-14.5-0.5-29-2.2-43.1-5.6c-12.3-2.9-27.9-6.4-37.1-15.5C7.9,26,28.2,18.9,37,16.7
-        c13.8-3.5,28.3-4.7,42.4-5.8c29.6-2.2,59.3-1.7,89-1c3,0.1,7.5-0.6,10.2,0.6c3.1,1.4,3.1,5.3,3.3,8.1c0.3,5.2-0.2,10.7-2.4,15.4
-        c-4.4,9.6-18.4,14.7-27.5,18.1c-27.1,10.1-56.7,12.8-85.3,15.6c-1.9,0.2-1.9,3.2,0,3c29.3-2.9,59.8-5.6,87.5-16.2
-        c9.6-3.7,22.8-8.7,27.7-18.4c2.3-4.6,3.2-9.9,3.2-15c0-3.6,0-9.4-2.9-12c-1.9-1.7-4.7-1.8-7.1-2c-4.8-0.2-9.6-0.2-14.4-0.3
-        c-8.7-0.2-17.5-0.3-26.2-0.4C116.7,6.3,99,6.5,81.3,7.8c-15.8,1.1-32.1,2.3-47.4,6.6c-7.7,2.2-22.1,6.9-20.9,17.4
-        c0.6,5.4,5.6,9.4,9.9,12.1c6.7,4.3,14.4,6.9,22,9.2c17.8,5.4,36.4,8,54.9,8.6C101.8,61.8,101.8,58.8,99.9,58.8L99.9,58.8z'/>
-      <path fill='white' d='M11.1,67.8c9.2-6.1,18.6-11.9,28.2-17.2c-0.7-0.3-1.5-0.6-2.2-0.9c0.9,5.3,0.7,10.3-0.5,15.5
-        c-0.4,1.9,2.4,2.7,2.9,0.8c1.4-5.7,1.5-11.3,0.5-17.1c-0.2-1-1.4-1.3-2.2-0.9c-9.7,5.3-19.1,11.1-28.2,17.2
-        C8,66.3,9.5,68.9,11.1,67.8L11.1,67.8z'/>
-      <path fill='white' d='M31.5,52.8C23.4,68.9,0.2,83.2,7.9,104c0.7,1.8,3.6,1,2.9-0.8C3.6,83.7,26.4,69.7,34.1,54.3
-        C35,52.6,32.4,51.1,31.5,52.8L31.5,52.8z'/>
-    </svg>
-  </svg>
-)
-
-function makeInstantArticle (article) {
-  return Object.assign({}, article)
-}
-
-export default class ArticleDetail extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      article: makeInstantArticle(props.activeArticle),
-      previewMode: false,
-      isArticleEdited: false,
-      isTagChanged: false,
-      isTitleChanged: false,
-      isContentChanged: false,
-      isModeChanged: false
-    }
-  }
-
-  componentDidMount () {
-    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.refreshTimer)
-  }
-
-  componentDidUpdate (prevProps) {
-    let isModeChanged = prevProps.status.mode !== this.props.status.mode
-    if (isModeChanged && this.props.status.mode === EDIT_MODE) {
-      ReactDOM.findDOMNode(this.refs.title).focus()
-    }
-  }
-
-  componentWillReceiveProps (nextProps) {
-    let nextState = {}
-
-    let isArticleChanged = nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key)
-    let isModeChanged = nextProps.status.mode !== this.props.status.mode
-
-    // Reset article input
-    if (isArticleChanged || (isModeChanged && nextProps.status.mode !== IDLE_MODE)) {
-      Object.assign(nextState, {
-        article: makeInstantArticle(nextProps.activeArticle)
-      })
-    }
-
-    // Clean state
-    if (isModeChanged) {
-      Object.assign(nextState, {
-        openDeleteConfirmMenu: false,
-        previewMode: false,
-        isArticleEdited: false,
-        isTagChanged: false,
-        isTitleChanged: false,
-        isContentChanged: false
-      })
-    }
-
-    this.setState(nextState)
-  }
-
-  renderEmpty () {
-    return (
-      <div className='ArticleDetail empty'>
-        Command(⌘) + Enter to create a new post
-      </div>
-    )
-  }
-
-  handleEditButtonClick (e) {
-    let { dispatch } = this.props
-    dispatch(switchMode(EDIT_MODE))
-  }
-
-  handleDeleteButtonClick (e) {
-    this.setState({openDeleteConfirmMenu: true})
-  }
-
-  handleDeleteConfirmButtonClick (e) {
-    let { dispatch, activeArticle } = this.props
-
-    dispatch(destroyArticle(activeArticle.key))
-    activityRecord.emit('ARTICLE_DESTROY')
-    this.setState({openDeleteConfirmMenu: false})
-  }
-
-  handleDeleteCancelButtonClick (e) {
-    this.setState({openDeleteConfirmMenu: false})
-  }
-
-  renderIdle () {
-    let { status, activeArticle, folders } = this.props
-
-    let tags = activeArticle.tags != null ? activeArticle.tags.length > 0
-      ? activeArticle.tags.map(tag => {
-        return (<TagLink key={tag} tag={tag}/>)
-      })
-      : (
-        <span className='noTags'>Not tagged yet</span>
-      ) : null
-    let folder = _.findWhere(folders, {key: activeArticle.FolderKey})
-
-    return (
-      <div className='ArticleDetail idle'>
-        {this.state.openDeleteConfirmMenu
-          ? (
-            <div className='deleteConfirm'>
-              <div className='right'>
-                Are you sure to delete this article?
-                <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>
-                  <i className='fa fa-fw fa-check'/> Sure
-                </button>
-                <button onClick={e => this.handleDeleteCancelButtonClick(e)}>
-                  <i className='fa fa-fw fa-times'/> Cancel
-                </button>
-              </div>
-            </div>
-          )
-          : (
-            <div className='detailInfo'>
-              <div className='left'>
-                <div className='info'>
-                  <FolderMark color={folder.color}/> <span className='folderName'>{folder.name}</span>&nbsp;
-                  Created : {moment(activeArticle.createdAt).format('YYYY/MM/DD')}&nbsp;
-                  Updated : {moment(activeArticle.updatedAt).format('YYYY/MM/DD')}
-                </div>
-                <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
-              </div>
-              <div className='right'>
-                <button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
-                  <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit (e)</span>
-                </button>
-                <button onClick={e => this.handleDeleteButtonClick(e)} className='deleteBtn'>
-                  <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete (d)</span>
-                </button>
-              </div>
-
-              {status.isTutorialOpen ? editDeleteTutorialElement : null}
-
-            </div>
-          )
-        }
-
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <ModeIcon className='mode' mode={activeArticle.mode}/>
-              <div className='title'>{activeArticle.title}</div>
-            </div>
-            {activeArticle.mode === 'markdown'
-              ? <MarkdownPreview content={activeArticle.content}/>
-              : <CodeEditor readOnly onChange={(e, value) => this.handleContentChange(e, value)} mode={activeArticle.mode} code={activeArticle.content}/>
-            }
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  handleCancelButtonClick (e) {
-    let { activeArticle, dispatch } = this.props
-
-    if (activeArticle.status === NEW) {
-      dispatch(switchArticle(null))
-    }
-    dispatch(switchMode(IDLE_MODE))
-  }
-
-  handleSaveButtonClick (e) {
-    let { dispatch, folders, status } = this.props
-    let article = this.state.article
-    let newArticle = Object.assign({}, article)
-
-    let folder = _.findWhere(folders, {key: article.FolderKey})
-    if (folder == null) return false
-
-    dispatch(unlockStatus())
-
-    delete newArticle.status
-    newArticle.updatedAt = new Date()
-    if (newArticle.createdAt == null) {
-      newArticle.createdAt = new Date()
-      activityRecord.emit('ARTICLE_CREATE')
-    } else {
-      activityRecord.emit('ARTICLE_UPDATE')
-    }
-
-    dispatch(updateArticle(newArticle))
-    dispatch(switchMode(IDLE_MODE))
-    // Folder filterがかかっている時に、
-    // Searchを初期化し、更新先のFolder filterをかける
-    // かかれていない時に
-    // Searchを初期化する
-    if (status.targetFolders.length > 0) dispatch(switchFolder(folder.name))
-    else dispatch(clearSearch())
-    dispatch(switchArticle(newArticle.key))
-  }
-
-  handleFolderKeyChange (e) {
-    let article = this.state.article
-    article.FolderKey = e.target.value
-
-    this.setState({article: article})
-  }
-
-  handleTitleChange (e) {
-    let { article } = this.state
-    article.title = e.target.value
-    let _isTitleChanged = article.title !== this.props.activeArticle.title
-
-    let { isTagChanged, isContentChanged, isArticleEdited, isModeChanged } = this.state
-    let _isArticleEdited = _isTitleChanged || isTagChanged || isContentChanged || isModeChanged
-
-    this.setState({
-      article,
-      isTitleChanged: _isTitleChanged,
-      isArticleEdited: _isArticleEdited
-    }, () => {
-      if (isArticleEdited !== _isArticleEdited) {
-        let { dispatch } = this.props
-        if (_isArticleEdited) {
-          console.log('lockit')
-          dispatch(lockStatus())
-        } else {
-          console.log('unlockit')
-          dispatch(unlockStatus())
-        }
-      }
-    })
-  }
-
-  handleTagsChange (newTag, tags) {
-    let article = this.state.article
-    article.tags = tags
-
-    let _isTagChanged = _.difference(article.tags, this.props.activeArticle.tags).length > 0 || _.difference(this.props.activeArticle.tags, article.tags).length > 0
-
-    let { isTitleChanged, isContentChanged, isArticleEdited, isModeChanged } = this.state
-    let _isArticleEdited = _isTagChanged || isTitleChanged || isContentChanged || isModeChanged
-
-    this.setState({
-      article,
-      isTagChanged: _isTagChanged,
-      isArticleEdited: _isArticleEdited
-    }, () => {
-      if (isArticleEdited !== _isArticleEdited) {
-        let { dispatch } = this.props
-        if (_isArticleEdited) {
-          console.log('lockit')
-          dispatch(lockStatus())
-        } else {
-          console.log('unlockit')
-          dispatch(unlockStatus())
-        }
-      }
-    })
-  }
-
-  handleModeChange (value) {
-    let { article } = this.state
-    article.mode = value
-    let _isModeChanged = article.mode !== this.props.activeArticle.mode
-
-    let { isTagChanged, isContentChanged, isArticleEdited, isTitleChanged } = this.state
-    let _isArticleEdited = _isModeChanged || isTagChanged || isContentChanged || isTitleChanged
-
-    this.setState({
-      article,
-      previewMode: false,
-      isModeChanged: _isModeChanged,
-      isArticleEdited: _isArticleEdited
-    }, () => {
-      if (isArticleEdited !== _isArticleEdited) {
-        let { dispatch } = this.props
-        if (_isArticleEdited) {
-          console.log('lockit')
-          dispatch(lockStatus())
-        } else {
-          console.log('unlockit')
-          dispatch(unlockStatus())
-        }
-      }
-    })
-  }
-
-  handleModeSelectBlur () {
-    if (this.refs.code != null) {
-      this.refs.code.editor.focus()
-    }
-  }
-
-  handleContentChange (e, value) {
-    let { status } = this.props
-    if (status.mode === IDLE_MODE) {
-      return
-    }
-
-    let { article } = this.state
-    article.content = value
-    let _isContentChanged = article.content !== this.props.activeArticle.content
-
-    let { isTagChanged, isModeChanged, isArticleEdited, isTitleChanged } = this.state
-    let _isArticleEdited = _isContentChanged || isTagChanged || isModeChanged || isTitleChanged
-
-    this.setState({
-      article,
-      isContentChanged: _isContentChanged,
-      isArticleEdited: _isArticleEdited
-    }, () => {
-      if (isArticleEdited !== _isArticleEdited) {
-        let { dispatch } = this.props
-        if (_isArticleEdited) {
-          console.log('lockit')
-          dispatch(lockStatus())
-        } else {
-          console.log('unlockit')
-          dispatch(unlockStatus())
-        }
-      }
-    })
-  }
-
-  handleTogglePreviewButtonClick (e) {
-    this.setState({previewMode: !this.state.previewMode})
-  }
-
-  handleTitleKeyDown (e) {
-    if (e.keyCode === 9 && !e.shiftKey) {
-      e.preventDefault()
-      this.refs.mode.handleIdleSelectClick()
-    }
-  }
-
-  renderEdit () {
-    let { folders, status, tags } = this.props
-
-    let folderOptions = folders.map(folder => {
-      return (
-        <option key={folder.key} value={folder.key}>{folder.name}</option>
-      )
-    })
-
-    return (
-      <div className='ArticleDetail edit'>
-        <div className='detailInfo'>
-          <div className='left'>
-            <select
-              className='folder'
-              value={this.state.article.FolderKey}
-              onChange={e => this.handleFolderKeyChange(e)}
-            >
-              {folderOptions}
-            </select>
-            {this.state.isArticleEdited ? ' (edited)' : ''}
-
-            <TagSelect
-              tags={this.state.article.tags}
-              onChange={(tags, tag) => this.handleTagsChange(tags, tag)}
-              suggestTags={tags}
-            />
-
-            {status.isTutorialOpen ? tagSelectTutorialElement : null}
-
-          </div>
-
-          <div className='right'>
-            {
-              this.state.article.mode === 'markdown'
-                ? (<button className='preview' onClick={e => this.handleTogglePreviewButtonClick(e)}>{!this.state.previewMode ? 'Preview' : 'Edit'}</button>)
-                : null
-            }
-            <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
-            <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
-          </div>
-        </div>
-        <div className='detailBody'>
-          <div className='detailPanel'>
-            <div className='header'>
-              <div className='title'>
-                <input onKeyDown={e => this.handleTitleKeyDown(e)} placeholder='Title' ref='title' value={this.state.article.title} onChange={e => this.handleTitleChange(e)}/>
-              </div>
-              <ModeSelect
-                ref='mode'
-                onChange={e => this.handleModeChange(e)}
-                value={this.state.article.mode}
-                className='mode'
-                onBlur={() => this.handleModeSelectBlur()}
-              />
-
-              {status.isTutorialOpen ? modeSelectTutorialElement : null}
-            </div>
-
-            {this.state.previewMode
-              ? <MarkdownPreview content={this.state.article.content}/>
-              : (<CodeEditor
-                  ref='code'
-                  onChange={(e, value) => this.handleContentChange(e, value)}
-                  readOnly={false}
-                  mode={this.state.article.mode}
-                  code={this.state.article.content}
-                />)
-            }
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  render () {
-    let { status, activeArticle } = this.props
-
-    if (activeArticle == null) return this.renderEmpty()
-
-    switch (status.mode) {
-      case EDIT_MODE:
-        return this.renderEdit()
-      case IDLE_MODE:
-      default:
-        return this.renderIdle()
-
-    }
-  }
-}
-
-ArticleDetail.propTypes = {
-  status: PropTypes.shape(),
-  activeArticle: PropTypes.shape(),
-  activeUser: PropTypes.shape(),
-  dispatch: PropTypes.func
-}
-ArticleDetail.prototype.linkState = linkState

browser/main/HomePage/ArticleList.js

@@ -1,118 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ModeIcon from 'boost/components/ModeIcon'
-import moment from 'moment'
-import { switchArticle, NEW } from 'boost/actions'
-import FolderMark from 'boost/components/FolderMark'
-import TagLink from 'boost/components/TagLink'
-import _ from 'lodash'
-
-export default class ArticleList extends React.Component {
-  componentDidMount () {
-    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
-  }
-
-  componentWillUnmount () {
-    clearInterval(this.refreshTimer)
-  }
-
-  componentDidUpdate () {
-    let { articles, activeArticle } = this.props
-    var index = articles.indexOf(activeArticle)
-    var el = ReactDOM.findDOMNode(this)
-    var li = el.querySelectorAll('.ArticleList>div')[index]
-
-    if (li == null) {
-      return
-    }
-
-    var overflowBelow = el.clientHeight + el.scrollTop < li.offsetTop + li.clientHeight
-    if (overflowBelow) {
-      el.scrollTop = li.offsetTop + li.clientHeight - el.clientHeight
-    }
-    var overflowAbove = el.scrollTop > li.offsetTop
-    if (overflowAbove) {
-      el.scrollTop = li.offsetTop
-    }
-  }
-
-  // 移動ができなかったらfalseを返す:
-  selectPriorArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) - 1
-    let targetArticle = articles[targetIndex]
-
-    if (targetArticle != null) {
-      dispatch(switchArticle(targetArticle.key))
-      return true
-    }
-    return false
-  }
-
-  selectNextArticle () {
-    let { articles, activeArticle, dispatch } = this.props
-    let targetIndex = articles.indexOf(activeArticle) + 1
-    let targetArticle = articles[targetIndex]
-
-    if (targetArticle != null) {
-      dispatch(switchArticle(targetArticle.key))
-      return true
-    }
-    return false
-  }
-
-  handleArticleClick (article) {
-    let { dispatch } = this.props
-    return function (e) {
-      if (article.status === NEW) return null
-      dispatch(switchArticle(article.key))
-    }
-  }
-
-  render () {
-    let { articles, activeArticle, folders } = this.props
-
-    let articleElements = articles.map(article => {
-      let tagElements = Array.isArray(article.tags) && article.tags.length > 0
-        ? article.tags.map(tag => {
-          return (<TagLink key={tag} tag={tag}/>)
-        })
-        : (<span>Not tagged yet</span>)
-      let folder = _.findWhere(folders, {key: article.FolderKey})
-
-      return (
-        <div key={'article-' + article.key}>
-          <div onClick={e => this.handleArticleClick(article)(e)} className={'articleItem' + (activeArticle.key === article.key ? ' active' : '')}>
-            <div className='top'>
-              {folder != null
-                ? <span className='folderName'><FolderMark color={folder.color}/>{folder.name}</span>
-                : <span><FolderMark color={-1}/>Unknown</span>
-              }
-            <span className='updatedAt'>{article.status != null ? article.status : moment(article.updatedAt).fromNow()}</span>
-            </div>
-            <div className='middle'>
-              <ModeIcon className='mode' mode={article.mode}/> <div className='title'>{article.status !== NEW ? article.title : '(New article)'}</div>
-            </div>
-            <div className='bottom'>
-              <div className='tags'><i className='fa fa-fw fa-tags'/>{tagElements}</div>
-            </div>
-          </div>
-          <div className='divider'></div>
-        </div>
-      )
-    })
-
-    return (
-      <div className='ArticleList'>
-        {articleElements}
-      </div>
-    )
-  }
-}
-
-ArticleList.propTypes = {
-  folders: PropTypes.array,
-  articles: PropTypes.array,
-  activeArticle: PropTypes.shape(),
-  dispatch: PropTypes.func
-}

browser/main/HomePage/ArticleNavigator.js

@@ -1,180 +0,0 @@
-import React, { PropTypes } from 'react'
-import { findWhere } from 'lodash'
-import { setSearchFilter, switchFolder, switchMode, switchArticle, updateArticle, EDIT_MODE } from 'boost/actions'
-import { openModal } from 'boost/modal'
-import FolderMark from 'boost/components/FolderMark'
-import Preferences from 'boost/components/modal/Preferences'
-import CreateNewFolder from 'boost/components/modal/CreateNewFolder'
-import keygen from 'boost/keygen'
-
-const electron = require('electron')
-const remote = electron.remote
-let userName = remote.getGlobal('process').env.USER
-
-const BRAND_COLOR = '#18AF90'
-
-const preferenceTutorialElement = (
-  <svg width='300' height='300' className='tutorial'>
-    <text x='15' y='30' fill={BRAND_COLOR} fontSize='24'>Preference</text>
-    <svg x='-30' y='-270' width='400' height='400'>
-      <path fill='white' d='M165.9,297c5.3,0,10.6,0.1,15.8,0.1c3.3,0,7.7,0.8,10.7-1c2.3-1.4,3.1-4,4.5-6.2c3.5-5.5,9.6-5.2,14.6-1.9
-c4.6,3.1,8.7,8,8.4,13.8c-0.3,5.2-3.3,10.1-6.1,14.3c-3.1,4.7-6.6,7-12.2,7.9c-5.2,0.8-11.7,1.6-15.4-3
-c-6.6-8.2,2.1-20.5,7.4-27.1c6.5-8.1,20.1-14,26.4-2.1c5.4,10.3-3.1,21.7-13,24.8c-5.7,1.8-11,0.9-16.2-1.9c-2-1.1-5-2.6-6.6-4.4
-c-3.9-4.3-0.3-8.2,2.5-11.2c1.3-1.4-0.8-3.6-2.1-2.1c-2.7,2.9-5.8,6.6-5.1,10.9c0.7,4.4,5.6,6.9,9,8.9c8.6,5.1,18.7,4.8,26.8-1.2
-c7.3-5.4,11.6-15,8-23.7c-3.3-8.1-11.7-11.8-20-9c-12.5,4.1-33.7,33.5-15.9,43.1c6.8,3.7,19.8,1.8,25.3-3.6
-c6.1-5.8,12.1-17.2,9.5-25.7c-2.6-8.4-13.7-17-22.6-13.3c-1.6,0.7-3,1.7-4.1,3c-1.6,1.9-2.2,5.1-4.1,6.6c-3.1,2.4-10.1,1-13.7,1
-c-4,0-7.9,0-11.9-0.1C164,294,164,297,165.9,297L165.9,297z'/>
-    </svg>
-  </svg>
-)
-
-const newPostTutorialElement = (
-  <svg width='900' height='900' className='tutorial'>
-    <text x='290' y='155' fill={BRAND_COLOR} fontSize='24'>Create a new post!!</text>
-    <text x='300' y='180' fill={BRAND_COLOR} fontSize='16'>press `⌘ + Enter` or `a`</text>
-    <svg x='130' y='-20' width='400' height='400'>
-      <path fill='white' d='M56.2,132.5c11.7-2.9,23.9-6,36.1-4.1c8.7,1.4,16.6,5.5,23.7,10.5c13.3,9.4,24.5,21.5,40.2,27
-  c1.8,0.6,2.6-2.3,0.8-2.9c-17.1-6-28.9-20.3-44-29.7c-7-4.4-14.8-7.4-23-8.2c-11.7-1.1-23.3,1.7-34.5,4.5
-  C53.6,130.1,54.4,133,56.2,132.5L56.2,132.5 z'/>
-    </svg>
-    <svg x='130' y='-120' width='400' height='400'>
-      <path fill='white' d='M82.6,218c-7.7,4.5-15.3,9.3-22.7,14.3c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
-        c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3
-        C85.7,219.7,84.2,217.1,82.6,218L82.6,218z'/>
-    </svg>
-  </svg>
-)
-
-const newFolderTutorialElement = (
-  <svg width='800' height='500' className='tutorial'>
-    <text x='145' y='110' fill={BRAND_COLOR} fontSize='24'>Create a new folder!!</text>
-    <svg x='115' y='-10' width='300' height='400'>
-      <path fill='white' d='M36.6,3.7C28.8,8.2,21.3,13,13.9,18c-1,0.7-0.9,2.4,0.4,2.7c6.2,1.8,11.5,4.8,16.2,9.2
-c1.4,1.3,3.5-0.8,2.1-2.1c-5.1-4.8-10.9-8.1-17.6-10c0.1,0.9,0.2,1.8,0.4,2.7c7.4-5,15-9.8,22.7-14.3C39.7,5.3,38.2,2.7,36.6,3.7
-L36.6,3.7z'/>
-      <path fill='white' d='M16.8,21.5c13.3-6.9,29.5-7,42.6,0.6c5.6,3.2,10.4,7.7,14.1,13c3.8,5.4,10.3,16.2,2.2,20.6
-c-1.2,0.7-2.5,1.2-3.9,1.6c-1.1,0.4-2.3,0.5-3.4,0.5c-1.3-1.4-2.6-2.8-3.9-4.2c-0.2-4.6,7.5-6,10.5-5.8
-c7.4,0.7,13.7,6.2,18.4,11.6c9.4,10.7,14.7,24.3,15.6,38.5c0.1,1.9,3.1,1.9,3,0c-0.9-15.5-6.9-30.4-17.5-41.8
-c-6.8-7.3-25.8-19.1-32.3-4.8c-1.9,4.1,0.3,8.5,4.8,9.4c4.6,0.8,11.6-1.8,14.3-5.7c3.6-5.3-0.1-12.8-2.8-17.6
-c-3.4-6.1-8.2-11.3-13.8-15.4C50.2,11.6,31,10.9,15.3,19C13.6,19.8,15.1,22.4,16.8,21.5L16.8,21.5z'/>
-    </svg>
-  </svg>
-)
-
-export default class ArticleNavigator extends React.Component {
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
-  }
-
-  handleNewPostButtonClick (e) {
-    let { dispatch, folders, status } = this.props
-    let { targetFolders } = status
-
-    let FolderKey = targetFolders.length > 0
-      ? targetFolders[0].key
-      : folders[0].key
-
-    let newArticle = {
-      id: null,
-      key: keygen(),
-      title: '',
-      content: '',
-      mode: 'markdown',
-      tags: [],
-      FolderKey: FolderKey,
-      status: 'NEW'
-    }
-
-    dispatch(updateArticle(newArticle))
-    dispatch(switchArticle(newArticle.key, true))
-    dispatch(switchMode(EDIT_MODE))
-  }
-
-  handleNewFolderButton (e) {
-    let { activeUser } = this.props
-    openModal(CreateNewFolder, {user: activeUser})
-  }
-
-  handleFolderButtonClick (name) {
-    return e => {
-      let { dispatch } = this.props
-      dispatch(switchFolder(name))
-    }
-  }
-
-  handleAllFoldersButtonClick (e) {
-    let { dispatch } = this.props
-    dispatch(setSearchFilter(''))
-  }
-
-  render () {
-    let { status, folders, allArticles } = this.props
-    let { targetFolders } = status
-    if (targetFolders == null) targetFolders = []
-
-    let folderElememts = folders.map((folder, index) => {
-      let isActive = findWhere(targetFolders, {key: folder.key})
-      let articleCount = allArticles.filter(article => article.FolderKey === folder.key && article.status !== 'NEW').length
-
-      return (
-        <button onClick={e => this.handleFolderButtonClick(folder.name)(e)} key={'folder-' + folder.key} className={isActive ? 'active' : ''}>
-          <FolderMark color={folder.color}/> {folder.name} <span className='articleCount'>{articleCount}</span>
-        </button>
-      )
-    })
-
-    return (
-      <div className='ArticleNavigator'>
-        <div className='userInfo'>
-          <div className='userProfileName'>{userName}</div>
-          <div className='userName'>localStorage</div>
-          <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
-            <i className='fa fa-fw fa-chevron-down'/>
-            <span className='tooltip'>Preferences</span>
-          </button>
-
-          {status.isTutorialOpen ? preferenceTutorialElement : null}
-
-        </div>
-
-        <div className='controlSection'>
-          <button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>
-            New Post
-            <span className='tooltip'>Create a new Post (⌘ + Enter or a)</span>
-          </button>
-
-          {status.isTutorialOpen ? newPostTutorialElement : null}
-
-        </div>
-
-        <div className='folders'>
-          <div className='header'>
-            <div className='title'>Folders</div>
-            <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
-              <i className='fa fa-fw fa-plus'/>
-              <span className='tooltip'>Create a new folder</span>
-            </button>
-
-            {status.isTutorialOpen ? newFolderTutorialElement : null}
-
-          </div>
-          <div className='folderList'>
-            <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>
-            {folderElememts}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-ArticleNavigator.propTypes = {
-  activeUser: PropTypes.object,
-  folders: PropTypes.array,
-  allArticles: PropTypes.array,
-  status: PropTypes.shape({
-    folderId: PropTypes.number
-  }),
-  dispatch: PropTypes.func
-}
-

browser/main/HomePage/ArticleTopBar.js

@@ -1,164 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import ExternalLink from 'boost/components/ExternalLink'
-import { setSearchFilter, clearSearch, toggleTutorial } from 'boost/actions'
-
-const BRAND_COLOR = '#18AF90'
-
-const searchTutorialElement = (
-  <svg width='750' height='120' className='tutorial'>
-    <text x='450' y='33' fill={BRAND_COLOR} fontSize='24'>Search some posts!!</text>
-    <text x='450' y='60' fill={BRAND_COLOR} fontSize='18'>{'- Search by tag : #{string}'}</text>
-    <text x='450' y='85' fill={BRAND_COLOR} fontSize='18'>
-    {'- Search by folder : /{folder_name}\n'}</text>
-    <text x='465' y='105' fill={BRAND_COLOR} fontSize='14'>
-    {'exact match : //{folder_name}'}</text>
-
-    <svg width='500' height='300'>
-      <path fill='white' d='M54.5,51.5c-12.4,3.3-27.3-1.4-38.4-7C11.2,42,5,38.1,5.6,31.8c0.7-6.9,8.1-11.2,13.8-13.7
-c12.3-5.4,26.4-6.8,39.7-7.7C72.4,9.6,85.7,9.7,99,9.8c55.2,0.3,110.4,2.2,165.5-1.5C291,6.5,317.7,3.8,344.1,7
-c12.8,1.6,25.8,4.4,37.5,10c1.2,0.6,2.4,1.1,3.5,1.8c2.4,1.4,3.2,1.5,3.3,4.5c0.1,3.6-2.3,5.9-4.8,8.3c-3.9,3.8-8.6,6.8-13.5,9.2
-c-12.6,6-26.5,7.2-40.3,7.7c-13.7,0.5-27.5,0.6-41.2,1.1c-27.7,0.9-55.3,2.2-82.9,4c-30.8,2-61.6,4.5-92.3,7.6
-c-15.4,1.5-30.8,3.7-46.3,4.9c-13.6,1.1-30.7,1.5-41.8-7.8c-1.5-1.2-3.6,0.9-2.1,2.1c8.9,7.5,21.4,9.2,32.7,9.2
-c15.3,0,30.6-2.6,45.8-4.2c31.3-3.3,62.7-6,94.2-8.1c30.9-2.1,61.8-3.7,92.8-4.7c15.7-0.5,31.4-0.5,47-1.3
-c13.1-0.7,26.3-2.7,38.1-8.9c4.4-2.3,8.5-5.1,12-8.6c2.8-2.8,7.3-7.3,6.4-11.7c-0.8-4.3-6.4-6.3-9.8-7.9
-c-5.6-2.6-11.4-4.6-17.3-6.2c-28.3-7.5-58.1-5.6-87-3.6c-62.3,4.4-124.5,2.6-187,2.4c-16.4,0-32.8,0-49,2.4
-C29.9,11,13.4,13.8,5.5,24.6c-7.3,10,0.7,18.4,9.8,22.9c11.9,5.8,26.9,10.4,40,7C57.2,53.9,56.4,51,54.5,51.5L54.5,51.5z'/>
-      <path fill='white' d='M446.5,21.4c-9.1-1.6-18.1-3.5-27.4-3.5c-10.2,0-20.4,1.4-30.5,2.8c-1.9,0.3-1.9,3.3,0,3
-c9.5-1.3,19.1-2.6,28.8-2.7c9.6-0.2,18.9,1.7,28.3,3.4C447.6,24.7,448.4,21.8,446.5,21.4L446.5,21.4z'/>
-    </svg>
-  </svg>
-)
-
-export default class ArticleTopBar extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isTooltipHidden: true
-    }
-  }
-
-  componentDidMount () {
-    this.searchInput = ReactDOM.findDOMNode(this.refs.searchInput)
-  }
-
-  componentWillUnmount () {
-    this.searchInput.removeEventListener('keydown', this.showTooltip)
-    this.searchInput.removeEventListener('focus', this.showTooltip)
-    this.searchInput.removeEventListener('blur', this.showTooltip)
-  }
-
-  handleTooltipRequest (e) {
-    if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
-      this.setState({isTooltipHidden: false})
-    } else {
-      this.setState({isTooltipHidden: true})
-    }
-  }
-
-  isInputFocused () {
-    return document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)
-  }
-
-  escape () {
-    let { status, dispatch } = this.props
-    if (status.search.length > 0) {
-      dispatch(clearSearch())
-      return
-    }
-    this.blurInput()
-  }
-
-  focusInput () {
-    this.searchInput.focus()
-  }
-
-  blurInput () {
-    this.searchInput.blur()
-  }
-
-  handleSearchChange (e) {
-    let { dispatch } = this.props
-
-    dispatch(setSearchFilter(e.target.value))
-    this.handleTooltipRequest()
-  }
-
-  handleSearchClearButton (e) {
-    this.searchInput.value = ''
-    this.focusInput()
-  }
-
-  handleTutorialButtonClick (e) {
-    let { dispatch } = this.props
-
-    dispatch(toggleTutorial())
-  }
-
-  render () {
-    let { status } = this.props
-    return (
-      <div className='ArticleTopBar'>
-        <div className='left'>
-          <div className='search'>
-            <i className='fa fa-search fa-fw' />
-            <input
-              ref='searchInput'
-              onFocus={e => this.handleSearchChange(e)}
-              onBlur={e => this.handleSearchChange(e)}
-              value={this.props.status.search}
-              onChange={e => this.handleSearchChange(e)}
-              placeholder='Search'
-              type='text'
-            />
-            {
-              this.props.status.search != null && this.props.status.search.length > 0
-                ? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button>
-                : null
-            }
-            <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
-              - Search by tag : #{'{string}'}<br/>
-              - Search by folder : /{'{folder_name}'}
-            </div>
-          </div>
-
-          {status.isTutorialOpen ? searchTutorialElement : null}
-
-        </div>
-        <div className='right'>
-          <button onClick={e => this.handleTutorialButtonClick(e)}>?<span className='tooltip'>How to use</span>
-          </button>
-          <ExternalLink className='logo' href='http://b00st.io'>
-            <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
-            <span className='tooltip'>Boost official page</span>
-          </ExternalLink>
-        </div>
-
-        {status.isTutorialOpen ? (
-          <div className='tutorial'>
-            <div onClick={e => this.handleTutorialButtonClick(e)} className='clickJammer'/>
-            <svg width='500' height='250' className='finder'>
-              <text x='100' y='25' fontSize='32' fill={BRAND_COLOR}>Also, you can open Finder!!</text>
-              <text x='120' y='55' fontSize='18' fill={BRAND_COLOR}>with pressing `Control` + `shift` + `tab`</text>
-            </svg>
-            <svg width='450' className='global'>
-              <text x='100' y='45' fontSize='24' fill={BRAND_COLOR}>Hope you to enjoy our app :D</text>
-              <text x='50' y='75' fontSize='18' fill={BRAND_COLOR}>Press any key or click to escape tutorial mode</text>
-            </svg>
-            <div className='back'></div>
-          </div>
-        ) : null}
-
-      </div>
-    )
-  }
-}
-
-ArticleTopBar.propTypes = {
-  search: PropTypes.string,
-  dispatch: PropTypes.func,
-  status: PropTypes.shape({
-    search: PropTypes.string
-  })
-}

browser/main/HomePage/UserNavigator.js

@@ -1,52 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-import { Link } from 'react-router'
-import ProfileImage from 'boost/components/ProfileImage'
-import { openModal } from 'boost/modal'
-import CreateNewTeam from 'boost/components/modal/CreateNewTeam'
-
-export default class UserNavigator extends Component {
-  handleClick (e) {
-    openModal(CreateNewTeam)
-  }
-
-  // for dev
-  componentDidMount () {
-    // openModal(CreateNewTeam)
-  }
-
-  renderUserList () {
-    if (this.props.users == null) return null
-
-    var users = this.props.users.map((user, index) => (
-      <li key={'user-' + user.id}>
-        <Link to={'/users/' + user.id} activeClassName='active'>
-          <ProfileImage email={user.email} size='44'/>
-          <div className='userTooltip'>{user.name}</div>
-          {index < 9 ? <div className='keyLabel'>{'⌘' + (index + 1)}</div> : null}
-        </Link>
-      </li>
-    ))
-
-    return (
-      <ul className='userList'>
-        {users}
-      </ul>
-    )
-  }
-
-  render () {
-    return (
-      <div className='UserNavigator'>
-        {this.renderUserList()}
-        <button className='createTeamBtn' onClick={e => this.handleClick(e)}>
-          +
-          <div className='tooltip'>Create a new team</div>
-        </button>
-      </div>
-    )
-  }
-}
-
-UserNavigator.propTypes = {
-  users: PropTypes.array
-}

browser/main/LoginPage.js

@@ -1,93 +0,0 @@
-import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
-import linkState from 'boost/linkState'
-import { login } from 'boost/api'
-import auth from 'boost/auth'
-
-export default class LoginPage extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      user: {},
-      isSending: false,
-      error: null
-    }
-    this.linkState = linkState
-  }
-
-  handleSubmit (e) {
-    e.preventDefault()
-    this.setState({
-      isSending: true,
-      error: null
-    }, function () {
-      login(this.state.user)
-        .then(res => {
-          let { user, token } = res.body
-          auth.user(user, token)
-
-          this.props.history.pushState('home')
-        })
-        .catch(err => {
-          console.error(err)
-          if (err.code === 'ECONNREFUSED') {
-            return this.setState({
-              error: {
-                name: 'CunnectionRefused',
-                message: 'Can\'t cznnect to API server.'
-              },
-              isSending: false
-            })
-          } else if (err.status != null) {
-            return this.setState({
-              error: {
-                name: err.response.body.name,
-                message: err.response.body.message
-              },
-              isSending: false
-            })
-          }
-          else throw err
-        })
-    })
-  }
-
-  render () {
-    return (
-      <div className='LoginContainer'>
-        <img className='logo' src='../../resources/favicon-230x230.png'/>
-
-        <nav className='authNavigator text-center'>
-          <Link to='/login' activeClassName='active'>Log In</Link> / <Link to='/signup' activeClassName='active'>Sign Up</Link>
-        </nav>
-
-        <form onSubmit={e => this.handleSubmit(e)}>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
-          </div>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.password')} onChange={this.handleChange} type='password' placeholder='Password'/>
-          </div>
-
-          {this.state.isSending
-            ? (
-              <p className='alertInfo'>Logging in...</p>
-            ) : null}
-
-          {this.state.error != null ? <p className='alertError'>{this.state.error.message}</p> : null}
-
-          <div className='formField'>
-            <button className='logInButton' type='submit'>Log In</button>
-          </div>
-        </form>
-      </div>
-    )
-  }
-}
-
-LoginPage.propTypes = {
-  history: PropTypes.shape({
-    pushState: PropTypes.func
-  })
-}

browser/main/Main.js

@@ -0,0 +1,275 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './Main.styl'
+import { connect } from 'react-redux'
+import SideNav from './SideNav'
+import TopBar from './TopBar'
+import NoteList from './NoteList'
+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 mixpanel from 'browser/main/lib/mixpanel'
+import mobileAnalytics from 'browser/main/lib/AwsMobileAnalyticsConfig'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+
+function focused () {
+  mixpanel.track('MAIN_FOCUSED')
+}
+
+class Main extends React.Component {
+  constructor (props) {
+    super(props)
+
+    if (process.env.NODE_ENV === 'production') {
+      mobileAnalytics.initAwsMobileAnalytics()
+    }
+
+    let { config } = props
+
+    this.state = {
+      isRightSliderFocused: false,
+      listWidth: config.listWidth,
+      navWidth: config.navWidth,
+      isLeftSliderFocused: false,
+      fullScreen: false,
+      noteDetailWidth: 0,
+      mainBodyWidth: 0
+    }
+
+    this.toggleFullScreen = () => this.handleFullScreenButton()
+  }
+
+  getChildContext () {
+    let { status, config } = this.props
+
+    return {
+      status,
+      config
+    }
+  }
+
+  componentDidMount () {
+    let { dispatch, config } = this.props
+
+    if (config.ui.theme === 'dark') {
+      document.body.setAttribute('data-theme', 'dark')
+    } else {
+      document.body.setAttribute('data-theme', 'default')
+    }
+
+    // Reload all data
+    dataApi.init()
+      .then((data) => {
+        dispatch({
+          type: 'INIT_ALL',
+          storages: data.storages,
+          notes: data.notes
+        })
+
+        if (data.storages.length < 1) {
+          modal.open(InitModal)
+        }
+      })
+
+    eventEmitter.on('editor:fullscreen', this.toggleFullScreen)
+    window.addEventListener('focus', focused)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('focus', focused)
+    eventEmitter.off('editor:fullscreen', this.toggleFullScreen)
+  }
+
+  handleLeftSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isLeftSliderFocused: true
+    })
+  }
+
+  handleRightSlideMouseDown (e) {
+    e.preventDefault()
+    this.setState({
+      isRightSliderFocused: true
+    })
+  }
+
+  handleMouseUp (e) {
+    // Change width of NoteList component.
+    if (this.state.isRightSliderFocused) {
+      this.setState({
+        isRightSliderFocused: false
+      }, () => {
+        let { dispatch } = this.props
+        let newListWidth = this.state.listWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({listWidth: newListWidth})
+        dispatch({
+          type: 'SET_LIST_WIDTH',
+          listWidth: newListWidth
+        })
+      })
+    }
+
+    // Change width of SideNav component.
+    if (this.state.isLeftSliderFocused) {
+      this.setState({
+        isLeftSliderFocused: false
+      }, () => {
+        let { dispatch } = this.props
+        let navWidth = this.state.navWidth
+        // TODO: ConfigManager should dispatch itself.
+        ConfigManager.set({ navWidth })
+        dispatch({
+          type: 'SET_NAV_WIDTH',
+          navWidth
+        })
+      })
+    }
+  }
+
+  handleMouseMove (e) {
+    if (this.state.isRightSliderFocused) {
+      let offset = this.refs.body.getBoundingClientRect().left
+      let newListWidth = e.pageX - offset
+      if (newListWidth < 10) {
+        newListWidth = 10
+      } else if (newListWidth > 600) {
+        newListWidth = 600
+      }
+      this.setState({
+        listWidth: newListWidth
+      })
+    }
+    if (this.state.isLeftSliderFocused) {
+      let navWidth = e.pageX
+      if (navWidth < 80) {
+        navWidth = 80
+      } else if (navWidth > 600) {
+        navWidth = 600
+      }
+      this.setState({
+        navWidth: navWidth
+      })
+    }
+  }
+
+  handleFullScreenButton (e) {
+    this.setState({ fullScreen: !this.state.fullScreen }, () => {
+      const noteDetail = document.querySelector('.NoteDetail')
+      const noteList = document.querySelector('.NoteList')
+      const mainBody = document.querySelector('#main-body')
+
+      if (this.state.fullScreen) {
+        this.hideLeftLists(noteDetail, noteList, mainBody)
+      } else {
+        this.showLeftLists(noteDetail, noteList, mainBody)
+      }
+    })
+  }
+
+  hideLeftLists (noteDetail, noteList, mainBody) {
+    this.state.noteDetailWidth = noteDetail.style.left
+    this.state.mainBodyWidth = mainBody.style.left
+    noteDetail.style.left = '0px'
+    mainBody.style.left = '0px'
+    noteList.style.display = 'none'
+  }
+
+  showLeftLists (noteDetail, noteList, mainBody) {
+    noteDetail.style.left = this.state.noteDetailWidth
+    mainBody.style.left = this.state.mainBodyWidth
+    noteList.style.display = 'inline'
+  }
+
+  render () {
+    let { config } = this.props
+
+    return (
+      <div
+        className='Main'
+        styleName='root'
+        onMouseMove={(e) => this.handleMouseMove(e)}
+        onMouseUp={(e) => this.handleMouseUp(e)}
+      >
+        <SideNav
+          {..._.pick(this.props, [
+            'dispatch',
+            'data',
+            'config',
+            'location'
+          ])}
+          width={this.state.navWidth}
+        />
+        {!config.isSideNavFolded &&
+          <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
+            style={{left: this.state.navWidth}}
+            onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox' />
+          </div>
+        }
+        <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
+          id='main-body'
+          ref='body'
+          style={{left: config.isSideNavFolded ? 44 : this.state.navWidth}}
+        >
+          <TopBar style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'config',
+              'data',
+              'params',
+              'location'
+            ])}
+          />
+          <NoteList style={{width: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'data',
+              'config',
+              'params',
+              'location'
+            ])}
+          />
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
+            style={{left: this.state.listWidth - 1}}
+            onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
+            draggable='false'
+          >
+            <div styleName='slider-hitbox' />
+          </div>
+          <Detail
+            style={{left: this.state.listWidth}}
+            {..._.pick(this.props, [
+              'dispatch',
+              'data',
+              'config',
+              'params',
+              'location'
+            ])}
+            ignorePreviewPointerEvents={this.state.isRightSliderFocused}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+Main.childContextTypes = {
+  status: PropTypes.shape({
+    updateReady: PropTypes.bool.isRequired
+  }).isRequired,
+  config: PropTypes.shape({}).isRequired
+}
+
+Main.propTypes = {
+  dispatch: PropTypes.func,
+  data: PropTypes.shape({}).isRequired
+}
+
+export default connect((x) => x)(CSSModules(Main, styles))

browser/main/Main.styl

@@ -0,0 +1,43 @@
+.root
+  absolute top left bottom right
+
+.body
+  absolute right top bottom
+  left $sideNav-width
+
+.body--expanded
+  @extend .body
+  left $sideNav--folded-width
+
+.slider
+  absolute top bottom
+  top -2px
+  width 0
+  z-index 0
+
+.slider-right
+  @extend .slider
+  width 1px
+  z-index 0
+
+.slider--active
+  @extend .slider
+
+.slider-right--active
+  @extend .slider-right
+
+.slider-hitbox
+  absolute top bottom left right
+  width 7px
+  left -3px
+  z-index 10
+  cursor col-resize
+
+
+body[data-theme="dark"]
+  .root
+    absolute top left bottom right
+
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/MainPage.js

@@ -1,45 +0,0 @@
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-import React, { PropTypes } from 'react'
-
-var ContactModal = require('boost/components/modal/ContactModal')
-
-export default class MainContainer extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {updateAvailable: false}
-  }
-
-  componentDidMount () {
-    ipc.on('update-available', function (message) {
-      this.setState({updateAvailable: true})
-    }.bind(this))
-  }
-
-  updateApp () {
-    ipc.send('update-app', 'Deal with it.')
-  }
-
-  openContactModal () {
-    this.openModal(ContactModal)
-  }
-
-  render () {
-    return (
-      <div className='Main'>
-        {this.state.updateAvailable ? (
-        <button onClick={this.updateApp} className='appUpdateButton'><i className='fa fa-cloud-download'/> Update available!</button>
-        ) : null}
-        {/* <button onClick={this.openContactModal} className='contactButton'>
-          <i className='fa fa-paper-plane-o'/>
-          <div className='tooltip'>Contact us</div>
-        </button> */}
-        {this.props.children}
-      </div>
-    )
-  }
-}
-
-MainContainer.propTypes = {
-  children: PropTypes.element
-}

browser/main/NoteList/NoteList.styl

@@ -0,0 +1,84 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.control
+  absolute top left right
+  user-select none
+  height $control-height
+  font-size 12px
+  line-height 25px
+  display flex
+  background-color $ui-noteList-backgroundColor
+  color $ui-inactive-text-color
+
+.control-sortBy
+  flex 1
+  padding-left 22px
+
+.control-sortBy-select
+  appearance: none;
+  margin-left 3px
+  color $ui-inactive-text-color
+  padding 0
+  border none
+  background-color transparent
+  outline none
+  cursor pointer
+  font-size 11px
+  &:hover
+    transition 0.2s
+    color $ui-text-color
+
+.control-button-area
+  margin-right 12px
+
+.control-button
+  width 25px
+  padding 0
+  background-color transparent
+  border none
+  color alpha($ui-inactive-text-color, 60%)
+  transition 0.15s
+  &:active, &:active:hover
+    color $ui-inactive-text-color
+  &:hover
+    color $ui-inactive-text-color
+
+.control-button--active
+  @extend .control-button
+  color $ui-inactive-text-color
+  &:hover
+    color $ui-inactive-text-color
+
+.list
+  absolute left right bottom
+  top $control-height
+  overflow auto
+
+body[data-theme="dark"]
+  .root
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    background-color $ui-dark-noteList-backgroundColor
+    border-color $ui-dark-borderColor
+
+  .control-sortBy-select
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+
+  .control-button
+    color $ui-dark-inactive-text-color
+    &:hover
+      color $ui-dark-text-color
+  
+  .control-button--active
+    color $ui-dark-text-color
+    &:active
+      color $ui-dark-text-color

browser/main/NoteList/index.js

@@ -0,0 +1,496 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './NoteList.styl'
+import moment from 'moment'
+import _ from 'lodash'
+import ee from 'browser/main/lib/eventEmitter'
+import dataApi from 'browser/main/lib/dataApi'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import NoteItem from 'browser/components/NoteItem'
+import NoteItemSimple from 'browser/components/NoteItemSimple'
+import searchFromNotes from 'browser/lib/search'
+import fs from 'fs'
+import { hashHistory } from 'react-router'
+import markdown from 'browser/lib/markdown'
+import { findNoteTitle } from 'browser/lib/findNoteTitle'
+
+const { remote } = require('electron')
+const { Menu, MenuItem, dialog } = remote
+
+function sortByCreatedAt (a, b) {
+  return new Date(b.createdAt) - new Date(a.createdAt)
+}
+
+function sortByAlphabetical (a, b) {
+  return a.title.localeCompare(b.title)
+}
+
+function sortByUpdatedAt (a, b) {
+  return new Date(b.updatedAt) - new Date(a.updatedAt)
+}
+
+class NoteList extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.selectNextNoteHandler = () => {
+      console.log('fired next')
+      this.selectNextNote()
+    }
+    this.selectPriorNoteHandler = () => {
+      this.selectPriorNote()
+    }
+    this.focusHandler = () => {
+      this.refs.list.focus()
+    }
+    this.alertIfSnippetHandler = () => {
+      this.alertIfSnippet()
+    }
+    this.importFromFileHandler = this.importFromFile.bind(this)
+    this.jumpNoteByHash = this.jumpNoteByHashHandler.bind(this)
+
+    this.state = {
+    }
+  }
+
+  componentDidMount () {
+    this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+    ee.on('list:next', this.selectNextNoteHandler)
+    ee.on('list:prior', this.selectPriorNoteHandler)
+    ee.on('list:focus', this.focusHandler)
+    ee.on('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.on('import:file', this.importFromFileHandler)
+    ee.on('list:jump', this.jumpNoteByHash)
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.location.pathname !== this.props.location.pathname) {
+      this.resetScroll()
+    }
+  }
+
+  resetScroll () {
+    this.refs.list.scrollTop = 0
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.refreshTimer)
+
+    ee.off('list:next', this.selectNextNoteHandler)
+    ee.off('list:prior', this.selectPriorNoteHandler)
+    ee.off('list:focus', this.focusHandler)
+    ee.off('list:isMarkdownNote', this.alertIfSnippetHandler)
+    ee.off('import:file', this.importFromFileHandler)
+    ee.off('list:jump', this.jumpNoteByHash)
+  }
+
+  componentDidUpdate (prevProps) {
+    let { location } = this.props
+
+    if (this.notes.length > 0 && location.query.key == null) {
+      let { router } = this.context
+      router.replace({
+        pathname: location.pathname,
+        query: {
+          key: this.notes[0].storage + '-' + this.notes[0].key
+        }
+      })
+      return
+    }
+
+    // Auto scroll
+    if (_.isString(location.query.key) && prevProps.location.query.key === location.query.key) {
+      let targetIndex = _.findIndex(this.notes, (note) => {
+        return note != null && note.storage + '-' + note.key === location.query.key
+      })
+      if (targetIndex > -1) {
+        let list = this.refs.list
+        let item = list.childNodes[targetIndex]
+
+        if (item == null) return false
+
+        let overflowBelow = item.offsetTop + item.clientHeight - list.clientHeight - list.scrollTop > 0
+        if (overflowBelow) {
+          list.scrollTop = item.offsetTop + item.clientHeight - list.clientHeight
+        }
+        let overflowAbove = list.scrollTop > item.offsetTop
+        if (overflowAbove) {
+          list.scrollTop = item.offsetTop
+        }
+      }
+    }
+  }
+
+  selectPriorNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.storage + '-' + note.key === location.query.key
+    })
+
+    if (targetIndex === 0) {
+      return
+    }
+    targetIndex--
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+  }
+
+  selectNextNote () {
+    if (this.notes == null || this.notes.length === 0) {
+      return
+    }
+    let { router } = this.context
+    let { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.storage + '-' + note.key === location.query.key
+    })
+
+    if (targetIndex === this.notes.length - 1) {
+      targetIndex = 0
+    } else {
+      targetIndex++
+      if (targetIndex < 0) targetIndex = 0
+      else if (targetIndex > this.notes.length - 1) targetIndex === this.notes.length - 1
+    }
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+    ee.emit('list:moved')
+  }
+
+  jumpNoteByHashHandler (event, noteHash) {
+    // first argument event isn't used.
+    if (this.notes === null || this.notes.length === 0) {
+      return
+    }
+
+    const { router } = this.context
+    const { location } = this.props
+
+    let targetIndex = _.findIndex(this.notes, (note) => {
+      return note.storage + '-' + note.key === noteHash
+    })
+
+    if (targetIndex < 0) targetIndex = 0
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: this.notes[targetIndex].storage + '-' + this.notes[targetIndex].key
+      }
+    })
+
+    ee.emit('list:moved')
+  }
+
+  handleNoteListKeyDown (e) {
+    if (e.metaKey || e.ctrlKey) return true
+
+    if (e.keyCode === 65 && !e.shiftKey) {
+      e.preventDefault()
+      ee.emit('top:new-note')
+    }
+
+    if (e.keyCode === 68) {
+      e.preventDefault()
+      ee.emit('detail:delete')
+    }
+
+    if (e.keyCode === 69) {
+      e.preventDefault()
+      ee.emit('detail:focus')
+    }
+
+    if (e.keyCode === 38) {
+      e.preventDefault()
+      this.selectPriorNote()
+    }
+
+    if (e.keyCode === 40) {
+      e.preventDefault()
+      this.selectNextNote()
+    }
+  }
+
+  getNotes () {
+    let { data, params, location } = this.props
+    let { router } = this.context
+
+    if (location.pathname.match(/\/home/)) {
+      return data.noteMap.map((note) => note)
+    }
+
+    if (location.pathname.match(/\/starred/)) {
+      return data.starredSet.toJS()
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
+    if (location.pathname.match(/\/searched/)) {
+      const searchInputText = document.getElementsByClassName('searchInput')[0].value
+      if (searchInputText === '') {
+        router.push('/home')
+      }
+      return searchFromNotes(this.props.data, searchInputText)
+    }
+
+    if (location.pathname.match(/\/trashed/)) {
+      return data.trashedSet.toJS()
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
+    let storageKey = params.storageKey
+    let folderKey = params.folderKey
+    let storage = data.storageMap.get(storageKey)
+    if (storage == null) return []
+
+    let folder = _.find(storage.folders, {key: folderKey})
+    if (folder == null) {
+      let storageNoteSet = data.storageNoteMap
+        .get(storage.key)
+      if (storageNoteSet == null) storageNoteSet = []
+      return storageNoteSet
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+    }
+
+    let folderNoteKeyList = data.folderNoteMap
+      .get(storage.key + '-' + folder.key)
+
+    return folderNoteKeyList != null
+      ? folderNoteKeyList
+        .map((uniqueKey) => data.noteMap.get(uniqueKey))
+      : []
+  }
+
+  handleNoteClick (e, uniqueKey) {
+    let { router } = this.context
+    let { location } = this.props
+
+    router.push({
+      pathname: location.pathname,
+      query: {
+        key: uniqueKey
+      }
+    })
+  }
+
+  handleSortByChange (e) {
+    let { dispatch } = this.props
+
+    let config = {
+      sortBy: e.target.value
+    }
+
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+  }
+
+  handleListStyleButtonClick (e, style) {
+    let { dispatch } = this.props
+
+    let config = {
+      listStyle: style
+    }
+
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+  }
+
+  alertIfSnippet () {
+    let { location } = this.props
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return `${note.storage}-${note.key}` === location.query.key
+    })
+    if (this.notes[targetIndex].type === 'SNIPPET_NOTE') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Sorry!',
+        detail: 'md/text import is available only a markdown note.',
+        buttons: ['OK', 'Cancel']
+      })
+    }
+  }
+
+  handleDragStart (e, note) {
+    const noteData = JSON.stringify(note)
+    e.dataTransfer.setData('note', noteData)
+  }
+
+  importFromFile () {
+    const { dispatch, location } = this.props
+
+    const options = {
+      filters: [
+        { name: 'Documents', extensions: ['md', 'txt'] }
+      ],
+      properties: ['openFile', 'multiSelections']
+    }
+
+    const targetIndex = _.findIndex(this.notes, (note) => {
+      return note !== null && `${note.storage}-${note.key}` === location.query.key
+    })
+
+    const storageKey = this.notes[targetIndex].storage
+    const folderKey = this.notes[targetIndex].folder
+
+    dialog.showOpenDialog(remote.getCurrentWindow(), options, (filepaths) => {
+      if (filepaths === undefined) return
+      filepaths.forEach((filepath) => {
+        fs.readFile(filepath, (err, data) => {
+          if (err) throw Error('File reading error: ', err)
+          const content = data.toString()
+          const newNote = {
+            content: content,
+            folder: folderKey,
+            title: markdown.strip(findNoteTitle(content)),
+            type: 'MARKDOWN_NOTE'
+          }
+          dataApi.createNote(storageKey, newNote)
+          .then((note) => {
+            dispatch({
+              type: 'UPDATE_NOTE',
+              note: note
+            })
+            hashHistory.push({
+              pathname: location.pathname,
+              query: {key: `${note.storage}-${note.key}`}
+            })
+          })
+        })
+      })
+    })
+  }
+
+  render () {
+    let { location, notes, config, dispatch } = this.props
+    let sortFunc = config.sortBy === 'CREATED_AT'
+      ? sortByCreatedAt
+      : config.sortBy === 'ALPHABETICAL'
+      ? sortByAlphabetical
+      : sortByUpdatedAt
+    this.notes = notes = this.getNotes()
+      .sort(sortFunc)
+      .filter((note) => {
+        // this is for the trash box
+        if (note.isTrashed !== true || location.pathname === '/trashed') return true
+      })
+
+    let noteList = notes
+      .map(note => {
+        if (note == null) {
+          return null
+        }
+
+        const isDefault = config.listStyle === 'DEFAULT'
+        const isActive = location.query.key === note.storage + '-' + note.key
+        const dateDisplay = moment(
+          config.sortBy === 'CREATED_AT'
+            ? note.createdAt : note.updatedAt
+        ).fromNow()
+        const key = `${note.storage}-${note.key}`
+
+        if (isDefault) {
+          return (
+            <NoteItem
+              isActive={isActive}
+              note={note}
+              dateDisplay={dateDisplay}
+              key={key}
+              handleNoteClick={this.handleNoteClick.bind(this)}
+              handleDragStart={this.handleDragStart.bind(this)}
+            />
+          )
+        }
+
+        return (
+          <NoteItemSimple
+            isActive={isActive}
+            note={note}
+            key={key}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleDragStart={this.handleDragStart.bind(this)}
+          />
+        )
+      })
+
+    return (
+      <div className='NoteList'
+        styleName='root'
+        style={this.props.style}
+      >
+        <div styleName='control'>
+          <div styleName='control-sortBy'>
+            <i className='fa fa-bolt' />
+            <select styleName='control-sortBy-select'
+              value={config.sortBy}
+              onChange={(e) => this.handleSortByChange(e)}
+            >
+              <option value='UPDATED_AT'>Updated Time</option>
+              <option value='CREATED_AT'>Created Time</option>
+              <option value='ALPHABETICAL'>Alphabetical</option>
+            </select>
+          </div>
+          <div styleName='control-button-area'>
+            <button styleName={config.listStyle === 'DEFAULT'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
+            >
+              <i className='fa fa-th-large' />
+            </button>
+            <button styleName={config.listStyle === 'SMALL'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
+            >
+              <i className='fa fa-list-ul' />
+            </button>
+          </div>
+        </div>
+        <div styleName='list'
+          ref='list'
+          tabIndex='-1'
+          onKeyDown={(e) => this.handleNoteListKeyDown(e)}
+        >
+          {noteList}
+        </div>
+      </div>
+    )
+  }
+}
+NoteList.contextTypes = {
+  router: PropTypes.shape([])
+}
+
+NoteList.propTypes = {
+  dispatch: PropTypes.func,
+  repositories: PropTypes.array,
+  style: PropTypes.shape({
+    width: PropTypes.number
+  })
+}
+
+export default CSSModules(NoteList, styles)

browser/main/SideNav/SideNav.styl

@@ -0,0 +1,130 @@
+.root
+  absolute top left bottom
+  width $sideNav-width
+  background-color #f9f9f9
+  user-select none
+  color $ui-text-color
+
+.top
+  height $topBar-height
+
+.top-menu
+  navButtonColor()
+  height $topBar-height
+  padding 0 15px
+  font-size 12px
+  width 100%
+  text-align left
+  &:hover
+    color $ui-text-color
+  &:active, &:active:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+
+.top-menu-label
+  margin-left 5px
+  overflow ellipsis
+
+.storageList
+  absolute left right
+  bottom 37px
+  top 160px
+  overflow-y auto
+
+.storageList-empty
+  padding 0 10px
+  margin-top 15px
+  line-height 24px
+  color $ui-inactive-text-color
+
+.navToggle
+  navButtonColor()
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
+
+.root--folded
+  @extend .root
+  width 44px
+  .storageList-empty
+    white-space nowrap
+    transform rotate(90deg)
+  .top-menu
+    width 44px - 1
+    text-align center
+    &:hover .top-menu-label
+      transition opacity 0.15s
+      opacity 1
+  .top-menu-label
+    position fixed
+    display inline-block
+    height 30px
+    left 32px
+    padding 0 10px
+    margin-top -8px
+    opacity 0
+    margin-left 0
+    overflow hidden
+    background-color $ui-tooltip-backgroundColor
+    z-index 10
+    color white
+    line-height 30px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    font-size 12px
+  .menu-button, .menu-button--active
+    text-align center
+    &:hover .menu-button-label
+      transition opacity 0.15s
+      opacity 1
+
+  .menu-button-label
+    position fixed
+    display inline-block
+    height 32px
+    left 44px
+    padding 0 10px
+    margin-top -8px
+    margin-left 0
+    overflow ellipsis
+    background-color $ui-tooltip-backgroundColor
+    z-index 10
+    color white
+    line-height 32px
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+    pointer-events none
+    opacity 0
+    font-size 12px
+
+body[data-theme="dark"]
+  .root, .root--folded
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-backgroundColor
+    color $ui-dark-text-color
+
+  .top
+    border-color $ui-dark-borderColor
+
+  .top-menu
+    navDarkButtonColor()
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+
+  .storageList-empty
+    color $ui-dark-inactive-text-color
+
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color

browser/main/SideNav/StorageItem.js

@@ -0,0 +1,265 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageItem.styl'
+import { hashHistory } from 'react-router'
+import modal from 'browser/main/lib/modal'
+import CreateFolderModal from 'browser/main/modals/CreateFolderModal'
+import RenameFolderModal from 'browser/main/modals/RenameFolderModal'
+import dataApi from 'browser/main/lib/dataApi'
+import StorageItemChild from 'browser/components/StorageItem'
+import eventEmitter from 'browser/main/lib/eventEmitter'
+
+const { remote } = require('electron')
+const { Menu, MenuItem, dialog } = remote
+
+class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: true
+    }
+  }
+
+  handleHeaderContextMenu (e) {
+    let 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)
+    }))
+    menu.popup()
+  }
+
+  handleUnlinkStorageClick (e) {
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Unlink Storage',
+      detail: 'This work will just detatches a storage from Boostnote. (Any data won\'t be deleted.)',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      let { storage, dispatch } = this.props
+      dataApi.removeStorage(storage.key)
+        .then(() => {
+          dispatch({
+            type: 'REMOVE_STORAGE',
+            storageKey: storage.key
+          })
+        })
+        .catch((err) => {
+          throw err
+        })
+    }
+  }
+
+  handleToggleButtonClick (e) {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  handleAddFolderButtonClick (e) {
+    let { storage } = this.props
+
+    modal.open(CreateFolderModal, {
+      storage
+    })
+  }
+
+  handleHeaderInfoClick (e) {
+    let { storage } = this.props
+    hashHistory.push('/storages/' + storage.key)
+  }
+
+  handleFolderButtonClick (folderKey) {
+    return (e) => {
+      let { storage } = this.props
+      hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
+    }
+  }
+
+  handleFolderButtonContextMenu (e, folder) {
+    let 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)
+    }))
+    menu.popup()
+  }
+
+  handleRenameFolderClick (e, folder) {
+    let { storage } = this.props
+    modal.open(RenameFolderModal, {
+      storage,
+      folder
+    })
+  }
+
+  handleFolderDeleteClick (e, folder) {
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Delete Folder',
+      detail: 'This work will deletes all notes in the folder and can not be undone.',
+      buttons: ['Confirm', 'Cancel']
+    })
+
+    if (index === 0) {
+      let { storage, dispatch } = this.props
+      dataApi
+        .deleteFolder(storage.key, folder.key)
+        .then((data) => {
+          dispatch({
+            type: 'DELETE_FOLDER',
+            storage: data.storage,
+            folderKey: data.folderKey
+          })
+        })
+    }
+  }
+
+  handleDragEnter (e) {
+    e.dataTransfer.setData('defaultColor', e.target.style.backgroundColor)
+    e.target.style.backgroundColor = 'rgba(129, 130, 131, 0.08)'
+  }
+
+  handleDragLeave (e) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+  }
+
+  handleDrop (e, storage, folder, dispatch, location) {
+    e.target.style.opacity = '1'
+    e.target.style.backgroundColor = e.dataTransfer.getData('defaultColor')
+    const noteData = JSON.parse(e.dataTransfer.getData('note'))
+    const newNoteData = Object.assign({}, noteData, {storage: storage, folder: folder.key})
+    if (folder.key === noteData.folder) return
+    dataApi
+     .createNote(storage.key, newNoteData)
+     .then((note) => {
+       dataApi
+        .deleteNote(noteData.storage, noteData.key)
+        .then((data) => {
+          let dispatchHandler = () => {
+            dispatch({
+              type: 'DELETE_NOTE',
+              storageKey: data.storageKey,
+              noteKey: data.noteKey
+            })
+          }
+          eventEmitter.once('list:moved', dispatchHandler)
+          eventEmitter.emit('list:next')
+        })
+         .catch((err) => {
+           console.error(err)
+         })
+       dispatch({
+         type: 'UPDATE_NOTE',
+         note: note
+       })
+       hashHistory.push({
+         pathname: location.pathname,
+         query: {key: `${note.storage}-${note.key}`}
+       })
+     })
+  }
+
+  render () {
+    let { storage, location, isFolded, data, dispatch } = this.props
+    let { folderNoteMap } = data
+    let folderList = storage.folders.map((folder) => {
+      let isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
+      let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
+
+      let noteCount = noteSet != null
+        ? noteSet.size
+        : 0
+      return (
+        <StorageItemChild
+          key={folder.key}
+          isActive={isActive}
+          handleButtonClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+          handleContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
+          folderName={folder.name}
+          folderColor={folder.color}
+          isFolded={isFolded}
+          noteCount={noteCount}
+          handleDrop={(e) => this.handleDrop(e, storage, folder, dispatch, location)}
+          handleDragEnter={this.handleDragEnter}
+          handleDragLeave={this.handleDragLeave}
+        />
+      )
+    })
+
+    let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+
+    return (
+      <div styleName={isFolded ? 'root--folded' : 'root'}
+        key={storage.key}
+      >
+        <div styleName={isActive
+            ? 'header--active'
+            : 'header'
+          }
+          onContextMenu={(e) => this.handleHeaderContextMenu(e)}
+        >
+          <button styleName='header-toggleButton'
+            onMouseDown={(e) => this.handleToggleButtonClick(e)}
+          >
+            <i className={this.state.isOpen
+                ? 'fa fa-caret-down'
+                : 'fa fa-caret-right'
+              }
+            />
+          </button>
+
+          {!isFolded &&
+            <button styleName='header-addFolderButton'
+              onClick={(e) => this.handleAddFolderButtonClick(e)}
+            >
+              <i className='fa fa-plus' />
+            </button>
+          }
+
+          <button styleName='header-info'
+            onClick={(e) => this.handleHeaderInfoClick(e)}
+          >
+            <span styleName='header-info-name'>
+              {isFolded ? storage.name.substring(0, 1) : storage.name}
+            </span>
+            {isFolded &&
+              <span styleName='header-info--folded-tooltip'>
+                {storage.name}
+              </span>
+            }
+          </button>
+        </div>
+        {this.state.isOpen &&
+          <div styleName='folderList' >
+            {folderList}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+StorageItem.propTypes = {
+  isFolded: PropTypes.bool
+}
+
+export default CSSModules(StorageItem, styles)

browser/main/SideNav/StorageItem.styl

@@ -0,0 +1,152 @@
+.root
+  width 100%
+  user-select none
+  padding-top 20px
+
+.header
+  position relative
+  height 25px
+  width 100%
+  margin-bottom 5px
+  transition 0.15s
+
+.header--active
+  margin-bottom 5px
+  background-color $ui-button--active-backgroundColor
+  transition color background-color  0.15s
+
+.header--active
+  .header-toggleButton
+    color $ui-text-color
+
+.header--active
+  .header-info
+    color $ui-text-color
+
+.header--active
+  .header-addFolderButton
+    color $ui-text-color
+
+.header-toggleButton
+  navButtonColor()
+  position absolute
+  left 0
+  width 25px
+  height 25px
+  padding 0
+  border none
+  border-radius 50%
+  &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+
+.header-info
+  navButtonColor()
+  display block
+  width 100%
+  height 25px
+  padding-left 23px
+  padding-right 10px
+  line-height 22px
+  cursor pointer
+  font-size 13px
+  border none
+  overflow ellipsis
+  text-align left
+  background-color alpha($ui-button--active-backgroundColor, 20%)
+
+.header-info-path
+  font-size 10px
+  margin 0 5px
+
+.header-addFolderButton
+  navButtonColor()
+  position absolute
+  right 0
+  width 25px
+  height 25px
+  padding 0
+  border none
+  margin-right 5px
+  border-radius 50%
+  &:hover
+    transition 0.2s
+    background-color alpha($ui-button--active-backgroundColor, 40%)
+    color $ui-text-color
+
+.root--folded
+  @extend .root
+  .header
+    width 100%
+  .header-info
+    overflow ellipsis
+    padding 0 0 0 18px
+    &:hover .header-info--folded-tooltip
+      opacity 1
+  .header-info-path
+    display none
+  .header-toggleButton
+    width 15px
+  .header-info--folded-tooltip
+    tooltip()
+    position fixed
+    padding 0 10px
+    left 44px
+    z-index 10
+    pointer-events none
+    opacity 0
+    border-top-right-radius 2px
+    border-bottom-right-radius 2px
+  .header-info--folded-tooltip-path
+    font-size 10px
+    margin 0 5px
+
+body[data-theme="dark"]
+  .header--active
+    background-color $ui-dark-button--active-backgroundColor
+    transition color background-color  0.15s
+
+  .header--active
+    .header-toggleButton
+      color $ui-dark-text-color
+
+  .header--active
+    .header-info
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+      &:active
+        color $ui-dark-text-color
+        background-color $ui-dark-button--active-backgroundColor  
+
+  .header--active
+    .header-addFolderButton
+      color $ui-dark-text-color
+
+  .header-toggleButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-info
+    background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor
+
+  .header-addFolderButton
+    &:hover
+      transition 0.2s
+      color $ui-dark-text-color
+      background-color alpha($ui-dark-button--active-backgroundColor, 60%)
+    &:active, &:active:hover
+      color $ui-dark-text-color
+      background-color $ui-dark-button--active-backgroundColor

browser/main/SideNav/index.js

@@ -0,0 +1,119 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SideNav.styl'
+import { openModal } from 'browser/main/lib/modal'
+import PreferencesModal from '../modals/PreferencesModal'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import StorageItem from './StorageItem'
+import SideNavFilter from 'browser/components/SideNavFilter'
+
+class SideNav extends React.Component {
+  // TODO: should not use electron stuff v0.7
+  handleMenuButtonClick (e) {
+    openModal(PreferencesModal)
+  }
+
+  handleHomeButtonClick (e) {
+    let { router } = this.context
+    router.push('/home')
+  }
+
+  handleStarredButtonClick (e) {
+    let { router } = this.context
+    router.push('/starred')
+  }
+
+  handleToggleButtonClick (e) {
+    let { dispatch, config } = this.props
+
+    ConfigManager.set({isSideNavFolded: !config.isSideNavFolded})
+    dispatch({
+      type: 'SET_IS_SIDENAV_FOLDED',
+      isFolded: !config.isSideNavFolded
+    })
+  }
+
+  handleTrashedButtonClick (e) {
+    let { router } = this.context
+    router.push('/trashed')
+  }
+
+  render () {
+    let { data, location, config, dispatch } = this.props
+
+    let isFolded = config.isSideNavFolded
+    let isHomeActive = !!location.pathname.match(/^\/home$/)
+    let isStarredActive = !!location.pathname.match(/^\/starred$/)
+    let isTrashedActive = !!location.pathname.match(/^\/trashed$/)
+
+    let storageList = data.storageMap.map((storage, key) => {
+      return <StorageItem
+        key={storage.key}
+        storage={storage}
+        data={data}
+        location={location}
+        isFolded={isFolded}
+        dispatch={dispatch}
+      />
+    })
+    let style = {}
+    if (!isFolded) style.width = this.props.width
+    return (
+      <div className='SideNav'
+        styleName={isFolded ? 'root--folded' : 'root'}
+        tabIndex='1'
+        style={style}
+      >
+        <div styleName='top'>
+          <button styleName='top-menu'
+            onClick={(e) => this.handleMenuButtonClick(e)}
+          >
+            <i className='fa fa-wrench fa-fw' />
+            <span styleName='top-menu-label'>Preferences</span>
+          </button>
+        </div>
+
+        <SideNavFilter
+          isFolded={isFolded}
+          isHomeActive={isHomeActive}
+          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+          isStarredActive={isStarredActive}
+          isTrashedActive={isTrashedActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+          handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
+        />
+
+        <div styleName='storageList'>
+          {storageList.length > 0 ? storageList : (
+            <div styleName='storageList-empty'>No storage mount.</div>
+          )}
+        </div>
+        <button styleName='navToggle'
+          onClick={(e) => this.handleToggleButtonClick(e)}
+        >
+          {isFolded
+            ? <i className='fa fa-angle-double-right' />
+            : <i className='fa fa-angle-double-left' />
+          }
+        </button>
+      </div>
+    )
+  }
+}
+
+SideNav.contextTypes = {
+  router: PropTypes.shape({})
+}
+
+SideNav.propTypes = {
+  dispatch: PropTypes.func,
+  storages: PropTypes.array,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  }),
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
+}
+
+export default CSSModules(SideNav, styles)

browser/main/SignupPage.js

@@ -1,104 +0,0 @@
-import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
-import linkState from 'boost/linkState'
-import openExternal from 'boost/openExternal'
-import { signup } from 'boost/api'
-import auth from 'boost/auth'
-
-export default class SignupContainer extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      user: {},
-      connectionFailed: false,
-      emailConflicted: false,
-      nameConflicted: false,
-      validationFailed: false,
-      isSending: false,
-      error: null
-    }
-    this.linkState = linkState
-    this.openExternal = openExternal
-  }
-
-  handleSubmit (e) {
-    this.setState({
-      isSending: true,
-      error: null
-    }, function () {
-      signup(this.state.user)
-        .then(res => {
-          let { user, token } = res.body
-          auth.user(user, token)
-
-          this.props.history.pushState('home')
-        })
-        .catch(err => {
-          console.error(err)
-          if (err.code === 'ECONNREFUSED') {
-            return this.setState({
-              error: {
-                name: 'CunnectionRefused',
-                message: 'Can\'t connect to API server.'
-              },
-              isSending: false
-            })
-          } else if (err.status != null) {
-            return this.setState({
-              error: {
-                name: err.response.body.name,
-                message: err.response.body.message
-              },
-              isSending: false
-            })
-          }
-          else throw err
-        })
-    })
-
-    e.preventDefault()
-  }
-
-  render () {
-    return (
-      <div className='SignupContainer'>
-        <img className='logo' src='../../resources/favicon-230x230.png'/>
-
-        <nav className='authNavigator text-center'><Link to='/login' activeClassName='active'>Log In</Link> / <Link to='/signup' activeClassName='active'>Sign Up</Link></nav>
-
-        <form onSubmit={e => this.handleSubmit(e)}>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.email')} type='text' placeholder='E-mail'/>
-          </div>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.password')} type='password' placeholder='Password'/>
-          </div>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.name')} type='text' placeholder='name'/>
-          </div>
-          <div className='formField'>
-            <input valueLink={this.linkState('user.profileName')} type='text' placeholder='Profile name'/>
-          </div>
-
-          {this.state.isSending ? (
-            <p className='alertInfo'>Signing up...</p>
-          ) : null}
-
-          {this.state.error != null ? <p className='alertError'>{this.state.error.message}</p> : null}
-
-          <div className='formField'>
-            <button className='logInButton' type='submit'>Sign Up</button>
-          </div>
-        </form>
-
-        <p className='alert'>会員登録することで、<a onClick={this.openExternal} href='http://boostio.github.io/regulations.html'>当サイトの利用規約</a>及び<a onClick={this.openExternal} href='http://boostio.github.io/privacypolicies.html'>Cookieの使用を含むデータに関するポリシー</a>に同意するものとします。</p>
-      </div>
-    )
-  }
-}
-
-SignupContainer.propTypes = {
-  history: PropTypes.shape({
-    pushState: PropTypes.func
-  })
-}

browser/main/StatusBar/StatusBar.styl

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

browser/main/StatusBar/index.js

@@ -0,0 +1,89 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StatusBar.styl'
+import ZoomManager from 'browser/main/lib/ZoomManager'
+
+const electron = require('electron')
+const { remote, ipcRenderer } = electron
+const { Menu, MenuItem, dialog } = remote
+
+const zoomOptions = [0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2.0]
+
+class StatusBar extends React.Component {
+  updateApp () {
+    let index = dialog.showMessageBox(remote.getCurrentWindow(), {
+      type: 'warning',
+      message: 'Update Boostnote',
+      detail: 'New Boostnote is ready to be installed.',
+      buttons: ['Restart & Install', 'Not Now']
+    })
+
+    if (index === 0) {
+      ipcRenderer.send('update-app-confirm')
+    }
+  }
+
+  handleZoomButtonClick (e) {
+    let menu = new Menu()
+
+    zoomOptions.forEach((zoom) => {
+      menu.append(new MenuItem({
+        label: Math.floor(zoom * 100) + '%',
+        click: () => this.handleZoomMenuItemClick(zoom)
+      }))
+    })
+
+    menu.popup(remote.getCurrentWindow())
+  }
+
+  handleZoomMenuItemClick (zoomFactor) {
+    let { dispatch } = this.props
+    ZoomManager.setZoom(zoomFactor)
+    dispatch({
+      type: 'SET_ZOOM',
+      zoom: zoomFactor
+    })
+  }
+
+  render () {
+    let { config, status } = this.context
+
+    return (
+      <div className='StatusBar'
+        styleName='root'
+      >
+        <button styleName='zoom'
+          onClick={(e) => this.handleZoomButtonClick(e)}
+        >
+          <i className='fa fa-search-plus' />&nbsp;
+          {Math.floor(config.zoom * 100)}%
+        </button>
+
+        <div styleName='blank' />
+
+        {status.updateReady
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            </button>
+          : null
+        }
+      </div>
+    )
+  }
+}
+
+StatusBar.contextTypes = {
+  status: PropTypes.shape({
+    updateReady: PropTypes.bool.isRequired
+  }).isRequired,
+  config: PropTypes.shape({}).isRequired,
+  date: PropTypes.string
+}
+
+StatusBar.propTypes = {
+  config: PropTypes.shape({
+    zoom: PropTypes.number
+  })
+}
+
+export default CSSModules(StatusBar, styles)

browser/main/TopBar/TopBar.styl

@@ -0,0 +1,172 @@
+.root
+  position relative
+  background-color $ui-noteList-backgroundColor
+  height $topBar-height - 1
+
+.root--expanded
+  @extend .root
+
+$control-height = 34px
+
+.control
+  position absolute
+  top 13px
+  left 8px
+  right 8px
+  height $control-height
+  overflow hidden
+  display flex
+
+.control-search
+  height 32px
+  width 1px
+  flex 1
+  background-color white
+  position relative
+
+.control-search-input
+  display block
+  absolute top bottom right
+  width 100%
+  padding-left 12px
+  background-color $ui-noteList-backgroundColor
+  input
+    width 100%
+    height 100%
+    outline none
+    border none
+    color $ui-text-color
+    font-size 16px
+    padding-bottom 2px
+    background-color $ui-noteList-backgroundColor
+
+.control-search-optionList
+  position fixed
+  z-index 200
+  width 500px
+  height 250px
+  overflow-y auto
+  background-color $modal-background
+  border-radius 2px
+  border-none
+  box-shadow 0 0 1px rgba(76,86,103,.25), 0 2px 18px rgba(31,37,50,.32)
+
+.control-search-optionList-item
+  height 50px
+  border-bottom $ui-border
+  transition background-color 0.15s
+  padding 5px
+  cursor pointer
+  overflow ellipsis
+  &:hover
+    background-color alpha(#D4D4D4, 30%)
+
+.control-search-optionList-item-folder
+  border-left 2px solid transparent
+  padding 2px 5px
+  color $ui-text-color
+  overflow ellipsis
+  font-size 12px
+  height 16px
+  margin-bottom 4px
+
+.control-search-optionList-item-folder-surfix
+  font-size 10px
+  margin-left 5px
+  color $ui-inactive-text-color
+
+.control-search-optionList-item-type
+  font-size 12px
+  color $ui-inactive-text-color
+  padding-right 3px
+
+.control-search-optionList-empty
+  height 150px
+  color $ui-inactive-text-color
+  line-height 150px
+  text-align center
+
+.control-newPostButton
+  display block
+  width 32px
+  height $control-height - 2
+  navButtonColor()
+  font-size 16px
+  line-height 28px
+  padding 0
+  &:active
+    border-color $ui-button--active-backgroundColor
+  &:hover .control-newPostButton-tooltip
+    opacity 1
+
+.control-newPostButton-tooltip
+  tooltip()
+  position fixed
+  pointer-events none
+  top 50px
+  left 433px
+  z-index 200
+  padding 5px
+  line-height normal
+  border-radius 2px
+  opacity 0
+  transition 0.1s
+
+body[data-theme="dark"]
+  .root, .root--expanded
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    border-color $ui-dark-borderColor
+  .control-search
+    background-color $dark-background-color
+
+  .control-search-icon
+    absolute top bottom left
+    line-height 32px
+    width 35px
+    color $ui-dark-inactive-text-color
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control-search-input
+    background-color $ui-dark-noteList-backgroundColor
+    input
+      background-color $ui-dark-noteList-backgroundColor
+      color $ui-dark-text-color
+
+  .control-search-optionList
+    color white
+    background-color $ui-dark-button--hover-backgroundColor
+    border-color $ui-dark-borderColor
+    box-shadow 2px 2px 10px black
+
+  .control-search-optionList-item
+    border-color $ui-dark-borderColor
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+  .control-search-optionList-item-folder
+    color $ui-dark-text-color
+  .control-search-optionList-item-folder-surfix
+    font-size 10px
+    margin-left 5px
+    color $ui-inactive-text-color
+  .control-search-optionList-item-type
+    font-size 12px
+    color $ui-inactive-text-color
+    padding-right 3px
+  .control-search-optionList-empty
+    color $ui-inactive-text-color
+
+  .control-newPostButton
+    color $ui-inactive-text-color
+    border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
+    &:hover
+      transition 0.15s
+      color $ui-dark-text-color
+    &:active
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      border-color $ui-dark-button--active-backgroundColor
+
+  .control-newPostButton-tooltip
+    darkTooltip()

browser/main/TopBar/index.js

@@ -0,0 +1,271 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TopBar.styl'
+import _ from 'lodash'
+import modal from 'browser/main/lib/modal'
+import NewNoteModal from 'browser/main/modals/NewNoteModal'
+import { hashHistory } from 'react-router'
+import ee from 'browser/main/lib/eventEmitter'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import dataApi from 'browser/main/lib/dataApi'
+
+const { remote } = require('electron')
+const { dialog } = remote
+
+const OSX = window.process.platform === 'darwin'
+
+class TopBar extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      search: '',
+      searchOptions: [],
+      isSearching: false
+    }
+
+    this.newNoteHandler = () => {
+      this.handleNewPostButtonClick()
+    }
+
+    this.focusSearchHandler = () => {
+      this.handleOnSearchFocus()
+    }
+  }
+
+  componentDidMount () {
+    ee.on('top:new-note', this.newNoteHandler)
+    ee.on('top:focus-search', this.focusSearchHandler)
+  }
+
+  componentWillUnmount () {
+    ee.off('top:new-note', this.newNoteHandler)
+    ee.off('top:focus-search', this.focusSearchHandler)
+  }
+
+  handleNewPostButtonClick (e) {
+    let { config, location } = this.props
+
+    if (location.pathname === '/trashed') {
+      dialog.showMessageBox(remote.getCurrentWindow(), {
+        type: 'warning',
+        message: 'Cannot create new note',
+        detail: 'You cannot create new note in trash box.',
+        buttons: ['OK']
+      })
+      return
+    }
+
+    switch (config.ui.defaultNote) {
+      case 'MARKDOWN_NOTE':
+        this.createNote('MARKDOWN_NOTE')
+        break
+      case 'SNIPPET_NOTE':
+        this.createNote('SNIPPET_NOTE')
+        break
+      case 'ALWAYS_ASK':
+      default:
+        let { dispatch, location } = this.props
+        let { storage, folder } = this.resolveTargetFolder()
+
+        modal.open(NewNoteModal, {
+          storage: storage.key,
+          folder: folder.key,
+          dispatch,
+          location
+        })
+    }
+  }
+
+  resolveTargetFolder () {
+    let { data, params } = this.props
+    let storage = data.storageMap.get(params.storageKey)
+
+    // Find first storage
+    if (storage == null) {
+      for (let kv of data.storageMap) {
+        storage = kv[1]
+        break
+      }
+    }
+    if (storage == null) window.alert('No storage to create a note')
+    let folder = _.find(storage.folders, {key: params.folderKey})
+    if (folder == null) folder = storage.folders[0]
+    if (folder == null) window.alert('No folder to create a note')
+
+    return {
+      storage,
+      folder
+    }
+  }
+
+  handleSearchChange (e) {
+    let { router } = this.context
+    router.push('/searched')
+    this.setState({
+      search: this.refs.searchInput.value
+    })
+  }
+
+  handleOptionClick (uniqueKey) {
+    return (e) => {
+      this.setState({
+        isSearching: false
+      }, () => {
+        let { location } = this.props
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {
+            key: uniqueKey
+          }
+        })
+      })
+    }
+  }
+
+  handleSearchFocus (e) {
+    this.setState({
+      isSearching: true
+    })
+  }
+  handleSearchBlur (e) {
+    e.stopPropagation()
+
+    let el = e.relatedTarget
+    let isStillFocused = false
+    while (el != null) {
+      if (el === this.refs.search) {
+        isStillFocused = true
+        break
+      }
+      el = el.parentNode
+    }
+    if (!isStillFocused) {
+      this.setState({
+        isSearching: false
+      })
+    }
+  }
+
+  createNote (noteType) {
+    let { dispatch, location } = this.props
+    if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
+
+    let { storage, folder } = this.resolveTargetFolder()
+
+    let newNote = noteType === 'MARKDOWN_NOTE'
+      ? {
+        type: 'MARKDOWN_NOTE',
+        folder: folder.key,
+        title: '',
+        content: ''
+      }
+      : {
+        type: 'SNIPPET_NOTE',
+        folder: folder.key,
+        title: '',
+        description: '',
+        snippets: [{
+          name: '',
+          mode: 'text',
+          content: ''
+        }]
+      }
+
+    dataApi
+      .createNote(storage.key, newNote)
+      .then((note) => {
+        dispatch({
+          type: 'UPDATE_NOTE',
+          note: note
+        })
+        hashHistory.push({
+          pathname: location.pathname,
+          query: {key: note.storage + '-' + note.key}
+        })
+        ee.emit('detail:focus')
+      })
+  }
+
+  setDefaultNote (defaultNote) {
+    let { config, dispatch } = this.props
+    let ui = Object.assign(config.ui)
+    ui.defaultNote = defaultNote
+    ConfigManager.set({
+      ui
+    })
+
+    dispatch({
+      type: 'SET_UI',
+      config: ConfigManager.get()
+    })
+  }
+
+  handleOnSearchFocus () {
+    if (this.state.isSearching) {
+      this.refs.search.childNodes[0].blur()
+    } else {
+      this.refs.search.childNodes[0].focus()
+    }
+  }
+
+  render () {
+    let { config, style, data } = this.props
+    return (
+      <div className='TopBar'
+        styleName={config.isSideNavFolded ? 'root--expanded' : 'root'}
+        style={style}
+      >
+        <div styleName='control'>
+          <div styleName='control-search'>
+            <div styleName='control-search-input'
+              onFocus={(e) => this.handleSearchFocus(e)}
+              onBlur={(e) => this.handleSearchBlur(e)}
+              tabIndex='-1'
+              ref='search'
+            >
+              <input
+                ref='searchInput'
+                value={this.state.search}
+                onChange={(e) => this.handleSearchChange(e)}
+                placeholder='Search'
+                type='text'
+                className='searchInput'
+              />
+            </div>
+            {this.state.search > 0 &&
+              <button styleName='left-search-clearButton'
+                onClick={(e) => this.handleSearchClearButton(e)}
+              >
+                <i className='fa fa-times' />
+              </button>
+            }
+
+          </div>
+          <button styleName='control-newPostButton'
+            onClick={(e) => this.handleNewPostButtonClick(e)}>
+            <i className='fa fa-pencil-square-o' />
+            <span styleName='control-newPostButton-tooltip'>
+              Make a Note {OSX ? '⌘' : '^'} + n
+            </span>
+          </button>
+        </div>
+      </div>
+    )
+  }
+}
+
+TopBar.contextTypes = {
+  router: PropTypes.shape({
+    push: PropTypes.func
+  })
+}
+
+TopBar.propTypes = {
+  dispatch: PropTypes.func,
+  config: PropTypes.shape({
+    isSideNavFolded: PropTypes.bool
+  })
+}
+
+export default CSSModules(TopBar, styles)