Update NoteList

redirect if no note selected
add overflow style of labels in Note item

Author: Rokt33r

browser/main/NoteList/NoteList.styl

@@ -13,7 +13,7 @@
   cursor pointer
   transition background-color 0.15s
   &:hover
-    background-color alpha(black, 5%)
+    background-color alpha($ui-active-color, 10%)
 
 .item--active
   @extend .item
@@ -33,9 +33,11 @@
   font-size 12px
   color $ui-inactive-text-color
   line-height 30px
+  overflow-y hidden
 
 .item-info-left
   float left
+  overflow ellipsis
 
 .item-info-right
   float right
@@ -52,3 +54,4 @@
   font-size 12px
   line-height 30px
   color $ui-inactive-text-color
+  overflow ellipsis

browser/main/NoteList/index.js

@@ -29,6 +29,16 @@ class NoteList extends React.Component {
   }
 
   componentDidUpdate () {
+    let { location } = this.props
+    if (this.notes.length > 0 && location.query.key == null) {
+      let { router } = this.context
+      router.replace({
+        pathname: location.pathname,
+        query: {
+          key: `${this.notes[0]._repository.key}-${this.notes[0].key}`
+        }
+      })
+    }
     // return false
     // var index = articles.indexOf(null)
     // var el = ReactDOM.findDOMNode(this)
@@ -175,13 +185,13 @@ class NoteList extends React.Component {
 
   render () {
     let { location } = this.props
-    let notes = this.getNotes()
+    let notes = this.notes = this.getNotes()
     let noteElements = notes.map((note) => {
       let folder = _.find(note._repository.folders, {key: note.folder})
       let tagElements = note.tags.map((tag) => {
         return <span key='tag'>{tag}</span>
       })
-      let key = `${note._repository.key}/${note.key}`
+      let key = `${note._repository.key}-${note.key}`
       let isActive = location.query.key === key
       return (
         <div styleName={isActive