Star a note

browser/main/Detail/NoteDetail.js

@@ -3,7 +3,9 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './NoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import queue from 'browser/main/lib/queue'
+import StarButton from './StarButton'
 import TagSelect from './TagSelect'
+import Repository from 'browser/lib/Repository'
 
 class NoteDetail extends React.Component {
   constructor (props) {
@@ -106,7 +108,42 @@ class NoteDetail extends React.Component {
     queue.save(repoKey, note)
   }
 
+  handleStarButtonClick (e) {
+    let { note } = this.state
+    let { dispatch } = this.props
+    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+
+    if (isStarred) {
+      Repository
+        .find(note._repository.key)
+        .then((repo) => {
+          return repo.unstarNote(note.key)
+        })
+
+      dispatch({
+        type: 'UNSTAR_NOTE',
+        repository: note._repository.key,
+        note: note.key
+      })
+    } else {
+      Repository
+        .find(note._repository.key)
+        .then((repo) => {
+          return repo.starNote(note.key)
+        })
+
+      dispatch({
+        type: 'STAR_NOTE',
+        repository: note._repository.key,
+        note: note.key
+      })
+    }
+  }
+
   render () {
+    let { note } = this.state
+    let isStarred = note._repository.starred.some((starredKey) => starredKey === note.key)
+
     return (
       <div className='NoteDetail'
         style={this.props.style}
@@ -116,9 +153,10 @@ class NoteDetail extends React.Component {
           <div styleName='info-left'>
 
             <div styleName='info-left-top'>
-              <button styleName='info-left-top-starButton'>
-                <i className='fa fa-star-o fa-fw'/>
-              </button>
+              <StarButton styleName='info-left-top-starButton'
+                onClick={(e) => this.handleStarButtonClick(e)}
+                isActive={isStarred}
+              />
               <div styleName='info-left-top-folderSelect'>FolderSelect</div>
             </div>
             <div styleName='info-left-bottom'>

browser/main/Detail/NoteDetail.styl

@@ -18,6 +18,19 @@ $info-height = 80px
 .info-left-top
   height 40px
 
+.info-left-top-starButton
+  display inline-block
+  height 40px
+  width 40px
+  line-height 40px
+  vertical-align top
+
+.info-left-top-folderSelect
+  display inline-block
+  height 40px
+  width 100px
+  vertical-align top
+
 .info-left-bottom
   height 40px
 

browser/main/Detail/StarButton.js

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

browser/main/Detail/StarButton.styl

@@ -0,0 +1,19 @@
+.root
+  position relative
+  color $ui-inactive-text-color
+  font-size 18px
+  text-align center
+  background-color transparent
+  border none
+  padding 0
+  transition transform 0.15s
+  &:hover
+    color $ui-text-color
+    transform rotate(-72deg)
+
+.root--active
+  @extend .root
+  color $ui-active-color
+  transform rotate(-72deg)
+  &:hover
+    color $ui-active-color