Add selector to sort tags by counter or alphabetically

![screencast](https://i.imgur.com/XUkTyRe.gif)

.boostnoterc.sample

@@ -23,6 +23,7 @@
         "lineNumber": true
     },
     "sortBy": "UPDATED_AT",
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,

browser/main/SideNav/SideNav.styl

@@ -8,6 +8,29 @@
   display: flex
   flex-direction column
 
+.control
+  user-select none
+  height $control-height
+  font-size 12px
+  line-height 25px
+  display flex
+  color $ui-inactive-text-color
+
+.control-sortTagsBy
+  flex 1
+  padding-left 15px
+
+.control-sortTagsBy-select
+  appearance: none;
+  margin-left 5px
+  color $ui-inactive-text-color
+  padding 0
+  border none
+  background-color transparent
+  outline none
+  cursor pointer
+  font-size 12px
+
 .top
   padding-bottom 15px
 
@@ -82,6 +105,10 @@ body[data-theme="white"]
     background-color #f9f9f9
     color $ui-text-color
 
+  .control
+    background-color $ui-white-backgroundColor
+    border-color $ui-white-borderColor
+
 body[data-theme="dark"]
   .root, .root--folded
     border-right 1px solid $ui-dark-borderColor
@@ -91,7 +118,15 @@ body[data-theme="dark"]
   .top
     border-color $ui-dark-borderColor
 
+  .control
+    background-color $ui-dark-backgroundColor
+    border-color $ui-dark-borderColor
+
 body[data-theme="solarized-dark"]
   .root, .root--folded
     background-color $ui-solarized-dark-backgroundColor
     border-right 1px solid $ui-solarized-dark-borderColor
+
+  .control
+    background-color $ui-solarized-dark-backgroundColor
+    border-color $ui-solarized-dark-borderColor

browser/main/SideNav/index.js

@@ -82,7 +82,7 @@ class SideNav extends React.Component {
   }
 
   SideNavComponent (isFolded, storageList) {
-    const { location, data } = this.props
+    const { location, data, config } = this.props
 
     const isHomeActive = !!location.pathname.match(/^\/home$/)
     const isStarredActive = !!location.pathname.match(/^\/starred$/)
@@ -119,6 +119,21 @@ class SideNav extends React.Component {
             <p>{i18n.__('Tags')}</p>
           </div>
           <div styleName='tagList'>
+            <div styleName='control'>
+              <div styleName='control-sortTagsBy'>
+                <i className='fa fa-angle-down' />
+                <select styleName='control-sortTagsBy-select'
+                  title={i18n.__('Select filter mode')}
+                  value={config.sortTagsBy}
+                  onChange={(e) => this.handleSortTagsByChange(e)}
+                >
+                  <option title='Sort alphabetically'
+                    value='ALPHABETICAL'>{i18n.__('Alphabetically')}</option>
+                  <option title='Sort by update time'
+                    value='COUNTER'>{i18n.__('Counter')}</option>
+                </select>
+              </div>
+            </div>
             {this.tagListComponent(data)}
           </div>
         </div>
@@ -129,10 +144,15 @@ class SideNav extends React.Component {
   }
 
   tagListComponent () {
-    const { data, location } = this.props
+    const { data, location, config } = this.props
-    const tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
+    let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
       return { name, size: tag.size }
     }), ['name'])
+    if (config.sortTagsBy === 'COUNTER') {
+      tagList = _.sortBy(tagList, function (item) {
+        return 0 - item.size
+      })
+    }
     return (
       tagList.map(tag => {
         return (
@@ -159,6 +179,20 @@ class SideNav extends React.Component {
     router.push(`/tags/${name}`)
   }
 
+  handleSortTagsByChange (e) {
+    const { dispatch } = this.props
+
+    const config = {
+      sortTagsBy: e.target.value
+    }
+
+    ConfigManager.set(config)
+    dispatch({
+      type: 'SET_CONFIG',
+      config
+    })
+  }
+
   emptyTrash (entries) {
     const { dispatch } = this.props
     const deletionPromises = entries.map((note) => {

browser/main/lib/ConfigManager.js

@@ -16,6 +16,7 @@ export const DEFAULT_CONFIG = {
   listWidth: 280,
   navWidth: 200,
   sortBy: 'UPDATED_AT', // 'CREATED_AT', 'UPDATED_AT', 'APLHABETICAL'
+  sortTagsBy: 'ALPHABETICAL', // 'ALPHABETICAL', 'COUNTER'
   listStyle: 'DEFAULT', // 'DEFAULT', 'SMALL'
   amaEnabled: true,
   hotkey: {

locales/en.json

@@ -111,6 +111,7 @@
 	"Updated": "Updated",
 	"Created": "Created",
 	"Alphabetically": "Alphabetically",
+	"Counter": "Counter",
 	"Default View": "Default View",
 	"Compressed View": "Compressed View",
 	"Search": "Search",

locales/hu.json

@@ -111,6 +111,7 @@
 	"Updated": "Módosítás",
 	"Created": "Létrehozás",
 	"Alphabetically": "Ábécé sorrendben",
+	"Counter": "Számláló",
 	"Default View": "Alapértelmezett Nézet",
 	"Compressed View": "Tömörített Nézet",
 	"Search": "Keresés",

tests/lib/boostnoterc/.boostnoterc.all

@@ -23,6 +23,7 @@
         "lineNumber": true
     },
     "sortBy": "UPDATED_AT",
+    "sortTagsBy": "ALPHABETICAL",
     "ui": {
         "defaultNote": "ALWAYS_ASK",
         "disableDirectWrite": false,