v0.8.2

Update to readme

.eslintignore

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

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": ["standard", "standard-jsx"],
+  "rules": {
+    "no-useless-escape": 0
+  }
+}

.travis.yml

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

browser/components/CodeEditor.js

@@ -52,7 +52,7 @@ export default class CodeEditor extends React.Component {
       indentUnit: this.props.indentSize,
       tabSize: this.props.indentSize,
       indentWithTabs: this.props.indentType !== 'space',
-      keyMap: 'sublime',
+      keyMap: this.props.keyMap,
       inputStyle: 'textarea',
       extraKeys: {
         Tab: function (cm) {
@@ -102,6 +102,9 @@ export default class CodeEditor extends React.Component {
     if (prevProps.fontFamily !== this.props.fontFamily) {
       needRefresh = true
     }
+    if (prevProps.keyMap !== this.props.keyMap) {
+      needRefresh = true
+    }
 
     if (prevProps.indentSize !== this.props.indentSize) {
       this.editor.setOption('indentUnit', this.props.indentSize)
@@ -194,6 +197,7 @@ CodeEditor.propTypes = {
 CodeEditor.defaultProps = {
   readOnly: false,
   theme: 'xcode',
+  keyMap: 'sublime',
   fontSize: 14,
   fontFamily: 'Monaco, Consolas',
   indentSize: 4,

browser/components/MarkdownEditor.js

@@ -166,6 +166,7 @@ class MarkdownEditor extends React.Component {
           mode='GitHub Flavored Markdown'
           value={value}
           theme={config.editor.theme}
+          keyMap={config.editor.keyMap}
           fontFamily={config.editor.fontFamily}
           fontSize={editorFontSize}
           indentType={config.editor.indentType}
@@ -179,6 +180,7 @@ class MarkdownEditor extends React.Component {
           }
           style={previewStyle}
           theme={config.ui.theme}
+          keyMap={config.editor.keyMap}
           fontSize={config.preview.fontSize}
           fontFamily={config.preview.fontFamily}
           codeBlockTheme={config.preview.codeBlockTheme}

browser/components/MarkdownPreview.js

@@ -5,7 +5,7 @@ import CodeMirror from 'codemirror'
 import consts from 'browser/lib/consts'
 import Raphael from 'raphael'
 import flowchart from 'flowchart'
-import SequenceDiagram from 'sequence-diagram'
+import SequenceDiagram from 'js-sequence-diagrams'
 
 function decodeHTMLEntities (text) {
   var entities = [
@@ -54,6 +54,20 @@ code {
   ${lineNumber && 'display: block !important;'}
   font-family: ${codeBlockFontFamily.join(', ')};
 }
+
+h1, h2 {
+  border: none;
+}
+
+h1 {
+  padding-bottom: 4px;
+  margin: 1em 0 8px;
+}
+
+h2 {
+  padding-bottom: 0.2em;
+  margin: 1em 0 0.37em;
+}
 `
 }
 
@@ -126,7 +140,7 @@ export default class MarkdownPreview extends React.Component {
 
     this.refs.root.contentWindow.document.head.innerHTML = `
       <style id='style'></style>
-      <link rel="stylesheet" href="${appPath}/compiled/katex-style.css">
+      <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">
     `
@@ -170,9 +184,9 @@ export default class MarkdownPreview extends React.Component {
   }
 
   setCodeTheme (theme) {
-    theme = consts.THEMES.some((_theme) => _theme === theme)
+    theme = consts.THEMES.some((_theme) => _theme === theme) && theme !== 'default'
       ? theme
-      : 'default'
+      : 'elegant'
     this.getWindow().document.getElementById('codeTheme').href = `${appPath}/node_modules/codemirror/theme/${theme}.css`
   }
 

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} handleNoteContextMenu
+ * @param {string} dateDisplay
+ */
+const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteContextMenu }) => (
+  <div styleName={isActive
+      ? 'item--active'
+      : 'item'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+  >
+    <div styleName='item-wrapper'>
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
+
+      <div styleName='item-title'>
+        {note.title.trim().length > 0
+          ? note.title
+          : <span styleName='item-title-empty'>Empty</span>
+        }
+      </div>
+
+      <div styleName='item-bottom'>
+        <div styleName='item-bottom-tagList'>
+          {note.tags.length > 0
+            ? TagElementList(note.tags)
+            : ''
+          }
+        </div>
+      </div>
+
+      {note.type === 'SNIPPET_NOTE'
+        ? <i styleName='item-title-icon' className='fa fa-fw fa-code' />
+        : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o' />
+      }
+
+      {note.isStarred
+        ? <i styleName='item-star' className='fa fa-star' /> : ''
+      }
+    </div>
+  </div>
+)
+
+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
+  }),
+  handleNoteClick: PropTypes.func.isRequired,
+  handleNoteContextMenu: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItem, styles)

browser/components/NoteItem.styl

@@ -0,0 +1,168 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item
+  position relative
+  padding 0 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-active-color, 20%)
+  &:active
+    background-color $ui-active-color
+    color white
+    .item-title
+    .item-title-empty
+    .item-bottom-tagList-empty
+    .item-bottom-time
+    .item-title-icon
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+
+.item-wrapper
+  padding 20px 0
+  border-bottom $ui-border
+
+.item--active
+  @extend .item
+  background-color $ui-active-color
+  color white
+  .item-title
+  .item-title-empty
+  .item-bottom-tagList-empty
+  .item-bottom-time
+  .item-title-icon
+    color white
+  .item-bottom-tagList-item
+    background-color transparent
+    color white
+  .item-wrapper
+    border-color transparent
+  &:hover
+    background-color $ui-active-color
+
+.item-title
+  font-size 14px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 5px
+  padding-bottom 20px
+  overflow ellipsis
+  color $ui-text-color
+
+.item-title-icon
+  position absolute
+  top 20px
+  right 25px
+  font-size 14px
+  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
+  height 20px
+  font-size 12px
+  line-height 20px
+  overflow ellipsis
+  display flex
+
+.item-bottom-tagList
+  flex 1
+  overflow ellipsis
+  line-height 20px
+  color #FFFFFF
+
+.item-bottom-tagList-item
+  font-size 12px
+  margin-right 8px
+  padding 0 10px
+  height 20px
+  box-sizing border-box
+  border-radius 20px
+  vertical-align middle
+  background-color $ui-tag-backgroundColor
+  color #FFFFFF
+
+.item-bottom-tagList-empty
+  color $ui-inactive-text-color
+  vertical-align middle
+  font-size 10px
+  margin-left 5px
+
+.item-bottom-time
+  color $ui-inactive-text-color
+  font-size 12px
+
+.item-star
+  position absolute
+  top 20px
+  right 29px
+  width 34px
+  height 34px
+  color $ui-favorite-star-button-color
+  font-size 14px
+  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
+    &:active
+      background-color $ui-active-color
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .item-wrapper
+    border-color $ui-dark-borderColor
+
+  .item--active
+    @extend .item
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-wrapper
+      border-color transparent
+    .item-title
+      color white
+    .item-bottom-tagList-item
+      background-color transparent
+      color white
+    .item-bottom-tagList-empty
+      color white
+    &:hover
+      background-color $ui-active-color
+
+  .item-title
+    color $ui-dark-text-color
+
+  .item-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-title-empty
+    color $ui-dark-inactive-text-color
+
+  .item-bottom-tagList-item
+    background-color $ui-dark-tag-backgroundColor
+    color $ui-dark-text-color
+
+  .item-bottom-tagList-empty
+    color $ui-inactive-text-color
+    vertical-align middle

browser/components/NoteItemSimple.js

@@ -0,0 +1,49 @@
+/**
+ * @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} handleNoteContextMenu
+ */
+const NoteItemSimple = ({ isActive, note, handleNoteClick, handleNoteContextMenu }) => (
+  <div styleName={isActive
+      ? 'item-simple--active'
+      : 'item-simple'
+    }
+    key={`${note.storage}-${note.key}`}
+    onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
+    onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
+  >
+    <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,
+  handleNoteContextMenu: PropTypes.func.isRequired
+}
+
+export default CSSModules(NoteItemSimple, styles)

browser/components/NoteItemSimple.styl

@@ -0,0 +1,89 @@
+$control-height = 30px
+
+.root
+  absolute left bottom
+  top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
+
+.item-simple
+  position relative
+  padding 0 25px
+  user-select none
+  cursor pointer
+  background-color $ui-noteList-backgroundColor
+  transition background-color 0.15s
+  &:hover
+    background-color alpha($ui-active-color, 20%)
+  &:active
+    background-color $ui-active-color
+    color white
+    .item-simple-title
+    .item-simple-title-empty
+    .item-simple-title-icon
+      color white
+
+.item-simple--active
+  @extend .item-simple
+  background-color $ui-active-color
+  color white
+  .item-simple-title
+  .item-simple-title-empty
+    border-color transparent
+    color white
+  .item-simple-title-icon
+    color white
+  &:hover
+    background-color $ui-active-color
+
+.item-simple-title
+  font-size 14px
+  height 40px
+  box-sizing border-box
+  line-height 24px
+  padding-top 8px
+  overflow ellipsis
+  color $ui-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-active-color
+    &:hover
+      background-color alpha($ui-active-color, 20%)
+
+  .item-simple--active
+    @extend .item-simple
+    border-color $ui-dark-borderColor
+    background-color $ui-active-color
+    .item-simple-title
+    .item-simple-title-empty
+      color white
+      border-color transparent
+    &:hover
+      background-color $ui-active-color
+
+  .item-simple-title
+    color $ui-dark-text-color
+    border-color $ui-dark-borderColor
+
+  .item-simple-title-icon
+    color $ui-darkinactive-text-color
+
+  .item-simple-title-empty
+    color $ui-dark-inactive-text-color

browser/components/ProfileImage.js

@@ -12,7 +12,7 @@ export default class ProfileImage extends React.Component {
         className={className}
         width={this.props.size}
         height={this.props.size}
-        src={src}/>
+        src={src} />
     )
   }
 }

browser/components/SideNavFilter.js

@@ -0,0 +1,44 @@
+/**
+ * @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
+}) => (
+  <div styleName={isFolded ? 'menu--folded' : 'menu'}>
+    <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleAllNotesButtonClick}
+    >
+      <i className='fa fa-book fa-fw' />
+      <span styleName='menu-button-label'>All Notes</span>
+    </button>
+    <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
+      onClick={handleStarredButtonClick}
+    >
+      <i className='fa fa-star fa-fw' />
+      <span styleName='menu-button-label'>Starred</span>
+    </button>
+  </div>
+)
+
+SideNavFilter.propTypes = {
+  isFolded: PropTypes.bool,
+  isHomeActive: PropTypes.bool.isRequired,
+  handleAllNotesButtonClick: PropTypes.func.isRequired,
+  isStarredActive: PropTypes.bool.isRequired,
+  handleStarredButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(SideNavFilter, styles)

browser/components/SideNavFilter.styl

@@ -0,0 +1,58 @@
+.menu
+  margin-bottom 30px
+
+.menu-button
+  navButtonColor()
+  height 32px
+  padding 0 15px
+  font-size 14px
+  width 100%
+  text-align left
+  overflow ellipsis
+
+.menu-button--active
+  @extend .menu-button
+  background-color $ui-button--active-backgroundColor
+  color $ui-button--active-color
+  &:hover
+    background-color $ui-button--active-backgroundColor
+
+.menu-button-label
+  margin-left 5px
+
+.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
+    navDarkButtonColor()
+
+  .menu-button--active
+    @extend .menu-button
+    background-color $ui-dark-button--active-backgroundColor
+    color $ui-dark-button--active-color
+    &:hover
+      background-color $ui-dark-button--active-backgroundColor

browser/components/SnippetTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SnippetTab.styl'
 import context from 'browser/lib/context'
@@ -117,7 +117,7 @@ class SnippetTab extends React.Component {
           <button styleName='deleteButton'
             onClick={(e) => this.handleDeleteButtonClick(e)}
           >
-            <i className='fa fa-times'/>
+            <i className='fa fa-times' />
           </button>
         }
       </div>

browser/components/SnippetTab.styl

@@ -2,9 +2,6 @@
   position relative
   flex 1
   overflow hidden
-  border-right $ui-border
-  &:last-child
-    border-right none
   &:hover
     .deleteButton
       color $ui-inactive-text-color
@@ -13,11 +10,11 @@
       &:active
         color white
         background-color $ui-active-color
+
 .root--active
   @extend .root
   min-width 100px
-  .button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .button
   width 100%
@@ -31,8 +28,6 @@
   border-left 4px solid transparent
   &:hover
     background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    border-color $brand-color
 
 .deleteButton
   position absolute
@@ -71,8 +66,6 @@ body[data-theme="dark"]
   .root--active
     color $ui-dark-text-color
     border-color $ui-dark-borderColor
-    .button
-      border-color $brand-color
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
       .deleteButton
@@ -92,10 +85,6 @@ body[data-theme="dark"]
     &:hover
       color white
       background-color $ui-dark-button--hover-backgroundColor
-    &:active
-      color $ui-dark-button--active-color
-    &:active, &:active:hover
-      color $ui-dark-button--active-color
 
   .input
     background-color $ui-dark-button--hover-backgroundColor

browser/components/StorageItem.js

@@ -0,0 +1,58 @@
+/**
+ * @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
+ * @return {React.Component}
+ */
+const StorageItem = ({
+  isActive, handleButtonClick, handleContextMenu, folderName,
+  folderColor, isFolded, noteCount
+}) => (
+  <button styleName={isActive
+      ? 'folderList-item--active'
+      : 'folderList-item'
+    }
+    onClick={handleButtonClick}
+    onContextMenu={handleContextMenu}
+  >
+    <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,
+  noteCount: PropTypes.number
+}
+
+export default CSSModules(StorageItem, styles)

browser/components/StorageItem.styl

@@ -0,0 +1,70 @@
+.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 14px
+  &:first-child
+    margin-top 0
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item--active
+  @extend .folderList-item
+  color $ui-button--active-color
+  background-color $ui-button--active-backgroundColor
+  &:hover
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.folderList-item-name
+  display block
+  flex 1
+  padding 0 30px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 3px
+  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 14px

browser/components/markdown.styl

@@ -55,6 +55,7 @@ body
   line-height 1.6
   overflow-x hidden
   user-select all
+  background-color $ui-noteDetail-backgroundColor
   .katex
     font 400 1.2em 'KaTeX_Main'
     line-height 1.2em
@@ -273,13 +274,14 @@ table
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #DDDDDD
 themeDarkBorder = lighten(themeDarkBackground, 20%)
-themeDarkPreview = #282C34
+themeDarkPreview = $ui-dark-noteDetail-backgroundColor
 themeDarkTableOdd = themeDarkPreview
 themeDarkTableEven = darken(themeDarkPreview, 10%)
 themeDarkTableHead = themeDarkTableEven
 themeDarkTableBorder = themeDarkBorder
 themeDarkModalButtonDefault = themeDarkPreview
 themeDarkModalButtonDanger = #BF360C
+
 body[data-theme="dark"]
   color themeDarkText
   border-color themeDarkBorder

browser/finder/FinderMain.styl

@@ -21,6 +21,7 @@ $list-width = 250px
   outline none
   text-align center
   background-color transparent
+
 .result
   absolute left right bottom
   top $search-height
@@ -32,7 +33,7 @@ $list-width = 250px
   background-color $ui-backgroundColor
 
 .result-nav-filter
-  margin-bottom 5px
+  margin-bottom 10px
 
 .result-nav-filter-option
   height 25px
@@ -62,7 +63,7 @@ $list-width = 250px
 
 .result-nav-storageList
   absolute bottom left right
-  top 80px + 32px + 10px
+  top 80px + 32px + 10px + 10px
   overflow-y auto
 
 .result-list
@@ -70,15 +71,15 @@ $list-width = 250px
   absolute top bottom
   left $nav-width
   width $list-width
-  border-width 0 1px
-  border-style solid
-  border-color $ui-borderColor
   box-sizing border-box
   overflow-y auto
+  box-shadow 2px 0 15px -8px #b1b1b1
+  z-index 1
 
 .result-detail
   absolute top bottom right
   left $nav-width + $list-width
+  background-color $ui-noteDetail-backgroundColor
 
 body[data-theme="dark"]
   .root
@@ -104,7 +105,10 @@ body[data-theme="dark"]
 
   .result-list
     border-color $ui-dark-borderColor
+    box-shadow none
+    top 0
 
   .result-detail
     absolute top bottom right
     left $nav-width + $list-width
+    background-color $ui-dark-noteDetail-backgroundColor

browser/finder/NoteDetail.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
@@ -97,9 +97,7 @@ class NoteDetail extends React.Component {
     let { note, config } = this.props
     if (note == null) {
       return (
-        <div styleName='root'>
-
-        </div>
+        <div styleName='root' />
       )
     }
 
@@ -154,6 +152,7 @@ class NoteDetail extends React.Component {
               fontSize={editorFontSize}
               indentType={config.editor.indentType}
               indentSize={editorIndentSize}
+              keyMap={config.editor.keyMap}
               readOnly
               ref={'code-' + index}
             />

browser/finder/NoteDetail.styl

@@ -1,12 +1,16 @@
+@import('../main/Detail/DetailVars.styl')
+
 .root
   absolute top bottom left right
-  width 100%
+  left $note-detail-left-margin
+  right $note-detail-right-margin
   height 100%
+  width 365px
+  background-color $ui-noteDetail-backgroundColor
 
 .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
   box-sizing border-box
 
 .description-textarea
@@ -18,52 +22,43 @@
   padding 10px
   line-height 1.6
   box-sizing border-box
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   box-sizing border-box
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList-item
   position relative
   flex 1
-  border-right $ui-border
+  overflow hidden
+  &:hover
+    background-color $ui-button--hover-backgroundColorg
 
 .tabList-item--active
   @extend .tabList-item
-  .tabList-item-button
-    border-color $brand-color
+  border-bottom $ui-border
 
 .tabList-item-button
   width 100%
   height 29px
-  navButtonColor()
-  outline none
-  border-left 4px solid transparent
-
-.tabList-item-deleteButton
-  position absolute
-  top 5px
-  height 20px
-  right 5px
-  width 20px
-  text-align center
+  overflow ellipsis
+  text-align left
+  padding-right 30px
+  padding-left 10px
   border none
-  padding 0
-  color transparent
   background-color transparent
-  border-radius 2px
-.tabList-plusButton
-  navButtonColor()
-  width 30px
+  transition 0.15s
+  &:hover
+    background-color $ui-button--hover-backgroundColor
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
@@ -72,38 +67,31 @@
   width 100%
 
 body[data-theme="dark"]
+  .root
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .description
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .description-textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
-    background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
+
   .tabList-item
     border-color $ui-dark-borderColor
     &:hover
       background-color $ui-dark-button--hover-backgroundColor
-  .tabList-item--active
-    border-color $ui-dark-borderColor
-    .tabList-item-button
-      border-color $brand-color
-  .tabList-item-button
-    navDarkButtonColor()
-    border-left 4px solid transparent
-  .tabList-plusButton
-    navDarkButtonColor()
 
-  .tabView-top
-    border-color $ui-dark-borderColor
-  .tabView-top-name
-    border-color $ui-dark-borderColor
+  .tabList-item-button
+    border none
     color $ui-dark-text-color
-    background-color $ui-dark-button--hover-backgroundColor
-  .tabView-top-mode
-    border-color $ui-dark-borderColor
-    background-color $dark-default-button-background
-    color $ui-dark-inactive-text-color
+    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/NoteItem.js

@@ -1,85 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './NoteItem.styl'
-import moment from 'moment'
-import _ from 'lodash'
-
-class NoteItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-    }
-  }
-
-  handleClick (e) {
-    this.props.onClick(e)
-  }
-
-  render () {
-    let { note, folder, storage, isActive } = this.props
-
-    let tagList = _.isArray(note.tags)
-      ? note.tags.map((tag) => {
-        return (
-          <span styleName='bottom-tagList-item'
-            key={tag}>
-            {tag}
-          </span>
-        )
-      })
-      : []
-    return (
-      <div styleName={isActive
-          ? 'root--active'
-          : 'root'
-        }
-        key={note.storage + '-' + note.key}
-        onClick={(e) => this.handleClick(e)}
-      >
-        <div styleName='info'>
-          <div styleName='info-left'>
-            <span styleName='info-left-folder'
-              style={{borderColor: folder.color}}
-            >
-              {folder.name}
-              <span styleName='info-left-folder-surfix'>in {storage.name}</span>
-            </span>
-          </div>
-        </div>
-
-        <div styleName='title'>
-          {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='title-icon' className='fa fa-fw fa-code' />
-            : <i styleName='title-icon' className='fa fa-fw fa-file-text-o' />
-          }
-          {note.title.trim().length > 0
-            ? note.title
-            : <span styleName='title-empty'>Empty</span>
-          }
-        </div>
-
-        <div styleName='bottom'>
-          <i styleName='bottom-tagIcon'
-            className='fa fa-tags fa-fw'
-          />
-          <div styleName='bottom-tagList'>
-            {tagList.length > 0
-              ? tagList
-              : <span styleName='bottom-tagList-empty'>Not tagged yet</span>
-            }
-          </div>
-
-          <div styleName='bottom-time'>
-            {moment(note.updatedAt).fromNow()}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-NoteItem.propTypes = {
-}
-
-export default CSSModules(NoteItem, styles)

browser/finder/NoteItem.styl

@@ -1,179 +0,0 @@
-.root
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-
-.root--active
-  @extend .root
-  background-color $ui-active-color
-  &:hover
-    background-color $ui-active-color
-  color white
-  .info-left-folder
-  .info-left-folder-surfix
-  .title
-  .title-icon
-  .title-empty
-  .bottom-tagIcon
-  .bottom-tagList-item
-  .bottom-tagList-empty
-  .bottom-time
-    color white
-  .bottom-tagList-item
-    color white
-    background-color transparent
-
-.border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.info
-  height 20px
-  clearfix()
-  font-size 12px
-  color $ui-inactive-text-color
-  line-height 20px
-  overflow-y hidden
-
-.info-left
-  float left
-  overflow ellipsis
-
-.info-left-folder
-  border-left 4px solid transparent
-  padding 2px 5px
-  color $ui-text-color
-.info-left-folder-surfix
-  font-size 10px
-  margin-left 5px
-  color $ui-inactive-text-color
-.info-right
-  float right
-
-.title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  height 20px
-  line-height 20px
-  padding 0 5px 0 0
-  overflow ellipsis
-  color $ui-text-color
-
-.title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-  transition 0.15s
-
-.bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
-body[data-theme="dark"]
-  .root
-    border-color $ui-dark-borderColor
-
-  .root--active
-    @extend .root
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color $ui-active-color
-    .info-left-folder
-    .info-left-folder-surfix
-    .title
-    .title-icon
-    .title-empty
-    .bottom-tagIcon
-    .bottom-tagList-item
-    .bottom-tagList-empty
-    .bottom-time
-      color white
-    .bottom-tagList-item
-      color white
-      background-color transparent
-
-  .info
-    color $ui-dark-inactive-text-color
-
-  .info-left-folder
-    color $ui-dark-text-color
-
-  .info-left-folder-surfix
-    color $ui-dark-inactive-text-color
-
-  .title
-    color $ui-dark-text-color
-
-  .title-icon
-    color $ui-dark-inactive-text-color
-
-  .title-empty
-    color $ui-dark-inactive-text-color
-
-  .tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-tagIcon
-    color $ui-dark-button-color
-
-  .bottom-tagList-item
-    color $ui-dark-text-color
-    background-color $ui-dark-backgroundColor
-
-  .bottom-tagList-empty
-    color $ui-dark-inactive-text-color
-
-  .bottom-time
-    color $ui-dark-inactive-text-color

browser/finder/NoteList.js

@@ -1,6 +1,6 @@
-import React, { PropTypes } from 'react'
-import NoteItem from './NoteItem'
-import _ from 'lodash'
+import React from 'react'
+import NoteItem from 'browser/components/NoteItem'
+import moment from 'moment'
 
 class NoteList extends React.Component {
   constructor (props) {
@@ -54,21 +54,23 @@ class NoteList extends React.Component {
   }
 
   render () {
-    let { storageMap, notes, index } = this.props
+    let { notes, index } = this.props
 
     let notesList = notes
       .slice(0, 10 + 10 * this.state.range)
       .map((note, _index) => {
-        let storage = storageMap[note.storage]
-        let folder = _.find(storage.folders, {key: note.folder})
+        const isActive = (index === _index)
+        const key = `${note.storage}-${note.key}`
+        const dateDisplay = moment(note.updatedAt).fromNow()
+
         return (
           <NoteItem
+            isActive={isActive}
             note={note}
-            key={`${note.storage}-${note.key}`}
-            storage={storage}
-            folder={folder}
-            isActive={index === _index}
-            onClick={(e) => this.props.handleNoteClick(e, _index)}
+            dateDisplay={dateDisplay}
+            key={key}
+            handleNoteClick={(e) => this.props.handleNoteClick(e, _index)}
+            handleNoteContextMenu={() => ''}
           />
         )
       })

browser/finder/StorageSection.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StorageSection.styl'
+import StorageItem from 'browser/components/StorageItem'
 
 class StorageSection extends React.Component {
   constructor (props) {
@@ -30,20 +31,17 @@ class StorageSection extends React.Component {
   render () {
     let { storage, filter } = this.props
     let folderList = storage.folders
-      .map((folder) => {
-        return (
-          <button styleName={filter.type === 'FOLDER' && filter.folder === folder.key && filter.storage === storage.key
-              ? 'folderList-item--active'
-              : 'folderList-item'
-            }
-            style={{borderColor: folder.color}}
-            key={folder.key}
-            onClick={(e) => this.handleFolderClick(e, folder)}
-          >
-            {folder.name}
-          </button>
-        )
-      })
+      .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'>

browser/finder/index.js

@@ -9,6 +9,7 @@ import styles from './FinderMain.styl'
 import StorageSection from './StorageSection'
 import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
+import SideNavFilter from 'browser/components/SideNavFilter'
 require('!!style!css!stylus?sourceMap!../main/global.styl')
 require('../lib/customMeta')
 
@@ -307,18 +308,12 @@ class FinderMain extends React.Component {
                   /> Only Markdown</label>
               </div>
             </div>
-            <button styleName={filter.type === 'ALL'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleAllNotesButtonClick(e)}
-            ><i className='fa fa-files-o fa-fw'/> All Notes</button>
-            <button styleName={filter.type === 'STARRED'
-                ? 'result-nav-menu--active'
-                : 'result-nav-menu'
-              }
-              onClick={(e) => this.handleStarredButtonClick(e)}
-            ><i className='fa fa-star fa-fw'/> Starred</button>
+            <SideNavFilter
+              isHomeActive={filter.type === 'ALL'}
+              handleAllNotesButtonClick={(e) => this.handleAllNotesButtonClick(e)}
+              isStarredActive={filter.type === 'STARRED'}
+              handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+            />
             <div styleName='result-nav-storageList'>
               {storageList}
             </div>
@@ -356,7 +351,7 @@ function refreshData () {
 
 ReactDOM.render((
   <Provider store={store}>
-    <Finder/>
+    <Finder />
   </Provider>
 ), document.getElementById('content'), function () {
   refreshData()

browser/lib/api.js

@@ -1,21 +0,0 @@
-import superagent from 'superagent'
-import superagentPromise from 'superagent-promise'
-
-export const SERVER_URL = 'https://b00st.io/'
-// export const SERVER_URL = 'http://localhost:3333/'
-
-export const request = superagentPromise(superagent, Promise)
-
-export function shareViaPublicURL (input) {
-  return request
-    .post(SERVER_URL + 'apis/share')
-    // .set({
-    //   Authorization: 'Bearer ' + auth.token()
-    // })
-    .send(input)
-}
-
-export default {
-  SERVER_URL,
-  shareViaPublicURL
-}

browser/lib/customMeta.js

@@ -1,4 +1,3 @@
 import CodeMirror from 'codemirror'
-import _ from 'lodash'
 
 CodeMirror.modeInfo.push({name: 'Stylus', mime: 'text/x-styl', mode: 'stylus', ext: ['styl'], 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 getLastUpdated (date) {
+  const m = moment(date)
+  if (!m.isValid()) {
+    throw Error('Invalid argument.')
+  }
+
+  return m.format('MMM D, gggg H:mm')
+}

browser/lib/markdown.js

@@ -58,7 +58,7 @@ md.use(math, {
 })
 md.use(require('markdown-it-footnote'))
 // Override task item
-md.block.ruler.at('paragraph', function (state, startLine/*, endLine*/) {
+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')

browser/main/Detail/DetailVars.styl

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

browser/main/Detail/FolderSelect.js

@@ -128,8 +128,8 @@ class FolderSelect extends React.Component {
   }
 
   nextOption () {
-    let { storages } = this.props
     let { optionIndex } = this.state
+    let { folders } = this.props
 
     optionIndex++
     if (optionIndex >= folders.length) optionIndex = 0
@@ -262,13 +262,11 @@ class FolderSelect extends React.Component {
           : <div styleName='idle'>
             <div styleName='idle-label'>
               <span styleName='idle-label-name'
-                style={{borderColor: currentOption.folder.color}}
+                style={{color: currentOption.folder.color}}
               >
-                {currentOption.folder.name}
-                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
+                {currentOption.folder.name} /
               </span>
             </div>
-            <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>
           </div>
         }
 

browser/main/Detail/FolderSelect.styl

@@ -7,29 +7,28 @@
   transition 0.15s
   user-select none
   &:hover
-    background-color white
-    border-color $ui-borderColor
+    background-color $ui-button--hover-backgroundColor
 
 .root--search, .root--focus
   @extend .root
-  background-color white
+  background-color $ui-noteDetail-backgroundColor = #F4F4F4
   border-color $ui-input--focus-borderColor
+  width 100px
   &:hover
-    background-color white
     border-color $ui-input--focus-borderColor
 
 .idle
   position relative
   cursor pointer
+
 .idle-label
-  absolute left top
-  padding 0 0 0 5px
   right 20px
   overflow ellipsis
 
 .idle-label-name
-  border-left solid 4px transparent
-  padding 2px 5px
+  font-size 16px
+  padding 2px
+
 .idle-label-name-surfix
   font-size 10px
   color $ui-inactive-text-color
@@ -60,9 +59,9 @@
   max-height 450px
   overflow auto
   z-index 200
+  border $ui-border
   background-color white
   border-radius 2px
-  box-shadow 2px 2px 10px gray
 
 .search-optionList-item
   height 34px
@@ -115,8 +114,8 @@ body[data-theme="dark"]
 
   .search-optionList
     color white
+    border-color $ui-dark-borderColor
     background-color $ui-dark-button--hover-backgroundColor
-    box-shadow 2px 2px 10px black
 
   .search-optionList-item
     &:hover

browser/main/Detail/LastUpdatedString.js

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

browser/main/Detail/LastUpdatedString.styl

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

browser/main/Detail/MarkdownNoteDetail.js

@@ -166,20 +166,6 @@ class MarkdownNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   handleContextButtonClick (e) {
     let menu = new Menu()
     menu.append(new MenuItem({
@@ -229,6 +215,10 @@ class MarkdownNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <div styleName='info-left-top'>
               <FolderSelect styleName='info-left-top-folderSelect'
                 value={this.state.note.storage + '-' + this.state.note.folder}
@@ -237,36 +227,18 @@ class MarkdownNoteDetail extends React.Component {
                 onChange={(e) => this.handleFolderChange(e)}
               />
             </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
+
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
               <i className='fa fa-ellipsis-v' />
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
             </button>
           </div>
         </div>
@@ -284,6 +256,7 @@ class MarkdownNoteDetail extends React.Component {
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/MarkdownNoteDetail.styl

@@ -1,68 +1,19 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top right bottom
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
-
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
-
-.info-left
-  float left
-  padding 0 5px
-
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-
-.info-right-button-tooltip
-  tooltip()
-  position fixed
-  top 45px
-  padding 5px
-  opacity 0
-  border-radius 2px
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
 
 .body-noteEditor
@@ -71,32 +22,5 @@ $info-height = 75px
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-
-  .info
-    border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
-    darkTooltip()
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none

browser/main/Detail/NoteDetailInfo.styl

@@ -0,0 +1,98 @@
+@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
+  display inline-block
+  padding 0 3px
+  height 34px
+  line-height 34px
+  vertical-align middle
+  border-radius 3px
+
+.info-left-button
+  width 34px
+  height 34px
+  navButtonColor()
+  color $ui-favorite-star-button-color
+  font-size 14px
+  margin 13px 2px
+  padding 0
+  border-radius 17px
+  &:hover .info-right-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-favorite-star-button-color
+  &:active, &:active:hover
+    background-color $ui-favorite-star-button-color
+    color $ui-button--active-color
+
+.info-right
+  position absolute
+  right 0
+  top 0
+  background $ui-noteDetail-backgroundColor
+  bottom 1px
+  padding-left 30px
+
+.info-right-button
+  width 34px
+  height 34px
+  border-radius 17px
+  font-size 14px
+  margin 13px 7px
+  padding 0
+  border none
+  color $ui-button-color
+  background-color transparent
+  &:hover
+    opacity 1
+    background-color $ui-button--hover-backgroundColor
+
+
+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
+
+  .info-right-button
+    navDarkButtonColor()
+    border-color $ui-dark-borderColor
+    &:active
+      border-color $ui-dark-button--focus-borderColor
+    &:focus
+      border-color $ui-button--focus-borderColor

browser/main/Detail/SnippetNoteDetail.js

@@ -10,10 +10,11 @@ import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
 import CodeMirror from 'codemirror'
-import SnippetTab from './SnippetTab'
+import SnippetTab from 'browser/components/SnippetTab'
 import StatusBar from '../StatusBar'
 import context from 'browser/lib/context'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import _ from 'lodash'
 
 function pass (name) {
   switch (name) {
@@ -188,21 +189,6 @@ class SnippetNoteDetail extends React.Component {
 
   }
 
-  handleShareButtonClick (e) {
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Export as a File',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({
-      label: 'Export to Web',
-      disabled: true,
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   handleContextButtonClick (e) {
     context.popup([{
       label: 'Delete',
@@ -523,6 +509,7 @@ class SnippetNoteDetail extends React.Component {
             fontSize={editorFontSize}
             indentType={config.editor.indentType}
             indentSize={editorIndentSize}
+            keyMap={config.editor.keyMap}
             onChange={(e) => this.handleCodeChange(index)(e)}
             ref={'code-' + index}
           />
@@ -538,6 +525,10 @@ class SnippetNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <div styleName='info-left-top'>
               <FolderSelect styleName='info-left-top-folderSelect'
                 value={this.state.note.storage + '-' + this.state.note.folder}
@@ -546,36 +537,18 @@ class SnippetNoteDetail extends React.Component {
                 onChange={(e) => this.handleFolderChange(e)}
               />
             </div>
-            <div styleName='info-left-bottom'>
-              <TagSelect
-                styleName='info-left-bottom-tagSelect'
-                ref='tags'
-                value={this.state.note.tags}
-                onChange={(e) => this.handleChange(e)}
-              />
-            </div>
+
+            <TagSelect
+              ref='tags'
+              value={this.state.note.tags}
+              onChange={(e) => this.handleChange(e)}
+            />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
-            <button styleName='info-right-button'
-              onClick={(e) => this.handleShareButtonClick(e)}
-              disabled
-            >
-              <i className='fa fa-share-alt fa-fw'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 20}}
-              >Share Note</span>
-            </button>
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
-              <i className='fa fa-ellipsis-v'/>
-              <span styleName='info-right-button-tooltip'
-                style={{right: 5}}
-              >More Options</span>
+              <i className='fa fa-ellipsis-v' />
             </button>
           </div>
         </div>
@@ -600,7 +573,7 @@ class SnippetNoteDetail extends React.Component {
             <button styleName='plusButton'
               onClick={(e) => this.handleTabPlusButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           </div>
           {viewList}
@@ -614,24 +587,25 @@ class SnippetNoteDetail extends React.Component {
               ? 'Select Syntax...'
               : this.state.note.snippets[this.state.snippetIndex].mode
             }&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentTypeButtonClick(e)}
           >
             Indent: {config.editor.indentType}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
           <button
             onClick={(e) => this.handleIndentSizeButtonClick(e)}
           >
             size: {config.editor.indentSize}&nbsp;
-            <i className='fa fa-caret-down'/>
+            <i className='fa fa-caret-down' />
           </button>
         </div>
 
         <StatusBar
           {..._.pick(this.props, ['config', 'location', 'dispatch'])}
+          date={note.updatedAt}
         />
       </div>
     )

browser/main/Detail/SnippetNoteDetail.styl

@@ -1,72 +1,25 @@
-$info-height = 75px
+@import('NoteDetailInfo')
+@import('DetailVars')
 
 .root
   absolute top bottom right
   border-width 0 0 1px
   border-style solid
   border-color $ui-borderColor
-
-.info
-  absolute top left right
-  height $info-height
-  border-bottom $ui-border
-  background-color $ui-backgroundColor
-
-.info-left
-  float left
-  padding 0 5px
-
-.info-left-top
-  height 40px
-  line-height 40px
-
-.info-left-top-folderSelect
-  display inline-block
-  height 34px
-  width 200px
-  vertical-align middle
-
-.info-left-bottom
-  height 30px
-
-.info-left-bottom-tagSelect
-  height 30px
-  line-height 30px
-
-.info-right
-  float right
-
-.info-right-button
-  width 34px
-  height 34px
-  border-radius 17px
-  navButtonColor()
-  border $ui-border
-  font-size 14px
-  margin 8px 2px
-  padding 0
-  &:active
-    border-color $ui-button--focus-borderColor
-  &:hover .info-right-button-tooltip
-    opacity 1
-  &:focus
-    border-color $ui-button--focus-borderColor
-.info-right-button-tooltip
-  tooltip()
-  position fixed
-  top 45px
-  padding 5px
-  opacity 0
+  background-color $ui-noteDetail-backgroundColor
+  box-shadow $note-detail-box-shadow
 
 .body
   absolute left right
-  top $info-height
+  left $note-detail-left-margin
+  right $note-detail-right-margin
+  top $info-height + $info-margin-under-border
   bottom $statusBar-height
+  background-color $ui-noteDetail-backgroundColor
 
 .body .description
   absolute top left right
   height 80px
-  border-bottom $ui-border
 
 .body .description textarea
   display block
@@ -76,20 +29,19 @@ $info-height = 75px
   border none
   padding 10px
   line-height 1.6
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList
   absolute left right
   top 80px
   height 30px
-  border-bottom $ui-border
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
 
 .tabList .list
   flex 1
   display flex
   overflow hidden
-  border-right $ui-border
 
 .tabList .plusButton
   navButtonColor()
@@ -97,13 +49,14 @@ $info-height = 75px
 
 .tabView
   absolute left right bottom
-  top 110px
+  top 130px
 
 .tabView-content
   absolute top left right bottom
 
 .override
   absolute bottom left
+  left 60px
   height 23px
   z-index 1
   button
@@ -118,47 +71,19 @@ $info-height = 75px
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteDetail-backgroundColor
+    box-shadow none
 
-  .info
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .info-delete
-    color $ui-dark-text-color
-
-  .info-delete-confirmButton
-    colorDarkDangerButton()
-    color $ui-dark-text-color
-
-  .info-delete-cancelButton
-    colorDarkDefaultButton()
-    border-color $ui-dark-borderColor
-    color $ui-dark-text-color
-
-  .info-right-button
-    navDarkButtonColor()
-    border-color $ui-dark-borderColor
-    &:active
-      border-color $ui-dark-button--focus-borderColor
-    &:hover .info-right-button-tooltip
-      opacity 1
-    &:focus
-      border-color $ui-button--focus-borderColor
-
-  .info-right-button-tooltip
-    darkTooltip()
-
-  .body .description
-    border-bottom-color $ui-dark-borderColor
+  .body
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .body .description textarea
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     color white
 
   .tabList
     background-color $ui-button--active-backgroundColor
-    border-bottom-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
 
   .tabList .list
     border-color $ui-dark-borderColor

browser/main/Detail/StarButton.js

@@ -53,7 +53,6 @@ class StarButton extends React.Component {
             : 'fa fa-star-o'
           }
         />
-        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -1,5 +1,6 @@
 .root
-  position relative
+  left 7px
+  top 0
   padding 0
   &:hover
     .icon
@@ -9,19 +10,11 @@
 
 .root--active
   @extend .root
-  color $brand-color
+  color $ui-favorite-star-button-color
   &:hover
-    color $brand-color !important
+    color $ui-favorite-star-button-color
   .icon
     transform rotate(-72deg)
+
 .icon
   transition transform 0.15s
-
-.tooltip
-  tooltip()
-  position fixed
-  top 45px
-  right 65px
-  padding 5px
-  opacity 0
-  border-radius 2px

browser/main/Detail/TagSelect.js

@@ -107,12 +107,12 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
+            <span styleName='tag-label'>{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)(e)}
             >
-              <i className='fa fa-times fa-fw'/>
+              <i className='fa fa-times fa-fw tag-removeButton-icon' />
             </button>
-            <span styleName='tag-label'>{tag}</span>
           </span>
         )
       })
@@ -125,10 +125,7 @@ class TagSelect extends React.Component {
         }
         styleName='root'
       >
-        <i styleName='icon'
-          className='fa fa-tags'
-        />
-          {tagList}
+        {tagList}
         <input styleName='newTag'
           ref='newTag'
           value={this.state.newTag}
@@ -136,7 +133,6 @@ class TagSelect extends React.Component {
           onChange={(e) => this.handleNewTagInputChange(e)}
           onKeyDown={(e) => this.handleNewTagInputKeyDown(e)}
         />
-
       </div>
     )
   }

browser/main/Detail/TagSelect.styl

@@ -1,46 +1,47 @@
 .root
-  position relative
-  user-select none
-
-.icon
   display inline-block
-  width 30px
+  top 19px
+  user-select none
   vertical-align middle
-  text-align center
-  color $ui-button-color
+  width 300px
+  overflow-x scroll
+  white-space nowrap
+
+.root::-webkit-scrollbar
+  display none
 
 .tag
   display inline-block
   margin 0 2px
+  padding-left 10px
   vertical-align middle
   height 20px
-  background-color white
-  border-radius 3px
+  background-color $ui-tag-backgroundColor
+  border-radius 20px
   overflow hidden
   clearfix()
 
 .tag-removeButton
-  float left
+  float right
   height 20px
   width 18px
   margin 0
   padding 0
   border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
+  border-width 0
+  border-radius 20px
   line-height 18px
   background-color transparent
   color $ui-button-color
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active, &:active:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-    border-color $ui-button--focus-borderColor
-  &:focus
-    border-color $ui-button--focus-borderColor
+
+.tag-removeButton-icon
+  width 5px
+  padding-right 4px
 
 .tag-label
+  font-size 12px
+  font-weight bold
+  color: #FFFFFF
   float left
   height 20px
   line-height 20px
@@ -62,12 +63,27 @@
   &:disabled
     background-color $ui-input--disabled-backgroundColor = #DDD
 
+.add-tag-button
+  display inline
+  margin-left 5px
+  width 20px
+  height 20px
+  border none
+  border-radius 20px
+  padding 0
+  color #FFFFFF
+  &:hover
+    background-color rgba(0, 0, 0, 0.3)
+  &:active, &:active:hover
+    background-color rgba(0, 0, 0, 0.5)
+    color $ui-button--active-color
+
 body[data-theme="dark"]
   .icon
     color $ui-dark-button-color
 
   .tag
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color $ui-dark-tag-backgroundColor
 
   .tag-removeButton
     border-color $ui-button--focus-borderColor
@@ -85,3 +101,10 @@ body[data-theme="dark"]
       border-color $ui-input--focus-borderColor = #369DCD
     &:disabled
       background-color $ui-input--disabled-backgroundColor = #DDD
+
+  .add-tag-button
+    &:hover
+      background-color rgba(255, 255, 255, 0.3)
+    &:active, &:active:hover
+      background-color rgba(255, 255, 255, 0.5)
+      color $ui-button--active-color

browser/main/Main.js

@@ -26,7 +26,7 @@ class Main extends React.Component {
     this.state = {
       isRightSliderFocused: false,
       listWidth: config.listWidth,
-      navWidth: config.listWidth,
+      navWidth: config.navWidth,
       isLeftSliderFocused: false
     }
   }
@@ -85,6 +85,7 @@ class Main extends React.Component {
   }
 
   handleMouseUp (e) {
+    // Change width of NoteList component.
     if (this.state.isRightSliderFocused) {
       this.setState({
         isRightSliderFocused: false
@@ -99,6 +100,8 @@ class Main extends React.Component {
         })
       })
     }
+
+    // Change width of SideNav component.
     if (this.state.isLeftSliderFocused) {
       this.setState({
         isLeftSliderFocused: false
@@ -106,10 +109,10 @@ class Main extends React.Component {
         let { dispatch } = this.props
         let navWidth = this.state.navWidth
         // TODO: ConfigManager should dispatch itself.
-        ConfigManager.set({listWidth: navWidth})
+        ConfigManager.set({ navWidth })
         dispatch({
           type: 'SET_NAV_WIDTH',
-          listWidth: navWidth
+          navWidth
         })
       })
     }
@@ -162,11 +165,11 @@ class Main extends React.Component {
         />
         {!config.isSideNavFolded &&
           <div styleName={this.state.isLeftSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.navWidth - 1}}
+            style={{left: this.state.navWidth}}
             onMouseDown={(e) => this.handleLeftSlideMouseDown(e)}
             draggable='false'
           >
-            <div styleName='slider-hitbox'/>
+            <div styleName='slider-hitbox' />
           </div>
         }
         <div styleName={config.isSideNavFolded ? 'body--expanded' : 'body'}
@@ -191,15 +194,15 @@ class Main extends React.Component {
               'location'
             ])}
           />
-          <div styleName={this.state.isRightSliderFocused ? 'slider--active' : 'slider'}
-            style={{left: this.state.listWidth}}
+          <div styleName={this.state.isRightSliderFocused ? 'slider-right--active' : 'slider-right'}
+            style={{left: this.state.listWidth - 1}}
             onMouseDown={(e) => this.handleRightSlideMouseDown(e)}
             draggable='false'
           >
             <div styleName='slider-hitbox' />
           </div>
           <Detail
-            style={{left: this.state.listWidth + 1}}
+            style={{left: this.state.listWidth}}
             {..._.pick(this.props, [
               'dispatch',
               'data',

browser/main/Main.styl

@@ -11,15 +11,18 @@
 
 .slider
   absolute top bottom
+  top -2px
+  width 0
+
+.slider-right
+  @extend .slider
   width 1px
-  background-color $ui-borderColor
-  border-width 0
-  border-style solid
-  border-color $ui-borderColor
 
 .slider--active
   @extend .slider
-  background-color $ui-button--active-backgroundColor
+
+.slider-right--active
+  @extend .slider-right
 
 .slider-hitbox
   absolute top bottom left right
@@ -33,9 +36,6 @@ body[data-theme="dark"]
   .root
     absolute top left bottom right
 
-  .slider
-    background-color $ui-dark-borderColor
-    border-color $ui-dark-borderColor
-
-  .slider--active
-    background-color $ui-button--active-backgroundColor
+  .slider-right
+  .slider-right--active
+    box-shadow none

browser/main/NoteDetail/ShareButton.js

@@ -1,168 +0,0 @@
-import React, { PropTypes } from 'react'
-import ReactDOM from 'react-dom'
-import api from 'browser/lib/api'
-import clientKey from 'browser/lib/clientKey'
-import activityRecord from 'browser/lib/activityRecord'
-const clipboard = require('electron').clipboard
-
-function notify (...args) {
-  return new window.Notification(...args)
-}
-
-function getDefault () {
-  return {
-    openDropdown: false,
-    isSharing: false,
-    // Fetched url
-    url: null,
-    // for tooltip Copy -> Copied!
-    copied: false,
-    failed: false
-  }
-}
-
-export default class ShareButton extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = getDefault()
-  }
-
-  componentWillReceiveProps (nextProps) {
-    this.setState(getDefault())
-  }
-
-  componentDidMount () {
-    this.dropdownInterceptor = e => {
-      this.dropdownClicked = true
-    }
-    ReactDOM.findDOMNode(this.refs.dropdown).addEventListener('click', this.dropdownInterceptor)
-    this.shareViaPublicURLHandler = e => {
-      this.handleShareViaPublicURLClick(e)
-    }
-  }
-
-  componentWillUnmount () {
-    document.removeEventListener('click', this.dropdownHandler)
-    ReactDOM.findDOMNode(this.refs.dropdown).removeEventListener('click', this.dropdownInterceptor)
-  }
-
-  handleOpenButtonClick (e) {
-    this.openDropdown()
-    if (this.dropdownHandler == null) {
-      this.dropdownHandler = e => {
-        if (!this.dropdownClicked) {
-          this.closeDropdown()
-        } else {
-          this.dropdownClicked = false
-        }
-      }
-    }
-    document.removeEventListener('click', this.dropdownHandler)
-    document.addEventListener('click', this.dropdownHandler)
-  }
-
-  openDropdown () {
-    this.setState({openDropdown: true})
-  }
-
-  closeDropdown () {
-    document.removeEventListener('click', this.dropdownHandler)
-    this.setState({openDropdown: false})
-  }
-
-  handleClipboardButtonClick (e) {
-    activityRecord.emit('MAIN_DETAIL_COPY')
-    clipboard.writeText(this.props.article.content)
-    notify('Saved to Clipboard!', {
-      body: 'Paste it wherever you want!'
-    })
-    this.setState({openDropdown: false})
-  }
-
-  handleShareViaPublicURLClick (e) {
-    let { user } = this.props
-    let input = Object.assign({}, this.props.article, {
-      clientKey: clientKey.get(),
-      writerName: user.name
-    })
-    this.setState({
-      isSharing: true,
-      failed: false
-    }, () => {
-      api.shareViaPublicURL(input)
-        .then(res => {
-          let url = res.body.url
-          this.setState({url: url, isSharing: false})
-          activityRecord.emit('ARTICLE_SHARE')
-        })
-        .catch(err => {
-          console.log(err)
-          this.setState({isSharing: false, failed: true})
-        })
-    })
-  }
-
-  handleCopyURLClick () {
-    clipboard.writeText(this.state.url)
-    this.setState({copied: true})
-  }
-
-  // Restore copy url tooltip
-  handleCopyURLMouseLeave () {
-    this.setState({copied: false})
-  }
-
-  render () {
-    let hasPublicURL = this.state.url != null
-    return (
-      <div className='ShareButton'>
-        <button ref='openButton' onClick={e => this.handleOpenButtonClick(e)} className='ShareButton-open-button'>
-          <i className='fa fa-fw fa-share-alt'/>
-          {
-            this.state.openDropdown ? null : (
-              <span className='tooltip'>Share</span>
-            )
-          }
-        </button>
-        <div ref='dropdown' className={'ShareButton-dropdown' + (this.state.openDropdown ? '' : ' hide')}>
-          {
-            !hasPublicURL ? (
-              <button
-                onClick={e => this.shareViaPublicURLHandler(e)}
-                ref='sharePublicURL'
-                disabled={this.state.isSharing}>
-                <i className='fa fa-fw fa-external-link'/> {this.state.failed ? 'Failed : Click to Try again' : !this.state.isSharing ? 'Share via public URL' : 'Sharing...'}
-              </button>
-            ) : (
-              <div className='ShareButton-url'>
-                <input className='ShareButton-url-input' value={this.state.url} readOnly/>
-                <button
-                  onClick={e => this.handleCopyURLClick(e)}
-                  className='ShareButton-url-button'
-                  onMouseLeave={e => this.handleCopyURLMouseLeave(e)}
-                  >
-                  <i className='fa fa-fw fa-clipboard'/>
-                  <div className='ShareButton-url-button-tooltip'>{this.state.copied ? 'Copied!' : 'Copy URL'}</div>
-                </button>
-                <div className='ShareButton-url-alert'>This url is valid for 7 days.</div>
-              </div>
-            )
-          }
-          <button onClick={e => this.handleClipboardButtonClick(e)}>
-            <i className='fa fa-fw fa-clipboard'/>&nbsp;Copy to clipboard
-          </button>
-        </div>
-      </div>
-    )
-  }
-}
-
-ShareButton.propTypes = {
-  article: PropTypes.shape({
-    publicURL: PropTypes.string,
-    content: PropTypes.string
-  }),
-  user: PropTypes.shape({
-    name: PropTypes.string
-  })
-}

browser/main/NoteList/NoteList.styl

@@ -1,25 +1,28 @@
+$control-height = 30px
+
 .root
   absolute left bottom
-  border-top $ui-border
   top $topBar-height - 1
+  background-color $ui-noteList-backgroundColor
 
 .control
   absolute top left right
   user-select none
-  height 25px
-  font-size 10px
-  border-bottom $ui-border
+  height $control-height
+  font-size 12px
   line-height 25px
   display flex
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   color $ui-inactive-text-color
 
 .control-sortBy
   flex 1
-  padding-left 5px
+  padding-left 25px
 
 .control-sortBy-select
-  margin-left 5px
+  margin-left 0
+  font-size 12px
+  color $ui-inactive-text-color
   padding 0
   border none
   background-color transparent
@@ -36,8 +39,6 @@
     color $ui-active-color
   &:hover
     color $ui-text-color
-    .control-button-tooltip
-      opacity 1
 
 .control-button--active
   @extend .control-button
@@ -45,178 +46,22 @@
   &:hover
     color $ui-active-color
 
-.control-button-tooltip
-  tooltip()
-  position absolute
-  top 20px
-  right 5px
-  padding 5px
-  opacity 0
-  white-space nowrap
-  border-radius 2px
-  z-index 1
-
 .list
   absolute left right bottom
-  top 24px
+  top $control-height
   overflow auto
 
-.item
-  position relative
-  border-bottom $ui-border
-  padding 2px 5px
-  user-select none
-  cursor pointer
-  transition background-color 0.15s
-  &:hover
-    background-color alpha($ui-active-color, 20%)
-  &:active
-    background-color $ui-active-color
-    color white
-    .item-title
-    .item-title-empty
-    .item-title-icon
-    .item-bottom-tagIcon
-    .item-bottom-tagList-empty
-    .item-bottom-time
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-
-.item--active
-  @extend .item
-  background-color $ui-active-color
-  color white
-  .item-title
-  .item-title-empty
-  .item-title-icon
-  .item-bottom-tagIcon
-  .item-bottom-tagList-empty
-  .item-bottom-time
-    color white
-  .item-bottom-tagList-item
-    background-color transparent
-    color white
-  &:hover
-    background-color $ui-active-color
-
-.item-border
-  absolute top bottom left right
-  border-style solid
-  border-width 2px
-  border-color transparent
-  transition 0.15s
-
-.item-title
-  height 24px
-  box-sizing border-box
-  line-height 24px
-  padding 0
-  overflow ellipsis
-  color $ui-text-color
-
-.item-title-icon
-  font-size 12px
-  color $ui-inactive-text-color
-  padding-right 3px
-
-.item-title-empty
-  font-weight normal
-  color $ui-inactive-text-color
-
-.item-bottom
-  margin-top 2px
-  height 20px
-  font-size 12px
-  line-height 20px
-  overflow ellipsis
-  display flex
-
-.item-bottom-tagIcon
-  vertical-align middle
-  color $ui-button-color
-  height 20px
-  line-height 20px
-
-.item-bottom-tagList
-  flex 1
-  overflow ellipsis
-  line-height 20px
-
-.item-bottom-tagList-item
-  margin 0 4px
-  padding 0 4px
-  height 20px
-  box-sizing border-box
-  border-radius 3px
-  vertical-align middle
-  border-style solid
-  border-color $ui-button--focus-borderColor
-  border-width 0 0 0 3px
-  background-color $ui-backgroundColor
-  color $ui-text-color
-
-.item-bottom-tagList-empty
-  color $ui-inactive-text-color
-  vertical-align middle
-  font-size 10px
-  margin-left 5px
-
-.item-bottom-time
-  color $ui-inactive-text-color
-  margin-left 5px
-  font-size 10px
-
 body[data-theme="dark"]
   .root
     border-color $ui-dark-borderColor
-    background-color $ui-dark-backgroundColor
-
-  .item
-    border-color $ui-dark-borderColor
-    &:hover
-      background-color alpha($ui-active-color, 20%)
-
-  .item--active
-    @extend .item
-    border-color $ui-dark-borderColor
-    .item-title
-      color white
-    .item-bottom-tagList-item
-      background-color transparent
-      color white
-    .item-bottom-tagList-empty
-      color white
-    &:hover
-      background-color $ui-active-color
-
-  .item-title
-    color $ui-dark-text-color
-
-  .item-title-icon
-    color $ui-darkinactive-text-color
-
-  .item-title-empty
-    color $ui-dark-inactive-text-color
-
-  .item-bottom-tagIcon
-    color $ui-dark-button-color
-
-  .item-bottom-tagList-item
-    border-color $ui-dark-button--focus-borderColor
-    background-color $ui-dark-button--hover-backgroundColor
-    color $ui-dark-text-color
-
-  .item-bottom-tagList-empty
-    color $ui-inactive-text-color
-    vertical-align middle
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
+
+  .control
+    background-color $ui-dark-noteList-backgroundColor
     border-color $ui-dark-borderColor
-  .control-sortBy-select
-    color $ui-dark-text-color
 
   .control-button
     color $ui-dark-inactive-text-color

browser/main/NoteList/index.js

@@ -6,6 +6,8 @@ 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'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -314,57 +316,40 @@ class NoteList extends React.Component {
       .sort(sortFunc)
 
     let noteList = notes
-      .map((note) => {
-        if (note == null) return null
-        let tagElements = _.isArray(note.tags)
-          ? note.tags.map((tag) => {
-            return (
-              <span styleName='item-bottom-tagList-item'
-                key={tag}>
-                {tag}
-              </span>
-            )
-          })
-          : []
-        let isActive = location.query.key === note.storage + '-' + note.key
+      .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)}
+              handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+            />
+          )
+        }
+
         return (
-          <div styleName={isActive
-              ? 'item--active'
-              : 'item'
-            }
-            key={note.storage + '-' + note.key}
-            onClick={(e) => this.handleNoteClick(e, note.storage + '-' + note.key)}
-            onContextMenu={(e) => this.handleNoteContextMenu(e, note.storage + '-' + note.key)}
-          >
-            <div styleName='item-title'>
-              {note.type === 'SNIPPET_NOTE'
-                ? <i styleName='item-title-icon' className='fa fa-fw fa-code'/>
-                : <i styleName='item-title-icon' className='fa fa-fw fa-file-text-o'/>
-              }
-              {note.title.trim().length > 0
-                ? note.title
-                : <span styleName='item-title-empty'>Empty</span>
-              }
-            </div>
-
-            {config.listStyle === 'DEFAULT' &&
-              <div styleName='item-bottom'>
-                <i styleName='item-bottom-tagIcon'
-                  className='fa fa-tags fa-fw'
-                />
-                <div styleName='item-bottom-tagList'>
-                  {tagElements.length > 0
-                    ? tagElements
-                    : <span styleName='item-bottom-tagList-empty'>Not tagged yet</span>
-                  }
-                </div>
-
-                <div styleName='item-bottom-time'>
-                  {moment(config.sortBy === 'CREATED_AT' ? note.createdAt : note.updatedAt).fromNow()}
-                </div>
-              </div>
-            }
-          </div>
+          <NoteItemSimple
+            isActive={isActive}
+            note={note}
+            key={key}
+            handleNoteClick={this.handleNoteClick.bind(this)}
+            handleNoteContextMenu={this.handleNoteContextMenu.bind(this)}
+          />
         )
       })
 
@@ -391,10 +376,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
           >
-            <i className='fa fa-th-list'/>
-            <span styleName='control-button-tooltip'>
-              Default Size
-            </span>
+            <i className='fa fa-th-large' />
           </button>
           <button styleName={config.listStyle === 'SMALL'
               ? 'control-button--active'
@@ -402,10 +384,7 @@ class NoteList extends React.Component {
             }
             onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
           >
-            <i className='fa fa-list'/>
-            <span styleName='control-button-tooltip'>
-              Small Size
-            </span>
+            <i className='fa fa-list-ul' />
           </button>
         </div>
         <div styleName='list'

browser/main/SideNav/SideNav.styl

@@ -1,19 +1,17 @@
 .root
   absolute top left bottom
   width $sideNav-width
-  border-right $ui-border
   background-color $ui-backgroundColor
   user-select none
   color $ui-text-color
 
 .top
   height $topBar-height
-  border-bottom $ui-border
 
 .top-menu
   navButtonColor()
   height $topBar-height - 1
-  padding 0 10px
+  padding 0 15px
   font-size 14px
   width 100%
   text-align left
@@ -22,32 +20,10 @@
   margin-left 5px
   overflow ellipsis
 
-.menu
-  margin 0
-
-.menu-button
-  navButtonColor()
-  height 32px
-  padding 0 10px
-  font-size 14px
-  width 100%
-  text-align left
-  overflow ellipsis
-
-.menu-button--active
-  @extend .menu-button
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-
-.menu-button-label
-  margin-left 5px
-
 .storageList
   absolute left right
-  bottom 32px
-  top 120px
+  bottom 37px
+  top 160px
   overflow-y auto
 
 .storageList-empty
@@ -135,16 +111,6 @@ body[data-theme="dark"]
   .top-menu
     navDarkButtonColor()
 
-  .menu-button
-    navDarkButtonColor()
-
-  .menu-button--active
-    @extend .menu-button
-    background-color $ui-dark-button--active-backgroundColor
-    color $ui-dark-button--active-color
-    &:hover
-      background-color $ui-dark-button--active-backgroundColor
-
   .storageList-empty
     color $ui-dark-inactive-text-color
 

browser/main/SideNav/StorageItem.js

@@ -6,6 +6,7 @@ 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'
 
 const { remote } = require('electron')
 const { Menu, MenuItem, dialog } = remote
@@ -134,34 +135,24 @@ class StorageItem extends React.Component {
     let { storage, location, isFolded, data } = 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 isActive = !!(location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key)))
       let noteSet = folderNoteMap.get(storage.key + '-' + folder.key)
 
       let noteCount = noteSet != null
         ? noteSet.size
         : 0
-      return <button styleName={isActive
-          ? 'folderList-item--active'
-          : 'folderList-item'
-        }
-        key={folder.key}
-        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
-        onContextMenu={(e) => this.handleFolderButtonContextMenu(e, folder)}
-      >
-        <span styleName='folderList-item-name'
-          style={{borderColor: folder.color}}
-        >
-          {isFolded ? folder.name.substring(0, 1) : folder.name}
-        </span>
-        {!isFolded &&
-          <span styleName='folderList-item-noteCount'>{noteCount}</span>
-        }
-        {isFolded &&
-          <span styleName='folderList-item-tooltip'>
-            {folder.name}
-          </span>
-        }
-      </button>
+      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}
+        />
+      )
     })
 
     let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
@@ -190,7 +181,7 @@ class StorageItem extends React.Component {
             <button styleName='header-addFolderButton'
               onClick={(e) => this.handleAddFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
             </button>
           }
 

browser/main/SideNav/StorageItem.styl

@@ -1,10 +1,12 @@
 .root
   width 100%
   user-select none
+
 .header
   position relative
   height 26px
   width 100%
+  margin-bottom 5px
   transition 0.15s
   &:hover
     background-color $ui-button--hover-backgroundColor
@@ -45,7 +47,7 @@
 .header-info
   display block
   width 100%
-  height 26px
+  height 30px
   padding-left 25px
   padding-right 10px
   line-height 26px
@@ -78,63 +80,6 @@
   &:active
     color $ui-active-color
 
-.folderList-item
-  display flex
-  width 100%
-  height 26px
-  background-color transparent
-  color $ui-inactive-text-color
-  padding 0
-  margin-bottom 2px
-  text-align left
-  border none
-  overflow ellipsis
-  font-size 14px
-  &:first-child
-    margin-top 0
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:active
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item--active
-  @extend .folderList-item
-  color $ui-button--active-color
-  background-color $ui-button--active-backgroundColor
-  &:hover
-    color $ui-button--active-color
-    background-color $ui-button--active-backgroundColor
-
-.folderList-item-name
-  display block
-  flex 1
-  padding 0 10px
-  height 26px
-  line-height 26px
-  border-width 0 0 0 6px
-  border-style solid
-  border-color transparent
-
-.folderList-item-noteCount
-  float right
-  line-height 26px
-  padding-right 5px
-  font-size 12px
-
-.folderList-item-tooltip
-  tooltip()
-  position fixed
-  padding 0 10px
-  left 44px
-  z-index 10
-  pointer-events none
-  opacity 0
-  border-top-right-radius 2px
-  border-bottom-right-radius 2px
-  height 26px
-  line-height 26px
-
 .root--folded
   @extend .root
   .header
@@ -161,11 +106,7 @@
   .header-info--folded-tooltip-path
     font-size 10px
     margin 0 5px
-  .folderList-item:hover, .folderList-item--active:hover
-    .folderList-item-tooltip
-      opacity 1
-  .folderList-item-name
-    padding-left 14px
+
 body[data-theme="dark"]
   .header-toggleButton
   .header-addFolderButton

browser/main/SideNav/index.js

@@ -5,9 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
-
-const electron = require('electron')
-const { remote } = electron
+import SideNavFilter from 'browser/components/SideNavFilter'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -39,8 +37,8 @@ class SideNav extends React.Component {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
-    let isHomeActive = location.pathname.match(/^\/home$/)
-    let isStarredActive = location.pathname.match(/^\/starred$/)
+    let isHomeActive = !!location.pathname.match(/^\/home$/)
+    let isStarredActive = !!location.pathname.match(/^\/starred$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -64,25 +62,18 @@ class SideNav extends React.Component {
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
-            <i className='fa fa-navicon fa-fw'/>
+            <i className='fa fa-navicon fa-fw' />
             <span styleName='top-menu-label'>Menu</span>
           </button>
         </div>
 
-        <div styleName='menu'>
-          <button styleName={isHomeActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleHomeButtonClick(e)}
-          >
-            <i className='fa fa-files-o fa-fw'/>
-            <span styleName='menu-button-label'>All Notes</span>
-          </button>
-          <button styleName={isStarredActive ? 'menu-button--active' : 'menu-button'}
-            onClick={(e) => this.handleStarredButtonClick(e)}
-          >
-            <i className='fa fa-star fa-fw'/>
-            <span styleName='menu-button-label'>Starred</span>
-          </button>
-        </div>
+        <SideNavFilter
+          isFolded={isFolded}
+          isHomeActive={isHomeActive}
+          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+          isStarredActive={isStarredActive}
+          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+        />
 
         <div styleName='storageList'>
           {storageList.length > 0 ? storageList : (
@@ -93,8 +84,8 @@ class SideNav extends React.Component {
           onClick={(e) => this.handleToggleButtonClick(e)}
         >
           {isFolded
-            ? <i className='fa fa-angle-double-right'/>
-            : <i className='fa fa-angle-double-left'/>
+            ? <i className='fa fa-angle-double-right' />
+            : <i className='fa fa-angle-double-left' />
           }
         </button>
       </div>

browser/main/StatusBar/StatusBar.styl

@@ -1,9 +1,12 @@
+@import('../Detail/DetailVars')
+
 .root
   absolute bottom left right
   height $statusBar-height
-  background-color $ui-backgroundColor
+  background-color $ui-noteDetail-backgroundColor
   border-top $ui-border
   display flex
+  box-shadow $note-detail-box-shadow
 
 .blank
   flex 1
@@ -39,8 +42,9 @@
 
 body[data-theme="dark"]
   .root
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteDetail-backgroundColor
     border-color $ui-dark-borderColor
+    box-shadow none
 
   .zoom
     border-color $ui-dark-borderColor

browser/main/StatusBar/index.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './StatusBar.styl'
 import ZoomManager from 'browser/main/lib/ZoomManager'
+import LastUpdatedString from '../Detail/LastUpdatedString'
 
 const electron = require('electron')
 const { remote, ipcRenderer } = electron
@@ -52,22 +53,23 @@ class StatusBar extends React.Component {
       <div className='StatusBar'
         styleName='root'
       >
-        <div styleName='blank' />
-        {status.updateReady
-          ? <button onClick={this.updateApp} styleName='update'>
-            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
-          </button>
-          : null
-        }
-        {/*<button styleName='help'>
-          <i className='fa fa-info-circle' />
-        </button>*/}
         <button styleName='zoom'
           onClick={(e) => this.handleZoomButtonClick(e)}
         >
           <i className='fa fa-search-plus' />&nbsp;
           {Math.floor(config.zoom * 100)}%
         </button>
+
+        <div styleName='blank' />
+
+        {status.updateReady
+          ? <button onClick={this.updateApp} styleName='update'>
+            <i styleName='update-icon' className='fa fa-cloud-download' /> Ready to Update!
+            </button>
+          : null
+        }
+
+        <LastUpdatedString date={this.props.date} />
       </div>
     )
   }
@@ -77,7 +79,8 @@ StatusBar.contextTypes = {
   status: PropTypes.shape({
     updateReady: PropTypes.bool.isRequired
   }).isRequired,
-  config: PropTypes.shape({}).isRequired
+  config: PropTypes.shape({}).isRequired,
+  date: PropTypes.string
 }
 
 StatusBar.propTypes = {

browser/main/TopBar/TopBar.styl

@@ -1,19 +1,19 @@
 .root
   position relative
-  background-color $ui-backgroundColor
+  background-color $ui-noteList-backgroundColor
   height $topBar-height - 1
+
 .root--expanded
   @extend .root
+
 $control-height = 34px
 
 .control
   position absolute
-  top 8px
+  top 13px
   left 8px
   right 8px
   height $control-height
-  border $ui-border
-  border-radius 20px
   overflow hidden
   display flex
 
@@ -28,6 +28,7 @@ $control-height = 34px
   line-height 32px
   width 35px
   color $ui-inactive-text-color
+  background-color $ui-noteList-backgroundColor
 
 .control-search-input
   display block
@@ -38,6 +39,7 @@ $control-height = 34px
     height 100%
     outline none
     border none
+    background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
   position fixed
@@ -58,6 +60,7 @@ $control-height = 34px
   overflow ellipsis
   &:hover
     background-color alpha($ui-active-color, 10%)
+
 .control-search-optionList-item-folder
   border-left 4px solid transparent
   padding 2px 5px
@@ -66,40 +69,30 @@ $control-height = 34px
   font-size 12px
   height 16px
   margin-bottom 4px
+
 .control-search-optionList-item-folder-surfix
   font-size 10px
   margin-left 5px
   color $ui-inactive-text-color
+
 .control-search-optionList-item-type
   font-size 12px
   color $ui-inactive-text-color
   padding-right 3px
+
 .control-search-optionList-empty
   height 150px
   color $ui-inactive-text-color
   line-height 150px
   text-align center
 
-.control-contextButton
-  display block
-  width 20px
-  height $control-height - 2
-  navButtonColor()
-  border-left $ui-border
-  font-size 14px
-  line-height 28px
-  padding 0
-  &:active
-    border-color $ui-button--active-backgroundColor
-  &:hover .control-newPostButton-tooltip
-    opacity 1
-
 .control-newPostButton
   display block
-  width 36px
+  width 32px
   height $control-height - 2
   navButtonColor()
-  border-left $ui-border
+  border $ui-border
+  border-radius 32px
   font-size 14px
   line-height 28px
   padding 0
@@ -112,17 +105,18 @@ $control-height = 34px
   tooltip()
   position fixed
   pointer-events none
-  top 45px
-  left 385px
-  z-index 10
+  top 50px
+  left 433px
+  z-index 200
   padding 5px
   line-height normal
+  border-radius 2px
   opacity 0
   transition 0.1s
 
 body[data-theme="dark"]
   .root, .root--expanded
-    background-color $ui-dark-backgroundColor
+    background-color $ui-dark-noteList-backgroundColor
 
   .control
     border-color $ui-dark-borderColor
@@ -134,11 +128,13 @@ body[data-theme="dark"]
     line-height 32px
     width 35px
     color $ui-dark-inactive-text-color
+    background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
     input
-      background-color $dark-background-color
+      background-color $ui-dark-noteList-backgroundColor
       color $ui-dark-text-color
+
   .control-search-optionList
     color white
     background-color $ui-dark-button--hover-backgroundColor
@@ -162,10 +158,10 @@ body[data-theme="dark"]
   .control-search-optionList-empty
     color $ui-inactive-text-color
 
-  .control-contextButton,
   .control-newPostButton
     colorDarkDefaultButton()
     border-color $ui-dark-borderColor
+    background-color $ui-dark-noteList-backgroundColor
     &:active
       border-color $ui-dark-button--active-backgroundColor
 

browser/main/TopBar/index.js

@@ -10,8 +10,6 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import dataApi from 'browser/main/lib/dataApi'
 
 const OSX = window.process.platform === 'darwin'
-const { remote } = require('electron')
-const { Menu, MenuItem } = remote
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -71,10 +69,10 @@ class TopBar extends React.Component {
         break
       }
     }
-    if (storage == null) alert('No storage to create a note')
+    if (storage == null) window.alert('No storage to create a note')
     let folder = _.find(storage.folders, {key: params.folderKey})
     if (folder == null) folder = storage.folders[0]
-    if (folder == null) alert('No folder to create a note')
+    if (folder == null) window.alert('No folder to create a note')
 
     return {
       storage,
@@ -192,47 +190,6 @@ class TopBar extends React.Component {
     }
   }
 
-  handleContextButtonClick (e) {
-    let { config } = this.props
-
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Create Markdown Note',
-      click: (e) => this.createNote('MARKDOWN_NOTE')
-    }))
-    menu.append(new MenuItem({
-      label: 'Create Snippet Note',
-      click: (e) => this.createNote('SNIPPET_NOTE')
-    }))
-    menu.append(new MenuItem({
-      type: 'separator'
-    }))
-    menu.append(new MenuItem({
-      label: 'Change Default Note',
-      submenu: [
-        {
-          type: 'radio',
-          label: 'Markdown Note',
-          checked: config.ui.defaultNote === 'MARKDOWN_NOTE',
-          click: (e) => this.setDefaultNote('MARKDOWN_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Snippet Note',
-          checked: config.ui.defaultNote === 'SNIPPET_NOTE',
-          click: (e) => this.setDefaultNote('SNIPPET_NOTE')
-        },
-        {
-          type: 'radio',
-          label: 'Always Ask',
-          checked: config.ui.defaultNote === 'ALWAYS_ASK',
-          click: (e) => this.setDefaultNote('ALWAYS_ASK')
-        }
-      ]
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
   createNote (noteType) {
     let { dispatch, location } = this.props
     if (noteType !== 'MARKDOWN_NOTE' && noteType !== 'SNIPPET_NOTE') throw new Error('Invalid note type.')
@@ -303,8 +260,8 @@ class TopBar extends React.Component {
             <span styleName='control-search-optionList-item-folder-surfix'>in {storage.name}</span>
           </div>
           {note.type === 'SNIPPET_NOTE'
-            ? <i styleName='control-search-optionList-item-type' className='fa fa-code'/>
-            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o'/>
+            ? <i styleName='control-search-optionList-item-type' className='fa fa-code' />
+            : <i styleName='control-search-optionList-item-type' className='fa fa-file-text-o' />
           }&nbsp;
           {note.title}
         </div>
@@ -317,7 +274,7 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw'/>
+            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -344,23 +301,18 @@ class TopBar extends React.Component {
               <button styleName='left-search-clearButton'
                 onClick={(e) => this.handleSearchClearButton(e)}
               >
-                <i className='fa fa-times'/>
+                <i className='fa fa-times' />
               </button>
             }
 
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus'/>
+            <i className='fa fa-plus' />
             <span styleName='control-newPostButton-tooltip'>
-              New Note {OSX ? '⌘' : '^'} + n
+              Make a Note {OSX ? '⌘' : '^'} + n
             </span>
           </button>
-          <button styleName='control-contextButton'
-            onClick={(e) => this.handleContextButtonClick(e)}
-          >
-            <i className='fa fa-caret-down'/>
-          </button>
         </div>
       </div>
     )

browser/main/lib/ConfigManager.js

@@ -10,7 +10,7 @@ let isInitialized = false
 export const DEFAULT_CONFIG = {
   zoom: 1,
   isSideNavFolded: false,
-  listWidth: 250,
+  listWidth: 280,
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
@@ -25,6 +25,7 @@ export const DEFAULT_CONFIG = {
   },
   editor: {
     theme: 'default',
+    keyMap: 'sublime',
     fontSize: '14',
     fontFamily: 'Monaco, Consolas',
     indentType: 'space',
@@ -34,7 +35,7 @@ export const DEFAULT_CONFIG = {
   preview: {
     fontSize: '14',
     fontFamily: 'Lato',
-    codeBlockTheme: 'xcode',
+    codeBlockTheme: 'elegant',
     lineNumber: true
   }
 }

browser/main/lib/modal.js

@@ -20,10 +20,10 @@ class ModalBase extends React.Component {
   render () {
     return (
       <div className={'ModalBase' + (this.state.isHidden ? ' hide' : '')}>
-        <div onClick={(e) => this.close(e)} className='modalBack'/>
+        <div onClick={(e) => this.close(e)} className='modalBack' />
         {this.state.component == null ? null : (
           <Provider store={store}>
-            <this.state.component {...this.state.componentProps} close={this.close}/>
+            <this.state.component {...this.state.componentProps} close={this.close} />
           </Provider>
         )}
       </div>
@@ -33,7 +33,7 @@ class ModalBase extends React.Component {
 
 let el = document.createElement('div')
 document.body.appendChild(el)
-let modalBase = ReactDOM.render(<ModalBase/>, el)
+let modalBase = ReactDOM.render(<ModalBase />, el)
 
 export function openModal (component, props) {
   if (modalBase == null) { return }

browser/main/modals/CreateFolderModal.js

@@ -75,24 +75,27 @@ class CreateFolderModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Folder</div>
+          <div styleName='title'>Create new folder</div>
         </div>
-        <button styleName='closeButton'
-          onClick={(e) => this.handleCloseButtonClick(e)}
-        >Close</button>
+        <button styleName='close' onClick={(e) => this.handleCloseButtonClick(e)}>
+          <div styleName='close-mark'>X</div>
+          <div styleName='close-text'>esc</div>
+        </button>
 
         <div styleName='control'>
-          <input styleName='control-input'
-            placeholder='Folder Name'
-            ref='name'
-            value={this.state.name}
-            onChange={(e) => this.handleChange(e)}
-            onKeyDown={(e) => this.handleInputKeyDown(e)}
-          />
+          <div styleName='control-folder'>
+            <div styleName='control-folder-label'>Folder name</div>
+            <input styleName='control-folder-input'
+              ref='name'
+              value={this.state.name}
+              onChange={(e) => this.handleChange(e)}
+              onKeyDown={(e) => this.handleInputKeyDown(e)}
+            />
+          </div>
           <button styleName='control-confirmButton'
             onClick={(e) => this.handleConfirmButtonClick(e)}
           >
-            Confirm
+            Create Folder
           </button>
         </div>
       </div>

browser/main/modals/CreateFolderModal.styl

@@ -1,47 +1,52 @@
 .root
   modal()
-  max-width 340px
+  width 700px
+  height 200px
   overflow hidden
   position relative
+  padding 0 40px
 
 .header
   height 50px
+  margin-bottom 10px
+  margin-top 10px
   font-size 18px
   line-height 50px
-  padding 0 15px
   background-color $ui-backgroundColor
-  border-bottom solid 1px $ui-borderColor
   color $ui-text-color
 
-.closeButton
+.close-mark
+  font-size 15px
+
+.close
+  height 50px
   position absolute
-  top 10px
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 7px
   right 10px
-  height 30px
-  width 0 25px
-  border $ui-border
-  border-radius 2px
-  color $ui-text-color
-  colorDefaultButton()
-
-.control
-  padding 25px 15px 15px
   text-align center
+  width top-bar--height
+  height top-bar--height
 
-.control-input
+.control-folder-label
+  text-align left
+  font-size 14px
+  color $ui-text-color
+
+.control-folder-input
   display block
   height 30px
-  width 240px
+  width 620px
   padding 0 5px
-  margin 0 auto 15px
-  border none
-  border-bottom solid 1px $border-color
-  border-radius 2px
+  margin 10px auto 15px
+  border 1px solid #C9C9C9 // TODO: use variable.
+  border-radius 5px
   background-color transparent
   outline none
   vertical-align middle
   font-size 18px
-  text-align center
   &:disabled
     background-color $ui-input--disabled-backgroundColor
   &:focus, &:active
@@ -50,21 +55,35 @@
 .control-confirmButton
   display block
   height 30px
+  width 620px
   border none
-  border-radius 2px
+  border-radius 5px
   padding 0 25px
-  margin 0 auto
+  margin 20px auto
+  font-size 14px
   colorPrimaryButton()
 
 body[data-theme="dark"]
   .root
     modalDark()
+    width 700px
+    height 200px
+    overflow hidden
+    position relative
+    padding 0 40px
 
   .header
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
 
+  .control-folder-label
+    color $ui-dark-text-color
+
+  .control-folder-input
+    border 1px solid #C9C9C9 // TODO: use variable.
+    color white
+
   .closeButton
     border-color $ui-dark-borderColor
     color $ui-dark-text-color
@@ -72,8 +91,3 @@ body[data-theme="dark"]
 
   .description
     color $ui-inactive-text-color
-
-  .control-input
-    border-color $ui-dark-borderColor
-    color white
-

browser/main/modals/DeleteArticleModal.js

@@ -33,13 +33,13 @@ export default class DeleteArticleModal extends React.Component {
   render () {
     return (
       <div className='DeleteArticleModal modal'>
-        <div className='title'><i className='fa fa-fw fa-trash'/> Delete an article.</div>
+        <div className='title'><i className='fa fa-fw fa-trash' /> Delete an article.</div>
 
         <div className='message'>Do you really want to delete?</div>
 
         <div className='control'>
-          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
-          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check'/> Yes</button>
+          <button ref='no' onClick={(e) => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close' /> No</button>
+          <button ref='yes' onClick={(e) => this.handleYesButtonClick(e)} className='danger'><i className='fa fa-fw fa-check' /> Yes</button>
         </div>
       </div>
     )

browser/main/modals/InitModal.js

@@ -1,11 +1,10 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InitModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
 import store from 'browser/main/store'
 import { hashHistory } from 'react-router'
 import _ from 'lodash'
-import keygen from 'browser/lib/keygen'
 
 const CSON = require('@rokt33r/season')
 const path = require('path')
@@ -197,7 +196,7 @@ class InitModal extends React.Component {
   render () {
     if (this.state.isLoading) {
       return <div styleName='root--loading'>
-        <i styleName='spinner' className='fa fa-spin fa-spinner'/>
+        <i styleName='spinner' className='fa fa-spin fa-spinner' />
         <div styleName='loadingMessage'>Preparing initialization...</div>
       </div>
     }
@@ -235,7 +234,7 @@ class InitModal extends React.Component {
 
           {this.state.legacyStorageExists &&
             <div styleName='body-migration'>
-              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)}/> Migrate old data from the legacy app v0.5</label>
+              <label><input type='checkbox' checked={this.state.migrationRequested} onChange={(e) => this.handleMigrationRequestedChange(e)} /> Migrate old data from the legacy app v0.5</label>
             </div>
           }
 
@@ -247,7 +246,7 @@ class InitModal extends React.Component {
             >
               {this.state.isSending
                 ? <span>
-                  <i className='fa fa-spin fa-spinner'/> Loading...
+                  <i className='fa fa-spin fa-spinner' /> Loading...
                 </span>
                 : 'Let\'s Go!'
               }

browser/main/modals/NewNoteModal.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './NewNoteModal.styl'
 import dataApi from 'browser/main/lib/dataApi'
@@ -100,7 +100,7 @@ class NewNoteModal extends React.Component {
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
         <div styleName='header'>
-          <div styleName='title'>New Note</div>
+          <div styleName='title'>Make a Note</div>
         </div>
         <button styleName='closeButton'
           onClick={(e) => this.handleCloseButtonClick(e)}
@@ -114,8 +114,8 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-file-text-o'
-            /><br/>
-            <span styleName='control-button-label'>Markdown Note</span><br/>
+            /><br />
+            <span styleName='control-button-label'>Markdown Note</span><br />
             <span styleName='control-button-description'>It is good for any type of documents. Check List, Code block and Latex block are available.</span>
           </button>
 
@@ -126,14 +126,14 @@ class NewNoteModal extends React.Component {
           >
             <i styleName='control-button-icon'
               className='fa fa-code'
-            /><br/>
-            <span styleName='control-button-label'>Snippet Note</span><br/>
+            /><br />
+            <span styleName='control-button-label'>Snippet Note</span><br />
             <span styleName='control-button-description'>This format is specialized on managing snippets like Gist. Multiple snippets can be grouped as a note.
             </span>
           </button>
 
         </div>
-        <div styleName='description'><i className='fa fa-arrows-h'/> Tab to switch format</div>
+        <div styleName='description'><i className='fa fa-arrows-h' /> Tab to switch format</div>
 
       </div>
     )

browser/main/modals/PreferencesModal/ConfigTab.styl

@@ -1,39 +1,44 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
+  margin-bottom 30px
+
 .group
   margin-bottom 45px
+
 .group-header
-  font-size 24px
+  @extend .header
   color $ui-text-color
-  padding 5px
-  border-bottom $default-border
-  margin-bottom 15px
 
 .group-header2
-  font-size 18px
+  font-size 20px
   color $ui-text-color
-  padding 5px
   margin-bottom 15px
+  margin-top 30px
 
 .group-section
-  margin-bottom 15px
+  margin-bottom 20px
   display flex
   line-height 30px
+
 .group-section-label
   width 150px
-  text-align right
+  text-align left
   margin-right 10px
   font-size 14px
+
 .group-section-control
   flex 1
+
 .group-section-control-input
   height 30px
   vertical-align middle
-  width 150px
-  font-size 12px
+  width 400px
+  font-size $tab--button-font-size
   border solid 1px $border-color
-  border-radius 2px
+  border-radius $tab--input-border-radius
   padding 0 5px
   &:disabled
     background-color $ui-input--disabled-backgroundColor
@@ -45,7 +50,6 @@
   padding-left 15px
 
 .group-control
-  border-top $default-border
   padding-top 10px
   box-sizing border-box
   height 40px
@@ -56,22 +60,26 @@
       line-height 30px
       padding 0 5px
       float right
+
 .group-control-leftButton
-  float left
   colorDefaultButton()
-  border $default-border
-  border-radius 2px
-  height 30px
+  border none
+  border-radius 5px
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-control-rightButton
   float right
   colorPrimaryButton()
   border none
-  border-radius 2px
-  height 30px
+  border-radius $tab--button-border-radius
+  font-size $tab--button-font-size
+  height $tab--button-height
   padding 0 15px
-  margin-right 5px
+  margin-right 10px
+
 .group-hint
   border $ui-border
   padding 10px 15px
@@ -86,6 +94,10 @@
   p
     line-height 1.2
 
+.note-for-keymap
+  margin-left: 10px
+  font-size: 12px
+
 colorDarkControl()
   border-color $ui-dark-borderColor
   background-color $ui-dark-backgroundColor

browser/main/modals/PreferencesModal/HotkeyTab.js

@@ -0,0 +1,154 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './ConfigTab.styl'
+import ConfigManager from 'browser/main/lib/ConfigManager'
+import store from 'browser/main/store'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer
+
+class HotkeyTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isHotkeyHintOpen: false,
+      config: props.config
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({keymapAlert: {
+        type: 'success',
+        message: 'Successfully applied!'
+      }})
+    }
+    this.handleSettingError = (err) => {
+      this.setState({keymapAlert: {
+        type: 'error',
+        message: err.message != null ? err.message : 'Error occurs!'
+      }})
+    }
+    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
+    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
+  }
+
+  handleSaveButtonClick (e) {
+    let newConfig = {
+      hotkey: this.state.config.hotkey
+    }
+
+    ConfigManager.set(newConfig)
+
+    store.dispatch({
+      type: 'SET_UI',
+      config: newConfig
+    })
+  }
+
+  handleHintToggleButtonClick (e) {
+    this.setState({
+      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
+    })
+  }
+
+  handleHotkeyChange (e) {
+    let { config } = this.state
+    config.hotkey = {
+      toggleFinder: this.refs.toggleFinder.value,
+      toggleMain: this.refs.toggleMain.value
+    }
+    this.setState({
+      config
+    })
+  }
+
+  render () {
+    let keymapAlert = this.state.keymapAlert
+    let keymapAlertElement = keymapAlert != null
+      ? <p className={`alert ${keymapAlert.type}`}>
+        {keymapAlert.message}
+      </p>
+      : null
+    let { config } = this.state
+
+    return (
+      <div styleName='root'>
+        <div styleName='group'>
+          <div styleName='group-header'>Hotkey</div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Main</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleMain'
+                value={config.hotkey.toggleMain}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>Toggle Finder(popup)</div>
+            <div styleName='group-section-control'>
+              <input styleName='group-section-control-input'
+                onChange={(e) => this.handleHotkeyChange(e)}
+                ref='toggleFinder'
+                value={config.hotkey.toggleFinder}
+                type='text'
+              />
+            </div>
+          </div>
+          <div styleName='group-control'>
+            <button styleName='group-control-leftButton'
+              onClick={(e) => this.handleHintToggleButtonClick(e)}
+            >
+              {this.state.isHotkeyHintOpen
+                ? 'Hide Hint'
+                : 'Hint?'
+              }
+            </button>
+            <button styleName='group-control-rightButton'
+              onClick={(e) => this.handleSaveButtonClick(e)}>Save
+            </button>
+            {keymapAlertElement}
+          </div>
+          {this.state.isHotkeyHintOpen &&
+            <div styleName='group-hint'>
+              <p>Available Keys</p>
+              <ul>
+                <li><code>0</code> to <code>9</code></li>
+                <li><code>A</code> to <code>Z</code></li>
+                <li><code>F1</code> to <code>F24</code></li>
+                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
+                <li><code>Plus</code></li>
+                <li><code>Space</code></li>
+                <li><code>Backspace</code></li>
+                <li><code>Delete</code></li>
+                <li><code>Insert</code></li>
+                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
+                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
+                <li><code>Home</code> and <code>End</code></li>
+                <li><code>PageUp</code> and <code>PageDown</code></li>
+                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
+                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
+                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
+              </ul>
+            </div>
+          }
+        </div>
+      </div>
+    )
+  }
+}
+
+HotkeyTab.propTypes = {
+  dispatch: PropTypes.func
+}
+
+export default CSSModules(HotkeyTab, styles)

browser/main/modals/PreferencesModal/InfoTab.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react'
+import React from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoTab.styl'
 
@@ -22,17 +22,24 @@ class InfoTab extends React.Component {
   render () {
     return (
       <div styleName='root'>
+        <div styleName='header'>Info</div>
+
         <div styleName='top'>
-          <img styleName='icon' src='../resources/app.png' width='150' height='150'/>
-          <div styleName='appId'>Boostnote {appVersion}</div>
-          <div styleName='description'>
-            A simple markdown/snippet note app for developer.
+          <div styleName='icon-space'>
+            <img styleName='icon' src='../resources/app.png' width='92' height='92' />
+            <div styleName='icon-right'>
+              <div styleName='appId'>Boostnote {appVersion}</div>
+              <div styleName='description'>
+                A simple markdown/snippet note app for developer.
+              </div>
+            </div>
           </div>
+          <div styleName='clear' />
           <div styleName='madeBy'>Made by&nbsp;
             <a href='http://maisin.co/'
               onClick={(e) => this.handleLinkClick(e)}
             >MAISIN&CO.</a></div>
-          <div styleName='copyright'>Copyright 2016 MAISIN&CO. All rights reserved.</div>
+          <div styleName='copyright'>Copyright 2017 MAISIN&CO. All rights reserved.</div>
         </div>
         <ul styleName='list'>
           <li>

browser/main/modals/PreferencesModal/InfoTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   white-space pre
@@ -5,27 +7,39 @@
   color $ui-text-color
   width 100%
 
+.clear
+  clear both
+
 .top
-  text-align center
-  margin-bottom 25px
+  text-align left
+  margin-bottom 20px
+
+.icon-space
+  margin 20px 0
+  height 100px
+
+.icon
+  display inline-block
+  vertical-align middle
+
+.icon-right
+  display inline-block
+  vertical-align middle
+  margin-left 20px
 
 .appId
   font-size 24px
+  margin-bottom 13px
 
 .description
-  overflow hidden
-  white-space normal
-  line-height 1.5
-  margin 5px auto 10px
   font-size 14px
-  text-align center
 
 .madeBy
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .copyright
-  font-size 12px
+  font-size 14px
   $ui-inactive-text-color
 
 .list
@@ -36,7 +50,7 @@
 
 body[data-theme="dark"]
   .root
-    color $ui-dark-text-color
+    color $tab--dark-text-color
 
   .madeBy
     color $ui-dark-inactive-text-color

browser/main/modals/PreferencesModal/PreferencesModal.styl

@@ -1,51 +1,93 @@
+@import('./Tab')
+
+top-bar--height = 50px
+
 .root
   modal()
-  max-width 540px
-  min-height 400px
+  max-width 800px
+  min-height 500px
   height 80%
   overflow hidden
   position relative
 
-.nav
+.top-bar
   absolute top left right
-  height 50px
+  height top-bar--height
   background-color $ui-backgroundColor
   border-bottom solid 1px $ui-borderColor
+  p
+    text-align center
+    font-size 18px
+    line-height top-bar--height
+
+.top-bar-close
+  position absolute
+  background-color transparent
+  color $ui-inactive-text-color
+  border none
+  top 0
+  right 0
+  text-align center
+  width top-bar--height
+  height top-bar--height
+
+.nav
+  absolute top left right
+  top top-bar--height
+  left 0
+  width 140px
+  margin-left 30px
+  margin-top 20px
+  background-color $ui-backgroundColor
 
 .nav-button
-  width 80px
-  height 50px
+  font-size 14px
+  text-align left
+  width 100px
+  margin 4px 0
+  padding 7px 0
+  padding-left 7px
   border none
+  border-radius 3px
   background-color transparent
-  color #939395
+  color $ui-text-color
   font-size 14px
   &:hover
-    color #515151
+    color $ui-active-color
 
 .nav-button--active
   @extend .nav-button
-  color #6AA5E9
+  color white
+  background-color $ui-active-color
   &:hover
-    color #6AA5E9
+    color white
 
 .nav-button-icon
   display block
 
 .content
   absolute left right bottom
-  top 50px
+  top top-bar--height
+  left 140px
+  margin-top 10px
   overflow-y auto
 
 body[data-theme="dark"]
   .root
     modalDark()
 
+  .top-bar
+    background-color transparent
+    border-color #4A4D52
+    p
+      color $tab--dark-text-color
+
   .nav
-    background-color $ui-dark-button--hover-backgroundColor
+    background-color transparent
     border-color $ui-dark-borderColor
 
   .nav-button
     background-color transparent
-    color #939395
+    color $tab--dark-text-color
     &:hover
       color $ui-dark-text-color

browser/main/modals/PreferencesModal/StorageItem.js

@@ -106,7 +106,10 @@ class UnstyledFolderItem extends React.Component {
     const popover = { position: 'absolute', zIndex: 2 }
     const cover = {
       position: 'fixed',
-      top: 0, right: 0, bottom: 0, left: 0
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
     }
     const pickerStyle = Object.assign({}, {
       position: 'absolute'
@@ -137,7 +140,7 @@ class UnstyledFolderItem extends React.Component {
               </div>
               : null
             }
-            <i className='fa fa-square'/>
+            <i className='fa fa-square' />
           </button>
           <input styleName='folderList-item-left-nameInput'
             value={this.state.folder.name}
@@ -368,17 +371,17 @@ class StorageItem extends React.Component {
             : <div styleName='header-label'
               onClick={(e) => this.handleLabelClick(e)}
             >
-              <i className='fa fa-folder-open'/>&nbsp;
+              <i className='fa fa-folder-open' />&nbsp;
               {storage.name}&nbsp;
               <span styleName='header-label-path'>({storage.path})</span>&nbsp;
-              <i styleName='header-label-editButton' className='fa fa-pencil'/>
+              <i styleName='header-label-editButton' className='fa fa-pencil' />
             </div>
           }
           <div styleName='header-control'>
             <button styleName='header-control-button'
               onClick={(e) => this.handleNewFolderButtonClick(e)}
             >
-              <i className='fa fa-plus'/>
+              <i className='fa fa-plus' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -20}}
               >Add Folder</span>
@@ -386,7 +389,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleExternalButtonClick(e)}
             >
-              <i className='fa fa-external-link'/>
+              <i className='fa fa-external-link' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -50}}
               >Open Storage folder</span>
@@ -394,7 +397,7 @@ class StorageItem extends React.Component {
             <button styleName='header-control-button'
               onClick={(e) => this.handleUnlinkButtonClick(e)}
             >
-              <i className='fa fa-unlink'/>
+              <i className='fa fa-unlink' />
               <span styleName='header-control-button-tooltip'
                 style={{left: -10}}
               >Unlink</span>

browser/main/modals/PreferencesModal/StoragesTab.js

@@ -63,6 +63,7 @@ class StoragesTab extends React.Component {
     })
     return (
       <div styleName='list'>
+        <div styleName='header'>Storages</div>
         {storageList.length > 0
           ? storageList
           : <div styleName='list-empty'>No storage found.</div>
@@ -71,7 +72,7 @@ class StoragesTab extends React.Component {
           <button styleName='list-control-addStorageButton'
             onClick={(e) => this.handleAddStorageButton(e)}
           >
-            <i className='fa fa-plus'/> Add Storage
+            <i className='fa fa-plus' /> Add Storage
           </button>
         </div>
       </div>

browser/main/modals/PreferencesModal/StoragesTab.styl

@@ -1,3 +1,5 @@
+@import('./Tab')
+
 .root
   padding 15px
   color $ui-text-color
@@ -26,11 +28,12 @@
 .list-control
   height 30px
 .list-control-addStorageButton
-  height 30px
+  height $tab--button-height
   padding 0 15px
   border $ui-border
   colorDefaultButton()
-  border-radius 2px
+  font-size $tab--button-font-size
+  border-radius $tab--button-border-radius
 
 .addStorage
   margin-bottom 15px

browser/main/modals/PreferencesModal/Tab.styl

@@ -0,0 +1,18 @@
+/**
+ * Common style for tabs on config modal.
+ */
+
+$tab--input-border-radius = 5px
+$tab--button-border-radius = 5px
+$tab--button-height = 40px
+$tab--button-font-size = 14px
+
+$tab--dark-text-color = #E5E5E5
+
+.header
+  font-size 24px
+  margin-bottom 30px
+
+body[data-theme="dark"]
+  .header
+    color $tab--dark-text-color

browser/main/modals/PreferencesModal/UiTab.js

@@ -5,102 +5,17 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import store from 'browser/main/store'
 import consts from 'browser/lib/consts'
 
-const electron = require('electron')
-const ipc = electron.ipcRenderer
-
 const OSX = global.process.platform === 'darwin'
 
-class ConfigTab extends React.Component {
+class UiTab extends React.Component {
   constructor (props) {
     super(props)
 
     this.state = {
-      isHotkeyHintOpen: false,
       config: props.config
     }
   }
 
-  componentDidMount () {
-    this.handleSettingDone = () => {
-      this.setState({keymapAlert: {
-        type: 'success',
-        message: 'Successfully applied!'
-      }})
-    }
-    this.handleSettingError = (err) => {
-      this.setState({keymapAlert: {
-        type: 'error',
-        message: err.message != null ? err.message : 'Error occurs!'
-      }})
-    }
-    ipc.addListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.addListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  componentWillUnmount () {
-    ipc.removeListener('APP_SETTING_DONE', this.handleSettingDone)
-    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
-  }
-
-  handleSaveButtonClick (e) {
-    let newConfig = {
-      hotkey: this.state.config.hotkey
-    }
-
-    ConfigManager.set(newConfig)
-
-    store.dispatch({
-      type: 'SET_UI',
-      config: newConfig
-    })
-  }
-
-  handleKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitHotKey()
-    }
-  }
-
-  handleConfigKeyDown (e) {
-    if (e.keyCode === 13) {
-      this.submitConfig()
-    }
-  }
-
-  handleLineNumberingClick (e) {
-    let config = this.state.config
-
-    config['preview-line-number'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleDisableDirectWriteClick (e) {
-    let config = this.state.config
-    config['disable-direct-write'] = e.target.checked
-    this.setState({
-      config
-    })
-  }
-
-  handleHintToggleButtonClick (e) {
-    this.setState({
-      isHotkeyHintOpen: !this.state.isHotkeyHintOpen
-    })
-  }
-
-  handleHotkeyChange (e) {
-    let { config } = this.state
-    config.hotkey = {
-      toggleFinder: this.refs.toggleFinder.value,
-      toggleMain: this.refs.toggleMain.value
-    }
-    this.setState({
-      config
-    })
-  }
-
   handleUIChange (e) {
     let { config } = this.state
 
@@ -116,7 +31,8 @@ class ConfigTab extends React.Component {
       fontFamily: this.refs.editorFontFamily.value,
       indentType: this.refs.editorIndentType.value,
       indentSize: this.refs.editorIndentSize.value,
-      switchPreview: this.refs.editorSwitchPreview.value
+      switchPreview: this.refs.editorSwitchPreview.value,
+      keyMap: this.refs.editorKeyMap.value
     }
     config.preview = {
       fontSize: this.refs.previewFontSize.value,
@@ -125,13 +41,11 @@ class ConfigTab extends React.Component {
       lineNumber: this.refs.previewLineNumber.checked
     }
 
-    this.setState({
-      config
-    })
+    this.setState({ config })
   }
 
   handleSaveUIClick (e) {
-    let newConfig = {
+    const newConfig = {
       ui: this.state.config.ui,
       editor: this.state.config.editor,
       preview: this.state.config.preview
@@ -146,84 +60,17 @@ class ConfigTab extends React.Component {
   }
 
   render () {
-    let keymapAlert = this.state.keymapAlert
-    let keymapAlertElement = keymapAlert != null
-      ? <p className={`alert ${keymapAlert.type}`}>
-        {keymapAlert.message}
-      </p>
-      : null
-    let themes = consts.THEMES
-    let { config } = this.state
+    const themes = consts.THEMES
+    const { config } = this.state
 
     return (
       <div styleName='root'>
-        <div styleName='group'>
-          <div styleName='group-header'>Hotkey</div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Main</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleMain'
-                value={config.hotkey.toggleMain}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-section'>
-            <div styleName='group-section-label'>Toggle Finder(popup)</div>
-            <div styleName='group-section-control'>
-              <input styleName='group-section-control-input'
-                onChange={(e) => this.handleHotkeyChange(e)}
-                ref='toggleFinder'
-                value={config.hotkey.toggleFinder}
-                type='text'
-              />
-            </div>
-          </div>
-          <div styleName='group-control'>
-            <button styleName='group-control-leftButton'
-              onClick={(e) => this.handleHintToggleButtonClick(e)}
-            >
-              {this.state.isHotkeyHintOpen
-                ? 'Hide Hint'
-                : 'Show Hint'
-              }
-            </button>
-            <button styleName='group-control-rightButton'
-              onClick={(e) => this.handleSaveButtonClick(e)}>Save Hotkey
-            </button>
-            {keymapAlertElement}
-          </div>
-          {this.state.isHotkeyHintOpen &&
-            <div styleName='group-hint'>
-              <p>Available Keys</p>
-              <ul>
-                <li><code>0</code> to <code>9</code></li>
-                <li><code>A</code> to <code>Z</code></li>
-                <li><code>F1</code> to <code>F24</code></li>
-                <li>Punctuations like <code>~</code>, <code>!</code>, <code>@</code>, <code>#</code>, <code>$</code>, etc.</li>
-                <li><code>Plus</code></li>
-                <li><code>Space</code></li>
-                <li><code>Backspace</code></li>
-                <li><code>Delete</code></li>
-                <li><code>Insert</code></li>
-                <li><code>Return</code> (or <code>Enter</code> as alias)</li>
-                <li><code>Up</code>, <code>Down</code>, <code>Left</code> and <code>Right</code></li>
-                <li><code>Home</code> and <code>End</code></li>
-                <li><code>PageUp</code> and <code>PageDown</code></li>
-                <li><code>Escape</code> (or <code>Esc</code> for short)</li>
-                <li><code>VolumeUp</code>, <code>VolumeDown</code> and <code>VolumeMute</code></li>
-                <li><code>MediaNextTrack</code>, <code>MediaPreviousTrack</code>, <code>MediaStop</code> and <code>MediaPlayPause</code></li>
-              </ul>
-            </div>
-          }
-        </div>
-
         <div styleName='group'>
           <div styleName='group-header'>UI</div>
+
+          <div styleName='group-header2'>Theme</div>
+
           <div styleName='group-section'>
-            <div styleName='group-section-label'>Theme</div>
             <div styleName='group-section-control'>
               <select value={config.ui.theme}
                 onChange={(e) => this.handleUIChange(e)}
@@ -332,6 +179,23 @@ class ConfigTab extends React.Component {
               </select>
             </div>
           </div>
+
+          <div styleName='group-section'>
+            <div styleName='group-section-label'>
+              Editor Keymap
+            </div>
+            <div styleName='group-section-control'>
+              <select value={config.editor.keyMap}
+                ref='editorKeyMap'
+                onChange={(e) => this.handleUIChange(e)}
+              >
+                <option value='sublime'>default</option>
+                <option value='vim'>vim</option>
+              </select>
+              <span styleName='note-for-keymap'>Please reload boostnote after you change the keymap</span>
+            </div>
+          </div>
+
           <div styleName='group-header2'>Preview</div>
           <div styleName='group-section'>
             <div styleName='group-section-label'>
@@ -398,11 +262,11 @@ class ConfigTab extends React.Component {
   }
 }
 
-ConfigTab.propTypes = {
+UiTab.propTypes = {
   user: PropTypes.shape({
     name: PropTypes.string
   }),
   dispatch: PropTypes.func
 }
 
-export default CSSModules(ConfigTab, styles)
+export default CSSModules(UiTab, styles)

browser/main/modals/PreferencesModal/index.js

@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { connect } from 'react-redux'
-import ConfigTab from './ConfigTab'
+import HotkeyTab from './HotkeyTab'
+import UiTab from './UiTab'
 import InfoTab from './InfoTab'
 import StoragesTab from './StoragesTab'
 import CSSModules from 'browser/lib/CSSModules'
@@ -32,16 +33,27 @@ class Preferences extends React.Component {
     }
   }
 
+  handleEscButtonClick () {
+    this.props.close()
+  }
+
   renderContent () {
     const { boundingBox } = this.state
     let { dispatch, config, data } = this.props
 
     switch (this.state.currentTab) {
       case 'INFO':
-        return <InfoTab/>
-      case 'CONFIG':
+        return <InfoTab />
+      case 'HOTKEY':
         return (
-          <ConfigTab
+          <HotkeyTab
+            dispatch={dispatch}
+            config={config}
+          />
+        )
+      case 'UI':
+        return (
+          <UiTab
             dispatch={dispatch}
             config={config}
           />
@@ -73,9 +85,10 @@ class Preferences extends React.Component {
     let content = this.renderContent()
 
     let tabs = [
-      {target: 'STORAGES', label: 'Storages', icon: 'database'},
-      {target: 'CONFIG', label: 'Config', icon: 'cogs'},
-      {target: 'INFO', label: 'Info', icon: 'info-circle'}
+      {target: 'STORAGES', label: 'Storages'},
+      {target: 'HOTKEY', label: 'Hotkey'},
+      {target: 'UI', label: 'UI'},
+      {target: 'INFO', label: 'Info'}
     ]
 
     let navButtons = tabs.map((tab) => {
@@ -88,9 +101,6 @@ class Preferences extends React.Component {
           key={tab.target}
           onClick={(e) => this.handleNavButtonClick(tab.target)(e)}
         >
-          <i styleName='nav-button-icon'
-            className={'fa fa-' + tab.icon}
-          />
           <span styleName='nav-button-label'>
             {tab.label}
           </span>
@@ -104,6 +114,13 @@ class Preferences extends React.Component {
         tabIndex='-1'
         onKeyDown={(e) => this.handleKeyDown(e)}
       >
+        <div styleName='top-bar'>
+          <p>Your menu for Boostnote</p>
+        </div>
+        <button styleName='top-bar-close' onClick={(e) => this.handleEscButtonClick(e)}>
+          <div styleName='top-bar-close-mark'>X</div>
+          <div styleName='top-bar-close-text'>esc</div>
+        </button>
         <div styleName='nav'>
           {navButtons}
         </div>

browser/styles/index.styl

@@ -8,15 +8,18 @@ $danger-lighten-color = lighten(#c9302c, 5%)
 $statusBar-height = 24px
 $sideNav-width = 200px
 $sideNav--folded-width = 44px
-$topBar-height = 50px
+$topBar-height = 60px
 
 // UI default
 $ui-text-color = #515151
 $ui-inactive-text-color = #939395
 $ui-borderColor = #D1D1D1
-$ui-backgroundColor = #FAFAFA
+$ui-backgroundColor = #FFFFFF
+$ui-noteList-backgroundColor = #F3F3F3
+$ui-noteDetail-backgroundColor = #F4F4F4
 $ui-border = solid 1px $ui-borderColor
 $ui-active-color = #6AA5E9
+$ui-tag-backgroundColor = rgba(0, 0, 0, 0.3)
 
 // UI Button
 $ui-button-color = #939395
@@ -44,6 +47,9 @@ tooltip()
 $ui-input--focus-borderColor = #369DCD
 $ui-input--disabled-backgroundColor = #DDD
 
+// Parts
+$ui-favorite-star-button-color = #FFC216
+
 /*
 * # Border
 */
@@ -135,7 +141,10 @@ modal()
 
 // Dark theme
 $ui-dark-borderColor = lighten(#21252B, 20%)
-$ui-dark-backgroundColor = darken(#21252B, 10%)
+$ui-dark-backgroundColor = #1D1D1D
+$ui-dark-noteList-backgroundColor = #181818
+$ui-dark-noteDetail-backgroundColor = #0D0D0D
+$ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3)
 $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
 $ui-dark-text-color = #DDDDDD
 $ui-dark-button--active-color = white

docs/build.md

@@ -29,11 +29,6 @@ $ npm run hot
 ```
 > Actually the app can be start with `npm start`. However, the app will use the compiled script.
 
-If the app gets stuck on load, you may need to run the following.
-```
-$ npm run vendor
-```
-
 By this, webpack will watch the code changes and apply it automatically.
 
 > ### Notice
@@ -46,7 +41,7 @@ By this, webpack will watch the code changes and apply it automatically.
 We use Grunt.
 Acutal deploy can be run by `grunt`. However, you shouldn't use because the default task is including codesign and authenticode.
 
-So, we prepare a script which just make an excutable file.
+So, we prepare a script which just make an executable file.
 
 ```
 grunt pre-build

gruntfile.js

@@ -5,16 +5,16 @@ const packager = require('electron-packager')
 const WIN = process.platform === 'win32'
 
 module.exports = function (grunt) {
-  var auth_code
+  var authCode
   try {
-    auth_code = grunt.file.readJSON('secret/auth_code.json')
+    authCode = grunt.file.readJSON('secret/auth_code.json')
   } catch (e) {
     if (e.origError.code === 'ENOENT') {
       console.warn('secret/auth_code.json is not found. CodeSigning is not available.')
     }
   }
-  const OSX_COMMON_NAME = auth_code != null ? auth_code.OSX_COMMON_NAME : ''
-  const WIN_CERT_PASSWORD = auth_code != null ? auth_code.WIN_CERT_PASSWORD : ''
+  const OSX_COMMON_NAME = authCode != null ? authCode.OSX_COMMON_NAME : ''
+  const WIN_CERT_PASSWORD = authCode != null ? authCode.WIN_CERT_PASSWORD : ''
 
   var initConfig = {
     pkg: grunt.file.readJSON('package.json'),
@@ -98,7 +98,7 @@ module.exports = function (grunt) {
       prune: true,
       overwrite: true,
       out: path.join(__dirname, 'dist'),
-      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|dist|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
+      ignore: /node_modules\/ace-builds\/(?!src-min)|node_modules\/ace-builds\/(?=src-min-noconflict)|node_modules\/devicon\/icons|^\/browser|^\/secret|\.babelrc|\.gitignore|^\/\.gitmodules|^\/gruntfile|^\/readme.md|^\/webpack|^\/appdmg\.json|^\/node_modules\/grunt/
     }
     switch (platform) {
       case 'win':

lib/finder-app.js

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

lib/finder.html

@@ -31,16 +31,21 @@
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
+  <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
-  <script src="../compiled/raphael.js"></script>
-  <script src="../compiled/flowchart.js"></script>
+  <script src="../node_modules/raphael/raphael.min.js"></script>
+  <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
 
-  <script src="../compiled/katex.js"></script>
-  <script src="../compiled/react.js"></script>
-  <script src="../compiled/react-dom.js"></script>
-  <script src="../compiled/redux.js"></script>
-  <script src="../compiled/react-redux.js"></script>
+  <script src="../node_modules/katex/dist/katex.min.js"></script>
+  <script src="../node_modules/react/dist/react.min.js"></script>
+  <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
+  <script src="../node_modules/redux/dist/redux.min.js"></script>
+  <script src="../node_modules/react-redux/dist/react-redux.min.js"></script>
+  <script>
+    window._ = require('lodash');
+  </script>
+  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
   <script>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)

lib/main-app.js

@@ -2,7 +2,6 @@ const electron = require('electron')
 const app = electron.app
 const Menu = electron.Menu
 const ipc = electron.ipcMain
-const autoUpdater = electron.autoUpdater
 const path = require('path')
 const ChildProcess = require('child_process')
 const _ = require('lodash')
@@ -11,9 +10,8 @@ const GhReleases = require('electron-gh-releases')
 var ipcServer = null
 
 var mainWindow = null
-var finderWindow = null
 
-var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory) {
+var shouldQuit = app.makeSingleInstance(function (commandLine, workingDirectory) {
   if (mainWindow) {
     if (process.platform === 'win32') {
       mainWindow.minimize()
@@ -26,12 +24,8 @@ var shouldQuit = app.makeSingleInstance(function(commandLine, workingDirectory)
 
 if (shouldQuit) {
   app.quit()
-  return
 }
 
-var version = app.getVersion()
-var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
-
 var isUpdateReady = false
 
 var ghReleasesOpts = {
@@ -108,14 +102,9 @@ app.on('ready', function () {
       Menu.setApplicationMenu(menu)
       break
     case 'win32':
-      finderWindow = require('./finder-window')
       mainWindow.setMenu(menu)
       break
     case 'linux':
-      // Finder is available on cinnamon only.
-      if (process.env.DESKTOP_SESSION === 'cinnamon') {
-        finderWindow = require('./finder-window')
-      }
       Menu.setApplicationMenu(menu)
       mainWindow.setMenu(menu)
   }

lib/main-menu.js

@@ -169,7 +169,7 @@ var help = {
   submenu: [
     {
       label: 'Boostnote official site',
-      click: function () { shell.openExternal('https://b00st.io/') }
+      click: function () { shell.openExternal('https://boostnote.io/') }
     },
     {
       label: 'Issue Tracker',

lib/main-window.js

@@ -2,13 +2,16 @@ const electron = require('electron')
 const app = electron.app
 const BrowserWindow = electron.BrowserWindow
 const path = require('path')
+const Config = require('electron-config')
+const config = new Config()
 
 var showMenu = process.platform !== 'win32'
+let windowSize = config.get('windowsize') || { width: 1080, height: 720 }
 
-var mainWindow = new BrowserWindow({
-  width: 1080,
-  height: 720,
-  minWidth: 420,
+let mainWindow = new BrowserWindow({
+  width: windowSize.width,
+  height: windowSize.height,
+  minWidth: 500,
   minHeight: 320,
   autoHideMenuBar: showMenu,
   webPreferences: {
@@ -46,6 +49,7 @@ if (process.platform !== 'linux' || process.env.DESKTOP_SESSION === 'cinnamon')
   })
 
   app.on('before-quit', function (e) {
+    config.set('windowsize', mainWindow.getBounds())
     mainWindow.removeAllListeners()
   })
 } else {

lib/main.html

@@ -57,22 +57,23 @@
   <script src="../node_modules/codemirror/addon/mode/overlay.js"></script>
   <script src="../node_modules/codemirror/addon/mode/loadmode.js"></script>
   <script src="../node_modules/codemirror/keymap/sublime.js"></script>
+  <script src="../node_modules/codemirror/keymap/vim.js"></script>
   <script src="../node_modules/codemirror/addon/runmode/runmode.js"></script>
 
   <script src="../node_modules/codemirror/addon/edit/continuelist.js"></script>
 
-  <script src="../compiled/raphael.js"></script>
-  <script src="../compiled/flowchart.js"></script>
+  <script src="../node_modules/raphael/raphael.min.js"></script>
+  <script src="../node_modules/flowchart.js/release/flowchart.min.js"></script>
   <script>
     window._ = require('lodash')
   </script>
-  <script src="../compiled/sequence-diagram.js"></script>
 
-  <script src="../compiled/katex.js"></script>
-  <script src="../compiled/react.js"></script>
-  <script src="../compiled/react-dom.js"></script>
-  <script src="../compiled/redux.js"></script>
-  <script src="../compiled/react-redux.js"></script>
+  <script src="../node_modules/js-sequence-diagrams/fucknpm/sequence-diagram-min.js"></script>
+  <script src="../node_modules/katex/dist/katex.min.js"></script>
+  <script src="../node_modules/react/dist/react.min.js"></script>
+  <script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
+  <script src="../node_modules/redux/dist/redux.min.js"></script>
+  <script src="../node_modules/react-redux/dist/react-redux.min.js"></script>
   <script type='text/javascript'>
     const electron = require('electron')
     electron.webFrame.setZoomLevelLimits(1, 1)

oh-my-cdn.json

@@ -1,14 +0,0 @@
-{
-  "directory": "compiled",
-  "targets": {
-    "react": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js",
-    "react-dom": "https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js",
-    "redux": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js",
-    "react-redux": "https://unpkg.com/react-redux@4.4.5/dist/react-redux.min.js",
-    "katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
-    "katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
-    "raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
-    "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js",
-    "sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/build/sequence-diagram-min.js"
-  }
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boost",
-  "version": "0.7.3",
+  "version": "0.8.2",
   "description": "Boostnote",
   "main": "index.js",
   "license": "GPL-3.0",
@@ -8,10 +8,10 @@
     "start": "electron ./index.js",
     "hot": "electron ./index.js --hot",
     "webpack": "webpack-dev-server --hot --inline --config webpack.config.js",
-    "postinstall": "npm run vendor",
-    "vendor": "oh-my-cdn",
     "compile": "grunt compile",
-    "test": "PWD=$(pwd) NODE_ENV=test ava"
+    "test": "PWD=$(pwd) NODE_ENV=test ava",
+    "fix": "npm run lint --fix",
+    "lint": "eslint ./**/*.js"
   },
   "config": {
     "electron-version": "1.2.8"
@@ -44,14 +44,18 @@
   "bugs": {
     "url": "https://github.com/BoostIO/Boostnote/issues"
   },
-  "homepage": "https://b00st.io",
+  "homepage": "https://boostnote.io",
   "dependencies": {
     "@rokt33r/markdown-it-math": "^4.0.1",
     "@rokt33r/season": "^5.3.0",
     "codemirror": "^5.19.0",
+    "electron-config": "^0.2.1",
     "electron-gh-releases": "^2.0.2",
+    "flowchart.js": "^1.6.5",
     "font-awesome": "^4.3.0",
     "immutable": "^3.8.1",
+    "js-sequence-diagrams": "^1000000.0.6",
+    "katex": "^0.6.0",
     "lodash": "^4.11.1",
     "markdown-it": "^6.0.1",
     "markdown-it-checkbox": "^1.1.0",
@@ -61,6 +65,11 @@
     "mixpanel": "^0.4.1",
     "moment": "^2.10.3",
     "node-ipc": "^8.1.0",
+    "raphael": "^2.2.7",
+    "react": "^15.0.2",
+    "react-dom": "^15.0.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
     "sander": "^0.5.1",
     "superagent": "^1.2.0",
     "superagent-promise": "^1.0.3"
@@ -80,6 +89,9 @@
     "dom-storage": "^2.0.2",
     "electron-packager": "^6.0.0",
     "electron-prebuilt": "^1.2.8",
+    "eslint": "^3.13.1",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-config-standard-jsx": "^3.2.0",
     "faker": "^3.1.0",
     "grunt": "^0.4.5",
     "grunt-electron-installer": "^1.2.0",
@@ -87,7 +99,6 @@
     "jsdom": "^9.4.2",
     "merge-stream": "^1.0.0",
     "nib": "^1.1.0",
-    "oh-my-cdn": "^0.1.1",
     "react": "^15.3.0",
     "react-color": "^2.2.2",
     "react-css-modules": "^3.7.6",
@@ -106,14 +117,9 @@
     "grunt-electron-installer-debian": "^0.2.0"
   },
   "optional": false,
-  "standard": {
-    "globals": [
-      "localStorage"
-    ]
-  },
   "ava": {
     "files": [
-      "tests/**/*.js"
+      "tests/**/*-test.js"
     ],
     "require": [
       "babel-register"

readme-ja.md

@@ -1,85 +1,36 @@
-# Boostnote
+<h1 align="center">
+  <a href="https://github.com/BoostIO/Boostnote"><img src="./resources/app.png" alt="Boostnote" width="180"></a>
+  <br>
+  Boostnote
+  <br>
+  <br>
+</h1>
+<h4 align="center">クールなプログラマーの為の、オープンソースのノートアプリ </h4>
+<h5 align="center">macOS, Windows, Linuxで利用できます。</h5>
+<h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
 
-> [Boostnote store](https://boostnote.paintory.com/)をはじめました!! :tada: そして、[Pateron](https://www.patreon.com/boostnote)からも私達を支援することができます!
+![Boostnote app screenshot](./resources/repository/top.png)
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
-
-オープンソースノートアプリ
-
-次の用務がある場合にはIssue trackerを利用してください。
-- Boostnoteに関して質問したい時
-- Boostnoteや計画事項にフィードバックがしたい時
-- Boostnoteにバグを報告したい時
-- Boostnoteに寄与したい時
-
-## Goal
-
-単に何かを書くのが楽しくなってほしいです。 :grinning:
-
-- ターゲット OS : OSX, Windows, Linux(後々はモバイルも!)
-- Cloud : Google drive, Dropbox, One drive, iCloud...
-- オープンソースで残ること!
-
-## 印象を受けたアプリ/サービス
-
-- Atom
-- Quiver
-- Evernote
-- GitKraken
-- GitBook
-- Gist
-- Gistbox
-- Snippets Lab
-
-
-## Using stack
-
-- Electron
-- React
-- Webpack
-- Redux
-- CSSModules
-
-## Codestyle
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Development
-
-- [Build](docs/build.md)
-
-## Goods
-
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
-
-[Boostnote store](https://boostnote.paintory.com/)から幾つかのグッズを販売しています。
-
-商品は全世界何処でも届けることができます。このストアは[Paintory](https://paintory.com/)から提供されます。
-
-## Donation
-
-寄付は[Pateron page](https://www.patreon.com/boostnote)からできます。
+[![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
 ## Author & Maintainer
-
-[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+- [Rokt33r](https://github.com/rokt33r)
+- [sota1235](https://github.com/sota1235)
+- [Kohei TAKATA](https://github.com/kohei-takata)
+- [Kazu Yokomizo](https://github.com/kazup01)
 
 ## Contributors
+[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
-- [Kazu Yokomizo](https://github.com/kazup01)
-- [dojineko](https://github.com/dojineko)
-- [Romain Bazile](https://github.com/gromain)
-- [Bruno Paz](https://github.com/brpaz)
-- [Fabian Mueller](https://github.com/dotcs)
-- [Yoshihisa Mochihara](https://github.com/yosmoc)
-- [Mike Resoli](https://github.com/mikeres0)
-- [tjado](https://github.com/tejado)
-- [sota1235](https://github.com/sota1235)
 
-## Copyright & License
+## More Information
+* Website: http://boostnote.io/
+* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
+* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
+* Donation: [Patreon](https://www.patreon.com/boostnote)
+* Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
+* Copyright (C) 2017 Maisin&Co.
 
-Copyright (C) 2016 MAISIN&CO.
+## License
 
 [GPL v3](./LICENSE).

readme-ko.md

@@ -2,8 +2,7 @@
 
 > [Boostnote store](https://boostnote.paintory.com/)가 생겼습니다!! :tada: 그리고,[Pateron](https://www.patreon.com/boostnote)에서도 저희를 지원 하실 수 있습니다.!
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
+![Boostnote app screenshot](./resources/repository/top.png)
 
 오픈소스 노트 앱
 
@@ -52,8 +51,8 @@
 
 ## Goods
 
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
+<img src="https://boostnote.io/images/t3.png" width="250"/>
+<img src="https://boostnote.io/images/t1.png" width="250"/>
 
 [Boostnote store](https://boostnote.paintory.com/)에서 몇가지 상품들을 팔고있습니다.
 

readme.md

@@ -1,73 +1,36 @@
 <h1 align="center">
-  <a href="https://github.com/BoostIO/Boostnote"><img src="http://b00st.io/assets/img/logo.png" alt="Boostnote" width="180"></a>
+  <a href="https://github.com/BoostIO/Boostnote"><img src="./resources/app.png" alt="Boostnote" width="180"></a>
   <br>
   Boostnote
   <br>
   <br>
 </h1>
-<h4 align="center">Note app built for developers. </h4>
+<h4 align="center">Note-taking app for programmers. </h4>
 <h5 align="center">macOS, Windows and Linux</h5>
 <h5 align="center">Built with Electron, React + Redux, Webpack and CSSModules</h5>
-<h1> </h1>
 
-> We launched our [Boostnote store](https://boostnote.paintory.com/)!! :tada: Also, you can support us via [Patreon](https://www.patreon.com/boostnote) and [Open collective](https://opencollective.com/boostnote)!
+![Boostnote app screenshot](./resources/repository/top.png)
 
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662404/3aa42396-7f55-11e6-88bf-f4ec6505ee8f.png)
-![Boostnote app screenshot](https://cloud.githubusercontent.com/assets/5865853/18662139/f491adac-7f53-11e6-8631-2a447af9f36a.png)
-
-[日本語](./readme-ja.md) - [한국어](./readme-ko.md)
-
-## Goals
-* We want our users to enjoying writing _anything_. :grinning:
-* Open sourced forever!
-
-See upcoming features and bug fixes [here](https://github.com/BoostIO/Boostnote/issues/68)
-## Feedback
-Please use the [issue tracker](https://github.com/BoostIO/Boostnote/issues) for questions, bug reporting and contribution information.
-
-## Development
-If you want to join our dev Slack group ask @rokt33r.
-**[Build instructions](docs/build.md)**
-
-[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
-
-## Inspirations
-- Atom
-- Quiver
-- Evernote
-- GitKraken
-- GitBook
-- Gist
-- Gistbox
-- Snippets Lab
-
-## Store
-<img src="https://b00st.io/images/t3.png" width="250"/>
-<img src="https://b00st.io/images/t1.png" width="250"/>
-
-We're selling Boostnote goods on the [Boostnote store](https://boostnote.paintory.com/).
-
-Products are shipped worldwide. Powered by [Paintory](https://paintory.com/)
-
-## Donation
-* [Patreon](https://www.patreon.com/boostnote)
-* [Open collective](https://opencollective.com/boostnote)
+[![Build Status](https://travis-ci.org/BoostIO/Boostnote.svg?branch=master)](https://travis-ci.org/BoostIO/Boostnote)
 
 ## Author & Maintainer
-[Rokt33r(Dick Choi of MAISIN&CO.)](https://github.com/rokt33r)
+- [Rokt33r](https://github.com/rokt33r)
+- [sota1235](https://github.com/sota1235)
+- [Kohei TAKATA](https://github.com/kohei-takata)
+- [Kazu Yokomizo](https://github.com/kazup01)
 
 ## Contributors
-- [Kazu Yokomizo](https://github.com/kazup01)
-- [dojineko](https://github.com/dojineko)
-- [Romain Bazile](https://github.com/gromain)
-- [Bruno Paz](https://github.com/brpaz)
-- [Fabian Mueller](https://github.com/dotcs)
-- [Yoshihisa Mochihara](https://github.com/yosmoc)
-- [Mike Resoli](https://github.com/mikeres0)
-- [tjado](https://github.com/tejado)
-- [sota1235](https://github.com/sota1235)
+[Great contributors](https://github.com/BoostIO/Boostnote/graphs/contributors) :tada:
 
-## Copyright & License
-Copyright (C) 2016 MAISIN&CO.
+
+## More Information
+* Website: http://boostnote.io/
+* Roadmap(upcoming features and bug fixes): https://github.com/BoostIO/Boostnote/wiki/List-of-the-requested-features
+* Boostnote Shop(Products are shipped to all over the world :+1:): https://boostnote.paintory.com/
+* Donation: [Patreon](https://www.patreon.com/boostnote)
+* Development: https://github.com/BoostIO/Boostnote/blob/master/docs/build.md
+* Copyright (C) 2017 Maisin&Co.
+
+## License
 
 [GPL v3](./LICENSE).