rewite whole code

add dataApi
renew PreferencesModal

browser/main/SideNav/FolderItem.js

@@ -1,244 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './FolderItem.styl'
-import store from 'browser/main/store'
-import Repository from 'browser/lib/Repository'
-import consts from 'browser/lib/consts'
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu, MenuItem } = remote
-
-class FolderItem extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isEditing: false,
-      isUpdating: false,
-      name: props.folder.name
-    }
-  }
-
-  handleColorButtonClick (color) {
-    return (e) => {
-      let { repository, folder } = this.props
-      this.setState({
-        isUpdating: true
-      }, () => {
-        Repository.find(repository.key)
-          .then((repository) => {
-            console.log(repository)
-            return repository.updateFolder(folder.key, {color: color})
-          })
-          .then((folder) => {
-            store.dispatch({
-              type: 'EDIT_FOLDER',
-              key: repository.key,
-              folder: folder
-            })
-            this.setState({
-              isEditing: false,
-              isUpdating: false
-            })
-          })
-          .catch((err) => {
-            console.error(err)
-            this.setState({
-              isEditing: false,
-              isUpdating: false
-            })
-          })
-      })
-    }
-  }
-
-  handleContextButtonClick (e) {
-    e.stopPropagation()
-    if (this.state.isUpdating) {
-      return
-    }
-
-    var menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'New Note'
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Rename',
-      click: () => this.handleRenameButtonClick(e)
-    }))
-    var colorMenu = new Menu()
-    consts.FOLDER_COLORS.forEach((color, index) => {
-      colorMenu.append(new MenuItem({
-        label: consts.FOLDER_COLOR_NAMES[index],
-        click: (e) => this.handleColorButtonClick(color)(e)
-      }))
-    })
-    menu.append(new MenuItem({
-      label: 'Recolor',
-      submenu: colorMenu
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Delete',
-      click: () => this.handleDeleteButtonClick(e)
-    }))
-
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleRenameButtonClick (e) {
-    this.setState({
-      isEditing: true,
-      name: this.props.folder.name
-    }, () => {
-      this.refs.nameInput.focus()
-      this.refs.nameInput.select()
-    })
-  }
-
-  handleDeleteButtonClick (e) {
-    let { repository, folder } = this.props
-
-    this.setState({
-      isUpdating: true
-    }, () => {
-      Repository.find(repository.key)
-        .then((repository) => {
-          console.log(repository)
-          return repository.removeFolder(folder.key)
-        })
-        .then(() => {
-          store.dispatch({
-            type: 'REMOVE_FOLDER',
-            repository: repository.key,
-            folder: folder.key
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-          this.setState({
-            isUpdating: false
-          })
-        })
-    })
-  }
-
-  handleClick (e) {
-    let { folder, repository } = this.props
-    let { router } = this.context
-
-    router.push('/repositories/' + repository.key + '/folders/' + folder.key)
-  }
-
-  renderIdle () {
-    let { folder, repository, isFolded } = this.props
-    let { router } = this.context
-
-    let isActive = router.isActive('/repositories/' + repository.key + '/folders/' + folder.key)
-
-    return (
-      <div styleName={isFolded
-          ? isActive ? 'root--folded--active' : 'root--folded'
-          : isActive ? 'root--active' : 'root'
-        }
-        onClick={(e) => this.handleClick(e)}
-        onContextMenu={(e) => this.handleContextButtonClick(e)}
-      >
-        <div styleName='label'>
-          <i styleName='label-icon'
-            className='fa fa-cube'
-            style={{color: folder.color}}
-          />
-          <span styleName='label-name'>{folder.name}</span>
-        </div>
-        <div styleName='control'>
-          <button styleName='control-button'
-            onClick={(e) => this.handleContextButtonClick(e)}
-          >
-            <i className='fa fa-ellipsis-v'/>
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  handleNameInputChange (e) {
-    this.setState({
-      name: e.target.value
-    })
-  }
-
-  handleNameInputBlur (e) {
-    let { folder, repository } = this.props
-
-    this.setState({
-      isUpdating: true
-    }, () => {
-      Repository.find(repository.key)
-        .then((repository) => {
-          console.log(repository)
-          return repository.updateFolder(folder.key, {name: this.state.name})
-        })
-        .then((folder) => {
-          store.dispatch({
-            type: 'EDIT_FOLDER',
-            key: repository.key,
-            folder: folder
-          })
-          this.setState({
-            isEditing: false,
-            isUpdating: false
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-          this.setState({
-            isEditing: false,
-            isUpdating: false
-          })
-        })
-    })
-  }
-
-  renderEdit () {
-    let { isFolded } = this.props
-    return (
-      <div styleName={isFolded
-          ? 'root--edit--folded'
-          : 'root--edit'
-        }
-      >
-        <input styleName='nameInput'
-          ref='nameInput'
-          value={this.state.name}
-          onChange={(e) => this.handleNameInputChange(e)}
-          onBlur={(e) => this.handleNameInputBlur(e)}
-          disabled={this.state.isUpdating}
-        />
-      </div>
-    )
-  }
-
-  render () {
-    return this.state.isEditing ? this.renderEdit() : this.renderIdle()
-  }
-}
-
-FolderItem.contextTypes = {
-  router: PropTypes.object
-}
-
-FolderItem.propTypes = {
-  folder: PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string
-  }),
-  repository: PropTypes.shape({
-    key: PropTypes.string
-  }),
-  isFolded: PropTypes.bool
-}
-
-export default CSSModules(FolderItem, styles)

browser/main/SideNav/FolderItem.styl

@@ -1,115 +0,0 @@
-.root
-  height 33px
-  width 100%
-  position relative
-  cursor pointer
-  navButtonColor()
-
-.root--active
-  @extend .root
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-  .control-button
-    opacity 1
-    color white
-    &:hover
-      background-color alpha(white, 30%)
-    &:active, &:hover:active
-      background-color alpha(white, 15%)
-
-.label
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 48px
-  padding-left 20px
-  line-height 33px
-  overflow-x hidden
-
-.label-name
-  margin-left 5px
-
-.control
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 24px
-
-.control-button
-  opacity 0
-  navButtonColor()
-  width 24px
-  height 24px
-  margin-top 4.5px
-  border-radius 5px
-  transition opacity 0.15s
-
-.root--edit
-  @extend .root
-
-.nameInput
-  absolute top bottom
-  left 10px
-  right 10px
-  height 33px
-  padding 0 10px
-  border-radius 5px
-  border $ui-border
-  outline none
-  background-color white
-  z-index 1
-  &:focus
-    border-color $ui-input--focus-borderColor
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor
-
-.root--folded
-  @extend .root
-  width 44px - 1
-  &:hover .label-name
-    width 100px
-  .label
-    padding-left 0
-    text-align center
-    right 0
-  .label-icon
-    width 44px - 1
-  .label-name
-    position fixed
-    height 34px
-    left 44px
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-  .control
-    display none
-
-.root--folded--active
-  @extend .root--folded
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-
-.root--edit--folded
-  @extend .root--edit
-  .nameInput
-    position fixed
-    top inherit
-    bottom inherit
-    width 100px

browser/main/SideNav/RepositorySection.js

@@ -1,219 +0,0 @@
-import React, { PropTypes } from 'react'
-import CSSModules from 'browser/lib/CSSModules'
-import styles from './RepositorySection.styl'
-import Repository from 'browser/lib/Repository'
-import FolderItem from './FolderItem'
-
-const electron = require('electron')
-const { remote } = electron
-const { Menu, MenuItem } = remote
-
-class RepositorySection extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      isOpen: true,
-      isCreatingFolder: false,
-      isSaving: false,
-      newFolder: {
-        name: ''
-      }
-    }
-  }
-
-  getRepository () {
-    let { repository } = this.props
-    return Repository.find(repository.key)
-  }
-
-  handleUnlinkButtonClick () {
-    let { dispatch, repository } = this.props
-
-    this.getRepository()
-      .then((repositoryInstance) => {
-        return repositoryInstance.unmount()
-      })
-      .then(() => {
-        dispatch({
-          type: 'REMOVE_REPOSITORY',
-          key: repository.key
-        })
-      })
-  }
-
-  handleToggleButtonClick (e) {
-    e.stopPropagation()
-    this.setState({
-      isOpen: !this.state.isOpen
-    })
-  }
-
-  handleHeaderClick (e) {
-    let { repository } = this.props
-    let { router } = this.context
-    router.push('/repositories/' + repository.key)
-  }
-
-  handleContextButtonClick (e) {
-    e.stopPropagation()
-    let menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'New Folder',
-      click: () => this.handleNewFolderButtonClick()
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Unmount',
-      click: () => this.handleUnlinkButtonClick()
-    }))
-
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleNewFolderButtonClick (e) {
-    this.setState({
-      isCreatingFolder: true,
-      newFolder: {
-        name: 'New Folder'
-      }
-    }, () => {
-      this.refs.nameInput.select()
-      this.refs.nameInput.focus()
-    })
-  }
-
-  handleNewFolderFormChange (e) {
-    let newFolder = this.state.newFolder
-    newFolder.name = this.refs.nameInput.value
-
-    this.setState({
-      newFolder
-    })
-  }
-
-  handleNameInputBlur (e) {
-    let { dispatch, repository } = this.props
-
-    this.setState({
-      isSaving: true
-    }, () => {
-      this.getRepository()
-        .then((repositoryInstance) => {
-          return repositoryInstance.addFolder({
-            name: this.state.newFolder.name
-          })
-        })
-        .then((folder) => {
-          dispatch({
-            type: 'ADD_FOLDER',
-            key: repository.key,
-            folder: folder
-          })
-
-          this.setState({
-            isCreatingFolder: false,
-            isSaving: false
-          })
-        })
-        .catch((err) => {
-          console.error(err)
-
-          this.setState({
-            isCreatingFolder: false,
-            isSaving: false
-          })
-        })
-    })
-  }
-
-  render () {
-    let { repository, isFolded } = this.props
-    let { router } = this.context
-
-    let isActive = router.isActive('/repositories/' + repository.key, true)
-
-    let folderElements = repository.folders.map((folder) => {
-      return (
-        <FolderItem
-          key={folder.key}
-          folder={folder}
-          repository={repository}
-          isFolded={isFolded}
-        />
-      )
-    })
-
-    let toggleButtonIconClassName = this.state.isOpen
-      ? 'fa fa-minus'
-      : 'fa fa-plus'
-
-    return (
-      <div
-        className='RepositorySection'
-        styleName={isFolded ? 'root-folded' : 'root'}
-      >
-        <div styleName={isActive ? 'header--active' : 'header'}
-          onClick={(e) => this.handleHeaderClick(e)}
-          onContextMenu={(e) => this.handleContextButtonClick(e)}
-        >
-          <div styleName='header-name'>
-            <i className='fa fa-archive fa-fw'/>
-            <span styleName='header-name-label'>{repository.name}</span>
-          </div>
-
-          <div styleName='header-control'>
-            <button styleName='header-control-button'
-              onClick={(e) => this.handleContextButtonClick(e)}
-            >
-              <i className='fa fa-ellipsis-v fa-fw'/>
-            </button>
-            <button styleName='header-control-button--show'
-              onClick={(e) => this.handleToggleButtonClick(e)}
-            >
-              <i className={toggleButtonIconClassName}/>
-            </button>
-          </div>
-        </div>
-        {this.state.isOpen && <div>
-          {folderElements}
-
-          {this.state.isCreatingFolder
-            ? <div styleName='newFolderForm'>
-              <input styleName='newFolderForm-nameInput'
-                ref='nameInput'
-                disabled={this.state.isSaving}
-                value={this.state.newFolder.name}
-                onChange={(e) => this.handleNewFolderFormChange(e)}
-                onBlur={(e) => this.handleNameInputBlur(e)}
-              />
-            </div>
-            : <button styleName='newFolderButton'
-              onClick={(e) => this.handleNewFolderButtonClick(e)}
-            >
-              <i styleName='newFolderButton-icon' className='fa fa-plus fa-fw'/>
-              <span styleName='newFolderButton-label'>New Folder</span>
-            </button>
-          }
-        </div>}
-      </div>
-    )
-  }
-}
-
-RepositorySection.contextTypes = {
-  router: PropTypes.object
-}
-
-RepositorySection.propTypes = {
-  repository: PropTypes.shape({
-    name: PropTypes.string,
-    folders: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string
-    }))
-  }),
-  dispatch: PropTypes.func,
-  isFolded: PropTypes.bool
-}
-
-export default CSSModules(RepositorySection, styles)

browser/main/SideNav/RepositorySection.styl

@@ -1,184 +0,0 @@
-.root
-  user-select none
-  color $nav-text-color
-
-.header
-  position relative
-  width 100%
-  height 33px
-  cursor pointer
-  text-align left
-  font-size 14px
-  color $ui-inactive-text-color
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-  &:hover .header-control-button
-    opacity 1
-  &:active
-    background-color $ui-button--active-backgroundColor
-    color $ui-button--active-color
-    .header-control-button, .header-control-button--show
-      color white
-
-.header--active, .header--active:hover, .header--active:active
-  @extend .header
-  background-color $ui-button--active-backgroundColor
-  color $ui-button--active-color
-  &:hover
-    background-color $ui-button--active-backgroundColor
-  .header-control-button,
-  .header-control-button--show
-    color white
-    opacity 1
-    &:hover
-      background-color alpha(white, 30%)
-    &:active
-      background-color alpha(white, 15%)
-
-.header-name
-  position absolute
-  left 0
-  top 0
-  bottom 0
-  right 72px
-  padding-left 10px
-  line-height 33px
-
-.header-name-label
-  margin-left 5px
-
-.header-control
-  position absolute
-  top 0
-  bottom 0
-  right 5px
-  width 48px
-
-.header-control-button
-  border none
-  background-color transparent
-  width 24px
-  height 24px
-  padding 0
-  margin-top 4.5px
-  border-radius 5px
-  opacity 0
-  color $ui-inactive-text-color
-  transition color background-color 0.15s
-  &:hover
-    background-color $ui-button--hover-backgroundColor
-
-.header-control-button--show
-  @extend .header-control-button
-  opacity 1
-
-.newFolderForm
-  width 100%
-  padding 0 15px
-  height 33px
-
-.newFolderForm-nameInput
-  width 100%
-  height 33px
-  padding 0 10px
-  border-radius 5px
-  border $ui-border
-  outline none
-  &:focus
-    border-color $ui-input--focus-borderColor
-  &:disabled
-    background-color $ui-input--disabled-backgroundColor
-
-.newFolderButton
-  navButtonColor()
-  height 34px
-  width 100%
-  border none
-  padding 0 0 0 20px
-  text-align left
-  line-height 34px
-
-.newFolderButton-label
-  margin-left 0
-
-.root-folded
-  @extend .root
-  width 44px - 1
-  .header, .header--active
-    width 44px - 1
-    text-align center
-    overflow hidden
-    &:hover
-      .header-name-label
-        width 134px
-        padding-left 34px
-      .header-control
-        width 35px
-        padding-right 5px
-  .header-name
-    width 44px - 1
-    padding-left 0
-  .header-name-label
-    position fixed
-    display inline-block
-    height 34px
-    left 44px - 1
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-  .header-control
-    position fixed
-    width 0
-    height 33px
-    top inherit
-    bottom inherit
-    z-index 11
-    left 44px - 1
-    box-sizing border-box
-    overflow hidden
-  .header-control-button
-    display none
-  .header-control-button--show
-    float right
-    background-color $ui-tooltip-button-backgroundColor
-    &:hover
-      background-color $ui-tooltip-button--hover-backgroundColor
-  .newFolderButton
-    width 44px - 1
-    padding 0
-    &:hover .newFolderButton-label
-      width 100px
-  .newFolderButton-icon
-    text-align center
-    width 44px - 1
-  .newFolderButton-label
-    position fixed
-    display inline-block
-    height 34px
-    left 44px
-    width 0
-    box-sizing border-box
-    margin-left 0
-    overflow ellipsis
-    background-color $ui-tooltip-backgroundColor
-    z-index 10
-    color white
-    line-height 34px
-    border-top-right-radius 5px
-    border-bottom-right-radius 5px
-    transition width 0.15s
-    pointer-events none
-    font-size 14px
-    text-align center
-  .newFolderForm-nameInput
-    position fixed
-    width 100px

browser/main/SideNav/SideNav.styl

@@ -44,13 +44,13 @@
 .menu-button-label
   margin-left 5px
 
-.repositoryList
+.storageList
   absolute left right
   bottom 44px
   top 178px
   overflow-y auto
 
-.repositoryList-empty
+.storageList-empty
   padding 0 10px
   margin-top 15px
   line-height 24px
@@ -68,10 +68,10 @@
   line-height 32px
   padding 0
 
-.root-folded
+.root--folded
   @extend .root
   width 44px
-  .repositoryList-empty
+  .storageList-empty
     white-space nowrap
     transform rotate(90deg)
   .top-menu

browser/main/SideNav/StorageItem.js

@@ -0,0 +1,95 @@
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './StorageItem.styl'
+import { hashHistory } from 'react-router'
+
+class StorageItem extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isOpen: false
+    }
+  }
+
+  handleToggleButtonClick (e) {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  handleHeaderInfoClick (e) {
+    let { storage } = this.props
+    hashHistory.push('/storages/' + storage.key)
+  }
+
+  handleFolderButtonClick (folderKey) {
+    return (e) => {
+      let { storage } = this.props
+      hashHistory.push('/storages/' + storage.key + '/folders/' + folderKey)
+    }
+  }
+
+  render () {
+    let { storage, location } = this.props
+    let folderList = storage.folders.map((folder) => {
+      let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '\/folders\/' + folder.key))
+      return <button styleName={isActive
+          ? 'folderList-item--active'
+          : 'folderList-item'
+        }
+        key={folder.key}
+        onClick={(e) => this.handleFolderButtonClick(folder.key)(e)}
+      >
+        <span styleName='folderList-item-name'
+          style={{borderColor: folder.color}}
+        >
+          {folder.name}
+        </span>
+      </button>
+    })
+
+    let isActive = location.pathname.match(new RegExp('\/storages\/' + storage.key + '$'))
+
+    return (
+      <div styleName='root'
+        key={storage.key}
+      >
+        <div styleName={isActive
+              ? 'header--active'
+              : 'header'
+            }>
+          <button styleName='header-toggleButton'
+            onMouseDown={(e) => this.handleToggleButtonClick(e)}
+          >
+            <i className={this.state.isOpen
+                ? 'fa fa-caret-down'
+                : 'fa fa-caret-right'
+              }
+            />
+          </button>
+          <button styleName='header-info'
+            onClick={(e) => this.handleHeaderInfoClick(e)}
+          >
+            <span styleName='header-info-name'>
+              {storage.name}
+            </span>
+            <span styleName='header-info-path'>
+              ({storage.path})
+            </span>
+          </button>
+        </div>
+        {this.state.isOpen &&
+          <div styleName='folderList' >
+            {folderList}
+          </div>
+        }
+      </div>
+    )
+  }
+}
+
+StorageItem.propTypes = {
+}
+
+export default CSSModules(StorageItem, styles)

browser/main/SideNav/StorageItem.styl

@@ -0,0 +1,89 @@
+.root
+  width 100%
+  user-select none
+.header
+  position relative
+  height 30px
+  width 100%
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    .header-toggleButton
+      color white
+.header--active
+  @extend .header
+  .header-info
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+  .header-toggleButton
+    color white
+    &:active
+      color white
+
+.header-toggleButton
+  position absolute
+  left 0
+  width 25px
+  height 30px
+  padding 0
+  border none
+  color $ui-inactive-text-color
+  background-color transparent
+  &:hover
+    color $ui-text-color
+  &:active
+    color $ui-active-color
+
+.header-info
+  display block
+  width 100%
+  height 30px
+  padding-left 25px
+  padding-right 10px
+  line-height 30px
+  cursor pointer
+  font-size 14px
+  border none
+  overflow ellipsis
+  text-align left
+  background-color transparent
+  color $ui-inactive-text-color
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+
+.header-info-path
+  font-size 10px
+  margin 0 5px
+
+.folderList-item
+  display block
+  width 100%
+  height 3 0px
+  background-color transparent
+  color $ui-inactive-text-color
+  padding 0
+  margin 2px 0
+  text-align left
+  border none
+  font-size 14px
+  &:hover
+    background-color $ui-button--hover-backgroundColor
+  &:active
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+.folderList-item--active
+  @extend .folderList-item
+  color $ui-button--active-color
+  background-color $ui-button--active-backgroundColor
+  &:hover
+    color $ui-button--active-color
+    background-color $ui-button--active-backgroundColor
+.folderList-item-name
+  display block
+  padding 0 10px
+  height 30px
+  line-height 30px
+  border-width 0 0 0 6px
+  border-style solid
+  border-color transparent

browser/main/SideNav/index.js

@@ -2,43 +2,22 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './SideNav.styl'
 import { openModal } from 'browser/main/lib/modal'
-import Preferences from '../modals/Preferences'
-import RepositorySection from './RepositorySection'
-import NewRepositoryModal from '../modals/NewRepositoryModal'
+import PreferencesModal from '../modals/PreferencesModal'
 import ConfigManager from 'browser/main/lib/ConfigManager'
+import StorageItem from './StorageItem'
 
 const electron = require('electron')
 const { remote } = electron
-const Menu = remote.Menu
-const MenuItem = remote.MenuItem
 
 class SideNav extends React.Component {
   // TODO: should not use electron stuff v0.7
   handleMenuButtonClick (e) {
-    var menu = new Menu()
-    menu.append(new MenuItem({
-      label: 'Preferences',
-      click: (e) => this.handlePreferencesButtonClick(e)
-    }))
-    menu.append(new MenuItem({ type: 'separator' }))
-    menu.append(new MenuItem({
-      label: 'Mount Repository',
-      click: (e) => this.handleNewRepositoryButtonClick(e)
-    }))
-    menu.popup(remote.getCurrentWindow())
-  }
-
-  handleNewRepositoryButtonClick (e) {
-    openModal(NewRepositoryModal)
-  }
-
-  handlePreferencesButtonClick (e) {
-    openModal(Preferences)
+    openModal(PreferencesModal)
   }
 
   handleHomeButtonClick (e) {
     let { router } = this.context
-    router.push('/repositories')
+    router.push('/home')
   }
 
   handleStarredButtonClick (e) {
@@ -57,25 +36,22 @@ class SideNav extends React.Component {
   }
 
   render () {
-    let { repositories, dispatch, location, config } = this.props
+    let { storages, location, config } = this.props
 
     let isFolded = config.isSideNavFolded
     let isHomeActive = location.pathname.match(/^\/home$/)
     let isStarredActive = location.pathname.match(/^\/starred$/)
-
-    let repositorieElements = repositories
-      .map((repo) => {
-        return <RepositorySection
-          key={repo.key}
-          repository={repo}
-          dispatch={dispatch}
-          isFolded={isFolded}
-        />
-      })
+    let storageList = storages.map((storage) => {
+      return <StorageItem
+        key={storage.key}
+        storage={storage}
+        location={location}
+      />
+    })
 
     return (
       <div className='SideNav'
-        styleName={isFolded ? 'root-folded' : 'root'}
+        styleName={isFolded ? 'root--folded' : 'root'}
         tabIndex='1'
       >
         <div styleName='top'>
@@ -102,9 +78,9 @@ class SideNav extends React.Component {
           </button>
         </div>
 
-        <div styleName='repositoryList'>
-          {repositories.length > 0 ? repositorieElements : (
-            <div styleName='repositoryList-empty'>No repository mount.</div>
+        <div styleName='storageList'>
+          {storageList.length > 0 ? storageList : (
+            <div styleName='storageList-empty'>No storage mount.</div>
           )}
         </div>
 
@@ -127,7 +103,7 @@ SideNav.contextTypes = {
 
 SideNav.propTypes = {
   dispatch: PropTypes.func,
-  repositories: PropTypes.array,
+  storages: PropTypes.array,
   config: PropTypes.shape({
     isSideNavFolded: PropTypes.bool
   }),