Merge branch 'dev'

* dev:
  bump up version 0.4.1
  記事が編集された状態で他の記事を見ようとすると警告をだす
  updateが準備できたら、再起動されるまで改めてUpdateの確認をしない
  Tag suggest
  EnterでSubmitができる - Hotkey, folder edit, folder create(preference/create new folder modal両方)
  Folderの位置を変えることができる
  Preferenceからもフォルダーの色の選択ができる。
  // filterを使うと確実にFolder名が一致するもののみを表示する
  fix style
  new folder modalにcolor select追加
  auto update確認
  FinderからCopyした時、通知を出す
  FinderにCopy to clipboard button追加
  Folder リストに articleの数をだす
  フォルダーで検索するときに in:じゃなくて /にする ＋バグ修正
  IntroのFinder説明変更

.babelrc

@@ -0,0 +1,20 @@
+{
+  "stage": 0,
+  "env": {
+    "development": {
+      "plugins": ["react-transform"],
+      "extra": {
+        "react-transform": {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }, {
+            "transform": "react-transform-catch-errors",
+            "imports": ["react", "redbox-react"]
+          }]
+        }
+      }
+    }
+  }
+}

.gitignore

@@ -1,5 +1,6 @@
-/build
-/node_modules
-/electron_build
 .env
-dist/
+node_modules/*
+!node_modules/boost
+Boost-darwin-x64/
+backup/
+compiled

.gitmodules

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

Gulpfile.js

@@ -1,161 +0,0 @@
-require('dotenv').load()
-var env = process.env
-
-var gulp = require('gulp')
-var styl = require('gulp-stylus')
-var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
-var del = require('del')
-var runSequence = require('run-sequence')
-var plumber = require('gulp-plumber')
-var notify = require('gulp-notify')
-var changed = require('gulp-changed')
-var livereload = require('gulp-livereload')
-
-// for Dist
-var rev = require('gulp-rev')
-var ngAnnotate = require('gulp-ng-annotate')
-var uglify = require('gulp-uglify')
-var minifyCss = require('gulp-minify-css')
-var merge = require('merge-stream')
-var concat = require('gulp-concat')
-var streamqueue = require('streamqueue')
-var minifyHtml = require('gulp-minify-html')
-
-var config = require('./build.config.js')
-
-gulp.task('js', function () {
-  return streamqueue({objectMode: true},
-    gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.BUILD_API_URL
-      })),
-    gulp.src(['src/**/*.js'])
-  )
-  .pipe(changed('build'))
-  .pipe(gulp.dest('build'))
-})
-
-gulp.task('dist', function () {
-  var js = streamqueue({objectMode: true},
-    gulp.src(['src/**/*.js']),
-    gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.DIST_API_URL
-      })),
-    gulp.src('src/**/*.tpl.html')
-      .pipe(templateCache())
-  )
-  .pipe(ngAnnotate())
-  .pipe(uglify())
-  .pipe(concat('app.js'))
-  .pipe(gulp.dest('dist'))
-
-  var css = gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
-    .pipe(minifyCss())
-    .pipe(gulp.dest('dist'))
-
-  var index = gulp.src('src/index.html')
-      .pipe(template({
-        scripts: ['app.js'],
-        styles: ['main.css'],
-        env: 'dist'
-      }))
-      .pipe(minifyHtml())
-      .pipe(gulp.dest('dist'))
-
-  return merge(js, css, index)
-})
-
-gulp.task('styl', function () {
-  return gulp.src('src/styles/main.styl')
-    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-    .pipe(styl())
-    .pipe(autoprefixer())
-    .pipe(gulp.dest('build'))
-    .pipe(notify('Stylus!!'))
-    .pipe(livereload())
-})
-
-gulp.task('tpls', function () {
-  return gulp.src('src/**/*.tpl.html')
-    .pipe(templateCache())
-    .pipe(notify('Tpls Done!! :)'))
-    .pipe(gulp.dest('build'))
-})
-
-gulp.task('index', function () {
-  var files = globby.sync(['build/**/*', '!build/vendor/**/*'])
-
-  var filter = function (files, ext) {
-    return files.filter(function (file) {
-      var reg = new RegExp('.+\.' + ext + '$')
-      return file.match(reg)
-    }).map(function (file) {
-      return file.replace('build/', '')
-    })
-  }
-  var scripts = filter(files, 'js')
-  var styles = filter(files, 'css')
-
-  return gulp.src('src/index.html')
-    .pipe(template({
-      scripts: scripts,
-      styles: styles,
-      env: 'build'
-    }))
-    .pipe(gulp.dest('build'))
-    .pipe(livereload())
-})
-
-gulp.task('vendor', function () {
-  var vendors = config.vendors
-
-  var vendorFiles = vendors.map(function (vendor) {
-    return vendor.src
-  })
-
-  vendorFiles.push('node_modules/font-awesome/**/font-awesome.css')
-  vendorFiles.push('node_modules/font-awesome/**/fontawesome-webfont.*')
-  vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*')
-
-  return gulp.src(vendorFiles)
-    .pipe(gulp.dest('build/vendor'))
-})
-
-gulp.task('resources', function () {
-  return gulp.src('resources/**/*')
-    .pipe(changed('build/resources'))
-    .pipe(gulp.dest('build/resources'))
-})
-
-gulp.task('build', function (cb) {
-  runSequence(['js', 'styl', 'tpls', 'vendor', 'resources'], 'index', cb)
-})
-
-gulp.task('watch', function (cb) {
-  gulp.watch(['.env', 'tpls/env.js', 'src/**/*.js'], ['js'])
-
-  gulp.watch('src/styles/**/*.styl', ['styl'])
-
-  gulp.watch('src/**/*.tpl.html', ['tpls'])
-
-  gulp.watch(['build/**/*.js', 'src/index.html'], ['index'])
-
-  livereload.listen()
-})
-
-gulp.task('del', function (cb) {
-  del(['build/**/*'], cb)
-})
-
-gulp.task('default', function (cb) {
-  runSequence('del', 'build', 'watch', cb)
-})
-
-require('./gulp-electron')(gulp)

atom-lib/finder-window.js

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

atom-lib/main-window.js

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

atom-lib/menu-template.js

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

atom-lib/updater.js

@@ -0,0 +1,42 @@
+var autoUpdater = require('auto-updater')
+var nn = require('node-notifier')
+var app = require('app')
+var path = require('path')
+
+var version = app.getVersion()
+var versionText = (version == null || version.length === 0) ? 'DEV version' : 'v' + version
+var versionNotified = false
+autoUpdater
+  .on('error', function (err, message) {
+    console.error(err)
+    console.error(message)
+    console.log(path.resolve(__dirname, '../resources/favicon-230x230.png'))
+    nn.notify({
+      title: 'Error! ' + versionText,
+      icon: path.resolve(__dirname, '../resources/favicon-230x230.png'),
+      message: message
+    })
+  })
+  // .on('checking-for-update', function () {
+  //   // Connecting
+  //   console.log('checking...')
+  // })
+  .on('update-available', function () {
+    nn.notify({
+      title: 'Update is available!! ' + versionText,
+      icon: path.resolve(__dirname, '../resources/favicon-230x230.png'),
+      message: 'Download started.. wait for the update ready.'
+    })
+  })
+  .on('update-not-available', function () {
+    if (!versionNotified) {
+      nn.notify({
+        title: 'Latest Build!! ' + versionText,
+        icon: path.resolve(__dirname, '../resources/favicon-230x230.png'),
+        message: 'Hope you to enjoy our app :D'
+      })
+      versionNotified = true
+    }
+  })
+
+module.exports = autoUpdater

browser/finder/FinderDetail.js

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

browser/finder/FinderInput.js

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

browser/finder/FinderList.js

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

browser/finder/actions.js

@@ -0,0 +1,33 @@
+export const SELECT_ARTICLE = 'SELECT_ARTICLE'
+export const SEARCH_ARTICLE = 'SEARCH_ARTICLE'
+export const REFRESH_DATA = 'REFRESH_DATA'
+
+export function selectArticle (key) {
+  return {
+    type: SELECT_ARTICLE,
+    data: { key }
+  }
+}
+
+export function searchArticle (input) {
+  return {
+    type: SEARCH_ARTICLE,
+    data: { input }
+  }
+}
+
+export function refreshData () {
+  console.log('refreshing data')
+  let data = JSON.parse(localStorage.getItem('local'))
+  if (data == null) return null
+
+  let { folders, articles } = data
+
+  return {
+    type: REFRESH_DATA,
+    data: {
+      articles,
+      folders
+    }
+  }
+}

browser/finder/index.html

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

browser/finder/index.js

@@ -0,0 +1,228 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import { connect, Provider } from 'react-redux'
+import reducer from './reducer'
+import { createStore } from 'redux'
+import FinderInput from './FinderInput'
+import FinderList from './FinderList'
+import FinderDetail from './FinderDetail'
+import { selectArticle, searchArticle, refreshData } from './actions'
+import _ from 'lodash'
+import activityRecord from 'boost/activityRecord'
+
+import remote from 'remote'
+var hideFinder = remote.getGlobal('hideFinder')
+import clipboard from 'clipboard'
+
+var notifier = require('node-notifier')
+var path = require('path')
+function getIconPath () {
+  return path.resolve(global.__dirname, '../../resources/favicon-230x230.png')
+}
+
+require('../styles/finder/index.styl')
+
+const FOLDER_FILTER = 'FOLDER_FILTER'
+const FOLDER_EXACT_FILTER = 'FOLDER_EXACT_FILTER'
+const TEXT_FILTER = 'TEXT_FILTER'
+const TAG_FILTER = 'TAG_FILTER'
+
+class FinderMain extends React.Component {
+  constructor (props) {
+    super(props)
+  }
+
+  componentDidMount () {
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  }
+
+  handleClick (e) {
+    ReactDOM.findDOMNode(this.refs.finderInput.refs.input).focus()
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 38) {
+      this.selectPrevious()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 40) {
+      this.selectNext()
+      e.preventDefault()
+    }
+
+    if (e.keyCode === 13) {
+      this.saveToClipboard()
+      e.preventDefault()
+    }
+    if (e.keyCode === 27) {
+      hideFinder()
+      e.preventDefault()
+    }
+  }
+
+  saveToClipboard () {
+    let { activeArticle } = this.props
+    clipboard.writeText(activeArticle.content)
+    activityRecord.emit('FINDER_COPY')
+
+    notifier.notify({
+      icon: getIconPath(),
+      'title': 'Saved to Clipboard!',
+      'message': 'Paste it wherever you want!'
+    })
+    hideFinder()
+  }
+
+  handleSearchChange (e) {
+    let { dispatch } = this.props
+
+    dispatch(searchArticle(e.target.value))
+  }
+
+  selectArticle (article) {
+    this.setState({currentArticle: article})
+  }
+
+  selectPrevious () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index - 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  selectNext () {
+    let { activeArticle, dispatch } = this.props
+    let index = this.refs.finderList.props.articles.indexOf(activeArticle)
+    let previousArticle = this.refs.finderList.props.articles[index + 1]
+    if (previousArticle != null) dispatch(selectArticle(previousArticle.key))
+  }
+
+  render () {
+    let { articles, activeArticle, status, dispatch } = this.props
+    let saveToClipboard = () => this.saveToClipboard()
+    return (
+      <div onClick={e => this.handleClick(e)} onKeyDown={e => this.handleKeyDown(e)} className='Finder'>
+        <FinderInput
+          handleSearchChange={e => this.handleSearchChange(e)}
+          ref='finderInput'
+          onChange={this.handleChange}
+          value={status.search}
+        />
+        <FinderList
+          ref='finderList'
+          activeArticle={activeArticle}
+          articles={articles}
+          dispatch={dispatch}
+          selectArticle={article => this.selectArticle(article)}
+        />
+        <FinderDetail
+          activeArticle={activeArticle}
+          saveToClipboard={saveToClipboard}
+        />
+      </div>
+    )
+  }
+}
+
+FinderMain.propTypes = {
+  articles: PropTypes.array,
+  activeArticle: PropTypes.shape({
+    key: PropTypes.string,
+    tags: PropTypes.array,
+    title: PropTypes.string,
+    content: PropTypes.string
+  }),
+  status: PropTypes.shape(),
+  dispatch: PropTypes.func
+}
+
+// Ignore invalid key
+function ignoreInvalidKey (key) {
+  return key.length > 0 && !key.match(/^\/\/$/) && !key.match(/^\/$/) && !key.match(/^#$/)
+}
+
+// Build filter object by key
+function buildFilter (key) {
+  if (key.match(/^\/\/.+/)) {
+    return {type: FOLDER_EXACT_FILTER, value: key.match(/^\/\/(.+)$/)[1]}
+  }
+  if (key.match(/^\/.+/)) {
+    return {type: FOLDER_FILTER, value: key.match(/^\/(.+)$/)[1]}
+  }
+  if (key.match(/^#(.+)/)) {
+    return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+  }
+  return {type: TEXT_FILTER, value: key}
+}
+
+function remap (state) {
+  let { articles, folders, status } = state
+
+  let filters = status.search.split(' ')
+    .map(key => key.trim())
+    .filter(ignoreInvalidKey)
+    .map(buildFilter)
+
+  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
+  let folderFilters = filters.filter(filter => filter.type === FOLDER_FILTER)
+  let textFilters = filters.filter(filter => filter.type === TEXT_FILTER)
+  let tagFilters = filters.filter(filter => filter.type === TAG_FILTER)
+
+  let targetFolders
+  if (folders != null) {
+    let exactTargetFolders = folders.filter(folder => {
+      return _.find(folderExactFilters, filter => folder.name.match(new RegExp(`^${filter.value}$`)))
+    })
+    let fuzzyTargetFolders = folders.filter(folder => {
+      return _.find(folderFilters, filter => folder.name.match(new RegExp(`^${filter.value}`)))
+    })
+    targetFolders = status.targetFolders = exactTargetFolders.concat(fuzzyTargetFolders)
+
+    if (targetFolders.length > 0) {
+      articles = articles.filter(article => {
+        return _.findWhere(targetFolders, {key: article.FolderKey})
+      })
+    }
+
+    if (textFilters.length > 0) {
+      articles = textFilters.reduce((articles, textFilter) => {
+        return articles.filter(article => {
+          return article.title.match(new RegExp(textFilter.value, 'i')) || article.content.match(new RegExp(textFilter.value, 'i'))
+        })
+      }, articles)
+    }
+
+    if (tagFilters.length > 0) {
+      articles = tagFilters.reduce((articles, tagFilter) => {
+        return articles.filter(article => {
+          return _.find(article.tags, tag => tag.match(new RegExp(tagFilter.value, 'i')))
+        })
+      }, articles)
+    }
+  }
+
+  let activeArticle = _.findWhere(articles, {key: status.articleKey})
+  if (activeArticle == null) activeArticle = articles[0]
+
+  console.log(status.search)
+  return {
+    articles,
+    activeArticle,
+    status
+  }
+}
+
+var Finder = connect(remap)(FinderMain)
+var store = createStore(reducer)
+
+window.onfocus = e => {
+  store.dispatch(refreshData())
+  activityRecord.emit('FINDER_OPEN')
+}
+
+ReactDOM.render((
+  <Provider store={store}>
+    <Finder/>
+  </Provider>
+), document.getElementById('content'))

browser/finder/reducer.js

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

browser/main/HomePage.js

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

browser/main/HomePage/ArticleDetail.js

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

browser/main/HomePage/ArticleList.js

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

browser/main/HomePage/ArticleNavigator.js

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

browser/main/HomePage/ArticleTopBar.js

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

browser/main/HomePage/UserNavigator.js

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

browser/main/LoginPage.js

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

browser/main/MainPage.js

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

browser/main/SignupPage.js

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

browser/main/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+
+  <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
+  <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
+  <link rel="shortcut icon" href="favicon.ico">
+
+  <style>
+  @font-face {
+    font-family: 'Lato';
+    src: url('../../resources/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('../../resources/Lato-Regular.woff') format('woff'), /* Modern Browsers */
+         url('../../resources/Lato-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+  }
+  #loadingCover{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    padding: 65px 0;
+    font-family: sans-serif;
+  }
+  #loadingCover img{
+    display: block;
+    margin: 75px auto 5px;
+    width: 160px;
+    height: 160px;
+  }
+  #loadingCover .message{
+    font-size: 30px;
+    text-align: center;
+    line-height: 1.6;
+    font-weight: 100;
+    color: #888;
+  }
+  </style>
+</head>
+<body>
+  <div id="loadingCover">
+    <img src="../../resources/favicon-230x230.png">
+    <div class='message'>Loading...</div>
+  </div>
+
+  <div id="content"></div>
+
+  <script src="../../submodules/ace/src-min/ace.js"></script>
+  <script type='text/javascript'>
+    require('web-frame').setZoomLevelLimits(1, 1)
+    var version = require('remote').require('app').getVersion()
+    document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
+    var scriptUrl = process.env.BOOST_ENV === 'development'
+      ? 'http://localhost:8080/assets/main.js'
+      : '../../compiled/main.js'
+    var scriptEl=document.createElement('script')
+    scriptEl.setAttribute("type","text/javascript")
+    scriptEl.setAttribute("src", scriptUrl)
+    document.getElementsByTagName("head")[0].appendChild(scriptEl)
+  </script>
+</body>
+</html>

browser/main/index.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+// import { updateUser } from 'boost/actions'
+import { Router, Route, IndexRoute } from 'react-router'
+import MainPage from './MainPage'
+import HomePage from './HomePage'
+// import auth from 'boost/auth'
+import store from 'boost/store'
+import ReactDOM from 'react-dom'
+require('../styles/main/index.styl')
+import { openModal } from 'boost/modal'
+import Tutorial from 'boost/components/modal/Tutorial'
+import activityRecord from 'boost/activityRecord'
+import ipc from 'ipc'
+
+activityRecord.init()
+window.addEventListener('online', function () {
+  ipc.send('check-update', 'check-update')
+})
+
+let routes = (
+  <Route path='/' component={MainPage}>
+    <IndexRoute name='home' component={HomePage}/>
+  </Route>
+)
+
+let el = document.getElementById('content')
+ReactDOM.render((
+  <div>
+    <Provider store={store}>
+      <Router>{routes}</Router>
+    </Provider>
+  </div>
+), el, function () {
+  let loadingCover = document.getElementById('loadingCover')
+  loadingCover.parentNode.removeChild(loadingCover)
+  let status = JSON.parse(localStorage.getItem('status'))
+  if (status == null) status = {}
+  if (!status.introWatched) {
+    openModal(Tutorial)
+    status.introWatched = true
+    localStorage.setItem('status', JSON.stringify(status))
+  }
+})

browser/styles/finder/index.styl

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

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -0,0 +1,329 @@
+noTagsColor = #999
+iptFocusBorderColor = #369DCD
+
+.ArticleDetail
+  absolute right bottom
+  top 60px
+  left 450px
+  padding 10px
+  background-color #E6E6E6
+  border-top 1px solid borderColor
+  border-left 1px solid borderColor
+  *
+    -webkit-user-select all
+  .deleteConfirm
+    width 100%
+    height 70px
+    .right
+      float right
+      button
+        cursor pointer
+        height 33px
+        padding 0 10px
+        margin-left 5px
+        font-size 14px
+        color inactiveTextColor
+        background-color darken(white, 5%)
+        border solid 1px borderColor
+        border-radius 5px
+        &:hover
+          background-color white
+        &.primary
+          border none
+          background-color brandColor
+          color white
+          &:hover
+            color white
+            background-color lighten(brandColor, 10%)
+
+  .detailInfo
+    height 70px
+    width 100%
+    font-size 12px
+    position relative
+    .left
+      absolute top left bottom
+      right 120px
+      .folderName
+        display inline-block
+        max-width 100px
+        overflow ellipsis
+        height 10px
+    .right
+      absolute top right
+  .detailBody
+    absolute left right bottom
+    top 70px
+    overflow-x hidden
+    overflow-y auto
+    .detailPanel
+      absolute top
+      left 10px
+      right 10px
+      bottom 10px
+      background-color white
+      border-radius 5px
+      border solid 1px borderColor
+      &>.header
+        absolute top left right
+        height 60px
+      .MarkdownPreview
+        absolute left right bottom
+        top 60px
+        marked()
+        box-sizing border-box
+        padding 5px 15px
+        border-top solid 1px borderColor
+        overflow-y auto
+      .CodeEditor
+        absolute left right bottom
+        top 60px
+        border-top solid 1px borderColor
+        min-height 300px
+        border-bottom-left-radius 5px
+        border-bottom-right-radius 5px
+  &.edit
+    .detailInfo
+      .left
+        &>.tutorial
+          position fixed
+          z-index 35
+          font-style italic
+        .folder
+          border none
+          width 150px
+          height 27px
+          outline none
+          background-color darken(white, 5%)
+          &:hover
+            background-color white
+        .TagSelect
+          .tags
+            white-space nowrap
+            overflow-x auto
+            position relative
+            max-width 350px
+            margin-top 5px
+            noSelect()
+            z-index 30
+            background-color #E6E6E6
+            .tagItem
+              background-color brandColor
+              border-radius 2px
+              color white
+              margin 0 2px
+              padding 0
+              border 1px solid darken(brandColor, 10%)
+              button.tagRemoveBtn
+                color white
+                border-radius 2px
+                border none
+                background-color transparent
+                padding 4px 2px
+                border-right 1px solid #E6E6E6
+                font-size 8px
+                line-height 12px
+                transition 0.1s
+                &:hover
+                  background-color lighten(brandColor, 10%)
+              .tagLabel
+                padding 4px 4px
+                font-size 12px
+                line-height 12px
+            input.tagInput
+              background-color transparent
+              outline none
+              margin 0 2px
+              border-radius 2px
+              border none
+              transition 0.1s
+              height 18px
+          .suggestTags
+            position fixed
+            width 150px
+            max-height 150px
+            background-color white
+            z-index 5
+            border 1px solid borderColor
+            border-radius 5px
+            button
+              width 100%
+              display block
+              padding 0 15px
+              height 33px
+              line-height 33px
+              background-color transparent
+              border none
+              text-align left
+              font-size 14px
+              &:hover
+                background-color darken(white, 10%)
+      .right
+        button
+          cursor pointer
+          height 33px
+          width 55px
+          margin-left 5px
+          font-size 14px
+          color inactiveTextColor
+          background-color darken(white, 5%)
+          border solid 1px borderColor
+          border-radius 5px
+          &.preview
+            width inherit
+          &:hover
+            background-color white
+          &.primary
+            border none
+            background-color brandColor
+            color white
+            &:hover
+              color white
+              background-color lighten(brandColor, 10%)
+    .detailBody
+      .detailPanel
+        &>.header
+          &>.tutorial
+            fixed right
+            z-index 35
+            font-style italic
+          .mode
+            position relative
+            z-index 30
+            absolute top bottom right
+            display block
+            height 33px
+            margin-top 12px
+            width 150px
+            margin-right 15px
+            border-radius 5px
+            border solid 1px borderColor
+            transition 0.1s
+            &.idle
+              background-color darken(white, 5%)
+              cursor pointer
+              &:hover
+                background-color white
+              .ModeIcon
+                float left
+                width 25px
+                line-height 33px
+                text-align center
+              .modeLabel
+                line-height 30px
+            &.edit
+              background-color white
+              input
+                width 150px
+                line-height 30px
+                padding 0 10px
+                border none
+                outline none
+                background-color transparent
+                font-size 14px
+              .modeOptions
+                position fixed
+                width 150px
+                z-index 10
+                margin-top 5px
+                border 1px solid borderColor
+                border-radius 5px
+                background-color white
+                max-height 250px
+                overflow-y auto
+                .option
+                  height 33px
+                  line-height 33px
+                  cursor pointer
+                  &.active, &:hover.active
+                    background-color brandColor
+                    color white
+                  .ModeIcon
+                    width 30px
+                    text-align center
+                    display inline-block
+                  &:hover
+                    background-color darken(white, 10%)
+          .title
+            absolute left top bottom
+            right 150px
+            padding 0 15px
+            input
+              width 100%
+              border none
+              background-color transparent
+              line-height 60px
+              font-size 24px
+              outline none
+  &.idle
+    .detailInfo
+      &>.tutorial
+        fixed top right
+        z-index 35
+        font-style italic
+      .left
+        right 99px
+        .info
+          padding 5px
+          overflow ellipsis
+        .tags
+          padding 10px 10px 5px
+          color articleItemColor
+          a
+            background-color brandColor
+            color white
+            border-radius 2px
+            padding 1.5px 5px
+            margin 2px
+            font-size 10px
+            opacity 0.8
+            cursor pointer
+            &:hover
+              opacity 1
+          span.noTags
+            color noTagsColor
+      .right
+        z-index 30
+        button
+          border-radius 16.5px
+          cursor pointer
+          height 33px
+          width 33px
+          border none
+          margin-right 5px
+          font-size 18px
+          color inactiveTextColor
+          background-color darken(white, 5%)
+          padding 0
+          .tooltip
+            tooltip()
+          &.editBtn .tooltip
+            margin-top 25px
+            margin-left -45px
+          &.deleteBtn .tooltip
+            margin-top 25px
+            margin-left -73px
+          &:hover
+            color textColor
+            .tooltip
+              opacity 1
+    .detailBody
+      .detailPanel
+        &>.header
+          .mode
+            display block
+            line-height 60px
+            width 45px
+            height 60px
+            font-size 18px
+            text-align center
+          .title
+            absolute top bottom
+            left 45px
+            right 15px
+            font-size 24px
+            line-height 60px
+
+            white-space nowrap
+            overflow-x auto
+            overflow-y hidden

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -0,0 +1,74 @@
+articleItemHoverBgColor = darken(white, 5%)
+articleItemColor = #777
+
+.ArticleList
+  absolute bottom
+  top 60px
+  left 200px
+  width 250px
+  border-top 1px solid borderColor
+  border-right 1px solid borderColor
+  overflow-y auto
+  noSelect()
+  &>div
+    .articleItem
+      border solid 2px transparent
+      position relative
+      height 88px
+      width 100%
+      cursor pointer
+      transition 0.1s
+      background-color white
+      padding 0 10px
+      font-size 12px
+      .top
+        clearfix()
+        line-height 20px
+        padding 5px 0
+        color articleItemColor
+        .folderName
+          overflow ellipsis
+          display inline-block
+          width 120px
+        .updatedAt
+          float right
+          line-height 20px
+      .middle
+        padding 3px 0 7px
+        font-size 16px
+        position relative
+        height 26px
+        .mode
+          position absolute
+          left 0
+          font-size 12px
+          line-height 16px
+        .title
+          position absolute
+          left 19px
+          right 0
+          overflow ellipsis
+      .bottom
+        padding 5px 0
+        overflow-x auto
+        white-space nowrap
+        .tags
+          color articleItemColor
+          a
+            background-color brandColor
+            color white
+            border-radius 2px
+            padding 1.5px 5px
+            margin 2px
+            font-size 10px
+            opacity 0.8
+            &:hover
+              opacity 1
+      &:hover, &.hover
+        background-color articleItemHoverBgColor
+        &:active, &.active
+          background-color white
+      &:active, &.active
+        border-color brandBorderColor
+    .divider
+      border-bottom solid 1px borderColor

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -0,0 +1,170 @@
+articleNavBgColor = #353535
+articleCount = #999
+
+.ArticleNavigator
+  background-color articleNavBgColor
+  absolute top bottom left
+  width 200px
+  border-right 1px solid borderColor
+  color white
+  .userInfo
+    height 60px
+    display block
+    border-bottom 1px solid borderColor
+    .userProfileName
+      color brandColor
+      font-size 28px
+      padding 6px 0 0 10px
+      white-space nowrap
+      text-overflow ellipsis
+      overflow hidden
+    .userName
+      color white
+      padding-left 20px
+      margin-top 3px
+    .tutorial
+      position fixed
+      z-index 35
+      top 0
+      left 0
+      pointer-event none
+      font-style italic
+      transition 0.1s
+      &.hide
+        opacity 0
+    .settingBtn
+      width 22px
+      height 22px
+      line-height 22px
+      border-radius 11px
+      position absolute
+      top 19px
+      right 14px
+      color white
+      padding 0
+      background-color transparent
+      border 1px solid white
+      z-index 31
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left 10px
+      &:hover
+        .tooltip
+          opacity 1
+      &:active
+        background-color brandColor
+        border-color brandColor
+  .controlSection
+    height 88px
+    padding 22px 15px
+    margin-bottom 44px
+    .tutorial
+      fixed top left
+      z-index 35
+      pointer-event none
+      font-style italic
+      transition 0.1s
+      &.hide
+        opacity 0
+    .newPostBtn
+      position relative
+      border none
+      background-color brandColor
+      color white
+      height 44px
+      width 170px
+      border-radius 5px
+      font-size 20px
+      transition 0.1s
+      z-index 30
+      .tooltip
+        tooltip()
+        margin-left 48px
+        margin-top -3px
+      &:hover
+        background-color lighten(brandColor, 7%)
+        .tooltip
+          opacity 1
+  .folders, .members
+    .header
+      border-bottom 1px solid borderColor
+      padding-bottom 5px
+      margin-bottom 10px
+      clearfix()
+      position relative
+      z-index 30
+      .title
+        float left
+        padding-left 10px
+        font-size 18px
+        line-height 22px
+      .addBtn
+        float right
+        margin-right 15px
+        width 22px
+        height 22px
+        font-size 10px
+        padding 0
+        line-height 22px
+        border 1px solid white
+        border-radius 11px
+        background-color transparent
+        color white
+        padding 0
+        font-weight bold
+        .tooltip
+          tooltip()
+          margin-top -6px
+          margin-left 11px
+        &:hover
+          .tooltip
+            opacity 1
+        &:active
+          background-color brandColor
+          border-color brandColor
+  .folders
+    absolute bottom
+    top 200px
+    width 100%
+    .header
+      .tutorial
+        position fixed
+        z-index 35px
+        top 200px
+        font-style italic
+    .folderList
+      absolute bottom
+      top 38px
+      overflow-y auto
+    .folderList button
+      height 33px
+      width 199px
+      border none
+      text-align left
+      font-size 14px
+      background-color transparent
+      color white
+      padding-left 15px
+      overflow ellipsis
+      &:hover
+        background-color transparentify(white, 5%)
+      &.active, &:active
+        background-color transparentify(lighten(brandColor, 25%), 70%)
+      .articleCount
+        color articleCount
+        font-size 12px
+  .members
+    .memberList>div
+      height 33px
+      width 200px
+      margin-bottom 5px
+      padding-left 15px
+      .memberImage
+        float left
+        margin-top 5.5px
+        border-radius 11px
+      .memberProfileName
+        float left
+        line-height 33px
+        margin-left 7px

browser/styles/main/HomeContainer/components/ArticleTopBar.styl

@@ -0,0 +1,156 @@
+bgColor = #E6E6E6
+inputBgColor = white
+iptFocusBorderColor = #369DCD
+
+topBarBtnColor = #B3B3B3
+topBarBtnBgColor = #B3B3B3
+topBarBtnBgActiveColor = #3A3A3A
+
+infoBtnColor = bgColor
+infoBtnBgColor = #B3B3B3
+infoBtnActiveBgColor = #3A3A3A
+
+.ArticleTopBar
+  absolute top right
+  left 200px
+  height 60px
+  background-color bgColor
+  &>.tutorial
+    .clickJammer
+      fixed top left bottom right
+      z-index 40
+      background transparent
+    .global
+      fixed bottom right
+      height 100px
+      z-index 35
+      font-style italic
+    .finder
+      fixed bottom right
+      height 250px
+      left 50%
+      margin-left -250px
+      z-index 35
+      font-style italic
+    .back
+      fixed top left bottom right
+      z-index 20
+      background-color transparentify(black, 80%)
+  &>.left
+    float left
+    &>.tutorial
+      fixed top
+      left 200px
+      z-index 36
+      font-style italic
+    &>.search
+      position relative
+      float left
+      height 33px
+      margin-top 13.5px
+      margin-left 15px
+      width 350px
+      padding 5px 15px
+      transition 0.1s
+      font-size 16px
+      border 1px solid transparent
+      z-index 30
+      .tooltip
+        tooltip()
+        margin-left -24px
+        margin-top 35px
+        opacity 1
+        &.hide
+          opacity 0
+      input
+        absolute top left
+        width 350px
+        border-radius 16.5px
+        background-color inputBgColor
+        border 1px solid transparent
+        padding-left 35px
+        outline none
+        font-size 14px
+        height 33px
+        line-height 33px
+        z-index 0
+        &:focus
+          border-color iptFocusBorderColor
+      i.fa.fa-search
+        position absolute
+        display block
+        top 0
+        left 10px
+        line-height 33px
+        z-index 1
+        pointer-events none
+      .searchClearBtn
+        position absolute
+        top 6px
+        right 10px
+        width 20px
+        height 20px
+        border-radius 10px
+        border none
+        background-color transparent
+        color topBarBtnColor
+        transition 0.1s
+        line-height 20px
+        text-align center
+        padding 0
+        &:hover
+          color white
+          background-color topBarBtnBgColor
+    &>.refreshBtn
+      float left
+      width 33px
+      height 33px
+      margin-top 13.5px
+      margin-left 15px
+      border none
+      color refreshBtColor
+      background transparent
+      font-size 18px
+      line-height 18px
+      transition 0.1s
+      &:hover
+        color refreshBtnActiveColor
+  &>.right
+    float right
+    &>button
+      display block
+      position absolute
+      right 74px
+      top 20px
+      width 20px
+      height 20px
+      font-size 14px
+      line-height 14px
+      background-color infoBtnBgColor
+      color bgColor
+      border-radius 11px
+      border none
+      transition 0.1s
+      .tooltip
+        tooltip()
+        margin-left -50px
+        margin-top 29px
+      &:hover
+        background-color infoBtnActiveBgColor
+        .tooltip
+          opacity 1
+
+    &>.logo
+      display block
+      position absolute
+      top 8px
+      right 15px
+      opacity 0.7
+      .tooltip
+        tooltip()
+        margin-top 44px
+        margin-left -120px
+      &:hover
+        opacity 1
+        .tooltip
+          opacity 1

browser/styles/main/HomeContainer/components/UserNavigator.styl

@@ -0,0 +1,86 @@
+userNavigatorBgColor = #1B1C1C
+userNavigatorColor = #DDD
+userAnchorColor = #979797
+userAnchorBgColor = #BEBEBE
+userAnchorActiveColor = textColor
+userAnchorActiveBgColor = white
+
+.UserNavigator
+  noSelect()
+  background-color userNavigatorBgColor
+  absolute left top bottom
+  width 60px
+  text-align center
+  box-sizing border-box
+  ul.userList
+    position absolute
+    top 25px
+    left 0
+    right 0
+    bottom 70px
+    // overflow-y auto
+    &>li
+      a
+        display block
+        width 38px
+        height 64px
+        margin 0 auto 10px
+        text-align center
+        text-decoration none
+        color userAnchorColor
+        line-height 44px
+        font-size 1.1em
+        cursor pointer
+        transition 0.1s
+
+        img.ProfileImage
+          width 38px
+          height 38px
+          border-radius 22px
+          opacity 0.7
+        &:hover
+          img.ProfileImage
+            opacity 1
+          .userTooltip
+            opacity 1
+        &.active
+          img.ProfileImage
+            opacity 1
+        .userTooltip
+          tooltip()
+          position absolute
+          margin-top -52px
+          margin-left 44px
+        .keyLabel
+          margin-top -25px
+          font-size 0.8em
+          color userNavigatorColor
+  button.createTeamBtn
+    display block
+    margin 0 auto
+    width 30px
+    height 30px
+    border-radius 15px
+    border 2px solid darken(white, 5%)
+    color darken(white, 5%)
+    text-align center
+    background-image none
+    background-color transparent
+    box-sizing border-box
+    absolute left right
+    bottom 15px
+    font-size 22px
+    line-height 22px
+    transition 0.1s
+    .tooltip
+      tooltip()
+      margin-top -26px
+      margin-left 30px
+    &:hover, &.hover, &:focus, &.focus
+      color white
+      border-color white
+      .tooltip
+        opacity 1
+    &:active
+      background-color brandColor
+      border-color brandColor

browser/styles/main/HomeContainer/index.styl

@@ -0,0 +1,12 @@
+@require './components/UserNavigator'
+@require './components/ArticleNavigator'
+@require './components/ArticleTopBar'
+@require './components/ArticleList'
+@require './components/ArticleDetail'
+
+@require './lib/modal'
+@require './lib/CreateNewTeam'
+@require './lib/CreateNewFolder'
+@require './lib/Preferences'
+@require './lib/Tutorial'
+@require './lib/EditedAlert'

browser/styles/main/HomeContainer/lib/CreateNewFolder.styl

@@ -0,0 +1,91 @@
+tabNavColor = #999999
+iptFocusBorderColor = #369DCD
+
+.CreateNewFolder.modal
+  width 600px
+  height 450px
+  .closeBtn
+    position absolute
+    top 15px
+    right 15px
+    width 33px
+    height 33px
+    font-size 18px
+    line-height 33px
+    padding 0
+    text-align center
+    background-color transparent
+    border none
+    color stripBtnColor
+    &:hover
+      color stripHoverBtnColor
+  .title
+    font-size 32px
+    text-align center
+    font-weight bold
+    margin-top 25px
+  .ipt
+    display block
+    width 330px
+    font-size 14px
+    height 44px
+    line-height 44px
+    padding 0 15px
+    border-radius 5px
+    border solid 1px borderColor
+    outline none
+    margin 75px auto 20px
+    &:focus
+      border-color iptFocusBorderColor
+  .colorSelect
+    text-align center
+    .option
+      cursor pointer
+      font-size 22px
+      height 48px
+      width 48px
+      margin 0 2px
+      border 1px solid transparent
+      border-radius 5px
+      overflow hidden
+      line-height 45px
+      text-align center
+      transition 0.1s
+      display inline-block
+      &:hover
+        border-color borderColor
+        font-size 28px
+      &.active
+        font-size 28px
+        border-color iptFocusBorderColor
+  .alert
+    color infoTextColor
+    background-color infoBackgroundColor
+    font-size 14px
+    padding 15px 15px
+    width 330px
+    border-radius 5px
+    margin 15px auto 0
+    &.error
+      color errorTextColor
+      background-color errorBackgroundColor
+  .confirmBtn
+    display block
+    position absolute
+    left 180px
+    bottom 44px
+    width 240px
+    font-size 24px
+    height 44px
+    line-height 24px
+    font-weight bold
+    background-color brandColor
+    color white
+    border none
+    border-radius 5px
+    margin 0 auto
+    transition 0.1s
+    &:hover
+      transform scale(1.1)
+    &:disabled
+      opacity 0.7

browser/styles/main/HomeContainer/lib/CreateNewTeam.styl

@@ -0,0 +1,199 @@
+tabNavColor = #999999
+iptFocusBorderColor = #369DCD
+stripHoverBtnColor = #333
+stripBtnColor = lighten(stripHoverBtnColor, 35%)
+
+.CreateNewTeam.modal
+  width 600px
+  height 450px
+  .closeBtn
+    position absolute
+    top 15px
+    right 15px
+    width 33px
+    height 33px
+    font-size 18px
+    line-height 33px
+    padding 0
+    text-align center
+    background-color transparent
+    border none
+    color stripBtnColor
+    &:hover
+      color stripHoverBtnColor
+  .title
+    font-size 32px
+    text-align center
+    font-weight bold
+    margin-top 25px
+  .ipt
+    display block
+    width 330px
+    font-size 14px
+    height 44px
+    line-height 44px
+    padding 0 15px
+    border-radius 5px
+    border solid 1px borderColor
+    outline none
+    &:focus
+      border-color iptFocusBorderColor
+  .alert
+    padding 0 15px
+    height 44px
+    line-height 44px
+    width 300px
+    margin 0 auto
+    border-radius 5px
+    color infoTextColor
+    background-color infoBackgroundColor
+    white-space nowrap
+    overflow-x auto
+    &.error
+      color errorTextColor
+      background-color errorBackgroundColor
+  .confirmBtn
+    display block
+    position absolute
+    left 180px
+    bottom 44px
+    width 240px
+    font-size 24px
+    height 44px
+    line-height 24px
+    font-weight bold
+    background-color brandColor
+    color white
+    border none
+    border-radius 5px
+    margin 0 auto
+    transition 0.1s
+    &:hover
+      transform scale(1.1)
+    &:disabled
+      opacity 0.7
+  .tabNav
+    absolute left right
+    bottom 15px
+    height 33px
+    line-height 33px
+    width 150px
+    text-align center
+    font-size 12px
+    color tabNavColor
+    margin 0 auto
+    transition 0.1s
+    i.active
+      color brandColor
+  .createTab
+    .ipt
+      margin 105px auto 15px
+  .selectTab
+    .memberForm
+      display block
+      margin 25px auto 15px
+      width 330px
+      clearfix()
+      padding 0
+      font-size 14px
+      height 44px
+      line-height 44px
+      outline none
+      .Select.memberName
+        display block
+        margin 0
+        float left
+        width 280px
+        height 44px
+        font-size 14px
+        border none
+        line-height 44px
+        background-color transparent
+        outline none
+        &.is-focus
+          .Select-control
+            border-color iptFocusBorderColor
+        .Select-control
+          height 44px
+          line-height 44px
+          padding 0 0 0 15px
+          border-radius 5px 0 0 5px
+          border 1px solid borderColor
+          border-right none
+          .Select-placeholder
+            padding 0 0 0 15px
+          .Seleect-arrow
+            top 21px
+          .Select-clear
+            padding 0 10px
+        .Select-noresults, .Select-option
+          line-height 44px
+          padding 0 0 0 15px
+
+        &:focus, &.focus
+          border-color iptFocusBorderColor
+      button
+        font-weight 400
+        height 44px
+        cursor pointer
+        margin 0
+        padding 0
+        width 50px
+        float right
+        border none
+        background-color brandColor
+        border-top-right-radius 5px
+        border-bottom-right-radius 5px
+        color white
+        font-size 14px
+    .memberList
+      width 480px
+      margin 0 auto
+      height 190px
+      overflow scroll
+      border-bottom 1px solid borderColor
+      &>li
+        border-bottom 1px solid borderColor
+        height 44px
+        padding 0 25px
+        clearfix()
+        &:nth-last-child(1)
+          border-bottom-color transparent
+        .userPhoto
+          width 30px
+          height 30px
+          float left
+          margin-top 7px
+          margin-right 15px
+          border-radius 15px
+        .userInfo
+          float left
+          margin-top 7px
+          .userName
+            font-size 16px
+            margin-bottom 2px
+          .userEmail
+            font-size 12px
+        .userControl
+          float right
+          .userRole
+            float left
+            height 30px
+            background-color transparent
+            border 1px solid transparent
+            margin-top 7px
+            margin-right 35px
+            outline none
+            cursor pointer
+            &:hover
+              border-color borderColor
+            &:focus
+              border-color iptFocusBorderColor
+          button
+            border none
+            height 30px
+            margin-top 7px
+            background-color transparent
+            color stripBtnColor
+            &:hover
+              color stripHoverBtnColor

browser/styles/main/HomeContainer/lib/EditedAlert.styl

@@ -0,0 +1,28 @@
+.EditedAlert.modal
+  width 350px
+  top 100px
+  .title
+    font-size 24px
+    margin-bottom 15px
+  .message
+    font-size 14px
+    margin-bottom 15px
+  .control
+    text-align right
+    button
+      border-radius 5px
+      height 33px
+      padding 0 15px
+      font-size 14px
+      background-color white
+      border 1px solid borderColor
+      border-radius 5px
+      margin-left 5px
+      &:hover
+        background-color darken(white, 10%)
+      &.primary
+        border-color brandColor
+        background-color brandColor
+        color white
+        &:hover
+          background-color lighten(brandColor, 10%)

browser/styles/main/HomeContainer/lib/Preferences.styl

@@ -0,0 +1,633 @@
+menuColor = #808080
+menuBgColor = #E6E6E6
+closeBtnBgColor = #1790C6
+iptFocusBorderColor = #369DCD
+
+.Preferences.modal
+  padding 0
+  border-radius 5px
+  overflow hidden
+  width 720px
+  height 450px
+  &>.header
+    absolute top left right
+    height 50px
+    border-bottom 1px solid borderColor
+    background-color menuBgColor
+    &>.title
+      font-size 22px
+      font-weight bold
+      float left
+      padding-left 30px
+      line-height 50px
+    &>.closeBtn
+      float right
+      font-size 14px
+      background-color closeBtnBgColor
+      color white
+      padding 0 15px
+      height 33px
+      margin-top 9px
+      margin-right 15px
+      border none
+      border-radius 5px
+      &:hover
+        background-color lighten(closeBtnBgColor, 10%)
+  &>.nav
+    absolute left bottom
+    top 50px
+    width 180px
+    background-color menuBgColor
+    border-right 1px solid borderColor
+    &>button
+      width 100%
+      height 44px
+      font-size 18px
+      color menuColor
+      border none
+      background-color transparent
+      transition 0.1s
+      text-align left
+      padding-left 15px
+      &:hover
+        background-color darken(menuBgColor, 10%)
+      &.active, &:active
+        background-color brandColor
+        color white
+  &>.content
+    absolute right bottom
+    top 50px
+    left 180px
+    overflow-y auto
+    &>.section
+      padding 10px
+      border-bottom 1px solid borderColor
+      overflow-y auto
+      &:nth-last-child(1)
+        border-bottom none
+      &>.sectionTitle
+        font-size 18px
+        margin 10px 0 5px
+        color brandColor
+      &>.sectionInput
+        height 33px
+        margin-bottom 5px
+        clearfix()
+        label
+          width 180px
+          padding-left 15px
+          float left
+          line-height 33px
+        input
+          width 300px
+          float left
+          height 33px
+          border-radius 5px
+          border 1px solid borderColor
+          padding 0 10px
+          font-size 14px
+          outline none
+          &:focus
+            border-color iptFocusBorderColor
+      &>.sectionConfirm
+        clearfix()
+        padding 5px 15px
+        button
+          float right
+          background-color brandColor
+          color white
+          border none
+          border-radius 5px
+          height 33px
+          padding 0 15px
+          font-size 14px
+          &:hover
+            background-color lighten(brandColor, 10%)
+        .alert
+          float right
+          width 250px
+          padding 10px 15px
+          margin 0 10px 0
+    .alert
+      color infoTextColor
+      background-color infoBackgroundColor
+      font-size 14px
+      padding 15px 15px
+      width 330px
+      border-radius 5px
+      margin 10px auto
+      &.error
+        color errorTextColor
+        background-color errorBackgroundColor
+    &.ContactTab
+      &.done
+        .message
+          margin-top 75px
+          margin-bottom 15px
+          text-align center
+          font-size 22px
+          .checkIcon
+            margin-bottom 15px
+            font-size 144px
+            color brandColor
+            text-align center
+        .control
+          text-align center
+          button
+            border solid 1px borderColor
+            border-radius 5px
+            background-color white
+            padding 15px 15px
+            font-size 14px
+            &:hover
+              background-color darken(white, 10%)
+      &.form
+        padding 10px
+        .title
+          font-size 18px
+          color brandColor
+          margin-top 10px
+          margin-bottom 10px
+        .description
+          margin-bottom 15px
+        .iptGroup
+          margin-bottom 10px
+          input, textarea
+            border-radius 5px
+            border 1px solid borderColor
+            font-size 14px
+            outline none
+            padding 10px 15px
+            width 100%
+            &:focus
+              border-color iptFocusBorderColor
+          textarea
+            resize vertical
+            min-height 150px
+        .formControl
+          clearfix()
+          .alert
+            float right
+            padding 10px 15px
+            margin 0 5px 0
+            font-size 14px
+            line-height normal
+          button
+            padding 10px 15px
+            background-color brandColor
+            color white
+            font-size 14px
+            border-radius 5px
+            border none
+            float right
+            &:hover
+              background-color lighten(brandColor, 10%)
+
+    &.AppSettingTab
+      .description
+        marked()
+    &.TeamSettingTab
+      .header
+        border-bottom 1px solid borderColor
+        padding 10px
+        font-size 18px
+        color brandColor
+        line-height 33px
+        .teamSelect
+          border 1px solid borderColor
+          height 33px
+          width 200px
+          margin 0 10px
+          outline none
+          font-size 14px
+          &:focus
+            border-color iptFocusBorderColor
+      .teamDeleteConfirm
+
+        label
+          line-height 33px
+          font-size 14px
+      .teamDelete
+        label
+          line-height 33px
+          font-size 18px
+          color brandColor
+      .teamDelete, .teamDeleteConfirm
+        padding 15px 20px 15px 15px
+        button
+          background-color white
+          height 33px
+          font-size 14px
+          padding 0 15px
+          border 1px solid borderColor
+          float right
+          margin 0 5px
+          border-radius 5px
+          &:hover
+            background-color darken(white, 10%)
+        button.deleteBtn
+          background-color brandColor
+          border none
+          color white
+          &:hover
+            background-color lighten(brandColor, 10%)
+    &.MemberSettingTab
+      &>.header
+        border-bottom 1px solid borderColor
+        padding 10px
+        font-size 18px
+        color brandColor
+        line-height 33px
+        .teamSelect
+          border 1px solid borderColor
+          height 33px
+          width 200px
+          margin 0 10px
+          outline none
+          font-size 14px
+          &:focus
+            border-color iptFocusBorderColor
+      .membersTableSection
+        .addMember
+          clearfix()
+          padding 10px
+          .addMemberLabel
+            font-size 14px
+            line-height 33px
+            float left
+          .addMemberControl
+            width 330px
+            float left
+            margin-left 25px
+            .Select
+              display block
+              margin 0
+              float left
+              width 280px
+              height 33px
+              font-size 14px
+              border none
+              line-height 33px
+              background-color transparent
+              outline none
+              &.is-focus
+                .Select-control
+                  border-color iptFocusBorderColor
+              .Select-control
+                height 33px
+                line-height 33px
+                padding 0 0 0 15px
+                border-radius 5px 0 0 5px
+                border 1px solid borderColor
+                border-right none
+                .Select-placeholder
+                  padding 0 0 0 15px
+                .Seleect-arrow
+                  top 21px
+                .Select-clear
+                  padding 0 10px
+              .Select-noresults, .Select-option
+                line-height 33px
+                padding 0 0 0 15px
+            button
+              font-weight 400
+              height 33px
+              cursor pointer
+              margin 0
+              padding 0
+              width 50px
+              float right
+              border none
+              background-color brandColor
+              border-top-right-radius 5px
+              border-bottom-right-radius 5px
+              color white
+              font-size 14px
+        .memberList
+          &>.header
+            clearfix()
+            &>.userName
+              float left
+            &>.role
+              float left
+            &>.control
+              float right
+          &>li
+            &.edit
+              .colDescription
+                font-size 14px
+                line-height 33px
+                padding-left 15px
+                float left
+                strong
+                  font-size 16px
+                  color brandColor
+              .colDeleteConfirm
+                float right
+                margin-right 15px
+                button
+                  border none
+                  height 30px
+                  width 60px
+                  margin-top 1.5px
+                  font-size 14px
+                  background-color transparent
+                  color stripBtnColor
+                  &:hover
+                    color stripHoverBtnColor
+                  &:disabled
+                    color lighten(stripBtnColor, 10%)
+                    cursor not-allowed
+                  &.primary
+                   color brandColor
+                   &:hover
+                    color lighten(brandColor, 10%)
+
+            border-bottom 1px solid borderColor
+            height 44px
+            padding 0 25px
+            width 420px
+            margin 0 auto
+            clearfix()
+            &:nth-last-child(1)
+              border-bottom-color transparent
+            .colUserName
+              float left
+              width 250px
+              clearfix()
+              .userPhoto
+                width 30px
+                height 30px
+                float left
+                margin-top 7px
+                margin-right 15px
+                border-radius 15px
+              .userInfo
+                float left
+                margin-top 7px
+                width 205px
+                .userName
+                  font-size 16px
+                  margin-bottom 2px
+                  overflow ellipsis
+                .userEmail
+                  font-size 12px
+                  overflow ellipsis
+            .colRole
+              float left
+              width 75px
+              .userRole
+                height 30px
+                background-color transparent
+                border 1px solid transparent
+                margin-top 7px
+                margin-right 35px
+                outline none
+                cursor pointer
+                &:hover
+                  border-color borderColor
+                &:focus
+                  border-color iptFocusBorderColor
+                &:disabled
+                  border-color transparent
+                  cursor not-allowed
+            .colDelete
+              width 45px
+              float right
+              text-align center
+              button.deleteButton
+                border none
+                height 30px
+                width 30px
+                margin-top 7px
+                background-color transparent
+                color stripBtnColor
+                &:hover
+                  color stripHoverBtnColor
+                &:disabled
+                  color lighten(stripBtnColor, 10%)
+                  cursor not-allowed
+            &.header
+              .colRole, .colDelete
+                text-align center
+              .colUserName, .colRole, .colDelete
+                line-height 44px
+    &.FolderSettingTab
+      &>.header
+        border-bottom 1px solid borderColor
+        padding 10px
+        font-size 18px
+        color brandColor
+        line-height 33px
+        .teamSelect
+          border 1px solid borderColor
+          height 33px
+          width 200px
+          margin 0 10px
+          outline none
+          font-size 14px
+          &:focus
+            border-color iptFocusBorderColor
+      .section
+        .folderTable
+          width 420px
+          margin 15px auto
+          &>div
+            border-bottom 1px solid borderColor
+            clearfix()
+            height 43px
+            line-height 33px
+            padding 5px 0
+            &:last-child
+              border-color transparent
+            .folderColor
+              float left
+              margin-left 10px
+              text-align center
+              width 44px
+            .folderName
+              float left
+              width 175px
+              overflow ellipsis
+            .folderControl
+              float right
+              width 125px
+              text-align center
+            &.folderHeader
+              .folderName
+                padding-left 25px
+            &.newFolder
+              .alert
+                display block
+                color infoTextColor
+                background-color infoBackgroundColor
+                font-size 14px
+                padding 15px 15px
+                width 330px
+                border-radius 5px
+                margin 0 auto
+                &.error
+                  color errorTextColor
+                  background-color errorBackgroundColor
+              .folderName input
+                height 33px
+                border 1px solid transparent
+                border-radius 5px
+                padding 0 10px
+                font-size 14px
+                outline none
+                width 150px
+                overflow ellipsis
+                &:hover
+                  border-color borderColor
+                &:focus
+                  border-color iptFocusBorderColor
+              .folderPublic select
+                height 33px
+                border 1px solid transparent
+                background-color white
+                outline none
+                display block
+                margin 0 auto
+                font-size 14px
+                &:hover
+                  border-color borderColor
+                &:focus
+                  border-color iptFocusBorderColor
+              .folderControl
+                button
+                  border none
+                  height 30px
+                  margin-top 1.5px
+                  font-size 14px
+                  background-color transparent
+                  color brandColor
+                  &:hover
+                    color lighten(brandColor, 10%)
+            &.FolderRow
+              .sortBtns
+                float left
+                display block
+                height 30px
+                width 30px
+                margin-top 1.5px
+                position absolute
+                button
+                  absolute left
+                  background-color transparent
+                  border none
+                  height 15px
+                  padding 0
+                  margin 0
+                  color stripBtnColor
+                  &:first-child
+                    top 0
+                  &:last-child
+                    top 15px
+                  &:hover
+                    color stripHoverBtnColor
+                  &:disabled
+                    color lighten(stripBtnColor, 10%)
+                    cursor not-allowed
+              .folderName input
+                height 33px
+                border 1px solid borderColor
+                border-radius 5px
+                padding 0 10px
+                font-size 14px
+                outline none
+                width 150px
+                &:focus
+                  border-color iptFocusBorderColor
+              .folderColor
+                .select
+                  height 33px
+                  width 33px
+                  border 1px solid borderColor
+                  background-color white
+                  outline none
+                  display block
+                  margin 0 auto
+                  font-size 14px
+                  border-radius 5px
+                  &:focus
+                    border-color iptFocusBorderColor
+                .options
+                  position absolute
+                  background-color white
+                  text-align left
+                  border 1px solid borderColor
+                  border-radius 5px
+                  padding 0 5px 5px
+                  margin-left 5px
+                  margin-top -34px
+                  clearfix()
+                  .label
+                    margin-left 5px
+                    line-height 22px
+                    font-size 12px
+                  button
+                    float left
+                    border none
+                    width 33px
+                    height 33px
+                    margin-right 5px
+                    border 1px solid transparent
+                    line-height 29px
+                    overflow hidden
+                    border-radius 5px
+                    background-color transparent
+                    outline none
+                    transition 0.1s
+                    &:hover
+                      border-color borderColor
+                    &.active
+                      border-color iptFocusBorderColor
+                      .FolderMark
+                        transform scale(1.4)
+              .folderControl
+                button
+                  border none
+                  height 30px
+                  width 30px
+                  margin-top 1.5px
+                  font-size 14px
+                  background-color transparent
+                  color stripBtnColor
+                  &:hover
+                    color stripHoverBtnColor
+                  &:disabled
+                    color lighten(stripBtnColor, 10%)
+                    cursor not-allowed
+              &.edit
+                .folderControl
+                  button
+                    width 60px
+                    &.primary
+                     color brandColor
+                     &:hover
+                      color lighten(brandColor, 10%)
+              &.delete
+                .folderDeleteLabel
+                  float left
+                  height 33px
+                  width 250px
+                  padding-left 15px
+                  overflow ellipsis
+                  strong
+                    font-size 16px
+                    color brandColor
+                .folderControl
+                  button
+                    width 60px
+                    &.primary
+                     color brandColor
+                     &:hover
+                      color lighten(brandColor, 10%)
+
+
+
+
+
+
+

browser/styles/main/HomeContainer/lib/Tutorial.styl

@@ -0,0 +1,132 @@
+
+slideBgColor0 = #2BAC8F
+slideBgColor1 = #F68F92
+slideBgColor2 = #D6AD56
+slideBgColor3 = #26969B
+slideBgColor4 = #00B493
+
+.Tutorial.modal
+  background-color slideBgColor0
+  color white
+  width 720px
+  height 480px
+  margin-top 75px
+  border-radius 5px
+  overflow hidden
+
+  .priorBtn, .nextBtn
+    font-size 72px
+    position absolute
+    background-color transparent
+    color transparentify(white, 50%)
+    transition 0.1s
+    border none
+    line-height 72px
+    padding 0
+    width 93px
+    height 72px
+    z-index 2
+    top 189px
+    &:hover
+      color white
+    &.hide
+      opacity 0
+  .priorBtn
+    left 15px
+  .nextBtn
+    right 15px
+  .title
+    text-align center
+    font-size 54px
+    margin 40px 0
+  .content
+    text-align center
+    font-size 22px
+    line-height 1.8
+  .dots
+    position absolute
+    left 0
+    right 0
+    bottom 25px
+    margin 0 auto
+    color gray
+    text-align center
+    z-index 2
+    &>i
+      transition 0.3s
+      &.active
+        color white
+  .slide
+    absolute top bottom left right
+    z-index 1
+  .slide0
+    background-color slideBgColor0
+    .content
+      margin-top 100px
+  .slide1
+    background-color slideBgColor1
+    .content
+      .markdown
+        background-color white
+        color textColor
+        width 480px
+        height 140px
+        margin 45px auto 0
+        clearfix()
+        text-align left
+        border-radius 5px
+        overflow hidden
+        .left
+          float left
+          width 240px
+          height 140px
+          box-sizing border-box
+          font-size 0.5em
+          padding 30px
+          border-right 1px solid borderColor
+        .right
+          width 240px
+          height 140px
+          float right
+          box-sizing border-box
+          padding: 28px 0 0 10px
+          font-size 0.45em
+          marked()
+          ul
+            padding-left 20px
+  .slide2
+    background-color slideBgColor2
+    .code
+      border-radius 5px
+      overflow hidden
+      text-align left
+      width 480px
+      heght 140px
+      margin 45px auto 0
+      font-size 14px
+      .ace_editor
+        height 140px
+  .slide3
+    background-color slideBgColor3
+    .title
+      margin-bottom 15px
+    .content
+      font-size 18px
+      &>img
+        margin-top 25px
+  .slide4
+    background-color slideBgColor4
+    .content
+      &>button
+        background-color white
+        color brandColor
+        font-size 60px
+        width 250px
+        height 250px
+        border-radius 125px
+        border none
+        transition 0.1s
+        &:hover
+          transform scale(1.2)
+
+

browser/styles/main/HomeContainer/lib/modal.styl

@@ -0,0 +1,21 @@
+modalZIndex= 1000
+modalBackColor = transparentify(black, 65%)
+
+.ModalBase
+  fixed top left bottom right
+  z-index modalZIndex
+  &.hide
+    display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
+  .modal
+    position relative
+    width 650px
+    margin 50px auto 0
+    z-index modalZIndex + 2
+    background-color white
+    padding 15px
+    color #666666
+    border-radius 5px

browser/styles/main/components/Select.styl

@@ -0,0 +1,259 @@
+/**
+ * React Select
+ * ============
+ * Created by Jed Watson and Joss Mackison for KeystoneJS, http://www.keystonejs.com/
+ * https://twitter.com/jedwatson https://twitter.com/jossmackison https://twitter.com/keystonejs
+ * MIT License: https://github.com/keystonejs/react-select
+*/
+.Select {
+  position: relative;
+}
+.Select-control {
+  position: relative;
+  overflow: hidden;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-color: #d9d9d9 #cccccc #b3b3b3;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #333333;
+  cursor: default;
+  outline: none;
+  padding: 8px 52px 8px 10px;
+  transition: all 200ms ease;
+}
+.Select-control:hover {
+  // box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+.is-searchable.is-open > .Select-control {
+  cursor: text;
+}
+.is-open > .Select-control {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background: #ffffff;
+  border-color: #b3b3b3 #cccccc #d9d9d9;
+}
+.is-open > .Select-control > .Select-arrow {
+  border-color: transparent transparent #999999;
+  border-width: 0 5px 5px;
+}
+.is-searchable.is-focused:not(.is-open) > .Select-control {
+  cursor: text;
+}
+.is-focused:not(.is-open) > .Select-control {
+  // border-color: #0088cc #0099e6 #0099e6;
+  // box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5);
+}
+.Select-placeholder {
+  color: #aaaaaa;
+  padding: 8px 52px 8px 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: -15px;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.has-value > .Select-control > .Select-placeholder {
+  color: #333333;
+}
+.Select-input > input {
+  cursor: default;
+  background: none transparent;
+  box-shadow: none;
+  height: auto;
+  border: 0 none;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  display: inline-block;
+  -webkit-appearance: none;
+}
+.is-focused .Select-input > input {
+  cursor: text;
+}
+.Select-control:not(.is-searchable) > .Select-input {
+  outline: none;
+}
+.Select-loading {
+  -webkit-animation: Select-animation-spin 400ms infinite linear;
+  -o-animation: Select-animation-spin 400ms infinite linear;
+  animation: Select-animation-spin 400ms infinite linear;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2px solid #cccccc;
+  border-right-color: #333333;
+  display: inline-block;
+  position: relative;
+  margin-top: -8px;
+  position: absolute;
+  right: 30px;
+  top: 50%;
+}
+.has-value > .Select-control > .Select-loading {
+  right: 46px;
+}
+.Select-clear {
+  color: #999999;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  padding: 6px 10px;
+  position: absolute;
+  right: 17px;
+  top: 0;
+}
+.Select-clear:hover {
+  color: #c0392b;
+}
+.Select-clear > span {
+  font-size: 1.1em;
+}
+.Select-arrow-zone {
+  content: " ";
+  display: block;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 30px;
+  cursor: pointer;
+}
+.Select-arrow {
+  border-color: #999999 transparent transparent;
+  border-style: solid;
+  border-width: 5px 5px 0;
+  content: " ";
+  display: block;
+  height: 0;
+  margin-top: -ceil(2.5px);
+  position: absolute;
+  right: 10px;
+  top: 14px;
+  width: 0;
+  cursor: pointer;
+}
+.Select-menu-outer {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-top-color: #e6e6e6;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  box-sizing: border-box;
+  margin-top: -1px;
+  max-height: 200px;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+}
+.Select-menu {
+  max-height: 198px;
+  overflow-y: auto;
+}
+.Select-option {
+  box-sizing: border-box;
+  color: #666666;
+  cursor: pointer;
+  display: block;
+  padding: 8px 10px;
+}
+.Select-option:last-child {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.Select-option.is-focused {
+  background-color: #f2f9fc;
+  color: #333333;
+}
+.Select-option.is-disabled {
+  color: #cccccc;
+  cursor: not-allowed;
+}
+.Select-noresults {
+  box-sizing: border-box;
+  color: #999999;
+  cursor: default;
+  display: block;
+  padding: 8px 10px;
+}
+.Select.is-multi .Select-control {
+  padding: 2px 52px 2px 3px;
+}
+.Select.is-multi .Select-input {
+  vertical-align: middle;
+  border: 1px solid transparent;
+  margin: 2px;
+  padding: 3px 0;
+}
+.Select-item {
+  background-color: brandColor;
+  border-radius: 2px;
+  // border: 1px solid #c9e6f2;
+  color: white;
+  display: inline-block;
+  font-size: 1em;
+  margin: 2px;
+}
+.Select-item-icon,
+.Select-item-label {
+  display: inline-block;
+  vertical-align: middle;
+}
+.Select-item-label {
+  cursor: default;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
+  padding: 3px 5px;
+}
+.Select-item-label .Select-item-label__a {
+  color: white;
+  cursor: white;
+}
+.Select-item-icon {
+  cursor: pointer;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+  border-right: 1px solid darken(brandColor, 10%)
+  padding: 2px 5px 4px;
+}
+.Select-item-icon:hover,
+.Select-item-icon:focus {
+  background-color: lighten(brandColor, 10%)
+}
+.Select-item-icon:active {
+  background-color: #c9e6f2;
+}
+.Select.is-multi.is-disabled .Select-item {
+  background-color: #f2f2f2;
+  border: 1px solid #d9d9d9;
+  color: #888888;
+}
+.Select.is-multi.is-disabled .Select-item-icon {
+  cursor: not-allowed;
+  border-right: 1px solid #d9d9d9;
+}
+.Select.is-multi.is-disabled .Select-item-icon:hover,
+.Select.is-multi.is-disabled .Select-item-icon:focus,
+.Select.is-multi.is-disabled .Select-item-icon:active {
+  background-color: #f2f2f2;
+}
+@keyframes Select-animation-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}
+@-webkit-keyframes Select-animation-spin {
+  to {
+    -webkit-transform: rotate(1turn);
+  }
+}

browser/styles/main/containers/LoginContainer.styl

@@ -0,0 +1,89 @@
+.LoginContainer, .SignupContainer
+  margin 0 auto
+  padding 105px 15px
+  box-sizing border-box
+  color inactiveTextColor
+  .logo
+    width 150px
+    height 150px
+    display block
+    margin 0 auto
+  .authNavigator
+    margin 15px 0 25px
+    a
+      font-size 1.5em
+      text-decoration none
+      color inactiveTextColor
+      &:hover, &.hover, &:active, &.active
+        color brandColor
+  .socialControl
+    text-align center
+    margin 25px 0
+    p
+      margin-bottom 25px
+    .facebookBtn, .githubBtn
+      margin 0 45px
+      width 50px
+      height 50px
+      line-height 50px
+      font-size 25px
+      text-align center
+      background-image none
+      color white
+      border none
+      border-radius 25px
+      cursor pointer
+    .facebookBtn
+      background-color facebookColor
+      &:hover, &.hover
+        background-color lighten(facebookColor, 25%)
+    .githubBtn
+      background-color githubBtn
+      font-size 30px
+      line-height 30px
+      &:hover, &.hover
+        background-color lighten(githubBtn, 25%)
+  .divider
+    .dividerLabel
+      text-align center
+      position relative
+      top -27px
+      font-size 1.3em
+      background-color backgroundColor
+      margin 0 auto
+      width 50px
+  form
+    width 400px
+    margin 0 auto 45px
+    .alertInfo, .alertError
+      margin-top 15px
+      margin-bottom 15px
+      padding 10px
+      border-radius 5px
+      line-height 1.6
+      text-align center
+    .alertInfo
+      alertInfo()
+    .alertError
+      alertError()
+    div.formField
+      input
+        stripInput()
+        height 33px
+        width 100%
+        margin-bottom 10px
+        text-align center
+        font-size 1.1em
+      &:last-child
+        margin-top 15px
+      button.logInButton
+        btnPrimary()
+        height 44px
+        border-radius 22px
+        display block
+        width 200px
+        font-size 1em
+        margin 0 auto
+  p.alert
+    text-align center
+    font-size 0.8em

browser/styles/main/containers/PlanetContainer.styl

@@ -0,0 +1,332 @@
+navigationWidth= 200px
+articleListWidth= 275px
+
+.PlanetContainer
+  absolute top bottom right left
+  .tags
+    white-space: nowrap;
+    overflow-x: auto;
+    a
+      margin 0 2px
+      text-decoration underline
+      cursor pointer
+      font-size 0.95em
+      &.noTag
+        color inactiveTextColor
+        font-size 0.8em
+
+.PlanetHeader
+  absolute left right top
+  overflow-y hidden
+  height 55px
+  background-color white
+  border-bottom solid 1px borderColor
+  box-sizing border-box
+  padding 5px 15px
+  clearfix()
+  .headerLabel
+    noSelect()
+    absolute top left bottom
+    overflow hidden
+    display inline-block
+    width navigationWidth
+    .userName
+      position absolute
+      left 15px
+      top 30px
+      width 140px
+      font-size 1em
+      color textColor
+      text-decoration none
+      &:hover
+        color darken(lightButtonColor, 50%)
+        text-decoration underline
+    .planetName
+      position absolute
+      top 5px
+      left 10px
+      width 145px
+      font-size 1.6em
+      color brandColor
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+      &:hover
+        color darken(brandBorderColor, 30%)
+    .private
+      position absolute
+      top 12px
+      right 38px
+      width 33px
+      height 33px
+      line-height 33px
+      text-align center
+      color inactiveColor
+      &:hover
+        color textColor
+      .tooltip
+        tooltip()
+        margin-left -30px
+      &:hover .tooltip
+        opacity 1
+
+
+    .planetSettingButton
+      position absolute
+      top 15px
+      right 5px
+      font-size 0.8em
+      btnDefault()
+      box-sizing border-box
+      circle()
+      width 26px
+      height 26px
+      text-align center
+      cursor pointer
+      transition 0.1s
+      &:focus, &.focus
+        outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -36px
+      &:hover .tooltip
+        opacity 1
+
+  .headerControl
+    noSelect()
+    absolute top bottom right
+    left navigationWidth
+    .searchInput
+      display block
+      position absolute
+      top 12px
+      left 0
+      input
+        padding-left 32px
+        width 300px
+      .fa
+        position absolute
+        top 8px
+        left 12px
+        color inactiveTextColor
+    .refreshButton
+      display block
+      position absolute
+      top 15px
+      right 55px
+      width 26px
+      height 26px
+      font-size 0.8em
+      btnDefault()
+      circle()
+      text-align center
+      cursor pointer
+      transition 0.1s
+      &:focus, &.focus
+        outline none
+      .tooltip
+        tooltip()
+        margin-top 11px
+        margin-left -39px
+      &:hover .tooltip
+        opacity 1
+    .logo
+      display block
+      position absolute
+      top 4px
+      right 10px
+      cursor pointer
+      img
+        transition 0.1s
+        opacity 0.9
+      &:hover img, &:hover .tooltip
+        opacity 1
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left -67px
+
+
+.PlanetNavigator
+  absolute bottom left
+  noSelect()
+  top 55px
+  width navigationWidth
+  border-right solid 1px highlightenBorderColor
+  padding 10px
+  box-sizing border-box
+  .launchButton
+    border-radius 22px
+    font-size 1.1em
+  nav
+    a
+      display block
+      box-sizing border-box
+      padding 15px 15px
+      margin 10px 0
+      border-radius 10px
+      text-decoration none
+      background-color transparent
+      color textColor
+      cursor pointer
+      transition 0.1s
+      btnDefault()
+      border none
+
+.PlanetArticleList
+  absolute bottom right
+  left navigationWidth
+  top 55px
+  width articleListWidth
+  border-right solid 1px highlightenBorderColor
+
+  &>ul
+    absolute top bottom left right
+    overflow-y auto
+    li
+      .articleItem
+        noSelect()
+        border solid 2px transparent
+        position relative
+        height 94px
+        width 100%
+        cursor pointer
+        transition 0.1s
+        .itemLeft
+          position absolute
+          top 4px
+          bottom 4px
+          width 38px
+          padding 3px 0 3px 3px
+          text-align center
+          .profileImage
+            margin-bottom 5px
+            circle()
+          .fa
+            line-height 25px
+        .itemRight
+          position absolute
+          top 4px
+          bottom 4px
+          right 2px
+          left 40px
+          overflow-x hidden
+          padding 3px 10px 3px 3px
+          .itemInfo
+            margin 5px 0 13px
+            color lighten(textColor, 25%)
+            font-size 0.7em
+            .userProfileName
+              color brandColor
+              font-size 1.2em
+          .description
+            line-height 120%
+            margin-bottom 10px
+            font-size 1em
+            overflow-x hidden
+            white-space nowrap
+            text-overflow ellipsis
+          .tags
+            position absolute
+            bottom 5px
+            font-size 0.9em
+        &:hover, &.hover
+          background-color hoverBackgroundColor
+          &:active, &.active
+            background-color white
+        &:active, &.active
+          border-color brandBorderColor
+      .divider
+        border-bottom solid 1px borderColor
+
+.PlanetArticleDetail
+  absolute right bottom
+  top 55px
+  left navigationWidth + articleListWidth
+  .detailHeader
+    border solid 2px transparent
+    position relative
+    height 105px
+    width 100%
+    transition 0.1s
+    .itemLeft
+      position absolute
+      top 7px
+      bottom 4px
+      width 38px
+      padding 3px 0 3px 3px
+      text-align center
+      .profileImage
+        margin-bottom 5px
+        circle()
+      .fa
+        line-height 25px
+    .itemRight
+      position absolute
+      top 7px
+      bottom 4px
+      right 2px
+      left 40px
+      overflow-x hidden
+      padding 3px 10px 3px 3px
+      .itemInfo
+        margin 5px 0 13px
+        color lighten(textColor, 25%)
+        font-size 0.7em
+        .userProfileName
+          color brandColor
+          font-size 1.2em
+      .description
+        line-height 120%
+        margin-bottom 10px
+        font-size 1em
+        overflow-x auto
+        white-space nowrap
+      .tags
+        position absolute
+        bottom 5px
+        font-size 0.9em
+    .itemControl
+      position absolute
+      z-index 1
+      top 2px
+      right 2px
+      .deleteButton, .editButton
+        btnDefault()
+        text-align center
+        width 33px
+        height 33px
+        border-radius 16.5px
+        font-size 15px
+        margin 0 3px
+        .tooltip
+          tooltip()
+          margin-top 10px
+        &:hover .tooltip
+          opacity 1
+      .editButton .tooltip
+        margin-left -12px
+      .deleteButton .tooltip
+        margin-left -26px
+  .detailBody
+    absolute left right bottom
+    top 105px
+    .content
+      position absolute
+      top 5px
+      bottom 5px
+      left 2px
+      right 2px
+      box-sizing border-box
+      padding 5px
+      border-top solid 1px borderColor
+  &.noteDetail
+    .detailBody .content
+      overflow-x hidden
+      overflow-y auto
+      marked()
+  &.codeDetail
+    .detailBody .content
+      .ace_editor
+        absolute left right top bottom

browser/styles/main/containers/UserContainer.styl

@@ -0,0 +1,123 @@
+userNavigatorWidth = 200px
+userNavigatorBgColor = #333
+userNavigatorColor = #DDD
+userNavigatorProfileNameColor = brandColor
+userNavigatorBorderColor = #666
+
+userContentBgColor = #E6E6E6
+
+.UserContainer
+  absolute top bottom right
+  left 60px
+  .content
+    absolute top bottom right
+    left userNavigatorWidth
+    background-color userContentBgColor
+  .UserNavigator
+    absolute left top bottom
+    width userNavigatorWidth
+    background-color userNavigatorBgColor
+    color userNavigatorColor
+    noSelect()
+    &>.profile
+      height 60px
+      padding 10px 15px 0
+      box-sizing border-box
+      position relative
+      border-bottom solid 1px userNavigatorBorderColor
+      cursor pointer
+      &>.profileName
+        color userNavigatorProfileNameColor
+        font-size 22px
+        cursor pointer
+        transition 0.1s
+      &>.name
+        padding 5px 10px
+        font-size 14px
+        color userNavigatorColor
+        cursor pointer
+        transition 0.1s
+      &>.dropdownIcon
+        position absolute
+        top 20px
+        right 25px
+        float right
+        width 20px
+        height 20px
+        line-height 20px
+        font-size 8px
+        border solid 1px userNavigatorColor
+        border-radius 12.5px
+        text-align center
+        transition 0.1s
+      &:hover
+        &>.profileName
+          color lighten(brandColor, 10%)
+        &>.name
+          color white
+        &>.dropdownIcon
+          border-color white
+        &:active
+          &>.dropdownIcon
+            background-color brandColor
+            border-color brandColor
+    &>.control
+      padding 15px 15px
+      &>.newPostButton
+        background-color brandColor
+        color white
+        height 44px
+        width 100%
+        border none
+        border-radius 5px
+        font-size 16px
+        font-weight 600
+        transition 0.1s
+        &:hover
+          background-color lighten(brandColor, 10%)
+    &>.menu
+      absolute left right bottom
+      top 134px
+      padding 15px 0
+      overflow auto
+      &>.menuGruop
+        &>.label
+          border-bottom 1px solid userNavigatorBorderColor
+          padding 10px 15px
+          font-size 18px
+          margin-bottom 10px
+          &>.plusButton
+            float right
+            width 20px
+            height 20px
+            margin-top -2.5px
+            margin-right -5px
+            line-height 15px
+            font-size 8px
+            border solid 1px userNavigatorColor
+            border-radius 10px
+            background-color transparent
+            text-align center
+            color userNavigatorColor
+            &:hover
+              border-color white
+              color white
+              &:active
+                background-color brandColor
+                border-color brandColor
+      &>.folders
+        .folderButton
+          padding 10px 25px
+          width 100%
+          background-color transparent
+          border none
+          font-size 14px
+          color userNavigatorColor
+          transition 0.1s
+          text-align left
+          &:hover
+            background-color transparentify(white, 20%)
+            color white
+          &.active
+            background-color brandColor
+            color white

browser/styles/main/index.styl

@@ -0,0 +1,128 @@
+@import '../../../node_modules/nib/lib/nib'
+@import '../vars'
+@import '../mixins/*'
+global-reset()
+@import '../shared/*'
+@import './components/*'
+@import './containers/*'
+@import './HomeContainer'
+
+*
+  -webkit-app-region no-drag
+  -webkit-user-select none
+
+html, body
+  width 100%
+  height 100%
+  overflow hidden
+
+body
+  font-family "Lato"
+  color textColor
+  font-size fontSize
+  font-weight 400
+
+button, input, select
+  font-family "Lato"
+
+div, span, a, button, input, textarea
+  box-sizing border-box
+
+a
+  color brandColor
+  &:hover
+    color darken(brandColor, 15%)
+  &:visited
+    color brandColor
+
+hr
+  border-top none
+  border-bottom solid 1px borderColor
+  margin 15px 0
+
+button
+  font-weight 400
+  cursor pointer
+  &:focus, &.focus
+    outline none
+
+.noSelect
+  noSelect()
+
+.text-center
+  text-align center
+
+.form-group
+  margin-bottom 15px
+  &>label
+    display block
+    margin-bottom 5px
+
+.block-input, .inline-input
+  border solid 1px borderColor
+  padding 0 10px
+  font-size 1em
+  height 33px
+  border-radius 5px
+  box-sizing border-box
+  &:focus, &.focus
+    border solid 1px brandBorderColor
+    outline none
+  &.circleInput
+    border-radius 16.5px
+
+.block-input
+  display block
+  width 100%
+
+.inline-input
+  display inline-block
+  margin-right 5px
+
+.relative
+  position relative
+
+textarea.block-input
+  resize vertical
+  height 125px
+  border-radius 5px
+  padding 5px 10px
+
+#content
+  fullsize()
+
+.Main
+  .appUpdateButton
+    position fixed
+    z-index 2000
+    bottom 5px
+    right 53px
+    padding 10px 15px
+    border none
+    border-radius 5px
+    background-color brandColor
+    color white
+    opacity 0.7
+    &:hover
+      opacity 1
+      background-color lighten(brandColor, 10%)
+  .contactButton
+    position fixed
+    z-index 2000
+    bottom 5px
+    right 5px
+    padding 10px 15px
+    border none
+    border-radius 5px
+    background-color brandColor
+    color white
+    opacity 0.7
+    &:hover
+      opacity 1
+      background-color lighten(brandColor, 10%)
+    .tooltip
+      tooltip()
+      margin-top -22px
+      margin-left -107px
+    &:hover .tooltip
+      opacity 1

browser/styles/mixins/alert.styl

@@ -0,0 +1,11 @@
+alertSuccess()
+  background-color successBackgroundColor
+  color successTextColor
+
+alertError()
+  background-color errorBackgroundColor
+  color errorTextColor
+
+alertInfo()
+  background-color infoBackgroundColor
+  color infoTextColor

browser/styles/mixins/btn.styl

@@ -0,0 +1,40 @@
+btnDefault()
+  border-style solid
+  border-width 1px
+  border-color lightButtonColor
+  background-color transparent
+  color lightButtonColor
+
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 50%)
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white
+  &:disabled, &.disabled
+    opacity 0.6
+
+btnPrimary()
+  border-style solid
+  border-width 1px
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white
+  &:disabled, &.disabled
+    opacity 0.6
+
+btnStripDefault()
+  border none
+  background-color transparent
+  color lightButtonColor
+  &:hover, &.hover, &:focus, &.focus
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    color brandColor

browser/styles/mixins/circle.styl

@@ -0,0 +1,3 @@
+circle()
+  border-radius 50%
+  overflow hidden

browser/styles/mixins/fullsize.styl

@@ -0,0 +1,6 @@
+fullsize()
+  position absolute
+  top 0
+  left 0
+  right 0
+  bottom 0

browser/styles/mixins/input.styl

@@ -0,0 +1,18 @@
+stripInput()
+  border none
+  border-bottom 1px solid borderColor
+  padding 5px 15px
+  transition 0.1s
+  font-size 14px
+  &:focus, &.focus
+    border-bottom 1px solid brandBorderColor
+    outline none
+
+borderInput()
+  border solid 1px borderColor
+  padding 5px 15px
+  transition 0.1s
+  font-size 14px
+  &:focus, &.focus
+    border-color brandBorderColor
+    outline none

browser/styles/mixins/marked.styl

@@ -0,0 +1,109 @@
+marked()
+  h1, h2, h3, h4, h5, h6, p
+    &:first-child
+      margin-top 0
+  hr
+    border-top none
+    border-bottom solid 1px borderColor
+    margin 15px 0
+  h1
+    font-size 2em
+    border-bottom solid 2px borderColor
+    margin 0.33em auto 0.67em
+  h2
+    font-size 1.5em
+    margin 0.42em auto 0.83em
+  h3
+    font-size 1.17em
+    margin 0.5em auto 1em
+  h4
+    font-size 1em
+    margin 0.67em auto 1.33em
+  h5
+    font-size 0.83em
+    margin 0.84em auto 1.67em
+  h6
+    font-size 0.67em
+    margin 1.16em auto 2.33em
+  h1, h2, h3, h4, h5, h6
+    font-weight 700
+    line-height 1.8em
+  p
+    line-height 1.8em
+    margin 15px 0 25px
+  img
+    max-width 100%
+  strong
+    font-weight bold
+  em
+    font-style italic
+  s
+    text-decoration line-through
+  blockquote
+    border-left solid 4px brandBorderColor
+    margin 15px 0 25px
+    padding 0 25px
+  ul
+    list-style-type disc
+    padding-left 35px
+    margin-bottom 35px
+    li
+      display list-item
+      line-height 1.8em
+    &>li>ul
+      list-style-type circle
+      &>li>ul
+        list-style-type square
+  ol
+    list-style-type decimal
+    padding-left 35px
+    margin-bottom 35px
+    li
+      display list-item
+      line-height 1.8em
+  code
+    font-family monospace
+    padding 2px 4px
+    border solid 1px borderColor
+    border-radius 4px
+    font-size 0.9em
+    color black
+    text-decoration none
+    background-color #F6F6F6
+  pre
+    padding 5px
+    border solid 1px borderColor
+    border-radius 5px
+    overflow-x auto
+    margin 15px 0 25px
+    background-color #F6F6F6
+    &>code
+      padding 0
+      border none
+      border-radius 0
+      color black
+  table
+    width 100%
+    margin 15px 0 25px
+    thead
+      tr
+        background-color tableHeadBgColor
+      th
+        border-style solid
+        padding 15px 5px
+        border-width 1px 0 2px 1px
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor
+    tbody
+      tr:nth-child(2n + 1)
+        background-color tableOddBgColor
+      tr:nth-child(2n)
+        background-color tableEvenBgColor
+      td
+        border-style solid
+        padding 15px 5px
+        border-width 0 0 1px 1px
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor

browser/styles/mixins/tooltip.styl

@@ -0,0 +1,14 @@
+tooltip()
+  position fixed
+  z-index popupZIndex
+  background-color transparentify(invBackgroundColor, 80%)
+  color invTextColor
+  padding 6px 15px
+  font-size 12px
+  font-weight normal
+  line-height 20px
+  white-space nowrap
+  opacity 0
+  transition 0.1s
+  pointer-events none
+

browser/styles/mixins/util.styl

@@ -0,0 +1,6 @@
+borderBox()
+  box-sizing border-box
+
+noSelect()
+  -webkit-user-select none
+  cursor default

browser/styles/shared/btn.styl

@@ -0,0 +1,55 @@
+.btn-primary, .btn-default
+  border-style solid
+  border-width 1px
+  background-image none
+  height 44px
+  padding 0 15px
+  border-radius 5px
+  box-sizing border-box
+  font-size 1em
+  font-family 'Lato'
+  font-weight 400
+  transition 0.1s
+  cursor pointer
+  margin 0 5px
+
+.btn-block
+  display block
+  width 100%
+  margin 0 auto
+
+.btn-square
+  display inline-block
+  width 44px
+  padding 0
+  border-width 1px
+
+.btn-sm
+  height 32px
+  border-radius 16px
+  &.btn-square
+    width 32px
+
+.btn-primary
+  border-color brandBorderColor
+  background-color transparent
+  color brandColor
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 30%)
+    color darken(brandColor, 30%)
+  &:active, &.active
+    background-color brandColor
+    color white
+
+.btn-default
+  border-color lightButtonColor
+  background-color transparent
+  color lightButtonColor
+
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 50%)
+    color darken(lightButtonColor, 50%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white

browser/styles/shared/modal.styl

@@ -0,0 +1,390 @@
+// .ModalBase
+//   fixed top left bottom right
+//   z-index modalZIndex
+//   &.hide
+//     display none
+//   .modalBack
+//     absolute top left bottom right
+//     background-color modalBackColor
+//     z-index modalZIndex + 1
+//   .modal
+//     position relative
+//     width 650px
+//     margin 50px auto 0
+//     z-index modalZIndex + 2
+//     box-shadow popupShadow
+//     background-color white
+//     border-radius 10px
+//     padding 15px
+//     .modal-header
+//       border-bottom solid 1px borderColor
+//       margin-bottom 10px
+//       h1
+//         padding 10px 0 15px
+//         font-size 1.5em
+//     .modal-body
+//       p
+//         margin-bottom 10px
+//     .modal-footer
+//       clearfix()
+//       border-top solid 1px borderColor
+//       padding-top 10px
+//       .modal-control
+//         float right
+//
+//   .sideNavModal
+//     height 500px
+//     .leftPane
+//       absolute top bottom left
+//       width 175px
+//       padding 20px
+//       border-right solid 1px borderColor
+//       .modalLabel
+//         font-size 1.5em
+//         margin-top 25px
+//         margin-bottom 35px
+//         color brandColor
+//       .tabList button
+//         btnStripDefault()
+//         display block
+//         width 100%
+//         font-size 1.1em
+//         padding 10px 5px
+//         margin-bottom 15px
+//         text-align left
+//     .rightPane
+//       absolute top bottom right
+//       left 175px
+//       padding 15px
+//       overflow-y auto
+//     .tab
+//       padding-top 45px
+//       .formField
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         label
+//           width 30%
+//           display block
+//           line-height 33px
+//           float left
+//         input
+//           width 70%
+//           display block
+//           borderInput()
+//           height 33px
+//           font-size 1em
+//           border-radius 5px
+//           float left
+//       .formRadioField
+//         margin-bottom 15px
+//         input
+//           margin-left 25px
+//       .formConfirm
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         button
+//           float right
+//           btnDefault()
+//           padding 10px 15px
+//           border-radius 5px
+//           font-size 1em
+//           margin-left 5px
+//         .alertInfo, .alertSuccess, .alertError
+//           float right
+//           padding 12px 10px
+//           border-radius 5px
+//           width 320px
+//           font-size 1em
+//           overflow-x hidden
+//           white-space nowrap
+//           transition 0.1s
+//           &.hide
+//             width 0
+//             padding 12px 0
+//         .alertInfo
+//           alertInfo()
+//         .alertSuccess
+//           alertSuccess()
+//         .alertError
+//           alertError()
+//   .PreferencesModal
+//     .settingsTab
+//       .categoryLabel
+//         font-size 1.5em
+//         margin-bottom 25px
+//       .example
+//         marked()
+//     .aboutTab
+//       padding-top 30px
+//       .about1
+//         margin-bottom 25px
+//         .logo
+//           display block
+//           margin 0 auto
+//         .appInfo
+//           font-size 1.5em
+//           text-align center
+//       .about2
+//         width 200px
+//         margin 0 auto
+//         .externalLabel
+//           font-size 1.2em
+//           margin-bottom 15px
+//         .externalList
+//           li
+//             margin-bottom 15px
+//   .PlanetSettingModal
+//     .planetDeleteTab
+//       padding-top 65px
+//       p
+//         margin-bottom 25px
+//         strong
+//           color brandColor
+//           font-size 1.1em
+//       input
+//         borderInput()
+//         margin-right 5px
+//         height 33px
+//         font-size 1em
+//         border-radius 10px
+//       .formConfirm
+//         position relative
+//         clearfix()
+//         margin-bottom 15px
+//         button
+//           float right
+//           btnDefault()
+//           padding 10px 15px
+//           border-radius 5px
+//           font-size 1em
+//           margin-left 5px
+//         .alertInfo, .alertSuccess, .alertError
+//           float right
+//           padding 12px 10px
+//           border-radius 5px
+//           width 320px
+//           font-size 1em
+//           overflow-x hidden
+//           white-space nowrap
+//           transition 0.1s
+//           &.hide
+//             width 0
+//             padding 12px 0
+//         .alertInfo
+//           alertInfo()
+//         .alertSuccess
+//           alertSuccess()
+//         .alertError
+//           alertError()
+//   .TeamSettingsModal
+//     .membersTab
+//       .memberTable
+//         width 100%
+//         margin-bottom 25px
+//         th
+//           border-bottom solid 2px borderColor
+//         td
+//           border-bottom solid 1px borderColor
+//           height 38px
+//           button
+//             btnDefault()
+//             padding 5px
+//             border-radius 5px
+//           .roleSelect
+//             height 33px
+//             border solid 1px borderColor
+//             background-color backgroundColor
+//         th, td
+//           padding 5px 0
+//       .addMemberForm
+//         .formLabel
+//           margin-bottom 5px
+//         .formGroup
+//           clearfix()
+//           .userNameSelect
+//             display block
+//             width 200px
+//             margin-right 5px
+//             float left
+//           .roleSelect
+//             display block
+//             height 33px
+//             border solid 1px borderColor
+//             background-color backgroundColor
+//             float left
+//             margin-right 5px
+//           .confirmButton
+//             display block
+//             height 33px
+//             btnDefault()
+//             border-radius 5px
+//             float left
+//
+//   .LaunchModal
+//     .modal-tab
+//       text-align center
+//       margin-bottom 10px
+//       .btn-primary, .btn-default
+//         margin 0
+//         border-radius 0
+//         border-width 1px
+//         width 150px
+//         border-radius 0
+//         &:nth-child(1)
+//           border-right solid 1px borderColor
+//           border-top-left-radius 5px
+//           border-bottom-left-radius 5px
+//         &:nth-child(2)
+//           border-left none
+//           border-top-right-radius 5px
+//           border-bottom-right-radius 5px
+//   .Select
+//     .Select-control
+//       border-color borderColor
+//     &.is-focused
+//       .Select-control
+//         border-color brandBorderColor
+//     .Select-menu-outer
+//       border-color borderColor
+//   .ace_editor
+//     border-radius 5px
+//     border solid 1px borderColor
+//   .CodeForm, .NoteForm
+//     .form-group
+//       margin-bottom 10px
+//   .CodeForm
+//     textarea.codeDescription
+//       height 75px
+//       font-size 0.9em
+//       margin-bottom 10px
+//     .modeSelect.Select
+//       display inline-block
+//       width 200px
+//       height 37px
+//       .Select-control
+//         height 37px
+//     .ace_editor
+//       height 258px
+//   .NoteForm
+//     .ace_editor
+//       height 358px
+//     .previewMode
+//       absolute top right
+//       font-size 0.8em
+//       line-height 24px
+//       padding 5 15px
+//       background-color transparentify(invBackgroundColor, 0.2)
+//       color invTextColor
+//       border-top-right-radius 5px
+//   .marked
+//     height 360px
+//     overflow-x hidden
+//     overflow-y auto
+//     box-sizing border-box
+//     padding 5px
+//     border solid 1px borderColor
+//     border-radius 5px
+//     marked()
+//
+//
+//   .PlanetCreateModal.modal, .TeamCreateModal.modal, .AddMemberModal.modal
+//     padding 60px 0
+//     .nameInput
+//       width 80%
+//       font-size 1.3em
+//       margin 25px auto 15px
+//       text-align center
+//     .userNameSelect
+//       width 80%
+//       font-size 1.3em
+//       margin 35px auto
+//       text-align center
+//     .formField
+//       text-align center
+//       margin 0 auto 25px
+//       select
+//         display inline-block
+//         width 150px
+//         height 33px
+//         border solid 1px borderColor
+//         background-color white
+//         padding 0 10px
+//         margin 0 15px
+//     .submitButton
+//       display block
+//       margin 0 auto
+//       box-sizing border-box
+//       width 55px
+//       height 55px
+//       circle()
+//       btnPrimary()
+//     .errorAlert
+//       alertError()
+//       padding 12px 10px
+//       border-radius 5px
+//       text-align center
+//       display block
+//       width 360px
+//       margin 0 auto 15px
+//
+//   .ContactModal
+//     padding 15px
+//     .contactForm
+//       .formField
+//         width 100%
+//         margin-bottom 10px
+//         input, textarea
+//           display block
+//           width 100%
+//           borderInput()
+//           border-radius 5px
+//         input
+//           height 33px
+//           font-size 1em
+//         textarea
+//           height 175px
+//           font-size 1em
+//       .formControl
+//         clearfix()
+//         button
+//           float right
+//           btnDefault()
+//           height 44px
+//           padding 0 15px
+//           border-radius 5px
+//           margin-left 5px
+//           font-size 1em
+//         button.sendButton
+//           btnPrimary()
+//     .confirmation
+//       .confirmationMessage
+//         padding 35px 0
+//         text-align center
+//         font-size 1.1em
+//       .doneButton
+//         btnDefault()
+//         height 44px
+//         padding 0 35px
+//         border-radius 5px
+//         display block
+//         margin 0 auto 25px
+//
+//   .LogoutModal
+//     padding 65px 0 45px
+//     width 350px
+//     .messageLabel
+//       text-align center
+//       font-size 1.1em
+//       margin-bottom 35px
+//     .formControl
+//       text-align center
+//       button
+//         btnDefault()
+//         border-radius 5px
+//         height 44px
+//         margin 15px 5px
+//         padding 0 15px
+//       button.logoutButton
+//         btnPrimary()

browser/styles/vars.styl

@@ -0,0 +1,45 @@
+borderColor = #D0D0D0 // using
+highlightenBorderColor = darken(borderColor, 20%)
+invBorderColor = #404849
+brandBorderColor = #3FB399
+
+buttonBorderColor = #4C4C4C
+
+lightButtonColor = #898989
+
+hoverBackgroundColor= transparentify(#444, 4%) // using
+
+inactiveTextColor = #888 // using
+textColor = #4D4D4D // using
+backgroundColor= white
+fontSize= 14px // using
+
+shadowColor= #C5C5C5
+
+invBackgroundColor = #4C4C4C
+invTextColor = white
+
+btnColor = #888
+btnHighlightenColor = #000
+
+brandColor = #2BAC8F
+
+popupShadow = 0 0 5px 0 #888
+
+
+tableHeadBgColor = white
+tableOddBgColor = #F9F9F9
+tableEvenBgColor = white
+
+facebookColor= #3b5998
+githubBtn= #201F1F
+
+// using
+successBackgroundColor= #E0F0D9
+successTextColor= #3E753F
+errorBackgroundColor= #F2DEDE
+errorTextColor= #A64444
+infoBackgroundColor= #D9EDF7
+infoTextColor= #34708E
+
+popupZIndex= 500

build.config.js

@@ -1,44 +0,0 @@
-module.exports = {
-  vendors: [
-    {
-      name: 'ace',
-      src: 'node_modules/@rokt33r/ace-builds/src/**/*'
-    },
-    {
-      name: 'angular',
-      src: 'node_modules/angular/angular.js'
-    },
-    {
-      name: 'angular-bootstrap',
-      src: 'node_modules/angular-bootstrap/dist/ui-bootstrap-tpls.js'
-    },
-    {
-      name: 'angular-sanitize',
-      src: 'node_modules/angular-sanitize/angular-sanitize.js'
-    },
-    {
-      name: 'angular-ui-router',
-      src: 'node_modules/angular-ui-router/build/angular-ui-router.js'
-    },
-    {
-      name: 'ui-select',
-      src: 'node_modules/ui-select/dist/select.js'
-    },
-    {
-      name: 'satellizer',
-      src: 'node_modules/satellizer/satellizer.js'
-    },
-    {
-      name: 'angular-md5',
-      src: 'node_modules/angular-md5/angular-md5.js'
-    },
-    {
-      name: 'moment',
-      src: 'node_modules/moment/moment.js'
-    },
-    {
-      name: 'angular-hotkeys',
-      src: 'node_modules/angular-hotkeys/build/hotkeys.js'
-    }
-  ]
-}

config.js

@@ -0,0 +1,3 @@
+// export const API_URL = 'http://localhost:8000/'
+export const API_URL = 'http://boost-api4.elasticbeanstalk.com/'
+// export API_URL 'https://api2.b00st.io/'

docs/events.md

@@ -1,7 +0,0 @@
-# Event List
-
-|name|Description|Delivery|
-|----|----|----|
-|userSignIn|a user signed in||
-|userSignOut|a user signed out||
-|snippetUpdated|snippet has been updated or created|snippet|

electron_src/popup/index.html

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html ng-app="codexen.popup">
-  <head>
-    <title>
-      CodeXen App
-    </title>
-
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
-    <meta name="description" content="CodeXen - Short code storage service">
-
-    <link rel="stylesheet" href="../../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
-    <link rel="stylesheet" href="../../main.css" media="screen" title="no title" charset="utf-8">
-  </head>
-  <body class="popup-body" ng-controller="PopUpController">
-
-    <div class="search-block">
-      <input ng-change="filterList(searchNeedle)" search-input id="search-input" type="text" class="form-control" ng-model="searchNeedle" ng-change="refreshResult">
-    </div>
-
-    <div class="result-block row-fluid">
-      <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
-      </ul>
-
-      <div class="right-pane">
-        <div class="result-detail-control">
-          <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <!-- <button ng-click="editSnippet(selectedItem.id)" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button> -->
-          <!-- <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
-        </div>
-        <div id="aceView" class="result-detail-content"
-          ui-ace="{
-            showGutter: false,
-            useWrapMode: true,
-            mode:selectedItem.mode.toLowerCase(),
-            onLoad: aceLoaded,
-            theme: 'solarized_dark'
-          }"
-
-          readonly
-          ng-model="selectedItem.content"
-        ></div>
-      </div>
-    </div>
-    <script src="../../vendor/ace.js"></script>
-    <script src="../../vendor/angular.js" charset="utf-8"></script>
-    <script src="../../directives/ui-ace.js"></script>
-    <script src="../../vendor/satellizer.js"></script>
-    <script src="../../vendor/hotkeys.js" charset="utf-8"></script>
-    <script src="popup.js" charset="utf-8"></script>
-    <script src="services/snippet.js" charset="utf-8"></script>
-  </body>
-</html>

electron_src/popup/popup.js

@@ -1,190 +0,0 @@
-/* global angular */
-
-var remote = require('remote')
-var ipc = require('ipc')
-
-var resultList = document.getElementById('result-list')
-
-angular.module('codexen.popup', [
-  'ui.ace',
-  'satellizer',
-  'cfp.hotkeys'
-])
-.controller('PopUpController', function ($scope, Snippet, $auth, $window, hotkeys, $document, $filter) {
-  // Setup Events
-  remote.getCurrentWindow().on('focus', function () {
-    if (!$auth.isAuthenticated()) return hidePopUp()
-    $scope.$apply(focusSearchInput)
-    loadSnippets()
-  })
-
-  hotkeys.bindTo($scope)
-    .add('down', function (e) {
-      nextSnippet()
-      e.preventDefault()
-    })
-    .add('up', function (e) {
-      priorSnippet()
-      e.preventDefault()
-    })
-    .add('right', function (e) {
-      e.preventDefault()
-    })
-    .add('left', function (e) {
-      e.preventDefault()
-    })
-    .add('esc', function (e) {
-      hidePopUp()
-    })
-    .add('shift+tab', function (e) {
-      e.preventDefault()
-    })
-    .add('tab', function (e) {
-      e.preventDefault()
-    })
-    .add('enter', function (e) {
-      writeCode($scope.selectedItem.content)
-      e.preventDefault()
-    })
-
-  $scope.aceLoaded = function (editor) {
-    editor.commands.addCommand({
-      name: 'escape',
-      bindKey: {win: 'esc', mac: 'esc'},
-      exec: function (editor) {
-        editor.blur()
-        $scope.$apply()
-      },
-      readOnly: true
-    })
-  }
-
-  $scope.$on('nextSnippetRequested', function (e) {
-    e.stopPropagation()
-    nextSnippet()
-  })
-
-  $scope.$on('priorSnippetRequested', function (e) {
-    e.stopPropagation()
-    priorSnippet()
-  })
-
-  $scope.$on('snippetSubmitted', function (e) {
-    if ($scope.filteredSnippets.length > 0) ipc.send('writeCode', $scope.selectedItem.content)
-    else console.log('\x07')
-    e.stopPropagation()
-  })
-
-  // Init Data
-  $scope.snippets = []
-
-  Snippet.findMine()
-    .success(function (data) {
-      $scope.snippets = data
-      filterList()
-    })
-
-  // Result Item control
-  $scope.selectIndex = 0
-
-  $scope.selectSnippet = selectSnippet
-  $scope.filterList = filterList
-  $scope.writeCode = writeCode
-  $scope.focusSearchInput = focusSearchInput
-
-  // Search Filter
-  function loadSnippets () {
-    Snippet.findMine()
-      .success(function (data) {
-        $scope.snippets = data
-        filterList()
-      })
-  }
-
-  function filterList (needle) {
-    $scope.filteredSnippets = $filter('filter')($scope.snippets, needle)
-    firstSnippet()
-  }
-
-  function selectSnippet (index) {
-    if (index !== undefined) $scope.selectIndex = index
-    $scope.selectedItem = $scope.filteredSnippets[$scope.selectIndex]
-  }
-
-  function firstSnippet () {
-    $scope.selectIndex = 0
-    selectSnippet($scope.selectIndex)
-  }
-
-  function priorSnippet () {
-    if ($scope.selectIndex > 0) $scope.selectIndex -= 1
-
-    if (resultList.children[$scope.selectIndex].offsetTop < resultList.scrollTop) {
-      resultList.scrollTop -= 33
-    }
-
-    selectSnippet()
-  }
-
-  function nextSnippet () {
-    if ($scope.selectIndex < $scope.filteredSnippets.length - 1) {
-      $scope.selectIndex += 1
-    }
-
-    if (resultList.clientHeight - 33 < resultList.children[$scope.selectIndex].offsetTop - resultList.scrollTop) {
-      resultList.scrollTop += 33
-    }
-
-    selectSnippet()
-  }
-
-  function writeCode (code) {
-    ipc.send('writeCode', code)
-  }
-
-  // Focusing Search Input
-  function focusSearchInput () {
-    document.getElementById('search-input').focus()
-  }
-
-  function hidePopUp () {
-    ipc.send('hidePopUp')
-  }
-
-})
-.directive('searchInput', function () {
-  return {
-    restrict: 'A',
-    link: function (scope, el, attr) {
-      el.on('keydown', function (e) {
-        // Down key => Focus on Result list
-        if (e.keyCode === 40) {
-          scope.$emit('nextSnippetRequested')
-          // e.preventDefault()
-        }
-
-        // Up key => Focus on Result list
-        if (e.keyCode === 38) {
-          scope.$emit('priorSnippetRequested')
-          // e.preventDefault()
-        }
-
-        // Up key => Focus on Result list
-        if (e.keyCode === 13) {
-          scope.$emit('snippetSubmitted')
-        }
-
-        // Esc key => Dismiss popup
-        if (e.keyCode === 27) {
-          ipc.send('hidePopUp')
-          e.preventDefault()
-        }
-
-        // TODO: Tab key => Auto complete
-        if (e.keyCode === 9) {
-          e.preventDefault()
-        }
-      })
-    }
-  }
-})

electron_src/popup/services/snippet.js

@@ -1,62 +0,0 @@
-/* global angular */
-angular.module('codexen.popup')
-  .constant('apiUrl', 'http://codexen-server-dev.elasticbeanstalk.com/')
-  .config(function ($authProvider, $httpProvider, apiUrl) {
-    $authProvider.baseUrl = apiUrl
-
-    $httpProvider.defaults.useXDomain = true
-    delete $httpProvider.defaults.headers.common['X-Requested-With']
-  })
-
-
-angular.module('codexen.popup')
-  .factory('Snippet', function ($http, $auth, apiUrl) {
-    var findByUser = function (user) {
-      var url = apiUrl + 'snippets/search'
-
-      return $http.get(url, {
-        params: {
-          user: user
-        }
-      })
-    }
-
-    var findMine = function (params) {
-      var url = apiUrl + 'snippets/my'
-
-      return $http.get(url, {params: params})
-    }
-
-    var create = function (params) {
-      var url = apiUrl + 'snippets/create'
-
-      return $http.post(url, params)
-    }
-
-    var show = function (id, params) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.get(url, {params: params})
-    }
-
-    var update = function (id, params) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.put(url, params)
-    }
-
-    var destroy = function (id) {
-      var url = apiUrl + 'snippets/id/' + id
-
-      return $http.delete(url)
-    }
-
-    return {
-      findByUser: findByUser,
-      findMine: findMine,
-      create: create,
-      show: show,
-      delete: destroy,
-      update: update
-    }
-  })

electron_src/styles/_popup.styl

@@ -1,59 +0,0 @@
-.popup-body
-  .search-block
-    padding: 5px
-    height:44px
-    position:absolute
-    top: 0
-    width: 100%
-
-  .result-block
-    position:absolute
-    top: 44px
-    bottom: 0
-    width: 100%
-    overflow: hidden
-    .left-pane
-      margin: 0
-      position: absolute
-      left: 0
-      top: 0
-      bottom: 0
-      width: 40%
-      overflow-y: auto
-      overflow-x: hidden
-    .result-list
-      list-style:none
-      padding: 0
-      border-right: 1px solid $baseBorderColor
-      li
-        &:nth-child(even)
-          background-color $baseBackgroundColor
-        &:nth-child(odd)
-          background-color lighten($baseBackgroundColor, 2%)
-        &.active
-          color: $textColorSelected
-          background-color: $btnPrimary
-        a
-          display:block
-          padding: 5px 10px
-          border-bottom 1px solid $baseBorderColor
-
-    .right-pane
-      position: absolute
-      left: 40%
-      top: 0
-      bottom: 0
-      width: 60%
-      overflow-y: auto
-      overflow-x: hidden
-    .result-detail-control
-      position: absolute
-      top: 0
-      width: 100%
-      height: 34px
-
-    .result-detail-content
-      position: absolute
-      top: 34px
-      bottom: 0
-      width: 100%

electron_src/styles/main.styl

@@ -1,13 +0,0 @@
-@import '../../src/styles/_vars'
-@import '../../src/styles/mixins/*'
-
-@import '../../src/styles/_bootstrap'
-
-@import '../../src/styles/_index'
-@import '../../src/styles/_shared'
-
-@import '../../src/styles/modals/*'
-@import '../../src/styles/directives/*'
-@import '../../src/styles/states/*'
-
-@import '_popup'

gulp-electron.js

@@ -1,139 +0,0 @@
-require('dotenv').load()
-var env = process.env
-
-var styl = require('gulp-stylus')
-var autoprefixer = require('gulp-autoprefixer')
-var templateCache = require('gulp-angular-templatecache')
-var globby = require('globby')
-var template = require('gulp-template')
-var del = require('del')
-var runSequence = require('run-sequence')
-var plumber = require('gulp-plumber')
-var notify = require('gulp-notify')
-var changed = require('gulp-changed')
-var livereload = require('gulp-livereload')
-var merge = require('merge-stream')
-
-var config = require('./build.config.js')
-
-module.exports = function (gulp) {
-
-  gulp.task('elec-env', function () {
-    return gulp.src('tpls/env.js')
-      .pipe(template({
-        apiUrl: env.ELEC_API_URL
-      }))
-      .pipe(gulp.dest('electron_build/config'))
-  })
-
-  gulp.task('elec-js', function () {
-    var main = gulp.src('src/**/*.js')
-      .pipe(changed('electron_build'))
-      .pipe(gulp.dest('electron_build'))
-
-    var electron = gulp.src('electron_src/**/*.js')
-      .pipe(changed('electron_build/electron'))
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-styl', function () {
-    return gulp.src('electron_src/styles/main.styl')
-      .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
-      .pipe(styl())
-      .pipe(autoprefixer())
-      .pipe(gulp.dest('electron_build'))
-      .pipe(notify('Stylus!!'))
-      .pipe(livereload())
-  })
-
-  gulp.task('elec-tpls', function () {
-    var main = gulp.src('src/**/*.tpl.html')
-      .pipe(templateCache())
-      .pipe(gulp.dest('electron_build'))
-
-    var electron = gulp.src('electron_src/**/*.tpl.html')
-      .pipe(templateCache())
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-index', function () {
-    var files = globby.sync(['electron_build/**/*', '!electron_build/vendor/**/*', '!electron_build/electron/**/*'])
-
-    var filter = function (files, ext) {
-      return files.filter(function (file) {
-        var reg = new RegExp('.+\.' + ext + '$')
-        return file.match(reg)
-      }).map(function (file) {
-        return file.replace('electron_build/', '')
-      })
-    }
-    var scripts = filter(files, 'js')
-    var styles = filter(files, 'css')
-
-    var main = gulp.src('src/index.html')
-      .pipe(template({
-        scripts: scripts,
-        styles: styles,
-        env: 'build'
-      }))
-      .pipe(gulp.dest('electron_build'))
-      .pipe(livereload())
-
-    var electron = gulp.src('electron_src/**/index.html')
-      .pipe(gulp.dest('electron_build/electron'))
-
-    return merge(main, electron)
-  })
-
-  gulp.task('elec-vendor', function () {
-    var vendors = config.vendors
-
-    var vendorFiles = vendors.map(function (vendor) {
-      return vendor.src
-    })
-
-    vendorFiles.push('node_modules/font-awesome/**/font-awesome.css')
-    vendorFiles.push('node_modules/font-awesome/**/fontawesome-webfont.*')
-    vendorFiles.push('node_modules/font-awesome/**/FontAwesome.*')
-
-    return gulp.src(vendorFiles)
-      .pipe(gulp.dest('electron_build/vendor'))
-  })
-
-  gulp.task('elec-resources', function () {
-    return gulp.src('resources/**/*')
-      .pipe(changed('electron_build/resources'))
-      .pipe(gulp.dest('electron_build/resources'))
-  })
-
-  gulp.task('elec-build', function (cb) {
-    runSequence(['elec-env', 'elec-js', 'elec-styl', 'elec-tpls', 'elec-vendor', 'elec-resources'], 'elec-index', cb)
-  })
-
-  gulp.task('elec-watch', function (cb) {
-    gulp.watch(['.env', 'tpls/env.js'], ['elec-env'])
-
-    gulp.watch(['src/**/*.js', 'electron_src/**/*.js'], ['elec-js'])
-
-    gulp.watch(['src/styles/**/*.styl', 'electron_src/styles/**/*.styl'], ['elec-styl'])
-
-    gulp.watch('src/**/*.tpl.html', ['elec-tpls'])
-
-    gulp.watch(['electron_build/**/*.js', 'src/index.html', 'src/index.html', 'electron_src/**/index.html'], ['elec-index'])
-
-    livereload.listen()
-  })
-
-  gulp.task('elec-del', function (cb) {
-    del(['electron_build/**/*'], cb)
-  })
-
-  gulp.task('elec', function (cb) {
-    runSequence('elec-del', 'elec-build', 'elec-watch', cb)
-  })
-
-}

lib/actions.js

@@ -0,0 +1,130 @@
+// Action types
+export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
+export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
+export const FOLDER_CREATE = 'FOLDER_CREATE'
+export const FOLDER_UPDATE = 'FOLDER_UPDATE'
+export const FOLDER_DESTROY = 'FOLDER_DESTROY'
+export const FOLDER_REPLACE = 'FOLDER_REPLACE'
+
+export const SWITCH_FOLDER = 'SWITCH_FOLDER'
+export const SWITCH_MODE = 'SWITCH_MODE'
+export const SWITCH_ARTICLE = 'SWITCH_ARTICLE'
+export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER'
+export const SET_TAG_FILTER = 'SET_TAG_FILTER'
+export const CLEAR_SEARCH = 'CLEAR_SEARCH'
+export const LOCK_STATUS = 'LOCK_STATUS'
+export const UNLOCK_STATUS = 'UNLOCK_STATUS'
+export const TOGGLE_TUTORIAL = 'TOGGLE_TUTORIAL'
+
+// Status - mode
+export const IDLE_MODE = 'IDLE_MODE'
+export const CREATE_MODE = 'CREATE_MODE'
+export const EDIT_MODE = 'EDIT_MODE'
+
+// Article status
+export const NEW = 'NEW'
+
+// DB
+export function updateArticle (article) {
+  return {
+    type: ARTICLE_UPDATE,
+    data: { article }
+  }
+}
+
+export function destroyArticle (key) {
+  return {
+    type: ARTICLE_DESTROY,
+    data: { key }
+  }
+}
+
+export function createFolder (folder) {
+  return {
+    type: FOLDER_CREATE,
+    data: { folder }
+  }
+}
+
+export function updateFolder (folder) {
+  return {
+    type: FOLDER_UPDATE,
+    data: { folder }
+  }
+}
+
+export function destroyFolder (key) {
+  return {
+    type: FOLDER_DESTROY,
+    data: { key }
+  }
+}
+
+export function replaceFolder (a, b) {
+  return {
+    type: FOLDER_REPLACE,
+    data: {
+      a,
+      b
+    }
+  }
+}
+
+export function switchFolder (folderName) {
+  return {
+    type: SWITCH_FOLDER,
+    data: folderName
+  }
+}
+
+export function switchMode (mode) {
+  return {
+    type: SWITCH_MODE,
+    data: mode
+  }
+}
+
+export function switchArticle (articleKey) {
+  return {
+    type: SWITCH_ARTICLE,
+    data: articleKey
+  }
+}
+
+export function setSearchFilter (search) {
+  return {
+    type: SET_SEARCH_FILTER,
+    data: search
+  }
+}
+
+export function setTagFilter (tag) {
+  return {
+    type: SET_TAG_FILTER,
+    data: tag
+  }
+}
+
+export function clearSearch () {
+  return {
+    type: CLEAR_SEARCH
+  }
+}
+
+export function lockStatus () {
+  return {
+    type: LOCK_STATUS
+  }
+}
+
+export function unlockStatus () {
+  return {
+    type: UNLOCK_STATUS
+  }
+}
+
+export function toggleTutorial () {
+  return {
+    type: TOGGLE_TUTORIAL
+  }
+}

lib/activityRecord.js

@@ -0,0 +1,122 @@
+import _ from 'lodash'
+import moment from 'moment'
+import keygen from 'boost/keygen'
+import dataStore from 'boost/dataStore'
+import { request, WEB_URL } from 'boost/api'
+
+function isSameDate (a, b) {
+  a = moment(a).utcOffset(+540).format('YYYYMMDD')
+  b = moment(b).utcOffset(+540).format('YYYYMMDD')
+
+  return a === b
+}
+
+export function init () {
+  let records = getAllRecords()
+  if (records == null) {
+    saveAllRecords([])
+  }
+
+  postRecords()
+  if (window != null) {
+    window.addEventListener('online', postRecords)
+    window.setInterval(postRecords, 1000 * 60 * 60 * 24)
+  }
+}
+
+export function getClientKey () {
+  let clientKey = localStorage.getItem('clientKey')
+  if (!_.isString(clientKey) || clientKey.length !== 40) {
+    clientKey = keygen()
+    localStorage.setItem('clientKey', clientKey)
+  }
+
+  return clientKey
+}
+
+export function getAllRecords () {
+  return JSON.parse(localStorage.getItem('activityRecords'))
+}
+
+export function saveAllRecords (records) {
+  localStorage.setItem('activityRecords', JSON.stringify(records))
+}
+
+/*
+Post all records(except today)
+and remove all posted records
+*/
+export function postRecords (data) {
+  let records = getAllRecords()
+  records = records.filter(record => {
+    return !isSameDate(new Date(), record.date)
+  })
+
+  if (records.length === 0) {
+    console.log('No records to post')
+    return
+  }
+
+  console.log('posting...', records)
+  let input = {
+    clientKey: getClientKey(),
+    records
+  }
+  return request.post(WEB_URL + 'apis/activity')
+    .send(input)
+    .then(res => {
+      let records = getAllRecords()
+      let todayRecord = _.find(records, record => {
+        return isSameDate(new Date(), record.date)
+      })
+      if (todayRecord != null) saveAllRecords([todayRecord])
+      else saveAllRecords([])
+    })
+    .catch(err => {
+      console.error(err)
+    })
+}
+
+export function emit (type, data) {
+  let records = getAllRecords()
+
+  let index = _.findIndex(records, record => {
+    return isSameDate(new Date(), record.date)
+  })
+
+  let todayRecord
+  if (index < 0) {
+    todayRecord = {date: new Date()}
+    records.push(todayRecord)
+  }
+  else todayRecord = records[index]
+  console.log(type)
+  switch (type) {
+    case 'ARTICLE_CREATE':
+    case 'ARTICLE_UPDATE':
+    case 'ARTICLE_DESTROY':
+    case 'FOLDER_CREATE':
+    case 'FOLDER_UPDATE':
+    case 'FOLDER_DESTROY':
+    case 'FINDER_OPEN':
+    case 'FINDER_COPY':
+      todayRecord[type] = todayRecord[type] == null
+        ? 1
+        : todayRecord[type] + 1
+
+      break
+  }
+
+  let storeData = dataStore.getData()
+  todayRecord.FOLDER_COUNT = _.isArray(storeData.folders) ? storeData.folders.length : 0
+  todayRecord.ARTICLE_COUNT = _.isArray(storeData.articles) ? storeData.articles.length : 0
+
+  saveAllRecords(records)
+}
+
+export default {
+  init,
+  emit,
+  getClientKey,
+  postRecords
+}

lib/api.js

@@ -0,0 +1,191 @@
+import superagent from 'superagent'
+import superagentPromise from 'superagent-promise'
+import auth from 'boost/auth'
+
+export const API_URL = 'http://boost-api4.elasticbeanstalk.com/'
+export const WEB_URL = 'https://b00st.io/'
+// export const WEB_URL = 'http://localhost:3333/'
+
+export const request = superagentPromise(superagent, Promise)
+
+export function login (input) {
+  return request
+    .post(API_URL + 'auth/login')
+    .send(input)
+}
+
+export function signup (input) {
+  return request
+    .post(API_URL + 'auth/register')
+    .send(input)
+}
+
+export function updateUserInfo (input) {
+  return request
+    .put(API_URL + 'auth/user')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function updatePassword (input) {
+  return request
+    .post(API_URL + 'auth/password')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function fetchCurrentUser () {
+  return request
+    .get(API_URL + 'auth/user')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+}
+
+export function fetchArticles (userId) {
+  return request
+    .get(API_URL + 'teams/' + userId + '/articles')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+}
+
+export function createArticle (input) {
+  return request
+    .post(API_URL + 'articles/')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function saveArticle (input) {
+  return request
+    .put(API_URL + 'articles/' + input.id)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function destroyArticle (articleId) {
+  return request
+    .del(API_URL + 'articles/' + articleId)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+}
+
+export function createTeam (input) {
+  return request
+    .post(API_URL + 'teams')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function updateTeamInfo (teamId, input) {
+  return request
+    .put(API_URL + 'teams/' + teamId)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function destroyTeam (teamId) {
+  return request
+    .del(API_URL + 'teams/' + teamId)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+}
+
+export function searchUser (key) {
+  return request
+    .get(API_URL + 'search/users')
+    .query({key: key})
+}
+
+export function setMember (teamId, input) {
+  return request
+    .post(API_URL + 'teams/' + teamId + '/members')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function deleteMember (teamId, input) {
+  return request
+    .del(API_URL + 'teams/' + teamId + '/members')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function createFolder (input) {
+  return request
+    .post(API_URL + 'folders/')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function updateFolder (id, input) {
+  return request
+    .put(API_URL + 'folders/' + id)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export function destroyFolder (id) {
+  return request
+    .del(API_URL + 'folders/' + id)
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+}
+
+export function sendEmail (input) {
+  return request
+    .post(API_URL + 'mail')
+    .set({
+      Authorization: 'Bearer ' + auth.token()
+    })
+    .send(input)
+}
+
+export default {
+  API_URL,
+  WEB_URL,
+  request,
+  login,
+  signup,
+  updateUserInfo,
+  updatePassword,
+  fetchCurrentUser,
+  fetchArticles,
+  createArticle,
+  saveArticle,
+  destroyArticle,
+  createTeam,
+  updateTeamInfo,
+  destroyTeam,
+  searchUser,
+  setMember,
+  deleteMember,
+  createFolder,
+  updateFolder,
+  destroyFolder,
+  sendEmail
+}

lib/auth.js

@@ -0,0 +1,34 @@
+// initial value
+var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+var currentToken = localStorage.getItem('token')
+
+function user (user, newToken) {
+  if (user != null) {
+    localStorage.setItem('currentUser', JSON.stringify(user))
+    currentUser = user
+  }
+
+  if (newToken != null) {
+    localStorage.setItem('token', newToken)
+    currentToken = newToken
+  }
+
+  return currentUser
+}
+
+function token () {
+  return currentToken
+}
+
+function clear () {
+  localStorage.removeItem('currentUser')
+  localStorage.removeItem('token')
+  currentUser = null
+  currentToken = null
+}
+
+export default {
+  user,
+  token,
+  clear
+}

lib/components/CodeEditor.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import modes from 'boost/vars/modes'
+import _ from 'lodash'
+var ace = window.ace
+
+module.exports = React.createClass({
+  propTypes: {
+    code: React.PropTypes.string,
+    mode: React.PropTypes.string,
+    className: React.PropTypes.string,
+    onChange: React.PropTypes.func,
+    readOnly: React.PropTypes.bool
+  },
+  getDefaultProps: function () {
+    return {
+      readOnly: false
+    }
+  },
+  componentWillReceiveProps: function (nextProps) {
+    if (nextProps.readOnly !== this.props.readOnly) {
+      this.editor.setReadOnly(!!nextProps.readOnly)
+    }
+  },
+  componentDidMount: function () {
+    var el = ReactDOM.findDOMNode(this.refs.target)
+    var editor = this.editor = ace.edit(el)
+    editor.$blockScrolling = Infinity
+    editor.setValue(this.props.code)
+    editor.renderer.setShowGutter(true)
+    editor.setTheme('ace/theme/xcode')
+    editor.clearSelection()
+
+    editor.setReadOnly(!!this.props.readOnly)
+
+    var session = editor.getSession()
+    let mode = _.findWhere(modes, {name: this.props.mode})
+    let syntaxMode = mode != null
+      ? mode.mode
+      : 'text'
+    session.setMode('ace/mode/' + syntaxMode)
+
+    session.setUseSoftTabs(true)
+    session.setOption('useWorker', false)
+    session.setUseWrapMode(true)
+
+    session.on('change', function (e) {
+      if (this.props.onChange != null) {
+        var value = editor.getValue()
+        this.props.onChange(e, value)
+      }
+    }.bind(this))
+
+    this.setState({editor: editor})
+  },
+  componentDidUpdate: function (prevProps) {
+    if (this.state.editor.getValue() !== this.props.code) {
+      this.state.editor.setValue(this.props.code)
+      this.state.editor.clearSelection()
+    }
+    if (prevProps.mode !== this.props.mode) {
+      var session = this.state.editor.getSession()
+      let mode = _.findWhere(modes, {name: this.props.mode})
+      let syntaxMode = mode != null
+        ? mode.mode
+        : 'text'
+      session.setMode('ace/mode/' + syntaxMode)
+    }
+  },
+  render: function () {
+    return (
+      <div ref='target' className={this.props.className == null ? 'CodeEditor' : 'CodeEditor ' + this.props.className}></div>
+    )
+  }
+})

lib/components/ExternalLink.js

@@ -0,0 +1,19 @@
+import React, { PropTypes } from 'react'
+import shell from 'shell'
+
+export default class ExternalLink extends React.Component {
+  handleClick (e) {
+    shell.openExternal(this.props.href)
+    e.preventDefault()
+  }
+
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)} {...this.props}/>
+    )
+  }
+}
+
+ExternalLink.propTypes = {
+  href: PropTypes.string
+}

lib/components/FolderMark.js

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react'
+
+const BLUE = '#3460C7'
+const LIGHTBLUE = '#2BA5F7'
+const ORANGE = '#FF8E00'
+const YELLOW = '#E8D252'
+const GREEN = '#3FD941'
+const DARKGREEN = '#1FAD85'
+const RED = '#E10051'
+const PURPLE = '#B013A4'
+
+function getColorByIndex (index) {
+  switch (index % 8) {
+    case 0:
+      return RED
+    case 1:
+      return ORANGE
+    case 2:
+      return YELLOW
+    case 3:
+      return GREEN
+    case 4:
+      return DARKGREEN
+    case 5:
+      return LIGHTBLUE
+    case 6:
+      return BLUE
+    case 7:
+      return PURPLE
+    default:
+      return DARKGREEN
+  }
+}
+
+export default class FolderMark extends React.Component {
+  render () {
+    let color = getColorByIndex(this.props.color)
+    let className = 'FolderMark fa fa-square fa-fw'
+    if (this.props.className != null) {
+      className += ' active'
+    }
+
+    return (
+      <i className={className} style={{color: color}}/>
+    )
+  }
+}
+
+FolderMark.propTypes = {
+  color: PropTypes.number,
+  className: PropTypes.string
+}

lib/components/MarkdownPreview.js

@@ -0,0 +1,55 @@
+import shell from 'shell'
+var React = require('react')
+var { PropTypes } = React
+import markdown from 'boost/markdown'
+var ReactDOM = require('react-dom')
+
+function handleAnchorClick (e) {
+  shell.openExternal(e.target.href)
+  e.preventDefault()
+}
+
+export default class MarkdownPreview extends React.Component {
+  componentDidMount () {
+    this.addListener()
+  }
+
+  componentDidUpdate () {
+    this.addListener()
+  }
+
+  componentWillUnmount () {
+    this.removeListener()
+  }
+
+  componentWillUpdate () {
+    this.removeListener()
+  }
+
+  addListener () {
+    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a')
+
+    for (var i = 0; i < anchors.length; i++) {
+      anchors[i].addEventListener('click', handleAnchorClick)
+    }
+  }
+
+  removeListener () {
+    var anchors = ReactDOM.findDOMNode(this).querySelectorAll('a')
+
+    for (var i = 0; i < anchors.length; i++) {
+      anchors[i].removeEventListener('click', handleAnchorClick)
+    }
+  }
+
+  render () {
+    return (
+      <div className={'MarkdownPreview' + (this.props.className != null ? ' ' + this.props.className : '')} dangerouslySetInnerHTML={{__html: ' ' + markdown(this.props.content)}}/>
+    )
+  }
+}
+
+MarkdownPreview.propTypes = {
+  className: PropTypes.string,
+  content: PropTypes.string
+}

lib/components/ModeIcon.js

@@ -0,0 +1,82 @@
+import React, { PropTypes } from 'react'
+
+export default class ModeIcon extends React.Component {
+  getClassName () {
+    var mode = this.props.mode
+    switch (mode) {
+      // Script
+      case 'javascript':
+        return 'devicon-javascript-plain'
+      case 'jsx':
+        return 'devicon-react-original'
+      case 'coffee':
+        return 'devicon-coffeescript-original'
+      case 'ruby':
+        return 'devicon-ruby-plain'
+      case 'erlang':
+        return 'devicon-erlang-plain'
+      case 'php':
+        return 'devicon-php-plain'
+
+      // HTML
+      case 'html':
+        return 'devicon-html5-plain'
+
+      // Stylesheet
+      case 'css':
+        return 'devicon-css3-plain'
+      case 'less':
+        return 'devicon-less-plain-wordmark'
+      case 'sass':
+      case 'scss':
+        return 'devicon-sass-original'
+
+      // Compile
+      case 'c':
+        return 'devicon-c-plain'
+      case 'cpp':
+        return 'devicon-cplusplus-plain'
+      case 'csharp':
+        return 'devicon-csharp-plain'
+      case 'objc':
+        return 'devicon-apple-original'
+      case 'golang':
+        return 'devicon-go-plain'
+      case 'java':
+        return 'devicon-java-plain'
+
+      // Framework
+      case 'django':
+        return 'devicon-django-plain'
+
+      // Config
+      case 'dockerfile':
+        return 'devicon-docker-plain'
+      case 'gitignore':
+        return 'devicon-git-plain'
+
+      // Shell
+      case 'sh':
+      case 'batchfile':
+      case 'powershell':
+        return 'fa fa-fw fa-terminal'
+
+      case 'text':
+      case 'markdown':
+        return 'fa fa-fw fa-file-text-o'
+    }
+    return 'fa fa-fw fa-code'
+  }
+
+  render () {
+    let className = `ModeIcon ${this.getClassName()} ${this.props.className}`
+    return (
+      <i className={className}/>
+    )
+  }
+}
+
+ModeIcon.propTypes = {
+  className: PropTypes.string,
+  mode: PropTypes.string
+}

lib/components/ModeSelect.js

@@ -0,0 +1,190 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import ModeIcon from 'boost/components/ModeIcon'
+import modes from 'boost/vars/modes'
+import _ from 'lodash'
+
+const IDLE_MODE = 'IDLE_MODE'
+const EDIT_MODE = 'EDIT_MODE'
+
+export default class ModeSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE_MODE,
+      search: '',
+      focusIndex: 0
+    }
+  }
+
+  componentDidMount () {
+    this.blurHandler = e => {
+      let searchElement = ReactDOM.findDOMNode(this.refs.search)
+      if (this.state.mode === EDIT_MODE && document.activeElement !== searchElement) {
+        this.handleBlur()
+      }
+    }
+    window.addEventListener('click', this.blurHandler)
+  }
+
+  componentWillUnmount () {
+    window.removeEventListener('click', this.blurHandler)
+    let searchElement = ReactDOM.findDOMNode(this.refs.search)
+    if (searchElement != null && this.searchKeyDownListener != null) {
+      searchElement.removeEventListener('keydown', this.searchKeyDownListener)
+    }
+  }
+
+  handleIdleSelectClick (e) {
+    this.setState({mode: EDIT_MODE})
+  }
+
+  componentDidUpdate (prevProps, prevState) {
+    if (prevState.mode !== this.state.mode && this.state.mode === EDIT_MODE) {
+      let searchElement = ReactDOM.findDOMNode(this.refs.search)
+      searchElement.focus()
+      if (this.searchKeyDownListener == null) {
+        this.searchKeyDownListener = e => this.handleSearchKeyDown
+      }
+      searchElement.addEventListener('keydown', this.searchKeyDownListener)
+    }
+  }
+
+  componentWillUpdate (nextProps, nextState) {
+    if (nextProps.mode !== this.state.mode && nextState.mode === IDLE_MODE) {
+      let searchElement = ReactDOM.findDOMNode(this.refs.search)
+      if (searchElement != null && this.searchKeyDownListener != null) {
+        searchElement.removeEventListener('keydown', this.searchKeyDownListener)
+      }
+    }
+  }
+
+  handleModeOptionClick (modeName) {
+    return e => {
+      this.props.onChange(modeName)
+      this.setState({
+        mode: IDLE_MODE,
+        search: '',
+        focusIndex: 0
+      })
+    }
+  }
+
+  handleSearchKeyDown (e) {
+    switch (e.keyCode) {
+      // up
+      case 38:
+        e.preventDefault()
+        if (this.state.focusIndex > 0) this.setState({focusIndex: this.state.focusIndex - 1})
+        break
+      // down
+      case 40:
+        e.preventDefault()
+        {
+          let filteredModes = modes
+            .filter(mode => {
+              let search = this.state.search
+              let nameMatched = mode.name.match(search)
+              let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+              return nameMatched || aliasMatched
+            })
+          if (filteredModes.length === this.state.focusIndex + 1) this.setState({focusIndex: filteredModes.length - 1})
+          else this.setState({focusIndex: this.state.focusIndex + 1})
+        }
+        break
+      // enter
+      case 13:
+        e.preventDefault()
+        {
+          let filteredModes = modes
+            .filter(mode => {
+              let search = this.state.search
+              let nameMatched = mode.name.match(search)
+              let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+              return nameMatched || aliasMatched
+            })
+          let targetMode = filteredModes[this.state.focusIndex]
+          if (targetMode != null) {
+            this.props.onChange(targetMode.name)
+            this.handleBlur()
+          }
+        }
+        break
+      // esc
+      case 27:
+        e.preventDefault()
+        e.stopPropagation()
+        this.handleBlur()
+        break
+      case 9:
+        this.handleBlur()
+    }
+  }
+
+  handleSearchChange (e) {
+    this.setState({
+      search: e.target.value,
+      focusIndex: 0
+    })
+  }
+
+  handleBlur () {
+    if (this.state.mode === EDIT_MODE) {
+      this.setState({
+        mode: IDLE_MODE,
+        search: '',
+        focusIndex: 0
+      })
+    }
+    if (this.props.onBlur != null) this.props.onBlur()
+  }
+
+  render () {
+    let className = this.props.className != null
+      ? `ModeSelect ${this.props.className}`
+      : this.props.className
+
+    if (this.state.mode === IDLE_MODE) {
+      let mode = _.findWhere(modes, {name: this.props.value})
+      let modeName = mode != null ? mode.name : 'text'
+      let modeLabel = mode != null ? mode.label : 'Plain text'
+
+      return (
+        <div className={className + ' idle'} onClick={e => this.handleIdleSelectClick(e)}>
+          <ModeIcon mode={modeName}/>
+          <span className='modeLabel'>{modeLabel}</span>
+        </div>
+      )
+    }
+
+    let filteredOptions = modes
+      .filter(mode => {
+        let search = this.state.search
+        let nameMatched = mode.name.match(search)
+        let aliasMatched = _.some(mode.alias, alias => alias.match(search))
+        return nameMatched || aliasMatched
+      })
+      .map((mode, index) => {
+        return (
+          <div key={mode.name} className={index === this.state.focusIndex ? 'option active' : 'option'} onClick={e => this.handleModeOptionClick(mode.name)(e)}><ModeIcon mode={mode.name}/>{mode.label}</div>
+          )
+      })
+
+    return (
+      <div className={className + ' edit'}>
+        <input onKeyDown={e => this.handleSearchKeyDown(e)} ref='search' onChange={e => this.handleSearchChange(e)} value={this.state.search} type='text'/>
+        <div ref='options' className='modeOptions hide'>
+          {filteredOptions}
+        </div>
+      </div>
+    )
+  }
+}
+
+ModeSelect.propTypes = {
+  className: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
+}

lib/components/ProfileImage.js

@@ -0,0 +1,24 @@
+import React, { PropTypes } from 'react'
+import md5 from 'md5'
+
+export default class ProfileImage extends React.Component {
+  render () {
+    let className = this.props.className == null ? 'ProfileImage' : 'ProfileImage ' + this.props.className
+    let email = this.props.email != null ? this.props.email : ''
+    let src = 'http://www.gravatar.com/avatar/' + md5(email.trim().toLowerCase()) + '?s=' + this.props.size
+
+    return (
+      <img
+        className={className}
+        width={this.props.size}
+        height={this.props.size}
+        src={src}/>
+    )
+  }
+}
+
+ProfileImage.propTypes = {
+  email: PropTypes.string,
+  size: PropTypes.string,
+  className: PropTypes.string
+}

lib/components/TagLink.js

@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react'
+import store from '../store'
+import { setTagFilter } from '../actions'
+
+export default class TagLink extends React.Component {
+  handleClick (e) {
+    store.dispatch(setTagFilter(this.props.tag))
+  }
+  render () {
+    return (
+      <a onClick={e => this.handleClick(e)}>{this.props.tag}</a>
+    )
+  }
+}
+
+TagLink.propTypes = {
+  tag: PropTypes.string
+}

lib/components/TagSelect.js

@@ -0,0 +1,168 @@
+import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
+import _ from 'lodash'
+import linkState from 'boost/linkState'
+
+function isNotEmptyString (str) {
+  return _.isString(str) && str.length > 0
+}
+
+export default class TagSelect extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      input: '',
+      isInputFocused: false
+    }
+  }
+
+  componentDidMount () {
+    this.blurInputBlurHandler = e => {
+      if (ReactDOM.findDOMNode(this.refs.tagInput) !== document.activeElement) {
+        this.setState({isInputFocused: false})
+      }
+    }
+    window.addEventListener('click', this.blurInputBlurHandler)
+  }
+
+  componentWillUnmount (e) {
+    window.removeEventListener('click', this.blurInputBlurHandler)
+  }
+
+  // Suggestは必ずInputの下に位置するようにする
+  componentDidUpdate () {
+    if (this.shouldShowSuggest()) {
+      let inputRect = ReactDOM.findDOMNode(this.refs.tagInput).getBoundingClientRect()
+      let suggestElement = ReactDOM.findDOMNode(this.refs.suggestTags)
+      if (suggestElement != null) {
+        suggestElement.style.top = inputRect.top + 20 + 'px'
+        suggestElement.style.left = inputRect.left + 'px'
+      }
+    }
+  }
+
+  shouldShowSuggest () {
+    return this.state.isInputFocused && isNotEmptyString(this.state.input)
+  }
+
+  addTag (tag, clearInput = true) {
+    let tags = this.props.tags.slice(0)
+    let newTag = tag.trim()
+
+    if (newTag.length === 0 && clearInput) {
+      this.setState({input: ''})
+      return
+    }
+
+    tags.push(newTag)
+    tags = _.uniq(tags)
+
+    if (_.isFunction(this.props.onChange)) {
+      this.props.onChange(newTag, tags)
+    }
+    if (clearInput) this.setState({input: ''})
+  }
+
+  handleKeyDown (e) {
+    switch (e.keyCode) {
+      case 8:
+        {
+          if (this.state.input.length > 0) break
+          e.preventDefault()
+
+          let tags = this.props.tags.slice(0)
+          tags.pop()
+
+          this.props.onChange(null, tags)
+        }
+        break
+      case 13:
+        {
+          e.preventDefault()
+          this.addTag(this.state.input)
+        }
+    }
+  }
+
+  handleThisClick (e) {
+    ReactDOM.findDOMNode(this.refs.tagInput).focus()
+  }
+
+  handleInputFocus (e) {
+    this.setState({isInputFocused: true})
+  }
+
+  handleItemRemoveButton (tag) {
+    return e => {
+      e.stopPropagation()
+
+      let tags = this.props.tags.slice(0)
+      tags.splice(tags.indexOf(tag), 1)
+
+      if (_.isFunction(this.props.onChange)) {
+        this.props.onChange(null, tags)
+      }
+    }
+  }
+
+  handleSuggestClick (tag) {
+    return e => {
+      this.addTag(tag)
+    }
+  }
+
+  render () {
+    let { tags, suggestTags } = this.props
+
+    let tagElements = _.isArray(tags)
+      ? this.props.tags.map(tag => (
+        <span key={tag} className='tagItem'>
+          <button onClick={e => this.handleItemRemoveButton(tag)(e)} className='tagRemoveBtn'><i className='fa fa-fw fa-times'/></button>
+          <span className='tagLabel'>{tag}</span>
+        </span>))
+      : null
+
+    let suggestElements = this.shouldShowSuggest() ? suggestTags
+        .filter(tag => {
+          return tag.match(this.state.input)
+        })
+        .map(tag => {
+          return <button onClick={e => this.handleSuggestClick(tag)(e)} key={tag}>{tag}</button>
+        })
+      : null
+
+    return (
+      <div className='TagSelect' onClick={e => this.handleThisClick(e)}>
+        <div className='tags'>
+          {tagElements}
+          <input
+            type='text'
+            onKeyDown={e => this.handleKeyDown(e)}
+            ref='tagInput'
+            valueLink={this.linkState('input')}
+            placeholder='Click here to add tags'
+            className='tagInput'
+            onFocus={e => this.handleInputFocus(e)}
+          />
+        </div>
+        {suggestElements != null && suggestElements.length > 0
+          ? (
+            <div ref='suggestTags' className='suggestTags'>
+              {suggestElements}
+            </div>
+          )
+          : null
+        }
+      </div>
+    )
+  }
+}
+
+TagSelect.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func,
+  suggestTags: PropTypes.array
+}
+
+TagSelect.prototype.linkState = linkState

lib/components/modal/ContactModal.js

@@ -0,0 +1,85 @@
+import React, { PropTypes, findDOMNode } from 'react'
+import linkState from 'boost/linkState'
+import { sendEmail } from 'boost/api'
+
+export default class ContactModal extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.linkState = linkState
+
+    this.state = {
+      isSent: false,
+      mail: {
+        title: '',
+        content: ''
+      }
+    }
+  }
+
+  onKeyCast (e) {
+    switch (e.status) {
+      case 'closeModal':
+        this.props.close()
+        break
+      case 'submitContactModal':
+        if (this.state.isSent) {
+          this.props.close()
+          return
+        }
+        this.sendEmail()
+        break
+    }
+  }
+
+  componentDidMount () {
+    findDOMNode(this.refs.title).focus()
+  }
+
+  sendEmail () {
+    sendEmail(this.state.mail)
+      .then(function (res) {
+        this.setState({isSent: !this.state.isSent})
+      }.bind(this))
+      .catch(function (err) {
+        console.error(err)
+      })
+  }
+
+  render () {
+    return (
+      <div className='ContactModal modal'>
+        <div className='modal-header'><h1>Contact form</h1></div>
+
+        {!this.state.isSent ? (
+          <div className='contactForm'>
+            <div className='modal-body'>
+              <div className='formField'>
+                <input ref='title' valueLink={this.linkState('mail.title')} placeholder='Title'/>
+              </div>
+              <div className='formField'>
+                <textarea valueLink={this.linkState('mail.content')} placeholder='Content'/>
+              </div>
+            </div>
+
+            <div className='modal-footer'>
+              <div className='formControl'>
+                <button onClick={this.sendEmail} className='sendButton'>Send</button>
+                <button onClick={this.props.close}>Cancel</button>
+              </div>
+            </div>
+          </div>
+      ) : (
+          <div className='confirmation'>
+            <div className='confirmationMessage'>Thanks for sharing your opinion!</div>
+            <button className='doneButton' onClick={this.props.close}>Done</button>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+ContactModal.propTypes = {
+  close: PropTypes.func
+}

lib/components/modal/CreateNewFolder.js

@@ -0,0 +1,103 @@
+import React, { PropTypes } from 'react'
+import linkState from 'boost/linkState'
+import { createFolder } from 'boost/actions'
+import store from 'boost/store'
+import FolderMark from 'boost/components/FolderMark'
+
+export default class CreateNewFolder extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      name: '',
+      color: Math.round(Math.random() * 7),
+      alert: null
+    }
+  }
+
+  handleCloseButton (e) {
+    this.props.close()
+  }
+
+  handleConfirmButton (e) {
+    this.setState({alert: null}, () => {
+      let { close } = this.props
+      let { name, color } = this.state
+
+      let input = {
+        name,
+        color
+      }
+
+      try {
+        store.dispatch(createFolder(input))
+      } catch (e) {
+        this.setState({alert: {
+          type: 'error',
+          message: e.message
+        }})
+        return
+      }
+      close()
+    })
+  }
+
+  handleColorClick (colorIndex) {
+    return e => {
+      this.setState({
+        color: colorIndex
+      })
+    }
+  }
+
+  handleKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleConfirmButton()
+    }
+  }
+
+  render () {
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+    let colorIndexes = []
+    for (let i = 0; i < 8; i++) {
+      colorIndexes.push(i)
+    }
+    let colorElements = colorIndexes.map(index => {
+      let className = 'option'
+      if (index === this.state.color) className += ' active'
+
+      return (
+        <span className={className} key={index} onClick={e => this.handleColorClick(index)(e)}>
+          <FolderMark color={index}/>
+        </span>
+      )
+    })
+
+    return (
+      <div className='CreateNewFolder modal'>
+        <button onClick={e => this.handleCloseButton(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+
+        <div className='title'>Create new folder</div>
+
+        <input onKeyDown={e => this.handleKeyDown(e)} className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <div className='colorSelect'>
+          {colorElements}
+        </div>
+        {alertElement}
+
+        <button onClick={e => this.handleConfirmButton(e)} className='confirmBtn'>Create</button>
+      </div>
+    )
+  }
+}
+
+CreateNewFolder.propTypes = {
+  close: PropTypes.func
+}
+
+CreateNewFolder.prototype.linkState = linkState

lib/components/modal/CreateNewTeam.js

@@ -0,0 +1,255 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import { searchUser, createTeam, setMember, deleteMember } from 'boost/api'
+import linkState from 'boost/linkState'
+import Select from 'react-select'
+
+function getUsers (input, cb) {
+  searchUser(input)
+    .then(function (res) {
+      let users = res.body
+
+      cb(null, {
+        options: users.map(user => {
+          return { value: user.name, label: user.name }
+        }),
+        complete: false
+      })
+    })
+    .catch(function (err) {
+      console.error(err)
+    })
+}
+
+export default class CreateNewTeam extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      create: {
+        name: '',
+        alert: null
+      },
+      select: {
+        team: null,
+        newMember: null,
+        alert: null
+      },
+      currentTab: 'create',
+      currentUser: JSON.parse(localStorage.getItem('currentUser'))
+    }
+  }
+
+  handleCloseClick (e) {
+    this.props.close()
+  }
+
+  handleContinueClick (e) {
+    let createState = this.state.create
+    createState.isSending = true
+    createState.alert = {
+      type: 'info',
+      message: 'sending...'
+    }
+    this.setState({create: createState})
+
+    function onTeamCreate (res) {
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = null
+
+      let selectState = this.state.select
+      selectState.team = res.body
+
+      this.setState({
+        currentTab: 'select',
+        create: createState,
+        select: {
+          team: res.body
+        }
+      })
+    }
+
+    function onError (err) {
+      let errorMessage = err.response != null ? err.response.body.message : 'Can\'t connect to API server.'
+
+      let createState = this.state.create
+      createState.isSending = false
+      createState.alert = {
+        type: 'error',
+        message: errorMessage
+      }
+
+      this.setState({
+        create: createState
+      })
+    }
+
+    createTeam({name: this.state.create.name})
+      .then(onTeamCreate.bind(this))
+      .catch(onError.bind(this))
+  }
+
+  renderCreateTab () {
+    let createState = this.state.create
+    let alertEl = createState.alert != null ? (
+      <p className={['alert'].concat([createState.alert.type]).join(' ')}>{createState.alert.message}</p>
+    ) : null
+
+    return (
+      <div className='createTab'>
+        <div className='title'>Create new team</div>
+
+        <input valueLink={this.linkState('create.name')} className='ipt' type='text' placeholder='Enter your team name'/>
+        {alertEl}
+        <button onClick={e => this.handleContinueClick(e)} disabled={createState.isSending} className='confirmBtn'>Continue <i className='fa fa-arrow-right fa-fw'/></button>
+      </div>
+    )
+  }
+  handleNewMemberChange (value) {
+    let selectState = this.state.select
+    selectState.newMember = value
+    this.setState({select: selectState})
+  }
+
+  handleClickAddMemberButton (e) {
+    let selectState = this.state.select
+    let input = {
+      name: selectState.newMember,
+      role: 'member'
+    }
+
+    setMember(selectState.team.id, input)
+      .then(res => {
+        let selectState = this.state.select
+        let team = res.body
+        team.Members = team.Members.sort((a, b) => {
+          return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
+        })
+        selectState.team = team
+        selectState.newMember = ''
+
+        this.setState({select: selectState})
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  handleMemberDeleteButtonClick (name) {
+    let selectState = this.state.select
+    let input = {
+      name: name
+    }
+
+    return e => {
+      deleteMember(selectState.team.id, input)
+        .then(res => {
+          let selectState = this.state.select
+          let team = res.body
+          team.Members = team.Members.sort((a, b) => {
+            return new Date(a._pivot_createdAt) - new Date(b._pivot_createdAt)
+          })
+          selectState.team = team
+          selectState.newMember = ''
+
+          this.setState({select: selectState})
+        })
+        .catch(err => {
+          console.log(err, err.response)
+          if (err.status != null) throw err
+          else console.error(err)
+        })
+    }
+  }
+
+  handleMemberRoleChange (name) {
+    return function (e) {
+      let selectState = this.state.select
+      let input = {
+        name: name,
+        role: e.target.value
+      }
+
+      setMember(selectState.team.id, input)
+        .then(res => {
+          console.log(res.body)
+        })
+        .catch(err => {
+          if (err.status != null) throw err
+          else console.error(err)
+        })
+    }.bind(this)
+  }
+
+  renderSelectTab () {
+    let selectState = this.state.select
+
+    let membersEl = selectState.team.Members.map(member => {
+      let isCurrentUser = this.state.currentUser.id === member.id
+
+      return (
+        <li key={'user-' + member.id}>
+          <ProfileImage className='userPhoto' email={member.email} size='30'/>
+          <div className='userInfo'>
+            <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+            <div className='userEmail'>{member.email}</div>
+          </div>
+
+          <div className='userControl'>
+            <select onChange={e => this.handleMemberRoleChange(member.name)(e)} disabled={isCurrentUser} value={member._pivot_role} className='userRole'>
+              <option value='owner'>Owner</option>
+              <option value='member'>Member</option>
+            </select>
+            <button onClick={e => this.handleMemberDeleteButtonClick(member.name)(e)} disabled={isCurrentUser}><i className='fa fa-times fa-fw'/></button>
+          </div>
+        </li>
+      )
+    })
+
+    return (
+      <div className='selectTab'>
+        <div className='title'>Select member</div>
+        <div className='memberForm'>
+          <Select
+            className='memberName'
+            autoload={false}
+            asyncOptions={getUsers}
+            onChange={val => this.handleNewMemberChange(val)}
+            value={selectState.newMember}
+          />
+        <button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
+        </div>
+        <ul className='memberList'>
+          {membersEl}
+        </ul>
+        <button onClick={e => this.props.close(e)}className='confirmBtn'>Done</button>
+      </div>
+    )
+  }
+
+  render () {
+    let currentTab = this.state.currentTab === 'create'
+      ? this.renderCreateTab()
+      : this.renderSelectTab()
+
+    return (
+      <div className='CreateNewTeam modal'>
+        <button onClick={e => this.handleCloseClick(e)} className='closeBtn'><i className='fa fa-fw fa-times'/></button>
+
+        {currentTab}
+
+        <div className='tabNav'>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'create' ? ' active' : '')}/>
+          <i className={'fa fa-circle fa-fw' + (this.state.currentTab === 'select' ? ' active' : '')}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+CreateNewTeam.propTypes = {
+  close: PropTypes.func
+}
+CreateNewTeam.prototype.linkState = linkState

lib/components/modal/EditedAlert.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react'
+import store from 'boost/store'
+import { unlockStatus } from 'boost/actions'
+
+export default class EditedAlert extends React.Component {
+  handleNoButtonClick (e) {
+    this.props.close()
+  }
+
+  handleYesButtonClick (e) {
+    store.dispatch(unlockStatus())
+    store.dispatch(this.props.action)
+    this.props.close()
+  }
+
+  render () {
+    return (
+      <div className='EditedAlert modal'>
+        <div className='title'>Your article is still editing!</div>
+
+        <div className='message'>Do you really want to leave without finishing?</div>
+
+        <div className='control'>
+          <button onClick={e => this.handleNoButtonClick(e)}><i className='fa fa-fw fa-close'/> No</button>
+          <button onClick={e => this.handleYesButtonClick(e)} className='primary'><i className='fa fa-fw fa-check'/> Yes</button>
+        </div>
+      </div>
+    )
+  }
+}
+
+EditedAlert.propTypes = {
+  action: PropTypes.object,
+  close: PropTypes.func
+}

lib/components/modal/Preference/AppSettingTab.js

@@ -0,0 +1,99 @@
+import React from 'react'
+import linkState from 'boost/linkState'
+import remote from 'remote'
+import ipc from 'ipc'
+
+export default class AppSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+    let keymap = remote.getGlobal('keymap')
+
+    this.state = {
+      toggleFinder: keymap.toggleFinder,
+      alert: null
+    }
+  }
+
+  componentDidMount () {
+    this.handleSettingDone = () => {
+      this.setState({alert: {
+        type: 'success',
+        message: 'Successfully done!'
+      }})
+    }
+    this.handleSettingError = err => {
+      this.setState({alert: {
+        type: 'error',
+        message: err.message
+      }})
+    }
+    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)
+  }
+
+  submitHotKey () {
+    ipc.send('hotkeyUpdated', {
+      toggleFinder: this.state.toggleFinder
+    })
+  }
+
+  handleSaveButtonClick (e) {
+    this.submitHotKey()
+  }
+
+  handleKeyDown (e) {
+    this.submitHotKey()
+  }
+
+  render () {
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+
+    return (
+      <div className='AppSettingTab content'>
+        <div className='section'>
+          <div className='sectionTitle'>Hotkey</div>
+          <div className='sectionInput'>
+            <label>Toggle Finder(popup)</label>
+            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('toggleFinder')} type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+            {alertElement}
+          </div>
+          <div className='description'>
+            <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>
+    )
+  }
+}
+
+AppSettingTab.prototype.linkState = linkState

lib/components/modal/Preference/ContactTab.js

@@ -0,0 +1,123 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { getClientKey } from 'boost/activityRecord'
+import linkState from 'boost/linkState'
+import _ from 'lodash'
+import { request, WEB_URL } from 'boost/api'
+
+const FORM_MODE = 'FORM_MODE'
+const DONE_MODE = 'DONE_MODE'
+
+export default class ContactTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      title: '',
+      content: '',
+      email: '',
+      mode: FORM_MODE,
+      alert: null
+    }
+  }
+
+  componentDidMount () {
+    let titleInput = ReactDOM.findDOMNode(this.refs.title)
+    if (titleInput != null) titleInput.focus()
+  }
+
+  handleBackButtonClick (e) {
+    this.setState({
+      mode: FORM_MODE
+    })
+  }
+
+  handleSendButtonClick (e) {
+    let input = _.pick(this.state, ['title', 'content', 'email'])
+    input.clientKey = getClientKey()
+
+    this.setState({
+      alert: {
+        type: 'info',
+        message: 'Sending...'
+      }
+    }, () => {
+      request.post(WEB_URL + 'apis/inquiry')
+        .send(input)
+        .then(res => {
+          console.log('sent')
+          this.setState({
+            title: '',
+            content: '',
+            mode: DONE_MODE,
+            alert: null
+          })
+        })
+        .catch(err => {
+          if (err.code === 'ECONNREFUSED') {
+            this.setState({
+              alert: {
+                type: 'error',
+                message: 'Can\'t connect to API server.'
+              }
+            })
+          } else {
+            console.error(err)
+            this.setState({
+              alert: {
+                type: 'error',
+                message: err.message
+              }
+            })
+          }
+        })
+    })
+  }
+
+  render () {
+    switch (this.state.mode) {
+      case DONE_MODE:
+        return (
+          <div className='ContactTab content done'>
+            <div className='message'>
+              <i className='checkIcon fa fa-check-circle'/><br/>
+              Your message has been sent successfully!!
+            </div>
+            <div className='control'>
+              <button onClick={e => this.handleBackButtonClick(e)}>Back to Contact form</button>
+            </div>
+          </div>
+        )
+      case FORM_MODE:
+      default:
+        let alertElement = this.state.alert != null
+          ? (
+            <div className={'alert ' + this.state.alert.type}>{this.state.alert.message}</div>
+          )
+          : null
+        return (
+          <div className='ContactTab content form'>
+            <div className='title'>Contact form</div>
+            <div className='description'>
+              Your feedback is highly appreciated and will help us to improve our app. :D
+            </div>
+            <div className='iptGroup'>
+              <input ref='title' valueLink={this.linkState('title')} placeholder='Title' type='text'/>
+            </div>
+            <div className='iptGroup'>
+              <textarea valueLink={this.linkState('content')} placeholder='Content'/>
+            </div>
+            <div className='iptGroup'>
+              <input valueLink={this.linkState('email')} placeholder='E-mail (Optional)' type='email'/>
+            </div>
+            <div className='formControl'>
+              <button onClick={e => this.handleSendButtonClick(e)} className='primary'>Send</button>
+              {alertElement}
+            </div>
+          </div>
+        )
+    }
+  }
+}
+
+ContactTab.prototype.linkState = linkState

lib/components/modal/Preference/FolderRow.js

@@ -0,0 +1,187 @@
+import React, { PropTypes } from 'react'
+import linkState from 'boost/linkState'
+import FolderMark from 'boost/components/FolderMark'
+import store from 'boost/store'
+import { updateFolder, destroyFolder, replaceFolder } from 'boost/actions'
+
+const IDLE = 'IDLE'
+const EDIT = 'EDIT'
+const DELETE = 'DELETE'
+
+export default class FolderRow extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE
+    }
+  }
+
+  handleUpClick (e) {
+    let { index } = this.props
+    if (index > 0) {
+      store.dispatch(replaceFolder(index, index - 1))
+    }
+  }
+
+  handleDownClick (e) {
+    let { index, count } = this.props
+    if (index < count - 1) {
+      store.dispatch(replaceFolder(index, index + 1))
+    }
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({
+      mode: IDLE
+    })
+  }
+
+  handleEditButtonClick (e) {
+    this.setState({
+      mode: EDIT,
+      name: this.props.folder.name,
+      color: this.props.folder.color,
+      isColorEditing: false
+    })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({mode: DELETE})
+  }
+
+  handleNameInputKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleSaveButtonClick()
+    }
+  }
+
+  handleColorSelectClick (e) {
+    this.setState({
+      isColorEditing: true
+    })
+  }
+
+  handleColorButtonClick (index) {
+    return e => {
+      this.setState({
+        color: index,
+        isColorEditing: false
+      })
+    }
+  }
+
+  handleSaveButtonClick (e) {
+    let { folder, setAlert } = this.props
+
+    setAlert(null, () => {
+      let input = {
+        name: this.state.name,
+        color: this.state.color
+      }
+      folder = Object.assign({}, folder, input)
+
+      try {
+        store.dispatch(updateFolder(folder))
+        this.setState({
+          mode: IDLE
+        })
+      } catch (e) {
+        console.error(e)
+        setAlert({
+          type: 'error',
+          message: e.message
+        })
+      }
+    })
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let { folder } = this.props
+    store.dispatch(destroyFolder(folder.key))
+  }
+
+  render () {
+    let folder = this.props.folder
+
+    switch (this.state.mode) {
+      case EDIT:
+        let colorIndexes = []
+        for (let i = 0; i < 8; i++) {
+          colorIndexes.push(i)
+        }
+
+        let colorOptions = colorIndexes.map(index => {
+          let className = this.state.color === index
+            ? 'active'
+            : null
+          return (
+            <button onClick={e => this.handleColorButtonClick(index)(e)} className={className} key={index}>
+              <FolderMark color={index}/>
+            </button>
+          )
+        })
+
+        return (
+          <div className='FolderRow edit'>
+            <div className='folderColor'>
+              <button onClick={e => this.handleColorSelectClick(e)} className='select'>
+                <FolderMark color={this.state.color}/>
+              </button>
+              {this.state.isColorEditing
+                ? (
+                  <div className='options'>
+                    <div className='label'>Color select</div>
+                    {colorOptions}
+                  </div>
+                )
+                : null
+              }
+            </div>
+            <div className='folderName'>
+              <input onKeyDown={e => this.handleNameInputKeyDown(e)} valueLink={this.linkState('name')} type='text'/>
+            </div>
+            <div className='folderControl'>
+              <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Save</button>
+              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </div>
+        )
+      case DELETE:
+        return (
+          <div className='FolderRow delete'>
+            <div className='folderDeleteLabel'>Are you sure to delete <strong>{folder.name}</strong> folder?</div>
+            <div className='folderControl'>
+              <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>Sure</button>
+              <button onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </div>
+        )
+      case IDLE:
+      default:
+        return (
+          <div className='FolderRow'>
+            <div className='sortBtns'>
+              <button onClick={e => this.handleUpClick(e)}><i className='fa fa-sort-up fa-fw'/></button>
+              <button onClick={e => this.handleDownClick(e)}><i className='fa fa-sort-down fa-fw'/></button>
+            </div>
+            <div className='folderColor'><FolderMark color={folder.color}/></div>
+            <div className='folderName'>{folder.name}</div>
+            <div className='folderControl'>
+              <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
+              <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-close'/></button>
+            </div>
+          </div>
+        )
+    }
+  }
+}
+
+FolderRow.propTypes = {
+  folder: PropTypes.shape(),
+  index: PropTypes.number,
+  count: PropTypes.number,
+  setAlert: PropTypes.func
+}
+
+FolderRow.prototype.linkState = linkState

lib/components/modal/Preference/FolderSettingTab.js

@@ -0,0 +1,99 @@
+import React, { PropTypes } from 'react'
+import FolderRow from './FolderRow'
+import linkState from 'boost/linkState'
+import { createFolder } from 'boost/actions'
+
+export default class FolderSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      name: ''
+    }
+  }
+
+  handleNewFolderNameKeyDown (e) {
+    if (e.keyCode === 13) {
+      this.handleSaveButtonClick()
+    }
+  }
+
+  handleSaveButtonClick (e) {
+    this.setState({alert: null}, () => {
+      if (this.state.name.trim().length === 0) return false
+
+      let { dispatch } = this.props
+
+      try {
+        dispatch(createFolder({
+          name: this.state.name
+        }))
+      } catch (e) {
+        this.setState({alert: {
+          type: 'error',
+          message: e.message
+        }})
+        return
+      }
+
+      this.setState({name: ''})
+    })
+  }
+
+  setAlert (alert, cb) {
+    this.setState({alert: alert}, cb)
+  }
+
+  render () {
+    let { folders } = this.props
+    let folderElements = folders.map((folder, index) => {
+      return (
+        <FolderRow
+          key={'folder-' + folder.key}
+          folder={folder}
+          index={index}
+          count={folders.length}
+          setAlert={(alert, cb) => this.setAlert(alert, cb)}
+        />
+      )
+    })
+
+    let alert = this.state.alert
+    let alertElement = alert != null ? (
+        <p className={`alert ${alert.type}`}>
+          {alert.message}
+        </p>
+      ) : null
+
+    return (
+      <div className='FolderSettingTab content'>
+        <div className='section'>
+          <div className='sectionTitle'>Manage folder</div>
+          <div className='folderTable'>
+            <div className='folderHeader'>
+              <div className='folderName'>Folder</div>
+              <div className='folderControl'>Edit/Delete</div>
+            </div>
+            {folderElements}
+            <div className='newFolder'>
+              <div className='folderName'>
+                <input onKeyDown={e => this.handleNewFolderNameKeyDown(e)} valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+              </div>
+              <div className='folderControl'>
+                <button onClick={e => this.handleSaveButtonClick(e)} className='primary'>Add</button>
+              </div>
+            </div>
+            {alertElement}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+FolderSettingTab.propTypes = {
+  folders: PropTypes.array,
+  dispatch: PropTypes.func
+}
+
+FolderSettingTab.prototype.linkState = linkState

lib/components/modal/Preference/HelpTab.js

@@ -0,0 +1,11 @@
+import React, { PropTypes } from 'react'
+
+export default class HelpTab extends React.Component {
+  render () {
+    return (
+      <div className='content help'>
+        Comming soon
+      </div>
+    )
+  }
+}

lib/components/modal/Preference/MemberRow.js

@@ -0,0 +1,106 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import api from 'boost/api'
+
+const IDLE = 'IDLE'
+const DELETE = 'DELETE'
+
+export default class MemberRow extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      mode: IDLE
+    }
+  }
+  handleMemberRoleChange (e) {
+    let input = {
+      name: this.props.member.name,
+      role: e.target.value
+    }
+
+    api.setMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  handleDeleteButtonClick (e) {
+    this.setState({mode: DELETE})
+  }
+
+  handleCancelButtonClick (e) {
+    this.setState({mode: IDLE})
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    let input = {
+      name: this.props.member.name
+    }
+
+    api.deleteMember(this.props.team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  render () {
+    let member = this.props.member
+    let currentUser = this.props.currentUser
+    let isDisabled = (currentUser.id === member.id)
+
+    switch (this.state.mode) {
+      case DELETE:
+        return (
+          <li className='MemberRow edit'>
+            <div className='colDescription'>
+              Are you sure to remove <strong>{member.profileName}</strong> ?
+            </div>
+            <div className='colDeleteConfirm'>
+              <button className='deleteButton primary' onClick={e => this.handleDeleteConfirmButtonClick(e)}>Sure</button>
+              <button className='deleteButton' onClick={e => this.handleCancelButtonClick(e)}>Cancel</button>
+            </div>
+          </li>
+        )
+      case IDLE:
+      default:
+        return (
+          <li className='MemberRow'>
+            <div className='colUserName'>
+              <ProfileImage className='userPhoto' email={member.email} size='30'/>
+              <div className='userInfo'>
+                <div className='userName'>{`${member.profileName} (${member.name})`}</div>
+                <div className='userEmail'>{member.email}</div>
+              </div>
+            </div>
+
+            <div className='colRole'>
+              <select onChange={e => this.handleMemberRoleChange(e)} disabled={isDisabled} value={member._pivot_role} className='userRole'>
+                <option value='owner'>Owner</option>
+                <option value='member'>Member</option>
+              </select>
+            </div>
+            <div className='colDelete'>
+              <button className='deleteButton' onClick={e => this.handleDeleteButtonClick(e)} disabled={isDisabled}><i className='fa fa-times fa-fw'/></button>
+            </div>
+          </li>
+        )
+    }
+  }
+}
+
+MemberRow.propTypes = {
+  member: PropTypes.shape(),
+  currentUser: PropTypes.shape(),
+  team: PropTypes.shape({
+    id: PropTypes.number
+  })
+}

lib/components/modal/Preference/MemberSettingTab.js

@@ -0,0 +1,149 @@
+import React, { PropTypes } from 'react'
+import ProfileImage from 'boost/components/ProfileImage'
+import Select from 'react-select'
+import api from 'boost/api'
+import _ from 'lodash'
+import MemberRow from './MemberRow'
+
+function getUsers (input, cb) {
+  api.searchUser(input)
+    .then(function (res) {
+      let users = res.body
+
+      cb(null, {
+        options: users.map(user => {
+          return { value: user.name, label: user.name }
+        }),
+        complete: false
+      })
+    })
+    .catch(function (err) {
+      console.error(err)
+    })
+}
+
+export default class MemberSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      newMember: ''
+    }
+  }
+
+  getCurrentTeam (props) {
+    if (props == null) props = this.props
+    return _.findWhere(props.teams, {id: props.currentTeamId})
+  }
+
+  handleTeamSelectChange (e) {
+    this.props.switchTeam(e.target.value)
+  }
+
+  handleNewMemberChange (value) {
+    this.setState({newMember: value})
+  }
+
+  handleClickAddMemberButton (e) {
+    let team = this.getCurrentTeam()
+    if (team == null || team.userType !== 'team') return null
+
+    let input = {
+      name: this.state.newMember,
+      role: 'member'
+    }
+    api.setMember(team.id, input)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        if (err.status != null) throw err
+        else console.error(err)
+      })
+  }
+
+  renderTeamOptions () {
+    return this.props.teams.map(team => {
+      return (
+        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
+    })
+  }
+
+  render () {
+    console.log(this.props.teams)
+
+    let team = this.getCurrentTeam()
+
+    if (team == null || team.userType === 'person') {
+      return this.renderNoTeam()
+    }
+
+    let membersEl = team.Members.map(member => (
+      <MemberRow key={'user-' + member.id} member={member} team={team} currentUser={this.props.currentUser}/>
+    ))
+
+    return (
+      <div className='MemberSettingTab content'>
+        <div className='header'>
+          <span>Setting of</span>
+          <select
+            value={this.props.currentTeamId}
+            onChange={e => this.handleTeamSelectChange(e)}
+            className='teamSelect'>
+            {this.renderTeamOptions()}
+          </select>
+        </div>
+
+        <div className='membersTableSection section'>
+          <div className='sectionTitle'>Members</div>
+          <div className='addMember'>
+            <div className='addMemberLabel'>Add member</div>
+            <div className='addMemberControl'>
+              <Select
+                className='memberName'
+                placeholder='Input username to add'
+                autoload={false}
+                asyncOptions={getUsers}
+                onChange={val => this.handleNewMemberChange(val)}
+                value={this.state.newMember}
+              />
+              <button onClick={e => this.handleClickAddMemberButton(e)} className='addMemberBtn'>add</button>
+            </div>
+          </div>
+          <ul className='memberList'>
+            <li className='header'>
+              <div className='colUserName'>Username</div>
+              <div className='colRole'>Role</div>
+              <div className='colDelete'>Delete</div>
+            </li>
+            {membersEl}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+
+  renderNoTeam () {
+    return (
+        <div className='TeamSettingTab content'>
+          <div className='header'>
+            <span>Setting of</span>
+            <select
+              value={this.props.currentTeamId}
+              onChange={e => this.handleTeamSelectChange(e)}
+              className='teamSelect'>
+              {this.renderTeamOptions()}
+            </select>
+          </div>
+          <div className='section'>Please select a team</div>
+        </div>
+    )
+  }
+}
+
+MemberSettingTab.propTypes = {
+  currentUser: PropTypes.shape(),
+  teams: PropTypes.array,
+  currentTeamId: PropTypes.number,
+  switchTeam: PropTypes.func
+}

lib/components/modal/Preference/TeamSettingTab.js

@@ -0,0 +1,171 @@
+import React, { PropTypes } from 'react'
+import _ from 'lodash'
+import linkState from 'boost/linkState'
+import api from 'boost/api'
+
+export default class TeamSettingTab extends React.Component {
+  constructor (props) {
+    super(props)
+    let team = this.getCurrentTeam(props)
+    this.state = {
+      teamName: team != null ? team.profileName : '',
+      deleteConfirm: false,
+      alert: null
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    let team = this.getCurrentTeam(nextProps)
+
+    this.setState({
+      teamName: team != null ? team.profileName : '',
+      deleteConfirm: false
+    })
+  }
+
+  getCurrentTeam (props) {
+    if (props == null) props = this.props
+    return _.findWhere(props.teams, {id: props.currentTeamId})
+  }
+
+  handleTeamSelectChange (e) {
+    this.props.switchTeam(e.target.value)
+  }
+
+  handleSaveButtonClick (e) {
+    let input = {
+      profileName: this.state.teamName
+    }
+    let alert = {
+      type: 'info',
+      message: 'Sending...'
+    }
+    this.setState({alert}, () => {
+      api.updateTeamInfo(this.props.currentTeamId, input)
+        .then(res => {
+          console.log(res.body)
+          let alert = {
+            type: 'success',
+            message: 'Successfully done!'
+          }
+          this.setState({alert})
+        })
+        .catch(err => {
+          var message
+          if (err.status != null) {
+            message = err.response.body.message
+          } else if (err.code === 'ECONNREFUSED') {
+            message = 'Can\'t connect to API server.'
+          } else throw err
+
+          let alert = {
+            type: 'error',
+            message: message
+          }
+
+          this.setState({alert})
+        })
+    })
+  }
+
+  handleDeleteConfirmButtonClick (e) {
+    api.destroyTeam(this.props.currentTeamId)
+      .then(res => {
+        console.log(res.body)
+      })
+      .catch(err => {
+        let message
+        if (err.status != null) {
+          message = err.response.body.message
+        } else if (err.code === 'ECONNREFUSED') {
+          message = 'Can\'t connect to API server.'
+        } else throw err
+        console.log(message)
+      })
+  }
+
+  renderTeamOptions () {
+    return this.props.teams.map(team => {
+      return (
+        <option key={'team-' + team.id} value={team.id}>{team.name}</option>)
+    })
+  }
+
+  render () {
+    let team = this.getCurrentTeam()
+
+    if (team == null || team.userType === 'person') {
+      return this.renderNoTeam()
+    }
+
+    return (
+      <div className='TeamSettingTab content'>
+        <div className='header'>
+          <span>Setting of</span>
+          <select
+            value={this.props.currentTeamId}
+            onChange={e => this.handleTeamSelectChange(e)}
+            className='teamSelect'>
+            {this.renderTeamOptions()}
+          </select>
+        </div>
+        <div className='section'>
+          <div className='sectionTitle'>Team profile</div>
+          <div className='sectionInput'>
+            <label className='label'>Team Name</label>
+            <input valueLink={this.linkState('teamName')} type='text'/>
+          </div>
+          <div className='sectionConfirm'>
+            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
+
+            {this.state.alert != null
+              ? (
+                <div className={'alert ' + this.state.alert.type}>{this.state.alert.message}</div>
+              )
+              : null}
+          </div>
+        </div>
+
+        {!this.state.deleteConfirm
+          ? (
+            <div className='section teamDelete'>
+              <label>Delete this team</label>
+              <button onClick={e => this.setState({deleteConfirm: true})} className='deleteBtn'><i className='fa fa-fw fa-trash'/> Delete</button>
+            </div>
+          )
+          : (
+            <div className='section teamDeleteConfirm'>
+              <label>Are you sure to delete this team?</label>
+              <button onClick={e => this.setState({deleteConfirm: false})}>Cancel</button>
+              <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='deleteBtn'><i className='fa fa-fw fa-check'/> Sure</button>
+            </div>
+          )}
+      </div>
+    )
+  }
+
+  renderNoTeam () {
+    return (
+        <div className='TeamSettingTab content'>
+          <div className='header'>
+            <span>Setting of</span>
+            <select
+              value={this.props.currentTeamId}
+              onChange={e => this.handleTeamSelectChange(e)}
+              className='teamSelect'>
+              {this.renderTeamOptions()}
+            </select>
+          </div>
+          <div className='section'>Please select a team</div>
+        </div>
+    )
+  }
+}
+
+TeamSettingTab.propTypes = {
+  currentTeamId: PropTypes.number,
+  teams: PropTypes.array,
+  switchTeam: PropTypes.func
+}
+
+TeamSettingTab.prototype.linkState = linkState

lib/components/modal/Preferences.js

@@ -0,0 +1,265 @@
+import React, { PropTypes } from 'react'
+import { connect, Provider } from 'react-redux'
+import linkState from 'boost/linkState'
+import store from 'boost/store'
+import AppSettingTab from './Preference/AppSettingTab'
+import HelpTab from './Preference/HelpTab'
+import FolderSettingTab from './Preference/FolderSettingTab'
+import ContactTab from './Preference/ContactTab'
+import { closeModal } from 'boost/modal'
+
+const APP = 'APP'
+const HELP = 'HELP'
+const FOLDER = 'FOLDER'
+const CONTACT = 'CONTACT'
+
+class Preferences extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      currentTab: APP
+    }
+  }
+
+  switchTeam (teamId) {
+    this.setState({currentTeamId: teamId})
+  }
+
+  handleNavButtonClick (tab) {
+    return e => {
+      this.setState({currentTab: tab})
+    }
+  }
+
+  render () {
+    let content = this.renderContent()
+
+    let tabs = [
+      {target: APP, label: 'Preferences'},
+      {target: FOLDER, label: 'Manage folder'},
+      {target: CONTACT, label: 'Contact form'}
+    ]
+
+    let navButtons = tabs.map(tab => (
+      <button key={tab.target} onClick={e => this.handleNavButtonClick(tab.target)(e)} className={this.state.currentTab === tab.target ? 'active' : ''}>{tab.label}</button>
+    ))
+
+    return (
+      <div className='Preferences modal'>
+        <div className='header'>
+          <div className='title'>Setting</div>
+          <button onClick={e => closeModal()} className='closeBtn'>Done</button>
+        </div>
+
+        <div className='nav'>
+          {navButtons}
+        </div>
+
+        {content}
+      </div>
+    )
+  }
+
+  renderContent () {
+    let { folders, dispatch } = this.props
+
+    switch (this.state.currentTab) {
+      case HELP:
+        return (<HelpTab/>)
+      case FOLDER:
+        return (
+          <FolderSettingTab
+            dispatch={dispatch}
+            folders={folders}
+          />
+        )
+      case CONTACT:
+        return (
+          <ContactTab/>
+        )
+      case APP:
+      default:
+        return (<AppSettingTab/>)
+    }
+  }
+
+  // handleProfileSaveButtonClick (e) {
+  //   let profileState = this.state.profile
+  //   profileState.userInfo.alert = {
+  //     type: 'info',
+  //     message: 'Sending...'
+  //   }
+  //   this.setState({profile: profileState}, () => {
+  //     let input = {
+  //       profileName: profileState.userInfo.profileName,
+  //       email: profileState.userInfo.email
+  //     }
+  //     api.updateUserInfo(input)
+  //       .then(res => {
+  //         let profileState = this.state.profile
+  //         profileState.userInfo.alert = {
+  //           type: 'success',
+  //           message: 'Successfully done!'
+  //         }
+  //         this.setState({profile: profileState})
+  //       })
+  //       .catch(err => {
+  //         var message
+  //         if (err.status != null) {
+  //           message = err.response.body.message
+  //         } else if (err.code === 'ECONNREFUSED') {
+  //           message = 'Can\'t connect to API server.'
+  //         } else throw err
+
+  //         let profileState = this.state.profile
+  //         profileState.userInfo.alert = {
+  //           type: 'error',
+  //           message: message
+  //         }
+
+  //         this.setState({profile: profileState})
+  //       })
+  //   })
+  // }
+
+  // handlePasswordSaveButton (e) {
+  //   let profileState = this.state.profile
+
+  //   if (profileState.password.newPassword !== profileState.password.confirmation) {
+  //     profileState.password.alert = {
+  //       type: 'error',
+  //       message: 'Confirmation doesn\'t match'
+  //     }
+  //     this.setState({profile: profileState})
+  //     return
+  //   }
+
+  //   profileState.password.alert = {
+  //     type: 'info',
+  //     message: 'Sending...'
+  //   }
+
+  //   this.setState({profile: profileState}, () => {
+  //     let input = {
+  //       password: profileState.password.currentPassword,
+  //       newPassword: profileState.password.newPassword
+  //     }
+  //     api.updatePassword(input)
+  //       .then(res => {
+  //         let profileState = this.state.profile
+  //         profileState.password.alert = {
+  //           type: 'success',
+  //           message: 'Successfully done!'
+  //         }
+  //         profileState.password.currentPassword = ''
+  //         profileState.password.newPassword = ''
+  //         profileState.password.confirmation = ''
+
+  //         this.setState({profile: profileState})
+  //       })
+  //       .catch(err => {
+  //         var message
+  //         if (err.status != null) {
+  //           message = err.response.body.message
+  //         } else if (err.code === 'ECONNREFUSED') {
+  //           message = 'Can\'t connect to API server.'
+  //         } else throw err
+
+  //         let profileState = this.state.profile
+  //         profileState.password.alert = {
+  //           type: 'error',
+  //           message: message
+  //         }
+  //         profileState.password.currentPassword = ''
+  //         profileState.password.newPassword = ''
+  //         profileState.password.confirmation = ''
+
+  //         this.setState({profile: profileState}, () => {
+  //           if (this.refs.currentPassword != null) findDOMNode(this.refs.currentPassword).focus()
+  //         })
+  //       })
+  //   })
+  // }
+
+  // renderProfile () {
+  //   let profileState = this.state.profile
+  //   return (
+  //     <div className='content profile'>
+  //       <div className='section userSection'>
+  //         <div className='sectionTitle'>User Info</div>
+  //         <div className='sectionInput'>
+  //           <label>Profile Name</label>
+  //           <input valueLink={this.linkState('profile.userInfo.profileName')} type='text'/>
+  //         </div>
+  //         <div className='sectionInput'>
+  //           <label>E-mail</label>
+  //           <input valueLink={this.linkState('profile.userInfo.email')} type='text'/>
+  //         </div>
+  //         <div className='sectionConfirm'>
+  //           <button onClick={e => this.handleProfileSaveButtonClick(e)}>Save</button>
+
+  //           {this.state.profile.userInfo.alert != null
+  //             ? (
+  //               <div className={'alert ' + profileState.userInfo.alert.type}>{profileState.userInfo.alert.message}</div>
+  //             )
+  //             : null}
+  //         </div>
+  //       </div>
+
+  //       <div className='section passwordSection'>
+  //         <div className='sectionTitle'>Password</div>
+  //         <div className='sectionInput'>
+  //           <label>Current Password</label>
+  //           <input ref='currentPassword' valueLink={this.linkState('profile.password.currentPassword')} type='password' placeholder='Current Password'/>
+  //         </div>
+  //         <div className='sectionInput'>
+  //           <label>New Password</label>
+  //           <input valueLink={this.linkState('profile.password.newPassword')} type='password' placeholder='New Password'/>
+  //         </div>
+  //         <div className='sectionInput'>
+  //           <label>Confirmation</label>
+  //           <input valueLink={this.linkState('profile.password.confirmation')} type='password' placeholder='Confirmation'/>
+  //         </div>
+  //         <div className='sectionConfirm'>
+  //           <button onClick={e => this.handlePasswordSaveButton(e)}>Save</button>
+
+  //           {profileState.password.alert != null
+  //             ? (
+  //               <div className={'alert ' + profileState.password.alert.type}>{profileState.password.alert.message}</div>
+  //             )
+  //             : null}
+  //         </div>
+  //       </div>
+  //     </div>
+  //   )
+  // }
+
+}
+
+Preferences.propTypes = {
+  folders: PropTypes.array,
+  dispatch: PropTypes.func
+}
+
+Preferences.prototype.linkState = linkState
+
+function remap (state) {
+  let { folders, status } = state
+
+  return {
+    folders,
+    status
+  }
+}
+
+let RootComponent = connect(remap)(Preferences)
+export default class PreferencesModal extends React.Component {
+  render () {
+    return (
+      <Provider store={store}>
+        <RootComponent/>
+      </Provider>
+    )
+  }
+}

lib/components/modal/Tutorial.js

@@ -0,0 +1,115 @@
+import React, { PropTypes } from 'react'
+import MarkdownPreview from 'boost/components/MarkdownPreview'
+import CodeEditor from 'boost/components/CodeEditor'
+
+export default class Tutorial extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      slideIndex: 0
+    }
+  }
+
+  handlePriorSlideClick () {
+    if (this.state.slideIndex > 0) this.setState({slideIndex: this.state.slideIndex - 1})
+  }
+
+  handleNextSlideClick () {
+    if (this.state.slideIndex < 4) this.setState({slideIndex: this.state.slideIndex + 1})
+  }
+
+  startButtonClick (e) {
+    this.props.close()
+  }
+
+  render () {
+    let content = this.renderContent(this.state.slideIndex)
+
+    let dotElements = []
+    for (let i = 0; i < 5; i++) {
+      dotElements.push(<i key={i} className={'fa fa-fw fa-circle' + (i === this.state.slideIndex ? ' active' : '')}/>)
+    }
+
+    return (
+      <div className='Tutorial modal'>
+        <button onClick={e => this.handlePriorSlideClick()} className={'priorBtn' + (this.state.slideIndex === 0 ? ' hide' : '')}>
+          <i className='fa fa-fw fa-angle-left'/>
+        </button>
+        <button onClick={e => this.handleNextSlideClick()} className={'nextBtn' + (this.state.slideIndex === 4 ? ' hide' : '')}>
+          <i className='fa fa-fw fa-angle-right'/>
+        </button>
+        {content}
+        <div className='dots'>
+          {dotElements}
+        </div>
+      </div>
+    )
+  }
+
+  renderContent (index) {
+    switch (index) {
+      case 0:
+        return (<div className='slide slide0'>
+          <div className='title'>Welcome to Boost</div>
+          <div className='content'>
+            Boost is a brand new note app for software<br/>
+            Don't waste time cleaning up your data.<br/>
+            devote that time to more creative work.<br/>
+            Hack your memory.
+          </div>
+        </div>)
+      case 1:
+        let content = '## Boost is a note app for engineer.\n\n - Write with markdown\n - Stylize beautiful'
+        return (<div className='slide slide1'>
+          <div className='title'>Write with Markdown</div>
+          <div className='content'>
+            Markdown is available.<br/>
+            Your notes will be stylized beautifully and quickly.
+            <div className='markdown'>
+              <pre className='left'>{content}</pre>
+              <MarkdownPreview className='right' content={content}/>
+            </div>
+          </div>
+        </div>)
+      case 2:
+        let code = 'import shell from \'shell\'\r\nvar React = require(\'react\')\r\nvar { PropTypes } = React\r\nimport markdown from \'boost\/markdown\'\r\nvar ReactDOM = require(\'react-dom\')\r\n\r\nfunction handleAnchorClick (e) {\r\n  shell.openExternal(e.target.href)\r\n  e.preventDefault()\r\n}\r\n\r\nexport default class MarkdownPreview extends React.Component {\r\n  componentDidMount () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentDidUpdate () {\r\n    this.addListener()\r\n  }\r\n\r\n  componentWillUnmount () {\r\n    this.removeListener()\r\n  }'
+        return (<div className='slide slide2'>
+          <div className='title'>Beautiful code highlighting</div>
+          <div className='content'>
+            Boost supports code syntax highlighting.<br/>
+            There are more than 100 different type of language.
+            <div className='code'>
+              <CodeEditor readOnly mode='jsx' code={code}/>
+            </div>
+          </div>
+        </div>)
+      case 3:
+        return (<div className='slide slide3'>
+          <div className='title'>Easy to access with Finder</div>
+          <div className='content'>
+            The Finder helps you organize all of the files and documents.<br/>
+            There is a short-cut key [control + shift + tab] to open the Finder.<br/>
+            It is available to save your articles on the Clipboard<br/>
+            by selecting your file with pressing Enter key,<br/>
+            and to paste the contents of the Clipboard with [Command-V]
+
+            <img width='480' src='../../resources/finder.png'/>
+          </div>
+        </div>)
+      case 4:
+        return (<div className='slide slide4'>
+          <div className='title'>Are you ready?</div>
+          <div className='content'>
+          <button onClick={e => this.startButtonClick(e)}>Start<br/>Boost</button>
+          </div>
+        </div>)
+      default:
+        return null
+    }
+  }
+}
+
+Tutorial.propTypes = {
+  close: PropTypes.func
+}

lib/dataStore.js

@@ -0,0 +1,64 @@
+import keygen from 'boost/keygen'
+
+let defaultContent = 'Boost is a brand new note App for programmers.\n\n> 下に日本語版があります。\n\n# \u25CEfeature\n\nBoost has some preponderant functions for efficient engineer\'s task.See some part of it.\n\n1. classify information by\u300CFolders\u300D\n2. deal with great variety of syntax\n3. Finder function\n\n\uFF0A\u3000\uFF0A\u3000\uFF0A\u3000\uFF0A\n\n# 1. classify information by \u300CFolders\u300D- access the information you needed easily.\n\n\u300CFolders\u300D which on the left side bar. Press plus button now. flexible way of classification.\n- Create Folder every language or flamework\n- Make Folder for your own casual memos\n\n# 2. Deal with a great variety of syntax \u2013 instead of your brain\nSave handy all information related with programming\n- Use markdown and gather api specification\n- Well using module and snippet\n\nSave them on Boost, you don\'t need to rewrite or re-search same code again.\n\n# 3. Load Finder function \u2013 now you don\'t need to spell command by hand typing.\n\n**Shift +cmd+tab** press buttons at same time.\nThen, the window will show up for search Boost contents that instant.\n\nUsing cursor key to chose, press enter, cmd+v to paste and\u2026 please check it out by your own eye.\n\n- Such command spl or linux which programmers often use but troublesome to hand type\n\n- (Phrases commonly used for e-mail or customer support)\n\nWe support preponderant efficiency\n\n\uFF0A\u3000\uFF0A\u3000\uFF0A\u3000\uFF0A\n\n## \u25CEfor more information\nFrequently updated with this blog ( http:\/\/blog-jp.b00st.io )\n\nHave wonderful programmer life!\n\n## Hack your memory**\n\n\n\n# 日本語版\n\n**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyntaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
+
+export function init () {
+  console.log('initialize data store')
+  let data = JSON.parse(localStorage.getItem('local'))
+  if (data == null) {
+    let defaultFolder = {
+      name: 'default',
+      key: keygen()
+    }
+    let defaultArticle = {
+      title: 'About Boost',
+      tags: ['boost', 'intro'],
+      content: defaultContent,
+      mode: 'markdown',
+      key: keygen(),
+      FolderKey: defaultFolder.key
+    }
+
+    data = {
+      articles: [defaultArticle],
+      folders: [defaultFolder],
+      version: '0.4'
+    }
+    localStorage.setItem('local', JSON.stringify(data))
+  }
+}
+
+function getKey (teamId) {
+  return teamId == null
+    ? 'local'
+    : `team-${teamId}`
+}
+
+export function getData (teamId) {
+  let key = getKey(teamId)
+  return JSON.parse(localStorage.getItem(key))
+}
+
+export function setArticles (teamId, articles) {
+  let key = getKey(teamId)
+  let data = JSON.parse(localStorage.getItem(key))
+  data.articles = articles
+  localStorage.setItem(key, JSON.stringify(data))
+}
+
+export function setFolders (teamId, folders) {
+  let key = getKey(teamId)
+  let data = JSON.parse(localStorage.getItem(key))
+  data.folders = folders
+  localStorage.setItem(key, JSON.stringify(data))
+}
+
+export default (function () {
+  init()
+  return {
+    init,
+    getData,
+    setArticles,
+    setFolders
+  }
+})()

lib/keygen.js

@@ -0,0 +1,7 @@
+var crypto = require('crypto')
+
+module.exports = function () {
+  var shasum = crypto.createHash('sha1')
+  shasum.update(((new Date()).getTime()).toString())
+  return shasum.digest('hex')
+}

lib/linkState.js

@@ -0,0 +1,36 @@
+function getIn (object, path) {
+  let stack = path.split('.')
+  while (stack.length > 1) {
+    object = object[stack.shift()]
+  }
+  return object[stack.shift()]
+}
+
+function updateIn (object, path, value) {
+  let current = object
+  let stack = path.split('.')
+  while (stack.length > 1) {
+    current = current[stack.shift()]
+  }
+  current[stack.shift()] = value
+  return object
+}
+
+function setPartialState (component, path, value) {
+  component.setState(
+    updateIn(component.state, path, value))
+}
+
+export default function linkState (path) {
+  return {
+    value: getIn(this.state, path),
+    requestChange: setPartialState.bind(null, this, path)
+  }
+}
+
+export function linkState2 (el, path) {
+  return {
+    value: getIn(el.state, path),
+    requestChange: setPartialState.bind(null, el, path)
+  }
+}

lib/markdown.js

@@ -0,0 +1,11 @@
+import markdownit from 'markdown-it'
+
+var md = markdownit({
+  typographer: true,
+  linkify: true
+})
+
+export default function markdown (content) {
+  if (content == null) content = ''
+  return md.render(content.toString())
+}