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] 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) => {