tags are clickable

browser/main/Detail/TagSelect.js

@@ -99,6 +99,11 @@ class TagSelect extends React.Component {
     })
   }
 
+  handleTagLabelClick (tag) {
+    const { router } = this.context
+    router.push(`/tags/${tag}`)
+  }
+
   handleTagRemoveButtonClick (tag) {
     this.removeTagByCallback((value, tag) => {
       value.splice(value.indexOf(tag), 1)
@@ -127,7 +132,7 @@ class TagSelect extends React.Component {
           <span styleName='tag'
             key={tag}
           >
-            <span styleName='tag-label'>#{tag}</span>
+            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >
@@ -159,6 +164,10 @@ class TagSelect extends React.Component {
   }
 }
 
+TagSelect.contextTypes = {
+  router: PropTypes.shape({})
+}
+
 TagSelect.propTypes = {
   className: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),

browser/main/Detail/TagSelect.styl

@@ -39,8 +39,9 @@
 
 .tag-label
   font-size 13px
-  color: $ui-text-color
+  color $ui-text-color
   padding 4px 16px 4px 8px
+  cursor pointer
 
 .newTag
   box-sizing border-box
@@ -66,7 +67,7 @@ body[data-theme="dark"]
     border-color none
     background-color transparent
     color $ui-dark-text-color
-    
+
 body[data-theme="solarized-dark"]
   .tag
     background-color $ui-solarized-dark-tag-backgroundColor
@@ -93,7 +94,7 @@ body[data-theme="monokai"]
 
   .tag-label
     color $ui-monokai-text-color
-    
+
   .newTag
     border-color none
     background-color transparent