From 8311030bec29507f6a4aa836a69d5c03af21e827 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 14:23:45 +0900
Subject: [PATCH 01/34] add the tag to routing

---
 browser/main/SideNav/index.js  | 16 ++++++++++++++++
 browser/main/TopBar/.#index.js |  1 +
 browser/main/index.js          |  1 +
 3 files changed, 18 insertions(+)
 create mode 120000 browser/main/TopBar/.#index.js

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 909c6777..e7976011 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -38,6 +38,18 @@ class SideNav extends React.Component {
     router.push('/trashed')
   }
 
+  handleSwitchFolderButtonClick (e) {
+    console.log('SwitchfolderButton Clicked')
+    let { router } = this.context
+    router.push('/home')
+  }
+
+  handleSwitchTagButtonClick (e) {
+    console.log('SwitchTagButton clicked')
+    let { router } = this.context
+    router.push('/tag')
+  }
+
   render () {
     let { data, location, config, dispatch } = this.props
 
@@ -64,6 +76,10 @@ class SideNav extends React.Component {
         tabIndex='1'
         style={style}
       >
+        <div styleName='SwitchModeButtons'>
+          <button onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
+          <button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tag</button>
+        </div>
         <div styleName='top'>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
diff --git a/browser/main/TopBar/.#index.js b/browser/main/TopBar/.#index.js
new file mode 120000
index 00000000..a2c46e56
--- /dev/null
+++ b/browser/main/TopBar/.#index.js
@@ -0,0 +1 @@
+suzuki@suzuki-no-MacBook-Air-2.local.31032
\ No newline at end of file
diff --git a/browser/main/index.js b/browser/main/index.js
index 00c32d36..72cd03ef 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -65,6 +65,7 @@ ReactDOM.render((
         <Route path='starred' />
         <Route path='searched' />
         <Route path='trashed' />
+        <Route path='tag' />
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

From 5248c05e61d0a1c4fb0e2a37c2c039b32e977382 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 15:26:37 +0900
Subject: [PATCH 02/34] switching view and change routing

---
 browser/main/SideNav/index.js | 70 ++++++++++++++++++++++-------------
 browser/main/index.js         |  6 ++-
 2 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index e7976011..8e62c088 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -47,7 +47,48 @@ class SideNav extends React.Component {
   handleSwitchTagButtonClick (e) {
     console.log('SwitchTagButton clicked')
     let { router } = this.context
-    router.push('/tag')
+    router.push('/alltags')
+  }
+
+  SideNavComponent (isFolded, isHomeActive, isStarredActive, isTrashedActive, storageList) {
+    let { location, data } = this.props
+    console.log(data)
+    let component
+    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
+      component = (
+        <div>
+          <SideNavFilter
+            isFolded={isFolded}
+            isHomeActive={isHomeActive}
+            handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
+            isStarredActive={isStarredActive}
+            isTrashedActive={isTrashedActive}
+            handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
+            handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
+          />
+
+          <div styleName='storageList'>
+            {storageList.length > 0 ? storageList : (
+              <div styleName='storageList-empty'>No storage mount.</div>
+            )}
+          </div>
+          <button styleName='navToggle'
+            onClick={(e) => this.handleToggleButtonClick(e)}
+          >
+            {isFolded
+              ? <i className='fa fa-angle-double-right' />
+              : <i className='fa fa-angle-double-left' />
+            }
+          </button>
+        </div>
+      )
+    } else {
+      component = (
+        <h1>TAG_AREA</h1>
+      )
+    }
+
+    return component
   }
 
   render () {
@@ -78,7 +119,7 @@ class SideNav extends React.Component {
       >
         <div styleName='SwitchModeButtons'>
           <button onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
-          <button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tag</button>
+          <button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
         </div>
         <div styleName='top'>
           <button styleName='top-menu'
@@ -88,30 +129,7 @@ class SideNav extends React.Component {
             <span styleName='top-menu-label'>Preferences</span>
           </button>
         </div>
-
-        <SideNavFilter
-          isFolded={isFolded}
-          isHomeActive={isHomeActive}
-          handleAllNotesButtonClick={(e) => this.handleHomeButtonClick(e)}
-          isStarredActive={isStarredActive}
-          isTrashedActive={isTrashedActive}
-          handleStarredButtonClick={(e) => this.handleStarredButtonClick(e)}
-          handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
-        />
-
-        <div styleName='storageList'>
-          {storageList.length > 0 ? storageList : (
-            <div styleName='storageList-empty'>No storage mount.</div>
-          )}
-        </div>
-        <button styleName='navToggle'
-          onClick={(e) => this.handleToggleButtonClick(e)}
-        >
-          {isFolded
-            ? <i className='fa fa-angle-double-right' />
-            : <i className='fa fa-angle-double-left' />
-          }
-        </button>
+        {this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)}
       </div>
     )
   }
diff --git a/browser/main/index.js b/browser/main/index.js
index 72cd03ef..35e81177 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -65,7 +65,11 @@ ReactDOM.render((
         <Route path='starred' />
         <Route path='searched' />
         <Route path='trashed' />
-        <Route path='tag' />
+        <Route path='alltags' />
+        <Route path='tags'>
+          <IndexRedirect to='/alltags' />
+          <Route path=':tagname' />
+        </Route>
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

From 3154110de1d24414caa5d4990be838fddb5e3756 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 16:22:04 +0900
Subject: [PATCH 03/34] list tags

---
 browser/components/TagListItem.js   | 21 +++++++++++++++++++++
 browser/components/TagListItem.styl |  0
 browser/main/NoteList/index.js      |  1 +
 browser/main/SideNav/index.js       | 10 +++++++++-
 4 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100644 browser/components/TagListItem.js
 create mode 100644 browser/components/TagListItem.styl

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
new file mode 100644
index 00000000..79af1808
--- /dev/null
+++ b/browser/components/TagListItem.js
@@ -0,0 +1,21 @@
+/**
+* @fileoverview Micro component for showing TagList.
+*/
+import React, { PropTypes } from 'react'
+import styles from './TagListItem.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {string} name
+*/
+
+const TagListItem = (({name}) => {
+  return (
+    <button>
+      {name}
+    </button>
+  )
+})
+
+export default CSSModules(TagListItem, styles)
+
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
new file mode 100644
index 00000000..e69de29b
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 7464ef1f..03ab6906 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -454,6 +454,7 @@ class NoteList extends React.Component {
   }
 
   render () {
+    console.log(this.props)
     let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 8e62c088..3831086d 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -5,6 +5,7 @@ import { openModal } from 'browser/main/lib/modal'
 import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
+import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 
 class SideNav extends React.Component {
@@ -83,8 +84,15 @@ class SideNav extends React.Component {
         </div>
       )
     } else {
+      let tagList = data.tagNoteMap.map((tag, key) => {
+        return `# ${key}`
+      })
       component = (
-        <h1>TAG_AREA</h1>
+        tagList.map(tag => {
+          return (
+            <TagListItem name={tag} />
+          )
+        })
       )
     }
 

From ad0ac19d3d75dbf045564b0dfa0b1023605bff2e Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 16:26:09 +0900
Subject: [PATCH 04/34] handling tagButton click

---
 browser/components/TagListItem.js | 5 +++--
 browser/main/SideNav/index.js     | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 79af1808..bd7a0f07 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -7,11 +7,12 @@ import CSSModules from 'browser/lib/CSSModules'
 
 /**
 * @param {string} name
+* @param (Function) handleClickTagButton
 */
 
-const TagListItem = (({name}) => {
+const TagListItem = (({name, handleClickTagButton}) => {
   return (
-    <button>
+    <button onClick={handleClickTagButton}>
       {name}
     </button>
   )
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 3831086d..10231aa0 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -90,7 +90,7 @@ class SideNav extends React.Component {
       component = (
         tagList.map(tag => {
           return (
-            <TagListItem name={tag} />
+            <TagListItem name={tag} handleClickTagButton={(e) => this.handleClickTagButton(e)} />
           )
         })
       )
@@ -99,6 +99,10 @@ class SideNav extends React.Component {
     return component
   }
 
+  handleClickTagButton (e) {
+    console.log('TAGBUTTON!!!')
+  }
+
   render () {
     let { data, location, config, dispatch } = this.props
 

From faede4821792a48e727c1fba2cc3bf26b0674652 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 16:59:03 +0900
Subject: [PATCH 05/34] feature tag search

---
 browser/components/TagListItem.js |  4 ++--
 browser/main/NoteList/index.js    | 11 +++++++++--
 browser/main/SideNav/index.js     | 11 ++++++-----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index bd7a0f07..14a0321a 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,8 +12,8 @@ import CSSModules from 'browser/lib/CSSModules'
 
 const TagListItem = (({name, handleClickTagButton}) => {
   return (
-    <button onClick={handleClickTagButton}>
-      {name}
+    <button onClick={(e) => handleClickTagButton(e, name)}>
+      {`# ${name}`}
     </button>
   )
 })
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 03ab6906..feee7343 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -229,7 +229,7 @@ class NoteList extends React.Component {
     let { data, params, location } = this.props
     let { router } = this.context
 
-    if (location.pathname.match(/\/home/)) {
+    if (location.pathname.match(/\/home/) || location.pathname.match(/\alltags/)) {
       const allNotes = data.noteMap.map((note) => note)
       this.contextNotes = allNotes
       return allNotes
@@ -255,6 +255,14 @@ class NoteList extends React.Component {
       return trashedNotes
     }
 
+    if (location.pathname.match(/\/tags/)) {
+      return data.noteMap.map(note => {
+        return note
+      }).filter(note => {
+        return note.tags.includes(params.tagname)
+      })
+    }
+
     return this.getContextNotes()
   }
 
@@ -454,7 +462,6 @@ class NoteList extends React.Component {
   }
 
   render () {
-    console.log(this.props)
     let { location, notes, config, dispatch } = this.props
     let sortFunc = config.sortBy === 'CREATED_AT'
       ? sortByCreatedAt
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 10231aa0..617c9680 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -53,7 +53,6 @@ class SideNav extends React.Component {
 
   SideNavComponent (isFolded, isHomeActive, isStarredActive, isTrashedActive, storageList) {
     let { location, data } = this.props
-    console.log(data)
     let component
     if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
       component = (
@@ -85,12 +84,12 @@ class SideNav extends React.Component {
       )
     } else {
       let tagList = data.tagNoteMap.map((tag, key) => {
-        return `# ${key}`
+        return key
       })
       component = (
         tagList.map(tag => {
           return (
-            <TagListItem name={tag} handleClickTagButton={(e) => this.handleClickTagButton(e)} />
+            <TagListItem name={tag} handleClickTagButton={this.handleClickTagButton.bind(this)} />
           )
         })
       )
@@ -99,8 +98,10 @@ class SideNav extends React.Component {
     return component
   }
 
-  handleClickTagButton (e) {
-    console.log('TAGBUTTON!!!')
+  handleClickTagButton (e, name) {
+    console.log(name)
+    let { router } = this.context
+    router.push(`/tags/${name}`)
   }
 
   render () {

From 06bd2b2b79286f6be00d13189e16eed5a38269f2 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 17:27:50 +0900
Subject: [PATCH 06/34] add title "tags"

---
 browser/main/SideNav/index.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 617c9680..ae149cf4 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -83,23 +83,31 @@ class SideNav extends React.Component {
         </div>
       )
     } else {
-      let tagList = data.tagNoteMap.map((tag, key) => {
-        return key
-      })
       component = (
-        tagList.map(tag => {
-          return (
-            <TagListItem name={tag} handleClickTagButton={this.handleClickTagButton.bind(this)} />
-          )
-        })
+        <div>
+          <p>Tags</p>
+          {this.folderListComponent(data)}
+        </div>
       )
     }
 
     return component
   }
 
+  folderListComponent (data) {
+    let tagList = data.tagNoteMap.map((tag, key) => {
+      return key
+    })
+    return (
+      tagList.map(tag => {
+        return (
+          <TagListItem name={tag} handleClickTagButton={this.handleClickTagButton.bind(this)} />
+        )
+      })
+    )
+  }
+
   handleClickTagButton (e, name) {
-    console.log(name)
     let { router } = this.context
     router.push(`/tags/${name}`)
   }

From 59e5c547e9c3afaf3d005f436c2d93febe1f120c Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 17:51:41 +0900
Subject: [PATCH 07/34] fix button style to change color when switch
 active/inactive

---
 browser/main/SideNav/SideNav.styl | 15 ++++++++++++---
 browser/main/SideNav/index.js     | 11 ++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 752b85cc..a71015c5 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -13,14 +13,23 @@
   height $topBar-height
   padding 0 15px
   font-size 12px
-  width 100%
-  text-align left
+  width 33%
+  text-align center
   &:hover
     color $ui-text-color
   &:active, &:active:hover
     color $ui-text-color
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
+.switch-buttons button
+  width 33%
+
+.active-button
+  background-color #c4c4c4
+
+.non-active-button
+  background-color white
+
 .top-menu-label
   margin-left 5px
   overflow ellipsis
@@ -127,4 +136,4 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
       transition 0.15s
-      color $ui-dark-text-color
\ No newline at end of file
+      color $ui-dark-text-color
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index ae149cf4..4130f286 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -40,13 +40,11 @@ class SideNav extends React.Component {
   }
 
   handleSwitchFolderButtonClick (e) {
-    console.log('SwitchfolderButton Clicked')
     let { router } = this.context
     router.push('/home')
   }
 
   handleSwitchTagButtonClick (e) {
-    console.log('SwitchTagButton clicked')
     let { router } = this.context
     router.push('/alltags')
   }
@@ -138,16 +136,15 @@ class SideNav extends React.Component {
         tabIndex='1'
         style={style}
       >
-        <div styleName='SwitchModeButtons'>
-          <button onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
-          <button onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
-        </div>
         <div styleName='top'>
+          <div styleName='switch-buttons'>
+            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
+            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
+          </div>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}
           >
             <i className='fa fa-wrench fa-fw' />
-            <span styleName='top-menu-label'>Preferences</span>
           </button>
         </div>
         {this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)}

From 95e237d4a3485177373f187e292d3f0fc9e219b0 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 18:13:21 +0900
Subject: [PATCH 08/34] fix style tagList

---
 browser/components/TagListItem.js   |  6 +++--
 browser/components/TagListItem.styl | 34 +++++++++++++++++++++++++++++
 browser/main/SideNav/SideNav.styl   |  6 +++++
 browser/main/SideNav/index.js       |  8 +++++--
 4 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 14a0321a..9d1e0e79 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,8 +12,10 @@ import CSSModules from 'browser/lib/CSSModules'
 
 const TagListItem = (({name, handleClickTagButton}) => {
   return (
-    <button onClick={(e) => handleClickTagButton(e, name)}>
-      {`# ${name}`}
+    <button styleName='tagList-item' onClick={(e) => handleClickTagButton(e, name)}>
+      <span styleName='tagList-item-name'>
+        {`# ${name}`}
+      </span>
     </button>
   )
 })
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index e69de29b..4e89b094 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -0,0 +1,34 @@
+.tagList-item
+  display flex
+  width 100%
+  height 26px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+  &:first-child
+    margin-top 0
+  &:hover
+    color $ui-text-color
+    background-color alpha($ui-button--active-backgroundColor, 20%)
+    transition background-color 0.15s
+  &:active
+    color $ui-text-color
+    background-color $ui-button--active-backgroundColor
+
+.tagList-item-name
+  display block
+  flex 1
+  padding 0 25px
+  height 26px
+  line-height 26px
+  border-width 0 0 0 2px
+  border-style solid
+  border-color transparent
+  overflow hidden
+  text-overflow ellipsis
+
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index a71015c5..cf502a5e 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -46,6 +46,12 @@
   line-height 24px
   color $ui-inactive-text-color
 
+.tagList
+  absolute left right
+  bottom 37px
+  top 80px
+  overflow-y auto
+
 .navToggle
   navButtonColor()
   display block
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 4130f286..67d729d1 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -83,8 +83,12 @@ class SideNav extends React.Component {
     } else {
       component = (
         <div>
-          <p>Tags</p>
-          {this.folderListComponent(data)}
+          <div styleName='tag-title'>
+            <p>Tags</p>
+          </div>
+          <div styleName='tagList'>
+            {this.folderListComponent(data)}
+          </div>
         </div>
       )
     }

From c2aa35104cc1081437ecf6d242e5f0d7ecb244da Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 18:17:05 +0900
Subject: [PATCH 09/34] remove button width style

---
 browser/main/SideNav/SideNav.styl | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index cf502a5e..3e6b472d 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -21,9 +21,6 @@
     color $ui-text-color
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
-.switch-buttons button
-  width 33%
-
 .active-button
   background-color #c4c4c4
 

From 852617726c0a481d6872afc6a129187b8445775b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 18:19:27 +0900
Subject: [PATCH 10/34] complete editting file

---
 browser/main/TopBar/.#index.js | 1 -
 1 file changed, 1 deletion(-)
 delete mode 120000 browser/main/TopBar/.#index.js

diff --git a/browser/main/TopBar/.#index.js b/browser/main/TopBar/.#index.js
deleted file mode 120000
index a2c46e56..00000000
--- a/browser/main/TopBar/.#index.js
+++ /dev/null
@@ -1 +0,0 @@
-suzuki@suzuki-no-MacBook-Air-2.local.31032
\ No newline at end of file

From bf9ecb02e5a7fbd838a78055d3be6c1226ae7e88 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 18:32:18 +0900
Subject: [PATCH 11/34] remove extra parens

---
 browser/components/TagListItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 9d1e0e79..1888990c 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -10,7 +10,7 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param (Function) handleClickTagButton
 */
 
-const TagListItem = (({name, handleClickTagButton}) => {
+const TagListItem = ({name, handleClickTagButton}) => {
   return (
     <button styleName='tagList-item' onClick={(e) => handleClickTagButton(e, name)}>
       <span styleName='tagList-item-name'>
@@ -18,7 +18,7 @@ const TagListItem = (({name, handleClickTagButton}) => {
       </span>
     </button>
   )
-})
+}
 
 export default CSSModules(TagListItem, styles)
 

From 2886da4f63237e14dd60de77448a254b418079f3 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 30 Sep 2017 18:37:47 +0900
Subject: [PATCH 12/34] give the key props to tagList Item

---
 browser/main/SideNav/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 67d729d1..88f32452 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -102,8 +102,11 @@ class SideNav extends React.Component {
     })
     return (
       tagList.map(tag => {
-        return (
-          <TagListItem name={tag} handleClickTagButton={this.handleClickTagButton.bind(this)} />
+        return (<TagListItem
+          name={tag}
+          handleClickTagButton={this.handleClickTagButton.bind(this)}
+          key={tag}
+        />
         )
       })
     )

From 0ca87ea4079e6749de71e788197d9df5457d04db Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 3 Oct 2017 02:55:18 +0900
Subject: [PATCH 13/34] fix type description parens () -> {}

---
 browser/components/TagListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 1888990c..080f0318 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -7,7 +7,7 @@ import CSSModules from 'browser/lib/CSSModules'
 
 /**
 * @param {string} name
-* @param (Function) handleClickTagButton
+* @param {Function} handleClickTagButton
 */
 
 const TagListItem = ({name, handleClickTagButton}) => {

From e300b33a4f9b9dea0029e38211bcd52b4b586516 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 3 Oct 2017 02:56:44 +0900
Subject: [PATCH 14/34] fix a mistake in function naming

---
 browser/main/SideNav/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 88f32452..ea92a918 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -87,7 +87,7 @@ class SideNav extends React.Component {
             <p>Tags</p>
           </div>
           <div styleName='tagList'>
-            {this.folderListComponent(data)}
+            {this.tagListComponent(data)}
           </div>
         </div>
       )
@@ -96,7 +96,7 @@ class SideNav extends React.Component {
     return component
   }
 
-  folderListComponent (data) {
+  tagListComponent (data) {
     let tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })

From 4689ddeb9830ca94fdfb9e7319db20398f3a4920 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 3 Oct 2017 03:03:33 +0900
Subject: [PATCH 15/34] some rename plural form or easy to understand

---
 browser/components/TagListItem.js |  6 +++---
 browser/main/SideNav/index.js     | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 080f0318..36e00bd6 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -7,12 +7,12 @@ import CSSModules from 'browser/lib/CSSModules'
 
 /**
 * @param {string} name
-* @param {Function} handleClickTagButton
+* @param {Function} handleClickTagListItem
 */
 
-const TagListItem = ({name, handleClickTagButton}) => {
+const TagListItem = ({name, handleClickTagListItem}) => {
   return (
-    <button styleName='tagList-item' onClick={(e) => handleClickTagButton(e, name)}>
+    <button styleName='tagList-item' onClick={(e) => handleClickTagListItem(e, name)}>
       <span styleName='tagList-item-name'>
         {`# ${name}`}
       </span>
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index ea92a918..174ac157 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -39,12 +39,12 @@ class SideNav extends React.Component {
     router.push('/trashed')
   }
 
-  handleSwitchFolderButtonClick (e) {
+  handleSwitchFoldersButtonClick (e) {
     let { router } = this.context
     router.push('/home')
   }
 
-  handleSwitchTagButtonClick (e) {
+  handleSwitchTagsButtonClick (e) {
     let { router } = this.context
     router.push('/alltags')
   }
@@ -104,7 +104,7 @@ class SideNav extends React.Component {
       tagList.map(tag => {
         return (<TagListItem
           name={tag}
-          handleClickTagButton={this.handleClickTagButton.bind(this)}
+          handleClickTagListItem={this.handleClickTagListItem.bind(this)}
           key={tag}
         />
         )
@@ -112,7 +112,7 @@ class SideNav extends React.Component {
     )
   }
 
-  handleClickTagButton (e, name) {
+  handleClickTagListItem (e, name) {
     let { router } = this.context
     router.push(`/tags/${name}`)
   }
@@ -145,8 +145,8 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFolderButtonClick(e)}>Folder</button>
-            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagButtonClick(e)}>Tags</button>
+            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFoldersButtonClick(e)}>Folders</button>
+            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagsButtonClick(e)}>Tags</button>
           </div>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}

From d09de09fef686dab439961b613c59a2fc98ad89b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 02:57:02 +0900
Subject: [PATCH 16/34] use color variables

---
 browser/main/SideNav/SideNav.styl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 3e6b472d..2e237bdf 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -22,10 +22,10 @@
     background-color alpha($ui-button--active-backgroundColor, 20%)
 
 .active-button
-  background-color #c4c4c4
+  background-color $ui-button--active-color
 
 .non-active-button
-  background-color white
+  background-color $ui-button-color
 
 .top-menu-label
   margin-left 5px

From 3192ce9d39fa26334e8e4837b08a89734b39e435 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:00:26 +0900
Subject: [PATCH 17/34] modify to use PropTypes

---
 browser/components/TagListItem.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 36e00bd6..c3f19726 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -20,5 +20,9 @@ const TagListItem = ({name, handleClickTagListItem}) => {
   )
 }
 
-export default CSSModules(TagListItem, styles)
+TagListItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleClickTagListItem: PropTypes.func.isRequired
+}
 
+export default CSSModules(TagListItem, styles)

From e8abd43c8a44696f805f75099d099f148aa18efe Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:01:59 +0900
Subject: [PATCH 18/34] modify to remove unnecessary "return"

---
 browser/components/TagListItem.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index c3f19726..03b07c35 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -10,15 +10,13 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {Function} handleClickTagListItem
 */
 
-const TagListItem = ({name, handleClickTagListItem}) => {
-  return (
+const TagListItem = ({name, handleClickTagListItem}) => (
     <button styleName='tagList-item' onClick={(e) => handleClickTagListItem(e, name)}>
       <span styleName='tagList-item-name'>
         {`# ${name}`}
       </span>
     </button>
-  )
-}
+);
 
 TagListItem.propTypes = {
   name: PropTypes.string.isRequired,

From ad7a3c49f9c4cf48319f8d345d279be41e5416b0 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:04:30 +0900
Subject: [PATCH 19/34] modify to use "const" from "let"

---
 browser/main/SideNav/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 174ac157..c1e10a84 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -40,12 +40,12 @@ class SideNav extends React.Component {
   }
 
   handleSwitchFoldersButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/home')
   }
 
   handleSwitchTagsButtonClick (e) {
-    let { router } = this.context
+    const { router } = this.context
     router.push('/alltags')
   }
 
@@ -113,7 +113,7 @@ class SideNav extends React.Component {
   }
 
   handleClickTagListItem (e, name) {
-    let { router } = this.context
+    const { router } = this.context
     router.push(`/tags/${name}`)
   }
 

From 012e2dde4f85784a5540eb626029f11d7928829c Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:12:35 +0900
Subject: [PATCH 20/34] remove unnecessary "e" variables

---
 browser/main/SideNav/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index c1e10a84..d712a255 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -39,12 +39,12 @@ class SideNav extends React.Component {
     router.push('/trashed')
   }
 
-  handleSwitchFoldersButtonClick (e) {
+  handleSwitchFoldersButtonClick () {
     const { router } = this.context
     router.push('/home')
   }
 
-  handleSwitchTagsButtonClick (e) {
+  handleSwitchTagsButtonClick () {
     const { router } = this.context
     router.push('/alltags')
   }
@@ -145,8 +145,8 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={(e) => this.handleSwitchFoldersButtonClick(e)}>Folders</button>
-            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={(e) => this.handleSwitchTagsButtonClick(e)}>Tags</button>
+            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
+            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
           </div>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}

From 86270dd8565e9e3a8919c167c1b7e5e37344d39f Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:18:42 +0900
Subject: [PATCH 21/34] add the comment fot complicated condition

---
 browser/main/SideNav/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index d712a255..5b2f922f 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -52,6 +52,8 @@ class SideNav extends React.Component {
   SideNavComponent (isFolded, isHomeActive, isStarredActive, isTrashedActive, storageList) {
     let { location, data } = this.props
     let component
+
+    //TagsMode is not selected
     if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
       component = (
         <div>

From 7691b662d62d58ffa5271759574015e444a370f2 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:22:54 +0900
Subject: [PATCH 22/34] remove unnecesarry "return"

---
 browser/main/SideNav/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 5b2f922f..2ce9892b 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -103,14 +103,13 @@ class SideNav extends React.Component {
       return key
     })
     return (
-      tagList.map(tag => {
-        return (<TagListItem
+      tagList.map(tag => (
+        <TagListItem
           name={tag}
           handleClickTagListItem={this.handleClickTagListItem.bind(this)}
           key={tag}
         />
-        )
-      })
+      ))
     )
   }
 

From d867292f66af5cbb472423daf5c9f48c0abafa8f Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:29:10 +0900
Subject: [PATCH 23/34] remove unnecesarry "e" variable

---
 browser/components/TagListItem.js | 2 +-
 browser/main/SideNav/index.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 03b07c35..98be044c 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -11,7 +11,7 @@ import CSSModules from 'browser/lib/CSSModules'
 */
 
 const TagListItem = ({name, handleClickTagListItem}) => (
-    <button styleName='tagList-item' onClick={(e) => handleClickTagListItem(e, name)}>
+    <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
       <span styleName='tagList-item-name'>
         {`# ${name}`}
       </span>
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 2ce9892b..3ced3bfd 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -113,7 +113,7 @@ class SideNav extends React.Component {
     )
   }
 
-  handleClickTagListItem (e, name) {
+  handleClickTagListItem (name) {
     const { router } = this.context
     router.push(`/tags/${name}`)
   }

From 3533903be34314c8e058975ea08c97660cfdab2b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:39:25 +0900
Subject: [PATCH 24/34] duplicate conditions as a variable

---
 browser/main/SideNav/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 3ced3bfd..1b4cd4f8 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -138,6 +138,7 @@ class SideNav extends React.Component {
     })
     let style = {}
     if (!isFolded) style.width = this.props.width
+    const isTagActive = location.pathname.match(/tag/)
     return (
       <div className='SideNav'
         styleName={isFolded ? 'root--folded' : 'root'}
@@ -146,8 +147,8 @@ class SideNav extends React.Component {
       >
         <div styleName='top'>
           <div styleName='switch-buttons'>
-            <button styleName={location.pathname.match(/tag/) ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
-            <button styleName={location.pathname.match(/tag/) ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
+            <button styleName={isTagActive ? 'non-active-button' : 'active-button'} onClick={this.handleSwitchFoldersButtonClick.bind(this)}>Folders</button>
+            <button styleName={isTagActive ? 'active-button' : 'non-active-button'} onClick={this.handleSwitchTagsButtonClick.bind(this)}>Tags</button>
           </div>
           <button styleName='top-menu'
             onClick={(e) => this.handleMenuButtonClick(e)}

From 6018cd5d81fc9332f9a4e6b354e365279a0ed83a Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 03:44:15 +0900
Subject: [PATCH 25/34] get "data" from this.props

---
 browser/main/SideNav/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 1b4cd4f8..704f071c 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -98,7 +98,8 @@ class SideNav extends React.Component {
     return component
   }
 
-  tagListComponent (data) {
+  tagListComponent () {
+    const { data } = this.props
     let tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })

From 2fddc32eb793ed40338ec751a1fe262eafe69303 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 04:10:21 +0900
Subject: [PATCH 26/34] cut out StorageList component

---
 browser/components/StorageList.js   | 23 +++++++++++++++++++++++
 browser/components/StorgaeList.styl | 20 ++++++++++++++++++++
 browser/main/SideNav/SideNav.styl   | 18 ------------------
 browser/main/SideNav/index.js       |  7 ++-----
 4 files changed, 45 insertions(+), 23 deletions(-)
 create mode 100644 browser/components/StorageList.js
 create mode 100644 browser/components/StorgaeList.styl

diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js
new file mode 100644
index 00000000..b52cd185
--- /dev/null
+++ b/browser/components/StorageList.js
@@ -0,0 +1,23 @@
+/**
+* @fileoverview Micro component for showing StorageList
+*/
+import React, { PropTypes } from 'react'
+import styles from './StorgaeList.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {Array} storgaeList
+*/
+
+const StorageList = ({storageList}) => (
+  <div styleName='storageList'>
+    {storageList.length > 0 ? storageList : (
+      <div styleName='storgaeList-empty'>No storage mount.</div>
+    )}
+  </div>
+)
+
+StorageList.propTypes = {
+  storgaeList: PropTypes.array.isRequired
+}
+export default CSSModules(StorageList, styles)
diff --git a/browser/components/StorgaeList.styl b/browser/components/StorgaeList.styl
new file mode 100644
index 00000000..622905b1
--- /dev/null
+++ b/browser/components/StorgaeList.styl
@@ -0,0 +1,20 @@
+.storageList
+  absolute left right
+  bottom 37px
+  top 160px
+  overflow-y auto
+
+.storageList-empty
+  padding 0 10px
+  margin-top 15px
+  line-height 24px
+  color $ui-inactive-text-color
+
+body[data-theme="dark"]
+  .storageList-empty
+    color $ui-dark-inactive-text-color
+
+.root-folded
+  .storageList-empty
+    white-space nowrap
+    transform rotate(90deg)
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index 2e237bdf..c3807a60 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -31,18 +31,6 @@
   margin-left 5px
   overflow ellipsis
 
-.storageList
-  absolute left right
-  bottom 37px
-  top 160px
-  overflow-y auto
-
-.storageList-empty
-  padding 0 10px
-  margin-top 15px
-  line-height 24px
-  color $ui-inactive-text-color
-
 .tagList
   absolute left right
   bottom 37px
@@ -64,9 +52,6 @@
 .root--folded
   @extend .root
   width 44px
-  .storageList-empty
-    white-space nowrap
-    transform rotate(90deg)
   .top-menu
     width 44px - 1
     text-align center
@@ -132,9 +117,6 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
 
-  .storageList-empty
-    color $ui-dark-inactive-text-color
-
   .navToggle
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 704f071c..7f9fa522 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -7,6 +7,7 @@ import ConfigManager from 'browser/main/lib/ConfigManager'
 import StorageItem from './StorageItem'
 import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
+import StorageList from 'browser/components/StorageList'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -67,11 +68,7 @@ class SideNav extends React.Component {
             handleTrashedButtonClick={(e) => this.handleTrashedButtonClick(e)}
           />
 
-          <div styleName='storageList'>
-            {storageList.length > 0 ? storageList : (
-              <div styleName='storageList-empty'>No storage mount.</div>
-            )}
-          </div>
+          <StorageList storageList={storageList} />
           <button styleName='navToggle'
             onClick={(e) => this.handleToggleButtonClick(e)}
           >

From f805e8a6884a7d54bf593bd61cdddd46132af40d Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 04:26:08 +0900
Subject: [PATCH 27/34] cut out NavToggle component

---
 browser/components/NavToggleButton.js   | 29 +++++++++++++++++++++++++
 browser/components/NavToggleButton.styl | 19 ++++++++++++++++
 browser/main/SideNav/SideNav.styl       | 18 ---------------
 browser/main/SideNav/index.js           | 10 ++-------
 4 files changed, 50 insertions(+), 26 deletions(-)
 create mode 100644 browser/components/NavToggleButton.js
 create mode 100644 browser/components/NavToggleButton.styl

diff --git a/browser/components/NavToggleButton.js b/browser/components/NavToggleButton.js
new file mode 100644
index 00000000..bf50fe90
--- /dev/null
+++ b/browser/components/NavToggleButton.js
@@ -0,0 +1,29 @@
+/**
+* @fileoverview Micro component for toggle SideNav
+*/
+import React, { PropTypes } from 'react'
+import styles from './NavToggleButton.styl'
+import CSSModules from 'browser/lib/CSSModules'
+
+/**
+* @param {boolean} isFolded
+* @param {Function} handleToggleButtonClick
+*/
+
+const NavToggleButton = ({isFolded, handleToggleButtonClick}) => (
+  <button styleName='navToggle'
+    onClick={(e) => handleToggleButtonClick(e)}
+  >
+    {isFolded
+     ? <i className='fa fa-angle-double-right' />
+     : <i className='fa fa-angle-double-left' />
+    }
+  </button>
+)
+
+NavToggleButton.propTypes = {
+  isFolded: PropTypes.bool.isRequired,
+  handleToggleButtonClick: PropTypes.func.isRequired
+}
+
+export default CSSModules(NavToggleButton, styles)
diff --git a/browser/components/NavToggleButton.styl b/browser/components/NavToggleButton.styl
new file mode 100644
index 00000000..447f492b
--- /dev/null
+++ b/browser/components/NavToggleButton.styl
@@ -0,0 +1,19 @@
+.navToggle
+  navButtonColor()
+  display block
+  position absolute
+  right 5px
+  bottom 5px
+  border-radius 16.5px
+  height 34px
+  width 34px
+  line-height 32px
+  padding 0
+
+body[data-theme="dark"]
+  .navToggle
+    &:hover
+      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
+      transition 0.15s
+      color $ui-dark-text-color
+
diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl
index c3807a60..9422b2e7 100644
--- a/browser/main/SideNav/SideNav.styl
+++ b/browser/main/SideNav/SideNav.styl
@@ -37,18 +37,6 @@
   top 80px
   overflow-y auto
 
-.navToggle
-  navButtonColor()
-  display block
-  position absolute
-  right 5px
-  bottom 5px
-  border-radius 16.5px
-  height 34px
-  width 34px
-  line-height 32px
-  padding 0
-
 .root--folded
   @extend .root
   width 44px
@@ -116,9 +104,3 @@ body[data-theme="dark"]
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
     &:hover
       background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-
-  .navToggle
-    &:hover
-      background-color alpha($ui-dark-button--active-backgroundColor, 20%)
-      transition 0.15s
-      color $ui-dark-text-color
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 7f9fa522..308aaa71 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -8,6 +8,7 @@ import StorageItem from './StorageItem'
 import TagListItem from 'browser/components/TagListItem'
 import SideNavFilter from 'browser/components/SideNavFilter'
 import StorageList from 'browser/components/StorageList'
+import NavToggleButton from 'browser/components/NavToggleButton'
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
@@ -69,14 +70,7 @@ class SideNav extends React.Component {
           />
 
           <StorageList storageList={storageList} />
-          <button styleName='navToggle'
-            onClick={(e) => this.handleToggleButtonClick(e)}
-          >
-            {isFolded
-              ? <i className='fa fa-angle-double-right' />
-              : <i className='fa fa-angle-double-left' />
-            }
-          </button>
+          <NavToggleButton isFolded={isFolded} handleToggleButtonClick={this.handleToggleButtonClick.bind(this)} />
         </div>
       )
     } else {

From 046e6af489fb48edabd4d28ea76d40bd8deaa216 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 04:31:35 +0900
Subject: [PATCH 28/34] remove extra semicolon and fix indent

---
 browser/components/TagListItem.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 98be044c..df405d48 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -11,12 +11,12 @@ import CSSModules from 'browser/lib/CSSModules'
 */
 
 const TagListItem = ({name, handleClickTagListItem}) => (
-    <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
-      <span styleName='tagList-item-name'>
-        {`# ${name}`}
-      </span>
-    </button>
-);
+  <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
+    <span styleName='tagList-item-name'>
+      {`# ${name}`}
+    </span>
+  </button>
+)
 
 TagListItem.propTypes = {
   name: PropTypes.string.isRequired,

From a22e97d4bd9577650b3ce7a3f6141d2554794735 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 04:32:06 +0900
Subject: [PATCH 29/34] add a space after "//" in comment

---
 browser/main/SideNav/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 308aaa71..370d05b1 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -55,7 +55,7 @@ class SideNav extends React.Component {
     let { location, data } = this.props
     let component
 
-    //TagsMode is not selected
+    // TagsMode is not selected
     if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
       component = (
         <div>

From e8564f6540433f4310c93b436d21f9a0e11498c9 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 7 Oct 2017 14:18:11 +0900
Subject: [PATCH 30/34] modify propTypes "array" -> "arrayOf"

---
 browser/components/StorageList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js
index b52cd185..393f35bb 100644
--- a/browser/components/StorageList.js
+++ b/browser/components/StorageList.js
@@ -18,6 +18,6 @@ const StorageList = ({storageList}) => (
 )
 
 StorageList.propTypes = {
-  storgaeList: PropTypes.array.isRequired
+  storgaeList: PropTypes.arrayOf.isRequired
 }
 export default CSSModules(StorageList, styles)

From 3c4fa83161e3d95600a3858901574f5da5dd67af Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Mon, 9 Oct 2017 22:40:51 +0900
Subject: [PATCH 31/34] modify the arg of arrayOf to the correct

---
 browser/components/StorageList.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/StorageList.js b/browser/components/StorageList.js
index 393f35bb..f3620b49 100644
--- a/browser/components/StorageList.js
+++ b/browser/components/StorageList.js
@@ -18,6 +18,6 @@ const StorageList = ({storageList}) => (
 )
 
 StorageList.propTypes = {
-  storgaeList: PropTypes.arrayOf.isRequired
+  storgaeList: PropTypes.arrayOf(PropTypes.element).isRequired
 }
 export default CSSModules(StorageList, styles)

From 9b608142926585b88f9e2caa6910a51272b9acc6 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 10 Oct 2017 00:02:42 +0900
Subject: [PATCH 32/34] fix bug : isTrashedActive and isStarredActive are
 inverted

---
 browser/main/SideNav/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 370d05b1..05f668e4 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -51,8 +51,13 @@ class SideNav extends React.Component {
     router.push('/alltags')
   }
 
-  SideNavComponent (isFolded, isHomeActive, isStarredActive, isTrashedActive, storageList) {
+  SideNavComponent (isFolded, storageList) {
     let { location, data } = this.props
+
+    const isHomeActive = !!location.pathname.match(/^\/home$/)
+    const isStarredActive = !!location.pathname.match(/^\/starred$/)
+    const isTrashedActive = !!location.pathname.match(/^\/trashed$/)
+
     let component
 
     // TagsMode is not selected
@@ -114,9 +119,6 @@ class SideNav extends React.Component {
     let { data, location, config, dispatch } = this.props
 
     let isFolded = config.isSideNavFolded
-    let isHomeActive = !!location.pathname.match(/^\/home$/)
-    let isStarredActive = !!location.pathname.match(/^\/starred$/)
-    let isTrashedActive = !!location.pathname.match(/^\/trashed$/)
 
     let storageList = data.storageMap.map((storage, key) => {
       return <StorageItem
@@ -148,7 +150,7 @@ class SideNav extends React.Component {
             <i className='fa fa-wrench fa-fw' />
           </button>
         </div>
-        {this.SideNavComponent(isFolded, isHomeActive, isTrashedActive, isStarredActive, storageList)}
+        {this.SideNavComponent(isFolded, storageList)}
       </div>
     )
   }

From ff4b96b62282182386188daf6883edbaa223203b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 10 Oct 2017 00:31:26 +0900
Subject: [PATCH 33/34] implement tagItem active styleName

---
 browser/components/TagListItem.js   |  5 +++--
 browser/components/TagListItem.styl | 13 ++++++++++++-
 browser/main/SideNav/index.js       |  3 ++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index df405d48..e522c1e6 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -8,10 +8,11 @@ import CSSModules from 'browser/lib/CSSModules'
 /**
 * @param {string} name
 * @param {Function} handleClickTagListItem
+* @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem}) => (
-  <button styleName='tagList-item' onClick={() => handleClickTagListItem(name)}>
+const TagListItem = ({name, handleClickTagListItem, isActive}) => (
+  <button styleName={isActive? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
     </span>
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 4e89b094..e3ee4f10 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -20,6 +20,18 @@
     color $ui-text-color
     background-color $ui-button--active-backgroundColor
 
+.tagList-item-active
+  background-color $ui-button--active-backgroundColor
+  display flex
+  width 100%
+  height 26px
+  padding 0
+  margin-bottom 5px
+  text-align left
+  border none
+  overflow ellipsis
+  font-size 12px
+
 .tagList-item-name
   display block
   flex 1
@@ -31,4 +43,3 @@
   border-color transparent
   overflow hidden
   text-overflow ellipsis
-
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 05f668e4..f9253ec3 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -95,7 +95,7 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data } = this.props
+    const { data, location } = this.props
     let tagList = data.tagNoteMap.map((tag, key) => {
       return key
     })
@@ -104,6 +104,7 @@ class SideNav extends React.Component {
         <TagListItem
           name={tag}
           handleClickTagListItem={this.handleClickTagListItem.bind(this)}
+          isActive={!!location.pathname.match(tag)}
           key={tag}
         />
       ))

From 35beec3e3926308362925c30abb8b1c7bf6c3e42 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Tue, 10 Oct 2017 00:35:54 +0900
Subject: [PATCH 34/34] insert necessary space

---
 browser/components/TagListItem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index e522c1e6..206fcf24 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,7 +12,7 @@ import CSSModules from 'browser/lib/CSSModules'
 */
 
 const TagListItem = ({name, handleClickTagListItem, isActive}) => (
-  <button styleName={isActive? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
+  <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
     <span styleName='tagList-item-name'>
       {`# ${name}`}
     </span>