Sidebar: Bring back the "Followed Tags" list

## Issue
4708: Bring back tag list in side bar when Tags view selected

## Approach
- Instead of displaying either Channels or Tags, both will now be displayed.
- The tags will simply be a the same button component as the "channels", but with a "#" prefix. This simplifies the CSS-side changes, and looks better overall as well.

ui/component/sideNavigation/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
-import { selectPurchaseUriSuccess, doClearPurchasedUriSuccess, SETTINGS } from 'lbry-redux';
+import { selectFollowedTags, selectPurchaseUriSuccess, doClearPurchasedUriSuccess, SETTINGS } from 'lbry-redux';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { doSignOut } from 'redux/actions/app';
@@ -10,6 +10,7 @@ import SideNavigation from './view';
 
 const select = state => ({
   subscriptions: selectSubscriptions(state),
+  followedTags: selectFollowedTags(state),
   language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change
   email: selectUserVerifiedEmail(state),
   purchaseSuccess: selectPurchaseUriSuccess(state),

ui/component/sideNavigation/view.jsx

@@ -27,6 +27,7 @@ const RECENT_FROM_FOLLOWING = {
 
 type Props = {
   subscriptions: Array<Subscription>,
+  followedTags: Array<Tag>,
   email: ?string,
   uploadCount: number,
   doSignOut: () => void,
@@ -43,6 +44,7 @@ type Props = {
 function SideNavigation(props: Props) {
   const {
     subscriptions,
+    followedTags,
     doSignOut,
     email,
     purchaseSuccess,
@@ -277,7 +279,6 @@ function SideNavigation(props: Props) {
               );
             })}
           </ul>
-
           {sidebarOpen && isPersonalized && subscriptions && subscriptions.length > 0 && (
             <ul className="navigation__secondary navigation-links navigation-links--small">
               {subscriptions.map(({ uri, channelName }, index) => (
@@ -292,6 +293,15 @@ function SideNavigation(props: Props) {
               ))}
             </ul>
           )}
+          {sidebarOpen && isPersonalized && followedTags && followedTags.length > 0 && (
+            <ul className="navigation__secondary navigation-links navigation-links--small">
+              {followedTags.map(({ name }, key) => (
+                <li key={name} className="navigation-link__wrapper">
+                  <Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
+                </li>
+              ))}
+            </ul>
+          )}
         </nav>
       )}
 
@@ -356,6 +366,15 @@ function SideNavigation(props: Props) {
                 ))}
               </ul>
             )}
+            {isPersonalized && followedTags && followedTags.length > 0 && (
+              <ul className="navigation__secondary navigation-links--small">
+                {followedTags.map(({ name }, key) => (
+                  <li key={name} className="navigation-link__wrapper">
+                    <Button navigate={`/$/discover?t=${name}`} label={`#${name}`} className="navigation-link" />
+                  </li>
+                ))}
+              </ul>
+            )}
           </nav>
           <div
             className={classnames('navigation__overlay', {

ui/scss/component/_navigation.scss

@@ -68,6 +68,11 @@
   margin-top: var(--spacing-l);
 }
 
+.navigation__secondary--tags {
+  @extend .navigation__secondary;
+  margin-left: var(--spacing-l);
+}
+
 .navigation-link {
   display: block;
   position: relative;