Merge branch 'dev'

* dev: hotfix: Edited alertが変な時に出る
hotfix: Edited alertが変な時に出る
2025-12-14 10:16:26 +00:00 · 2015-11-18 18:51:39 +09:00 · 2015-11-18 18:39:27 +09:00 · 2015-11-17 05:36:08 +09:00 · 2015-11-16 07:03:46 +09:00 · 2015-11-16 05:36:37 +09:00
33 changed files with 903 additions and 181 deletions
--- a/atom-lib/updater.js
+++ b/atom-lib/updater.js
@@ -5,33 +5,38 @@ 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.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
+      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.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
+      icon: path.resolve(__dirname, '../resources/favicon-230x230.png'),
      message: 'Download started.. wait for the update ready.'
    })
  })
  .on('update-not-available', function () {
-    nn.notify({
+    if (!versionNotified) {
-      title: 'Latest Build!! ' + versionText,
+      nn.notify({
-      icon: path.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
+        title: 'Latest Build!! ' + versionText,
-      message: 'Hope you to enjoy our app :D'
+        icon: path.resolve(__dirname, '../resources/favicon-230x230.png'),
-    })
+        message: 'Hope you to enjoy our app :D'
      })
      versionNotified = true
    }
  })
 module.exports = autoUpdater
--- a/browser/finder/FinderDetail.js
+++ b/browser/finder/FinderDetail.js
@@ -11,7 +11,16 @@ export default class FinderDetail extends React.Component {
      return (
        <div className='FinderDetail'>
          <div className='header'>
-          <ModeIcon mode={activeArticle.mode}/> {activeArticle.title}</div>
+            <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}/>
@@ -30,5 +39,6 @@ export default class FinderDetail extends React.Component {
 }
 FinderDetail.propTypes = {
-  activeArticle: PropTypes.shape()
+  activeArticle: PropTypes.shape(),
  saveToClipboard: PropTypes.func
 }
--- a/browser/finder/index.html
+++ b/browser/finder/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
-  <title>CodeXen Popup</title>
+  <title>Boost Finder</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
--- a/browser/finder/index.js
+++ b/browser/finder/index.js
@@ -14,9 +14,16 @@ 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'
@@ -45,10 +52,7 @@ class FinderMain extends React.Component {
    }
    if (e.keyCode === 13) {
-      let { activeArticle } = this.props
+      this.saveToClipboard()
      clipboard.writeText(activeArticle.content)
      activityRecord.emit('FINDER_COPY')
      hideFinder()
      e.preventDefault()
    }
    if (e.keyCode === 27) {
@@ -57,6 +61,19 @@ class FinderMain extends React.Component {
    }
  }
  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
@@ -83,6 +100,7 @@ class FinderMain extends React.Component {
  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
@@ -98,7 +116,10 @@ class FinderMain extends React.Component {
          dispatch={dispatch}
          selectArticle={article => this.selectArticle(article)}
        />
-        <FinderDetail activeArticle={activeArticle}/>
+        <FinderDetail
          activeArticle={activeArticle}
          saveToClipboard={saveToClipboard}
        />
      </div>
    )
  }
@@ -116,27 +137,47 @@ FinderMain.propTypes = {
  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(key => key.length > 0 && !key.match(/^#$/)).map(key => {
+  let filters = status.search.split(' ')
-    if (key.match(/^in:.+$/)) {
+    .map(key => key.trim())
-      return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
+    .filter(ignoreInvalidKey)
-    }
+    .map(buildFilter)
-    if (key.match(/^#(.+)/)) {
+
-      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
    }
    return {type: TEXT_FILTER, value: key}
  })
  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 targetFolders = folders.filter(folder => {
+    let exactTargetFolders = folders.filter(folder => {
-      return _.findWhere(folderFilters, {value: folder.name})
+      return _.find(folderExactFilters, filter => folder.name.match(new RegExp(`^${filter.value}$`)))
    })
-    status.targetFolders = targetFolders
+    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 => {
@@ -164,6 +205,7 @@ function remap (state) {
  let activeArticle = _.findWhere(articles, {key: status.articleKey})
  if (activeArticle == null) activeArticle = articles[0]
  console.log(status.search)
  return {
    articles,
    activeArticle,
--- a/browser/finder/reducer.js
+++ b/browser/finder/reducer.js
@@ -14,10 +14,10 @@ function status (state = initialStatus, action) {
  switch (action.type) {
    case SELECT_ARTICLE:
      state.articleKey = action.data.key
-      return state
+      return Object.assign({}, state)
    case SEARCH_ARTICLE:
      state.search = action.data.input
-      return state
+      return Object.assign({}, state)
    default:
      return state
  }
--- a/browser/main/HomePage.js
+++ b/browser/main/HomePage.js
@@ -12,6 +12,7 @@ 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 {
@@ -98,7 +99,7 @@ class HomePage extends React.Component {
  }
  render () {
-    let { dispatch, status, articles, activeArticle, folders, filters } = this.props
+    let { dispatch, status, articles, allArticles, activeArticle, folders, tags, filters } = this.props
    return (
      <div className='HomePage'>
@@ -107,6 +108,7 @@ class HomePage extends React.Component {
          dispatch={dispatch}
          folders={folders}
          status={status}
          allArticles={allArticles}
        />
        <ArticleTopBar
          ref='top'
@@ -127,6 +129,7 @@ class HomePage extends React.Component {
          activeArticle={activeArticle}
          folders={folders}
          status={status}
          tags={tags}
          filters={filters}
        />
      </div>
@@ -134,6 +137,25 @@ class HomePage extends React.Component {
  }
 }
 // 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
@@ -141,26 +163,33 @@ function remap (state) {
  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(key => key.length > 0 && !key.match(/^#$/)).map(key => {
+  let filters = status.search.split(' ')
-    if (key.match(/^in:.+$/)) {
+    .map(key => key.trim())
-      return {type: FOLDER_FILTER, value: key.match(/^in:(.+)$/)[1]}
+    .filter(ignoreInvalidKey)
-    }
+    .map(buildFilter)
-    if (key.match(/^#(.+)/)) {
+
-      return {type: TAG_FILTER, value: key.match(/^#(.+)$/)[1]}
+  let folderExactFilters = filters.filter(filter => filter.type === FOLDER_EXACT_FILTER)
    }
    return {type: TEXT_FILTER, value: key}
  })
  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 targetFolders = folders.filter(folder => {
+    let exactTargetFolders = folders.filter(folder => {
-      return _.findWhere(folderFilters, {value: folder.name})
+      return _.find(folderExactFilters, filter => folder.name.match(new RegExp(`^${filter.value}$`)))
    })
-    status.targetFolders = targetFolders
+    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 => {
@@ -202,11 +231,10 @@ function remap (state) {
  // or Change IDLE MODE
  if (status.mode === CREATE_MODE) {
    let newArticle = _.findWhere(articles, {status: 'NEW'})
-    let FolderKey = folders[0].key
+    console.log('targetFolders')
-    if (folderFilters.length > 0) {
+    let FolderKey = targetFolders.length > 0
-      let targetFolder = _.findWhere(folders, {name: folderFilters[0].value})
+      ? targetFolders[0].key
-      if (targetFolder != null) FolderKey = targetFolder.key
+      : folders[0].key
    }
    if (newArticle == null) {
      newArticle = {
@@ -229,8 +257,10 @@ function remap (state) {
  return {
    folders,
    status,
    allArticles,
    articles,
    activeArticle,
    tags,
    filters: {
      folder: folderFilters,
      tag: tagFilters,
@@ -247,6 +277,7 @@ HomePage.propTypes = {
    userId: PropTypes.string
  }),
  articles: PropTypes.array,
  allArticles: PropTypes.array,
  activeArticle: PropTypes.shape(),
  dispatch: PropTypes.func,
  folders: PropTypes.array,
--- a/browser/main/HomePage/ArticleDetail.js
+++ b/browser/main/HomePage/ArticleDetail.js
@@ -5,7 +5,20 @@ 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, updateArticle, destroyArticle, NEW } from 'boost/actions'
+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'
@@ -82,7 +95,12 @@ export default class ArticleDetail extends React.Component {
    this.state = {
      article: makeInstantArticle(props.activeArticle),
-      previewMode: false
+      previewMode: false,
      isArticleEdited: false,
      isTagChanged: false,
      isTitleChanged: false,
      isContentChanged: false,
      isModeChanged: false
    }
  }
@@ -117,7 +135,11 @@ export default class ArticleDetail extends React.Component {
    if (isModeChanged) {
      Object.assign(nextState, {
        openDeleteConfirmMenu: false,
-        previewMode: false
+        previewMode: false,
        isArticleEdited: false,
        isTagChanged: false,
        isTitleChanged: false,
        isContentChanged: false
      })
    }
@@ -224,6 +246,8 @@ export default class ArticleDetail extends React.Component {
  handleCancelButtonClick (e) {
    let { activeArticle, dispatch } = this.props
    dispatch(unlockStatus())
    if (activeArticle.status === NEW) dispatch(switchArticle(null))
    dispatch(switchMode(IDLE_MODE))
  }
@@ -236,6 +260,8 @@ export default class ArticleDetail extends React.Component {
    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) {
@@ -263,19 +289,85 @@ export default class ArticleDetail extends React.Component {
    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
+    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: article,
+      article,
-      previewMode: false
+      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())
        }
      }
    })
  }
@@ -286,9 +378,34 @@ export default class ArticleDetail extends React.Component {
  }
  handleContentChange (e, value) {
-    let article = this.state.article
+    let { status } = this.props
    if (status.mode === IDLE_MODE) {
      return
    }
    let { article } = this.state
    article.content = value
-    this.setState({article: article})
+    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) {
@@ -303,7 +420,7 @@ export default class ArticleDetail extends React.Component {
  }
  renderEdit () {
-    let { folders, status } = this.props
+    let { folders, status, tags } = this.props
    let folderOptions = folders.map(folder => {
      return (
@@ -322,10 +439,12 @@ export default class ArticleDetail extends React.Component {
            >
              {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}
@@ -346,7 +465,7 @@ export default class ArticleDetail extends React.Component {
          <div className='detailPanel'>
            <div className='header'>
              <div className='title'>
-                <input onKeyDown={e => this.handleTitleKeyDown(e)} placeholder='Title' ref='title' valueLink={this.linkState('article.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'
@@ -395,6 +514,7 @@ export default class ArticleDetail extends React.Component {
 ArticleDetail.propTypes = {
  status: PropTypes.shape(),
  activeArticle: PropTypes.shape(),
-  activeUser: PropTypes.shape()
+  activeUser: PropTypes.shape(),
  dispatch: PropTypes.func
 }
 ArticleDetail.prototype.linkState = linkState
--- a/browser/main/HomePage/ArticleNavigator.js
+++ b/browser/main/HomePage/ArticleNavigator.js
@@ -88,16 +88,17 @@ export default class ArticleNavigator extends React.Component {
  }
  render () {
-    let { status, folders } = this.props
+    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}
+          <FolderMark color={folder.color}/> {folder.name} <span className='articleCount'>{articleCount}</span>
        </button>
      )
    })
@@ -150,6 +151,7 @@ export default class ArticleNavigator extends React.Component {
 ArticleNavigator.propTypes = {
  activeUser: PropTypes.object,
  folders: PropTypes.array,
  allArticles: PropTypes.array,
  status: PropTypes.shape({
    folderId: PropTypes.number
  }),
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/browser/main/HomePage/ArticleTopBar.js
@@ -10,7 +10,9 @@ const searchTutorialElement = (
    <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 : in:{folder_name}\n'}</text>
+    {'- 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
@@ -117,7 +119,7 @@ export default class ArticleTopBar extends React.Component {
            }
            <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
              - Search by tag : #{'{string}'}<br/>
-              - Search by folder : in:{'{folder_name}'}
+              - Search by folder : /{'{folder_name}'}
            </div>
          </div>
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -11,8 +11,12 @@ 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}>
--- a/browser/styles/finder/index.styl
+++ b/browser/styles/finder/index.styl
@@ -79,6 +79,31 @@ body
      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
--- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
@@ -98,44 +98,66 @@ iptFocusBorderColor = #369DCD
          &:hover
            background-color white
        .TagSelect
-          white-space nowrap
+          .tags
-          overflow-x auto
+            white-space nowrap
-          position relative
+            overflow-x auto
-          margin-top 5px
+            position relative
-          noSelect()
+            max-width 350px
-          z-index 30
+            margin-top 5px
-          background-color #E6E6E6
+            noSelect()
-          .tagItem
+            z-index 30
-            background-color brandColor
+            background-color #E6E6E6
-            border-radius 2px
+            .tagItem
-            color white
+              background-color brandColor
-            margin 0 2px
+              border-radius 2px
            padding 0
            border 1px solid darken(brandColor, 10%)
            button.tagRemoveBtn
              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
              background-color transparent
              padding 4px 2px
              border-right 1px solid #E6E6E6
              font-size 8px
              line-height 12px
              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 lighten(brandColor, 10%)
+                background-color darken(white, 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
      .right
        button
          cursor pointer
@@ -222,9 +244,6 @@ iptFocusBorderColor = #369DCD
                    display inline-block
                  &:hover
                    background-color darken(white, 10%)
          .title
            absolute left top bottom
            right 150px
--- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
+++ b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
@@ -1,4 +1,5 @@
 articleNavBgColor = #353535
 articleCount = #999
 .ArticleNavigator
  background-color articleNavBgColor
@@ -149,7 +150,10 @@ articleNavBgColor = #353535
      &:hover
        background-color transparentify(white, 5%)
      &.active, &:active
-        background-color brandColor
+        background-color transparentify(lighten(brandColor, 25%), 70%)
      .articleCount
        color articleCount
        font-size 12px
  .members
    .memberList>div
      height 33px
--- a/browser/styles/main/HomeContainer/index.styl
+++ b/browser/styles/main/HomeContainer/index.styl
@@ -9,3 +9,4 @@
@require './lib/CreateNewFolder'
@require './lib/Preferences'
@require './lib/Tutorial'
@require './lib/EditedAlert'
--- a/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl
+++ b/browser/styles/main/HomeContainer/lib/CreateNewFolder.styl
@@ -34,9 +34,30 @@ iptFocusBorderColor = #369DCD
    border-radius 5px
    border solid 1px borderColor
    outline none
-    margin 100px auto 25px
+    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
@@ -44,7 +65,7 @@ iptFocusBorderColor = #369DCD
    padding 15px 15px
    width 330px
    border-radius 5px
-    margin 0 auto
+    margin 15px auto 0
    &.error
      color errorTextColor
      background-color errorBackgroundColor
--- a/browser/styles/main/HomeContainer/lib/EditedAlert.styl
+++ b/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%)
--- a/browser/styles/main/HomeContainer/lib/Preferences.styl
+++ b/browser/styles/main/HomeContainer/lib/Preferences.styl
@@ -440,19 +440,22 @@ iptFocusBorderColor = #369DCD
            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
              padding-left 15px
            .folderPublic
              float left
              text-align center
              width 100px
            .folderControl
              float right
-              width 145px
+              width 125px
              text-align center
            &.folderHeader
              .folderName
                padding-left 25px
            &.newFolder
              .alert
                display block
@@ -502,6 +505,30 @@ iptFocusBorderColor = #369DCD
                  &: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
@@ -512,16 +539,52 @@ iptFocusBorderColor = #369DCD
                width 150px
                &:focus
                  border-color iptFocusBorderColor
-              .folderPublic select
+              .folderColor
-                height 33px
+                .select
-                border 1px solid borderColor
+                  height 33px
-                background-color white
+                  width 33px
-                outline none
+                  border 1px solid borderColor
-                display block
+                  background-color white
-                margin 0 auto
+                  outline none
-                font-size 14px
+                  display block
-                &:focus
+                  margin 0 auto
-                  border-color iptFocusBorderColor
+                  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
--- a/browser/styles/main/HomeContainer/lib/Tutorial.styl
+++ b/browser/styles/main/HomeContainer/lib/Tutorial.styl
@@ -108,6 +108,8 @@ slideBgColor4 = #00B493
        height 140px
  .slide3
    background-color slideBgColor3
    .title
      margin-bottom 15px
    .content
      font-size 18px
      &>img
--- a/lib/actions.js
+++ b/lib/actions.js
@@ -4,6 +4,7 @@ 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'
@@ -11,6 +12,8 @@ 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
@@ -57,6 +60,16 @@ export function destroyFolder (key) {
  }
 }
 export function replaceFolder (a, b) {
  return {
    type: FOLDER_REPLACE,
    data: {
      a,
      b
    }
  }
 }
 export function switchFolder (folderName) {
  return {
    type: SWITCH_FOLDER,
@@ -98,7 +111,19 @@ export function clearSearch () {
  }
 }
-export function toggleTutorial() {
+export function lockStatus () {
  return {
    type: LOCK_STATUS
  }
 }
 export function unlockStatus () {
  return {
    type: UNLOCK_STATUS
  }
 }
 export function toggleTutorial () {
  return {
    type: TOGGLE_TUTORIAL
  }
--- a/lib/components/FolderMark.js
+++ b/lib/components/FolderMark.js
@@ -3,45 +3,50 @@ import React, { PropTypes } from 'react'
 const BLUE = '#3460C7'
 const LIGHTBLUE = '#2BA5F7'
 const ORANGE = '#FF8E00'
-const YELLOW = '#EAEF31'
+const YELLOW = '#E8D252'
-const GREEN = '#02FF26'
+const GREEN = '#3FD941'
-const DARKGREEN = '#008A59'
+const DARKGREEN = '#1FAD85'
 const RED = '#E10051'
 const PURPLE = '#B013A4'
 const BRAND_COLOR = '#2BAC8F'
 function getColorByIndex (index) {
  switch (index % 8) {
    case 0:
-      return LIGHTBLUE
+      return RED
    case 1:
      return ORANGE
    case 2:
-      return RED
+      return YELLOW
    case 3:
      return GREEN
    case 4:
      return DARKGREEN
    case 5:
-      return YELLOW
+      return LIGHTBLUE
    case 6:
      return BLUE
    case 7:
      return PURPLE
    default:
-      return BRAND_COLOR
+      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='fa fa-square fa-fw' style={{color: color}}/>
+      <i className={className} style={{color: color}}/>
    )
  }
 }
 FolderMark.propTypes = {
-  color: PropTypes.number
+  color: PropTypes.number,
  className: PropTypes.string
 }
--- a/lib/components/ModeSelect.js
+++ b/lib/components/ModeSelect.js
@@ -18,7 +18,7 @@ export default class ModeSelect extends React.Component {
    }
  }
-  componentDidMount (e) {
+  componentDidMount () {
    this.blurHandler = e => {
      let searchElement = ReactDOM.findDOMNode(this.refs.search)
      if (this.state.mode === EDIT_MODE && document.activeElement !== searchElement) {
@@ -28,7 +28,7 @@ export default class ModeSelect extends React.Component {
    window.addEventListener('click', this.blurHandler)
  }
-  componentWillUnmount (e) {
+  componentWillUnmount () {
    window.removeEventListener('click', this.blurHandler)
    let searchElement = ReactDOM.findDOMNode(this.refs.search)
    if (searchElement != null && this.searchKeyDownListener != null) {
--- a/lib/components/TagSelect.js
+++ b/lib/components/TagSelect.js
@@ -3,23 +3,54 @@ 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: ''
+      input: '',
      isInputFocused: false
    }
  }
-  handleKeyDown (e) {
+  componentDidMount () {
-    if (e.keyCode !== 13) return false
+    this.blurInputBlurHandler = e => {
-    e.preventDefault()
+      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 = this.state.input.trim()
+    let newTag = tag.trim()
-    if (newTag.length === 0) {
+    if (newTag.length === 0 && clearInput) {
      this.setState({input: ''})
      return
    }
@@ -30,13 +61,38 @@ export default class TagSelect extends React.Component {
    if (_.isFunction(this.props.onChange)) {
      this.props.onChange(newTag, tags)
    }
-    this.setState({input: ''})
+    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()
@@ -50,8 +106,16 @@ export default class TagSelect extends React.Component {
    }
  }
  handleSuggestClick (tag) {
    return e => {
      this.addTag(tag)
    }
  }
  render () {
-    var tagElements = _.isArray(this.props.tags)
+    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>
@@ -59,16 +123,37 @@ export default class TagSelect extends React.Component {
        </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)}>
-        {tagElements}
+        <div className='tags'>
-        <input
+          {tagElements}
-          type='text'
+          <input
-          onKeyDown={e => this.handleKeyDown(e)}
+            type='text'
-          ref='tagInput'
+            onKeyDown={e => this.handleKeyDown(e)}
-          valueLink={this.linkState('input')}
+            ref='tagInput'
-          placeholder='Click here to add tags'
+            valueLink={this.linkState('input')}
-          className='tagInput'/>
+            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>
    )
  }
@@ -76,7 +161,8 @@ export default class TagSelect extends React.Component {
 TagSelect.propTypes = {
  tags: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
  suggestTags: PropTypes.array
 }
 TagSelect.prototype.linkState = linkState
--- a/lib/components/modal/CreateNewFolder.js
+++ b/lib/components/modal/CreateNewFolder.js
@@ -2,6 +2,7 @@ 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) {
@@ -9,6 +10,7 @@ export default class CreateNewFolder extends React.Component {
    this.state = {
      name: '',
      color: Math.round(Math.random() * 7),
      alert: null
    }
  }
@@ -20,9 +22,11 @@ export default class CreateNewFolder extends React.Component {
  handleConfirmButton (e) {
    this.setState({alert: null}, () => {
      let { close } = this.props
-      let name = this.state.name
+      let { name, color } = this.state
      let input = {
-        name
+        name,
        color
      }
      try {
@@ -38,6 +42,20 @@ export default class CreateNewFolder extends React.Component {
    })
  }
  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 ? (
@@ -45,6 +63,20 @@ export default class CreateNewFolder extends React.Component {
          {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'>
@@ -52,7 +84,10 @@ export default class CreateNewFolder extends React.Component {
        <div className='title'>Create new folder</div>
-        <input className='ipt' type='text' valueLink={this.linkState('name')} placeholder='Enter folder name'/>
+        <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>
--- a/lib/components/modal/EditedAlert.js
+++ b/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
 }
--- a/lib/components/modal/Preference/AppSettingTab.js
+++ b/lib/components/modal/Preference/AppSettingTab.js
@@ -36,12 +36,20 @@ export default class AppSettingTab extends React.Component {
    ipc.removeListener('APP_SETTING_ERROR', this.handleSettingError)
  }
-  handleSaveButtonClick (e) {
+  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 ? (
@@ -56,7 +64,7 @@ export default class AppSettingTab extends React.Component {
          <div className='sectionTitle'>Hotkey</div>
          <div className='sectionInput'>
            <label>Toggle Finder(popup)</label>
-            <input valueLink={this.linkState('toggleFinder')} type='text'/>
+            <input onKeyDown={e => this.handleKeyDown(e)} valueLink={this.linkState('toggleFinder')} type='text'/>
          </div>
          <div className='sectionConfirm'>
            <button onClick={e => this.handleSaveButtonClick(e)}>Save</button>
--- a/lib/components/modal/Preference/FolderRow.js
+++ b/lib/components/modal/Preference/FolderRow.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import linkState from 'boost/linkState'
 import FolderMark from 'boost/components/FolderMark'
 import store from 'boost/store'
-import { updateFolder, destroyFolder } from 'boost/actions'
+import { updateFolder, destroyFolder, replaceFolder } from 'boost/actions'
 const IDLE = 'IDLE'
 const EDIT = 'EDIT'
@@ -17,6 +17,20 @@ export default class FolderRow extends React.Component {
    }
  }
  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
@@ -26,7 +40,9 @@ export default class FolderRow extends React.Component {
  handleEditButtonClick (e) {
    this.setState({
      mode: EDIT,
-      name: this.props.folder.name
+      name: this.props.folder.name,
      color: this.props.folder.color,
      isColorEditing: false
    })
  }
@@ -34,12 +50,34 @@ export default class FolderRow extends React.Component {
    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
+        name: this.state.name,
        color: this.state.color
      }
      folder = Object.assign({}, folder, input)
@@ -68,10 +106,40 @@ export default class FolderRow extends React.Component {
    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 valueLink={this.linkState('name')} type='text'/>
+              <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>
@@ -93,7 +161,12 @@ export default class FolderRow extends React.Component {
      default:
        return (
          <div className='FolderRow'>
-            <div className='folderName'><FolderMark color={folder.color}/> {folder.name}</div>
+            <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>
@@ -106,6 +179,8 @@ export default class FolderRow extends React.Component {
 FolderRow.propTypes = {
  folder: PropTypes.shape(),
  index: PropTypes.number,
  count: PropTypes.number,
  setAlert: PropTypes.func
 }
--- a/lib/components/modal/Preference/FolderSettingTab.js
+++ b/lib/components/modal/Preference/FolderSettingTab.js
@@ -12,6 +12,12 @@ export default class FolderSettingTab extends React.Component {
    }
  }
  handleNewFolderNameKeyDown (e) {
    if (e.keyCode === 13) {
      this.handleSaveButtonClick()
    }
  }
  handleSaveButtonClick (e) {
    this.setState({alert: null}, () => {
      if (this.state.name.trim().length === 0) return false
@@ -40,10 +46,16 @@ export default class FolderSettingTab extends React.Component {
  render () {
    let { folders } = this.props
-    let folderElements = folders.map(folder => {
+    let folderElements = folders.map((folder, index) => {
      return (
-        <FolderRow key={'folder-' + folder.key} folder={folder} setAlert={(alert, cb) => this.setAlert(alert, cb)}/>
+        <FolderRow
-        )
+          key={'folder-' + folder.key}
          folder={folder}
          index={index}
          count={folders.length}
          setAlert={(alert, cb) => this.setAlert(alert, cb)}
        />
      )
    })
    let alert = this.state.alert
@@ -59,13 +71,13 @@ export default class FolderSettingTab extends React.Component {
          <div className='sectionTitle'>Manage folder</div>
          <div className='folderTable'>
            <div className='folderHeader'>
-              <div className='folderName'>Folder name</div>
+              <div className='folderName'>Folder</div>
              <div className='folderControl'>Edit/Delete</div>
            </div>
            {folderElements}
            <div className='newFolder'>
              <div className='folderName'>
-                <input valueLink={this.linkState('name')} type='text' placeholder='New Folder'/>
+                <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>
--- a/lib/components/modal/Tutorial.js
+++ b/lib/components/modal/Tutorial.js
@@ -88,10 +88,11 @@ export default class Tutorial extends React.Component {
        return (<div className='slide slide3'>
          <div className='title'>Easy to access with Finder</div>
          <div className='content'>
-            With Finder, You can search your articles faster.<br/>
+            The Finder helps you organize all of the files and documents.<br/>
-            You can open Finder by pressing Control + shift + tab<br/>
+            There is a short-cut key [control + shift + tab] to open the Finder.<br/>
-            To put the content of an article in the clipboard, press Enter.<br/>
+            It is available to save your articles on the Clipboard<br/>
-            So you can paste it with Cmd(⌘) + V
+            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>
--- a/lib/reducer.js
+++ b/lib/reducer.js
@@ -1,14 +1,42 @@
 import { combineReducers } from 'redux'
 import _ from 'lodash'
-import { SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, SET_SEARCH_FILTER, SET_TAG_FILTER, CLEAR_SEARCH, TOGGLE_TUTORIAL, ARTICLE_UPDATE, ARTICLE_DESTROY, FOLDER_CREATE, FOLDER_UPDATE, FOLDER_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import {
  // Status action type
  SWITCH_FOLDER,
  SWITCH_MODE,
  SWITCH_ARTICLE,
  SET_SEARCH_FILTER,
  SET_TAG_FILTER,
  CLEAR_SEARCH,
  LOCK_STATUS,
  UNLOCK_STATUS,
  TOGGLE_TUTORIAL,
  // Article action type
  ARTICLE_UPDATE,
  ARTICLE_DESTROY,
  // Folder action type
  FOLDER_CREATE,
  FOLDER_UPDATE,
  FOLDER_DESTROY,
  FOLDER_REPLACE,
  // view mode
  IDLE_MODE,
  CREATE_MODE
 } from './actions'
 import dataStore from 'boost/dataStore'
 import keygen from 'boost/keygen'
 import activityRecord from 'boost/activityRecord'
 import { openModal } from 'boost/modal'
 import EditedAlert from 'boost/components/modal/EditedAlert'
 const initialStatus = {
  mode: IDLE_MODE,
  search: '',
-  isTutorialOpen: false
+  isTutorialOpen: false,
  isStatusLocked: false
 }
 let data = dataStore.getData()
@@ -26,12 +54,11 @@ function folders (state = initialFolders, action) {
        Object.assign(newFolder, {
          key: keygen(),
          createdAt: new Date(),
-          updatedAt: new Date(),
+          updatedAt: new Date()
          // random number (0-7)
          color: Math.round(Math.random() * 7)
        })
-        if (newFolder.length === 0) throw new Error('Folder name is required')
+        if (newFolder.name == null && newFolder.name.length === 0) throw new Error('Folder name is required')
        if (newFolder.name.match(/\//)) throw new Error('`/` is not available for folder name')
        let conflictFolder = _.findWhere(state, {name: newFolder.name})
        if (conflictFolder != null) throw new Error(`${newFolder.name} already exists!`)
@@ -48,7 +75,8 @@ function folders (state = initialFolders, action) {
        if (!_.isString(folder.name)) throw new Error('Folder name must be a string')
        folder.name = folder.name.trim().replace(/\s/, '_')
-        if (folder.length === 0) throw new Error('Folder name is required')
+        if (folder.name.length === 0) throw new Error('Folder name is required')
        if (folder.name.match(/\//)) throw new Error('`/` is not available for folder name')
        // Folder existence check
        if (targetFolder == null) throw new Error('Folder doesnt exist')
@@ -80,6 +108,15 @@ function folders (state = initialFolders, action) {
        activityRecord.emit('FOLDER_DESTROY')
        return state
      }
    case FOLDER_REPLACE:
      {
        let { a, b } = action.data
        let folderA = state[a]
        let folderB = state[b]
        state.splice(a, 1, folderB)
        state.splice(b, 1, folderA)
      }
      return state
    default:
      return state
  }
@@ -125,13 +162,28 @@ function articles (state = initialArticles, action) {
 function status (state = initialStatus, action) {
  state = Object.assign({}, state)
  switch (action.type) {
    case TOGGLE_TUTORIAL:
      state.isTutorialOpen = !state.isTutorialOpen
      return state
    case LOCK_STATUS:
      state.isStatusLocked = true
      return state
    case UNLOCK_STATUS:
      state.isStatusLocked = false
      return state
  }
  // if status locked, status become unmutable
  if (state.isStatusLocked) {
    openModal(EditedAlert, {action})
    return state
  }
  switch (action.type) {
    case SWITCH_FOLDER:
      state.mode = IDLE_MODE
-      state.search = `in:${action.data} `
+      state.search = `//${action.data} `
      return state
    case SWITCH_MODE:
--- a/main.js
+++ b/main.js
@@ -30,8 +30,8 @@ updater
  .on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    nn.notify({
      title: 'Ready to Update!! ' + versionText,
-      icon: path.join(__dirname, 'browser/main/resources/favicon-230x230.png'),
+      icon: path.join(__dirname, '/resources/favicon-230x230.png'),
-      message: 'Click tray icon to update app: ' + releaseName
+      message: 'Click update button on Main window: ' + releaseName
    })
    update = quitAndUpdate
@@ -50,6 +50,14 @@ app.on('ready', function () {
  // menu start
  var template = require('./atom-lib/menu-template')
  setInterval(function () {
    if (update == null) updater.checkForUpdates()
  }, 1000 * 60 * 60 * 24)
  ipc.on('check-update', function (event, msg) {
    if (update == null) updater.checkForUpdates()
  })
  ipc.on('update-app', function (event, msg) {
    if (update != null) {
      appQuit = true
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boost",
-  "version": "0.4.0-beta.2",
+  "version": "0.4.1-beta.1",
  "description": "Boost App",
  "main": "main.js",
  "scripts": {
@@ -38,7 +38,6 @@
  "homepage": "https://github.com/Rokt33r/codexen-app#readme",
  "dependencies": {
    "devicon": "^2.0.0",
    "electron-packager": "^5.1.1",
    "font-awesome": "^4.3.0",
    "fs-jetpack": "^0.7.0",
    "lodash": "^3.10.1",
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -68,7 +68,8 @@ var config = {
    'superagent-promise',
    'lodash',
    'markdown-it',
-    'moment'
+    'moment',
    'node-notifier'
  ]
 }
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -45,7 +45,8 @@ module.exports = {
    'superagent-promise',
    'lodash',
    'markdown-it',
-    'moment'
+    'moment',
    'node-notifier'
  ],
  resolve: {
    extensions: ['', '.js', '.jsx', 'styl']
Author	SHA1	Message	Date
Rokt33r	ee91daad7e	Merge branch 'dev' * dev: hotfix: Edited alertが変な時に出る	2015-11-18 18:51:39 +09:00
Rokt33r	ee78c0d33b	hotfix: Edited alertが変な時に出る	2015-11-18 18:39:27 +09:00
Dick Choi	09482ebcf3	fix wrong dependency	2015-11-17 05:36:08 +09:00
Rokt33r	67424f2d3a	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説明変更	2015-11-16 07:03:46 +09:00
Rokt33r	51f530ffbe	bump up version 0.4.1	2015-11-16 05:36:37 +09:00
Rokt33r	013f96a754	記事が編集された状態で他の記事を見ようとすると警告をだす	2015-11-16 05:34:37 +09:00
Rokt33r	df6a018fb6	updateが準備できたら、再起動されるまで改めてUpdateの確認をしない	2015-11-16 04:17:56 +09:00
Rokt33r	409eaf54c1	Tag suggest	2015-11-16 04:06:14 +09:00
Rokt33r	7e04fd342c	EnterでSubmitができる - Hotkey, folder edit, folder create(preference/create new folder modal両方)	2015-11-16 02:45:46 +09:00
Rokt33r	1fe15bc6a5	Folderの位置を変えることができる	2015-11-16 02:38:36 +09:00
Rokt33r	ff1bffbb55	Preferenceからもフォルダーの色の選択ができる。	2015-11-16 01:22:22 +09:00
Rokt33r	b28b18a19a	// filterを使うと確実にFolder名が一致するもののみを表示する	2015-11-15 23:20:06 +09:00
Rokt33r	bbc3c85212	fix style	2015-11-15 20:40:43 +09:00
Rokt33r	26a08fac06	new folder modalにcolor select追加	2015-11-15 20:32:02 +09:00
Rokt33r	da9d7a4336	auto update確認	2015-11-15 03:52:34 +09:00
Rokt33r	46c6555f94	FinderからCopyした時、通知を出す	2015-11-15 01:39:40 +09:00
Rokt33r	3e980fd2d4	FinderにCopy to clipboard button追加	2015-11-15 01:22:56 +09:00
Rokt33r	fb1462f669	Folder リストに articleの数をだす	2015-11-15 01:07:46 +09:00
Rokt33r	41e1630aac	フォルダーで検索するときに in:じゃなくて /にする＋バグ修正	2015-11-15 00:57:29 +09:00
Rokt33r	ef84c4e3da	IntroのFinder説明変更	2015-11-14 23:49:49 +09:00