add tag to wunderbar autocomplete

src/ui/component/common/icon-custom.jsx

@@ -253,6 +253,12 @@ export const icons = {
       <path d="M7 11V7a5 5 0 0 1 9.9-1" />
     </g>
   ),
+  [ICONS.TAG]: buildIcon(
+    <g>
+      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+      <line x1="7" y1="7" x2="7" y2="7" />
+    </g>
+  ),
   [ICONS.SUPPORT]: buildIcon(
     <g>
       <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />

src/ui/component/wunderbar/view.jsx

@@ -3,10 +3,11 @@ import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import React from 'react';
 import classnames from 'classnames';
-import { normalizeURI, SEARCH_TYPES, isURIValid, buildURI } from 'lbry-redux';
+import { normalizeURI, SEARCH_TYPES, isURIValid } from 'lbry-redux';
+import { withRouter } from 'react-router';
 import Icon from 'component/common/icon';
-import { parseQueryParams } from 'util/query-params';
 import Autocomplete from './internal/autocomplete';
+import Tag from 'component/tag';
 
 const L_KEY_CODE = 76;
 const ESC_KEY_CODE = 27;
@@ -22,6 +23,7 @@ type Props = {
   doBlur: () => void,
   focused: boolean,
   doShowSnackBar: string => void,
+  history: { push: string => void },
 };
 
 type State = {
@@ -51,10 +53,12 @@ class WunderBar extends React.PureComponent<Props, State> {
 
   getSuggestionIcon = (type: string) => {
     switch (type) {
-      case 'file':
+      case SEARCH_TYPES.FILE:
         return ICONS.FILE;
-      case 'channel':
+      case SEARCH_TYPES.CHANNEL:
         return ICONS.CHANNEL;
+      case SEARCH_TYPES.TAG:
+        return ICONS.TAG;
       default:
         return ICONS.SEARCH;
     }
@@ -90,7 +94,7 @@ class WunderBar extends React.PureComponent<Props, State> {
   }
 
   handleSubmit(value: string, suggestion?: { value: string, type: string }) {
-    const { onSubmit, onSearch, doShowSnackBar } = this.props;
+    const { onSubmit, onSearch, doShowSnackBar, history } = this.props;
 
     const query = value.trim();
     const showSnackError = () => {
@@ -99,8 +103,10 @@ class WunderBar extends React.PureComponent<Props, State> {
 
     // User selected a suggestion
     if (suggestion) {
-      if (suggestion.type === 'search') {
+      if (suggestion.type === SEARCH_TYPES.SEARCH) {
         onSearch(query);
+      } else if (suggestion.type === SEARCH_TYPES.TAG) {
+        history.push(`/$/${PAGES.TAGS}?t=${suggestion.value}`);
       } else if (isURIValid(query)) {
         const uri = normalizeURI(query);
         onSubmit(uri);
@@ -157,18 +163,22 @@ class WunderBar extends React.PureComponent<Props, State> {
           )}
           renderItem={({ value, type }, isHighlighted) => (
             <div
-              key={value}
+              // Use value + type for key because there might be suggestions with same value but different type
+              key={`${value}-${type}`}
               className={classnames('wunderbar__suggestion', {
                 'wunderbar__active-suggestion': isHighlighted,
               })}
             >
               <Icon icon={this.getSuggestionIcon(type)} />
-              <span className="wunderbar__suggestion-label">{value}</span>
+              <span className="wunderbar__suggestion-label">
+                {type === SEARCH_TYPES.TAG ? <Tag name={value} /> : value}
+              </span>
               {isHighlighted && (
                 <span className="wunderbar__suggestion-label--action">
                   {type === SEARCH_TYPES.SEARCH && __('Search')}
                   {type === SEARCH_TYPES.CHANNEL && __('View channel')}
                   {type === SEARCH_TYPES.FILE && __('View file')}
+                  {type === SEARCH_TYPES.TAG && __('View Tag')}
                 </span>
               )}
             </div>
@@ -179,4 +189,4 @@ class WunderBar extends React.PureComponent<Props, State> {
   }
 }
 
-export default WunderBar;
+export default withRouter(WunderBar);

src/ui/constants/icons.js

@@ -69,4 +69,5 @@ export const MUSIC_EQUALIZER = 'Sliders';
 export const LIGHT = 'Sun';
 export const DARK = 'Moon';
 export const LIBRARY = 'Folder';
+export const TAG = 'Tag';
 export const SUPPORT = 'TrendingUp';

src/ui/scss/component/_wunderbar.scss

@@ -72,6 +72,7 @@
   box-shadow: 0 1px 5px rgba($lbry-black, 0.15);
   min-width: 100%;
   overflow: hidden;
+  font-size: 14px;
 
   [data-mode='dark'] & {
     background-color: $lbry-gray-5;