From 6c542750f4f68ed88726b196dc5871b6a5060806 Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Mon, 26 Mar 2018 16:48:07 +0200
Subject: [PATCH 1/8] Narrow list of tags to related ones

When a tag is selected, the tag list narrows to show only the related
ones: all tags associated to the currently visible notes. Clicking on
the plus sign near another tag narrows the list again to the tags of
notes associated with the firstly AND secondly selected tag. To show
every tags again, press the tag icon on the top-left corner of
Boostnote.

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

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

NOTE: Tags are joined with `&` character (`#` not works) in
`location.pathname` thus it will make the tags with this character
unavailable. Any suggestion to pass multiple values via pathname?
---
 browser/components/TagListItem.js   | 19 ++++++----
 browser/components/TagListItem.styl | 37 ++++++++++++++------
 browser/main/NoteList/index.js      |  3 +-
 browser/main/SideNav/index.js       | 54 +++++++++++++++++++++++++----
 browser/main/index.js               |  3 ++
 5 files changed, 90 insertions(+), 26 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 4346ac21..cbac00ce 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,13 +12,18 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
-  <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
-    <span styleName='tagList-item-name'>
-      {`# ${name}`}
-      <span styleName='tagList-item-count'>{count}</span>
-    </span>
-  </button>
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, count}) => (
+  <div styleName='tagList-itemContainer'>
+    <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
+      <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
+    </button>
+    <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
+      <span styleName='tagList-item-name'>
+        {`# ${name}`}
+        <span styleName='tagList-item-count'>{count}</span>
+      </span>
+    </button>
+  </div>
 )
 
 TagListItem.propTypes = {
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 513d112a..4c5c7379 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -1,10 +1,10 @@
-.tagList-item
+.tagList-itemContainer
   display flex
-  width 100%
+
+.tagList-item, .tagList-itemNarrow
   height 26px
   background-color transparent
   color $ui-inactive-text-color
-  padding 0
   margin-bottom 5px
   text-align left
   border none
@@ -20,12 +20,18 @@
     color $ui-button-default-color
     background-color $ui-button-default--active-backgroundColor
 
-.tagList-item-active
-  background-color $ui-button-default--active-backgroundColor
+.tagList-item
   display flex
+  flex 1
   width 100%
-  height 26px
   padding 0
+
+.tagList-itemNarrow
+  padding 0 4px
+
+.tagList-item-active, .tagList-itemNarrow-active
+  background-color $ui-button-default--active-backgroundColor
+  height 26px
   margin-bottom 5px
   text-align left
   border none
@@ -36,10 +42,19 @@
     background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
+.tagList-item-active
+  display flex
+  flex 1
+  width 100%
+  padding 0
+
+.tagList-itemNarrow-active
+  padding 0 4px
+
 .tagList-item-name
   display block
   flex 1
-  padding 0 15px
+  padding 0 8px 0 4px
   height 26px
   line-height 26px
   border-width 0 0 0 2px
@@ -55,7 +70,7 @@
   font-size 13px
 
 body[data-theme="white"]
-  .tagList-item
+  .tagList-item, .tagList-itemNarrow
     color $ui-inactive-text-color
     &:hover
       color $ui-text-color
@@ -64,7 +79,7 @@ body[data-theme="white"]
       color $ui-text-color
       background-color $ui-button--active-backgroundColor
 
-  .tagList-item-active
+  .tagList-item-active, .tagList-itemNarrow-active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
     &:hover
@@ -73,7 +88,7 @@ body[data-theme="white"]
     color $ui-text-color
 
 body[data-theme="dark"]
-  .tagList-item
+  .tagList-item, .tagList-itemNarrow
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
@@ -82,7 +97,7 @@ body[data-theme="dark"]
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
 
-  .tagList-item-active
+  .tagList-item-active, .tagList-itemNarrow-active
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-text-color
     &:active
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index dedad209..867457ca 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -343,10 +343,11 @@ class NoteList extends React.Component {
     }
 
     if (location.pathname.match(/\/tags/)) {
+      const listOfTags = params.tagname.split('&')
       return data.noteMap.map(note => {
         return note
       }).filter(note => {
-        return note.tags.includes(params.tagname)
+        return listOfTags.every((tag) => note.tags.includes(tag))
       })
     }
 
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index f8a65013..a9f9f0da 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -91,7 +91,7 @@ class SideNav extends React.Component {
     let component
 
     // TagsMode is not selected
-    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
+    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags') && !location.pathname.match('/narrowToTag')) {
       component = (
         <div>
           <SideNavFilter
@@ -145,10 +145,12 @@ class SideNav extends React.Component {
 
   tagListComponent () {
     const { data, location, config } = this.props
-    let tagList = _.sortBy(data.tagNoteMap.map(
-      (tag, name) => ({name, size: tag.size})),
-      ['name']
-    )
+    const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
+    let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
+      return { name, size: tag.size }
+    }), ['name']).filter(tag => {
+      return (relatedTags.size === 0) ? true : relatedTags.has(tag.name)
+    })
     if (config.sortTagsBy === 'COUNTER') {
       tagList = _.sortBy(tagList, item => (0 - item.size))
     }
@@ -158,6 +160,7 @@ class SideNav extends React.Component {
           <TagListItem
             name={tag.name}
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
+            handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
             isActive={this.getTagActive(location.pathname, tag.name)}
             key={tag.name}
             count={tag.size}
@@ -167,10 +170,33 @@ class SideNav extends React.Component {
     )
   }
 
+  getRelatedTags (activeTags, noteMap) {
+    const relatedNotes = noteMap.map(note => {
+      return {key: note.key, tags: note.tags}
+    }).filter((note) => {
+      return activeTags.every((tag) => note.tags.includes(tag))
+    })
+    let relatedTags = new Set()
+    relatedNotes.forEach(note => {
+      note.tags.map(tag => {
+        relatedTags.add(tag)
+      })
+    })
+    return relatedTags
+  }
+
   getTagActive (path, tag) {
+    const pathTag = this.getActiveTags(path)
+    return pathTag.includes(tag)
+  }
+
+  getActiveTags (path) {
     const pathSegments = path.split('/')
-    const pathTag = pathSegments[pathSegments.length - 1]
-    return pathTag === tag
+    const tags = pathSegments[pathSegments.length - 1]
+    if (tags === 'alltags') {
+      return []
+    }
+    return tags.split('&')
   }
 
   handleClickTagListItem (name) {
@@ -192,6 +218,20 @@ class SideNav extends React.Component {
     })
   }
 
+  handleClickNarrowToTag (name) {
+    const { router } = this.context
+    const { location } = this.props
+    let listOfTags = this.getActiveTags(location.pathname)
+    if (listOfTags.includes(name)) {
+      listOfTags = listOfTags.filter(function (currentTag) {
+        return name !== currentTag
+      })
+    } else {
+      listOfTags.push(name)
+    }
+    router.push(`/tags/${listOfTags.join('&')}`)
+  }
+
   emptyTrash (entries) {
     const { dispatch } = this.props
     const deletionPromises = entries.map((note) => {
diff --git a/browser/main/index.js b/browser/main/index.js
index 6e8bdcc5..02bf7125 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -112,6 +112,9 @@ ReactDOM.render((
           <IndexRedirect to='/alltags' />
           <Route path=':tagname' />
         </Route>
+        <Route path='narrowToTag'>
+          <Route path=':tag' />
+        </Route>
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

From 68c0f210ccb76a2c12e58120a68d64b9278a663c Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Sat, 7 Apr 2018 15:43:06 +0200
Subject: [PATCH 2/8] Separate active tags by ` ` instead of `&`

Using `&` to separate tags in path (like
`/tags/currently&selected&tags`) may interfer with tags including `&`
character (like `black&white`). Since ` ` is replaced with `_` when
adding tag to notes, it's ideal separator because it's guaranteed that
tags are not including this character.
---
 browser/main/NoteList/index.js | 2 +-
 browser/main/SideNav/index.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 867457ca..def289fb 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -343,7 +343,7 @@ class NoteList extends React.Component {
     }
 
     if (location.pathname.match(/\/tags/)) {
-      const listOfTags = params.tagname.split('&')
+      const listOfTags = params.tagname.split(' ')
       return data.noteMap.map(note => {
         return note
       }).filter(note => {
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index a9f9f0da..b4c1d322 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -196,7 +196,7 @@ class SideNav extends React.Component {
     if (tags === 'alltags') {
       return []
     }
-    return tags.split('&')
+    return tags.split(' ')
   }
 
   handleClickTagListItem (name) {
@@ -229,7 +229,7 @@ class SideNav extends React.Component {
     } else {
       listOfTags.push(name)
     }
-    router.push(`/tags/${listOfTags.join('&')}`)
+    router.push(`/tags/${listOfTags.join(' ')}`)
   }
 
   emptyTrash (entries) {

From 61ed47dda04edebb276d0df2fa9645502bd47b89 Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Tue, 10 Apr 2018 14:13:58 +0200
Subject: [PATCH 3/8] Don't narrow list, add plus sign only for related tags

It's easier to understand by most of the users.

Later I like to add a setting to enable narrowing of tag list to show
only the related ones.
---
 browser/components/TagListItem.js | 11 +++++++----
 browser/main/SideNav/index.js     | 10 ++++++----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index cbac00ce..196a5a23 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,11 +12,14 @@ import CSSModules from 'browser/lib/CSSModules'
 * @param {bool} isActive
 */
 
-const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, count}) => (
+const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
   <div styleName='tagList-itemContainer'>
-    <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
-      <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
-    </button>
+    {isRelated
+      ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
+          <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
+        </button>
+      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div>
+    }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
       <span styleName='tagList-item-name'>
         {`# ${name}`}
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index b4c1d322..2a6d34ce 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -147,10 +147,8 @@ class SideNav extends React.Component {
     const { data, location, config } = this.props
     const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
     let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
-      return { name, size: tag.size }
-    }), ['name']).filter(tag => {
-      return (relatedTags.size === 0) ? true : relatedTags.has(tag.name)
-    })
+      return { name, size: tag.size, related: relatedTags.has(name) }
+    }), ['name'])
     if (config.sortTagsBy === 'COUNTER') {
       tagList = _.sortBy(tagList, item => (0 - item.size))
     }
@@ -162,6 +160,7 @@ class SideNav extends React.Component {
             handleClickTagListItem={this.handleClickTagListItem.bind(this)}
             handleClickNarrowToTag={this.handleClickNarrowToTag.bind(this)}
             isActive={this.getTagActive(location.pathname, tag.name)}
+            isRelated={tag.related}
             key={tag.name}
             count={tag.size}
           />
@@ -171,6 +170,9 @@ class SideNav extends React.Component {
   }
 
   getRelatedTags (activeTags, noteMap) {
+    if (activeTags.length == 0) {
+      return new Set()
+    }
     const relatedNotes = noteMap.map(note => {
       return {key: note.key, tags: note.tags}
     }).filter((note) => {

From 066d97220f53b58e7f8760c28f93262c6b532f8e Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Tue, 10 Apr 2018 22:05:22 +0200
Subject: [PATCH 4/8] Cleanup, prettify

---
 browser/components/TagListItem.js |  2 ++
 browser/main/NoteList/index.js    |  4 +--
 browser/main/SideNav/index.js     | 45 +++++++++++++------------------
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 196a5a23..2d0b6777 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -9,7 +9,9 @@ import CSSModules from 'browser/lib/CSSModules'
 /**
 * @param {string} name
 * @param {Function} handleClickTagListItem
+* @param {Function} handleClickNarrowToTag
 * @param {bool} isActive
+* @param {bool} isRelated
 */
 
 const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isActive, isRelated, count}) => (
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index def289fb..e8c09f65 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -346,9 +346,7 @@ class NoteList extends React.Component {
       const listOfTags = params.tagname.split(' ')
       return data.noteMap.map(note => {
         return note
-      }).filter(note => {
-        return listOfTags.every((tag) => note.tags.includes(tag))
-      })
+      }).filter(note => listOfTags.every(tag => note.tags.includes(tag)))
     }
 
     return this.getContextNotes()
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 2a6d34ce..8f0948c9 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -146,9 +146,9 @@ class SideNav extends React.Component {
   tagListComponent () {
     const { data, location, config } = this.props
     const relatedTags = this.getRelatedTags(this.getActiveTags(location.pathname), data.noteMap)
-    let tagList = _.sortBy(data.tagNoteMap.map((tag, name) => {
-      return { name, size: tag.size, related: relatedTags.has(name) }
-    }), ['name'])
+    let tagList = _.sortBy(data.tagNoteMap.map(
+      (tag, name) => ({ name, size: tag.size, related: relatedTags.has(name) })
+    ), ['name'])
     if (config.sortTagsBy === 'COUNTER') {
       tagList = _.sortBy(tagList, item => (0 - item.size))
     }
@@ -170,35 +170,29 @@ class SideNav extends React.Component {
   }
 
   getRelatedTags (activeTags, noteMap) {
-    if (activeTags.length == 0) {
+    if (activeTags.length === 0) {
       return new Set()
     }
-    const relatedNotes = noteMap.map(note => {
-      return {key: note.key, tags: note.tags}
-    }).filter((note) => {
-      return activeTags.every((tag) => note.tags.includes(tag))
-    })
+    const relatedNotes = noteMap.map(
+      note => ({key: note.key, tags: note.tags})
+    ).filter(
+      note => activeTags.every(tag => note.tags.includes(tag))
+    )
     let relatedTags = new Set()
-    relatedNotes.forEach(note => {
-      note.tags.map(tag => {
-        relatedTags.add(tag)
-      })
-    })
+    relatedNotes.forEach(note => note.tags.map(tag => relatedTags.add(tag)))
     return relatedTags
   }
 
   getTagActive (path, tag) {
-    const pathTag = this.getActiveTags(path)
-    return pathTag.includes(tag)
+    return this.getActiveTags(path).includes(tag)
   }
 
   getActiveTags (path) {
     const pathSegments = path.split('/')
     const tags = pathSegments[pathSegments.length - 1]
-    if (tags === 'alltags') {
-      return []
-    }
-    return tags.split(' ')
+    return (tags === 'alltags')
+      ? []
+      : tags.split(' ')
   }
 
   handleClickTagListItem (name) {
@@ -220,16 +214,15 @@ class SideNav extends React.Component {
     })
   }
 
-  handleClickNarrowToTag (name) {
+  handleClickNarrowToTag (tag) {
     const { router } = this.context
     const { location } = this.props
     let listOfTags = this.getActiveTags(location.pathname)
-    if (listOfTags.includes(name)) {
-      listOfTags = listOfTags.filter(function (currentTag) {
-        return name !== currentTag
-      })
+    const indexOfTag = listOfTags.indexOf(tag)
+    if (indexOfTag > -1) {
+      listOfTags.splice(indexOfTag, 1)
     } else {
-      listOfTags.push(name)
+      listOfTags.push(tag)
     }
     router.push(`/tags/${listOfTags.join(' ')}`)
   }

From c02b91dfd4bdc4435cd18d7ae729cb71a70db186 Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Tue, 10 Apr 2018 23:34:20 +0200
Subject: [PATCH 5/8] Simplify style

---
 browser/components/TagListItem.js   |  6 ++---
 browser/components/TagListItem.styl | 40 +++++++++++++++--------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 2d0b6777..6cd50c9c 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -18,9 +18,9 @@ const TagListItem = ({name, handleClickTagListItem, handleClickNarrowToTag, isAc
   <div styleName='tagList-itemContainer'>
     {isRelated
       ? <button styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} onClick={() => handleClickNarrowToTag(name)}>
-          <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
-        </button>
-      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'}></div>
+        <i className={isActive ? 'fa fa-minus-circle' : 'fa fa-plus-circle'} />
+      </button>
+      : <div styleName={isActive ? 'tagList-itemNarrow-active' : 'tagList-itemNarrow'} />
     }
     <button styleName={isActive ? 'tagList-item-active' : 'tagList-item'} onClick={() => handleClickTagListItem(name)}>
       <span styleName='tagList-item-name'>
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index 4c5c7379..555520b0 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -1,10 +1,14 @@
 .tagList-itemContainer
   display flex
 
-.tagList-item, .tagList-itemNarrow
+.tagList-item
+  display flex
+  flex 1
+  width 100%
   height 26px
   background-color transparent
   color $ui-inactive-text-color
+  padding 0
   margin-bottom 5px
   text-align left
   border none
@@ -20,18 +24,19 @@
     color $ui-button-default-color
     background-color $ui-button-default--active-backgroundColor
 
-.tagList-item
+.tagList-itemNarrow
+  composes tagList-item
+  flex none
+  width 20px
+  padding 0 4px
+
+.tagList-item-active
+  background-color $ui-button-default--active-backgroundColor
   display flex
   flex 1
   width 100%
-  padding 0
-
-.tagList-itemNarrow
-  padding 0 4px
-
-.tagList-item-active, .tagList-itemNarrow-active
-  background-color $ui-button-default--active-backgroundColor
   height 26px
+  padding 0
   margin-bottom 5px
   text-align left
   border none
@@ -42,13 +47,10 @@
     background-color alpha($ui-button-default--active-backgroundColor, 60%)
     transition 0.2s
 
-.tagList-item-active
-  display flex
-  flex 1
-  width 100%
-  padding 0
-
 .tagList-itemNarrow-active
+  composes tagList-item-active
+  flex none
+  width 20px
   padding 0 4px
 
 .tagList-item-name
@@ -70,7 +72,7 @@
   font-size 13px
 
 body[data-theme="white"]
-  .tagList-item, .tagList-itemNarrow
+  .tagList-item
     color $ui-inactive-text-color
     &:hover
       color $ui-text-color
@@ -79,7 +81,7 @@ body[data-theme="white"]
       color $ui-text-color
       background-color $ui-button--active-backgroundColor
 
-  .tagList-item-active, .tagList-itemNarrow-active
+  .tagList-item-active
     background-color $ui-button--active-backgroundColor
     color $ui-text-color
     &:hover
@@ -88,7 +90,7 @@ body[data-theme="white"]
     color $ui-text-color
 
 body[data-theme="dark"]
-  .tagList-item, .tagList-itemNarrow
+  .tagList-item
     color $ui-dark-inactive-text-color
     &:hover
       color $ui-dark-text-color
@@ -97,7 +99,7 @@ body[data-theme="dark"]
       color $ui-dark-text-color
       background-color $ui-dark-button--active-backgroundColor
 
-  .tagList-item-active, .tagList-itemNarrow-active
+  .tagList-item-active
     background-color $ui-dark-button--active-backgroundColor
     color $ui-dark-text-color
     &:active

From 84925b24b5091bb3430be4360a20af64c9213ca0 Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Wed, 11 Apr 2018 08:14:28 +0200
Subject: [PATCH 6/8] Add option to show only related tags

---
 browser/main/SideNav/index.js                 |  5 +++++
 browser/main/modals/PreferencesModal/UiTab.js | 11 +++++++++++
 2 files changed, 16 insertions(+)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 8f0948c9..7af6bb81 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -152,6 +152,11 @@ class SideNav extends React.Component {
     if (config.sortTagsBy === 'COUNTER') {
       tagList = _.sortBy(tagList, item => (0 - item.size))
     }
+    if (config.ui.showOnlyRelatedTags && (relatedTags.size > 0)) {
+      tagList = tagList.filter(
+        tag => tag.related
+      )
+    }
     return (
       tagList.map(tag => {
         return (
diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js
index 9c74255d..21338731 100644
--- a/browser/main/modals/PreferencesModal/UiTab.js
+++ b/browser/main/modals/PreferencesModal/UiTab.js
@@ -66,6 +66,7 @@ class UiTab extends React.Component {
         language: this.refs.uiLanguage.value,
         showCopyNotification: this.refs.showCopyNotification.checked,
         confirmDeletion: this.refs.confirmDeletion.checked,
+        showOnlyRelatedTags: this.refs.showOnlyRelatedTags.checked,
         disableDirectWrite: this.refs.uiD2w != null
           ? this.refs.uiD2w.checked
           : false
@@ -210,6 +211,16 @@ class UiTab extends React.Component {
               {i18n.__('Show a confirmation dialog when deleting notes')}
             </label>
           </div>
+          <div styleName='group-checkBoxSection'>
+            <label>
+              <input onChange={(e) => this.handleUIChange(e)}
+                checked={this.state.config.ui.showOnlyRelatedTags}
+                ref='showOnlyRelatedTags'
+                type='checkbox'
+              />&nbsp;
+              {i18n.__('Show only related tags')}
+            </label>
+          </div>
           {
             global.process.platform === 'win32'
             ? <div styleName='group-checkBoxSection'>

From 24b004bb2d37ccc5d10e9b1ee01bbdb27ac59e18 Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Wed, 11 Apr 2018 11:45:16 +0200
Subject: [PATCH 7/8] Remove obsolete route path

---
 browser/main/SideNav/index.js | 2 +-
 browser/main/index.js         | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 7af6bb81..6b53478e 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -91,7 +91,7 @@ class SideNav extends React.Component {
     let component
 
     // TagsMode is not selected
-    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags') && !location.pathname.match('/narrowToTag')) {
+    if (!location.pathname.match('/tags') && !location.pathname.match('/alltags')) {
       component = (
         <div>
           <SideNavFilter
diff --git a/browser/main/index.js b/browser/main/index.js
index 02bf7125..6e8bdcc5 100644
--- a/browser/main/index.js
+++ b/browser/main/index.js
@@ -112,9 +112,6 @@ ReactDOM.render((
           <IndexRedirect to='/alltags' />
           <Route path=':tagname' />
         </Route>
-        <Route path='narrowToTag'>
-          <Route path=':tag' />
-        </Route>
         <Route path='storages'>
           <IndexRedirect to='/home' />
           <Route path=':storageKey'>

From c4ec69a43f3ae1d791398bba205ff9f60316ff8d Mon Sep 17 00:00:00 2001
From: bimlas <bimbalaszlo@gmail.com>
Date: Wed, 11 Apr 2018 15:00:45 +0200
Subject: [PATCH 8/8] Add tests

---
 .../TagListItem.snapshot.test.js.snap         | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
index 0805edcd..0521ca0e 100644
--- a/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
+++ b/tests/components/__snapshots__/TagListItem.snapshot.test.js.snap
@@ -1,19 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TagListItem renders correctly 1`] = `
-<button
-  className="tagList-item"
-  onClick={[Function]}
+<div
+  className="tagList-itemContainer"
 >
-  <span
-    className="tagList-item-name"
+  <div
+    className="tagList-itemNarrow"
+  />
+  <button
+    className="tagList-item"
+    onClick={[Function]}
   >
-    # Test
     <span
-      className="tagList-item-count"
+      className="tagList-item-name"
     >
-       
+      # Test
+      <span
+        className="tagList-item-count"
+      >
+         
+      </span>
     </span>
-  </span>
-</button>
+  </button>
+</div>
 `;