general fixes

src/ui/component/claimListDiscover/index.js

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
 import { doClaimSearch, selectLastClaimSearchUris, selectFetchingClaimSearch, doToggleTagFollow } from 'lbry-redux';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import ClaimListDiscover from './view';
 
 const select = state => ({
   uris: selectLastClaimSearchUris(state),
   loading: selectFetchingClaimSearch(state),
+  subscribedChannels: selectSubscriptions(state),
 });
 
 const perform = {

src/ui/component/claimListDiscover/view.jsx

@@ -16,15 +16,18 @@ const TIME_YEAR = 'year';
 const TIME_ALL = 'all';
 const SEARCH_SORT_YOU = 'you';
 const SEARCH_SORT_ALL = 'everyone';
+const SEARCH_SORT_CHANNELS = 'channels';
+
 const TYPE_TRENDING = 'trending';
 const TYPE_TOP = 'top';
 const TYPE_NEW = 'new';
-const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, SEARCH_SORT_ALL];
+const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, SEARCH_SORT_CHANNELS, SEARCH_SORT_ALL];
 const SEARCH_TYPES = ['trending', 'top', 'new'];
 const SEARCH_TIMES = [TIME_DAY, TIME_WEEK, TIME_MONTH, TIME_YEAR, TIME_ALL];
 
 type Props = {
   uris: Array<string>,
+  subscribedChannels: Array<Subscription>,
   doClaimSearch: (number, {}) => void,
   injectedItem: any,
   tags: Array<string>,
@@ -35,7 +38,7 @@ type Props = {
 };
 
 function ClaimListDiscover(props: Props) {
-  const { doClaimSearch, uris, tags, loading, personal, injectedItem, meta } = props;
+  const { doClaimSearch, uris, tags, loading, personal, injectedItem, meta, subscribedChannels } = props;
   const [personalSort, setPersonalSort] = usePersistedState('file-list-trending:personalSort', SEARCH_SORT_YOU);
   const [typeSort, setTypeSort] = usePersistedState('file-list-trending:typeSort', TYPE_TRENDING);
   const [timeSort, setTimeSort] = usePersistedState('file-list-trending:timeSort', TIME_WEEK);
@@ -43,17 +46,22 @@ function ClaimListDiscover(props: Props) {
 
   const toCapitalCase = string => string.charAt(0).toUpperCase() + string.slice(1);
   const tagsString = tags.join(',');
+  const channelsIdString = subscribedChannels.map(channel => channel.uri.split('#')[1]).join(',');
   useEffect(() => {
     const options: {
       page_size: number,
       any_tags?: Array<string>,
       order_by?: Array<string>,
+      channel_ids?: Array<string>,
       release_time?: string,
     } = { page_size: PAGE_SIZE, page };
     const newTags = tagsString.split(',');
+    const newChannelIds = channelsIdString.split(',');
 
     if ((newTags && !personal) || (newTags && personal && personalSort === SEARCH_SORT_YOU)) {
       options.any_tags = newTags;
+    } else if (personalSort === SEARCH_SORT_CHANNELS) {
+      options.channel_ids = newChannelIds;
     }
 
     if (typeSort === TYPE_TRENDING) {
@@ -73,7 +81,15 @@ function ClaimListDiscover(props: Props) {
     }
 
     doClaimSearch(20, options);
-  }, [personal, personalSort, typeSort, timeSort, doClaimSearch, page, tagsString]);
+  }, [personal, personalSort, typeSort, timeSort, doClaimSearch, page, tagsString, channelsIdString]);
+
+  function getLabel(type) {
+    if (type === SEARCH_SORT_ALL) {
+      return __('Everyone');
+    }
+
+    return type === SEARCH_SORT_YOU ? __('Tags You Follow') : __('Channels You Follow');
+  }
 
   const header = (
     <h1 className="card__title--flex">
@@ -106,17 +122,11 @@ function ClaimListDiscover(props: Props) {
         >
           {SEARCH_FILTER_TYPES.map(type => (
             <option key={type} value={type}>
-              {toCapitalCase(type)}
+              {getLabel(type)}
             </option>
           ))}
         </FormField>
       )}
-    </h1>
-  );
-
-  const headerAltControls = (
-    <React.Fragment>
-      {meta}
       {typeSort === 'top' && (
         <FormField
           className="claim-list__dropdown"
@@ -127,12 +137,13 @@ function ClaimListDiscover(props: Props) {
         >
           {SEARCH_TIMES.map(time => (
             <option key={time} value={time}>
-              {toCapitalCase(time)}
+              {/* i18fixme */}
+              {__('This')} {toCapitalCase(time)}
             </option>
           ))}
         </FormField>
       )}
-    </React.Fragment>
+    </h1>
   );
 
   return (
@@ -142,7 +153,7 @@ function ClaimListDiscover(props: Props) {
         uris={uris}
         injectedItem={personalSort === SEARCH_SORT_YOU && injectedItem}
         header={header}
-        headerAltControls={headerAltControls}
+        headerAltControls={meta}
         onScrollBottom={() => setPage(page + 1)}
       />
 

src/ui/component/sideBar/view.jsx

@@ -33,9 +33,6 @@ function SideBar(props: Props) {
             {
               ...buildLink(null, __('Home'), ICONS.HOME),
             },
-            {
-              ...buildLink(PAGES.FOLLOWING, __('Following'), ICONS.SUBSCRIBE),
-            },
             {
               ...buildLink(PAGES.LIBRARY, __('Library'), ICONS.LIBRARY),
             },
@@ -43,27 +40,17 @@ function SideBar(props: Props) {
               ...buildLink(PAGES.PUBLISHED, __('Publishes'), ICONS.PUBLISH),
             },
           ].map(renderLink)}
-
-          <li>
-            <Button
-              navigate="/$/following/customize"
-              icon={ICONS.EDIT}
-              className="navigation__link"
-              activeClass="navigation__link--active"
-              label={__('Customize')}
-            />
-          </li>
         </ul>
         <ul className="navigation__links tags--vertical">
           {followedTags.map(({ name }, key) => (
-            <li className="navigation__link--indented" key={name}>
+            <li className="" key={name}>
               <Tag navigate={`/$/tags?t${name}`} name={name} />
             </li>
           ))}
         </ul>
         <ul className="navigation__links--small">
           {subscriptions.map(({ uri, channelName }, index) => (
-            <li key={uri} className="navigation__link--indented">
+            <li key={uri} className="">
               <Button
                 navigate={uri}
                 label={channelName}

src/ui/component/tag/view.jsx

@@ -15,12 +15,18 @@ export default function Tag(props: Props) {
   const { name, onClick, type = 'link', disabled = false } = props;
 
   const clickProps = onClick ? { onClick } : { navigate: `/$/tags?t=${name}` };
+  let title;
+  if (!onClick) {
+    title = __('View tag');
+  } else {
+    type === 'add' ? __('Add tag') : __('Remove tag');
+  }
 
   return (
     <Button
       {...clickProps}
       disabled={disabled}
-      title={type === 'add' ? __('Add tag') : __('Remove tag')}
+      title={title}
       className={classnames('tag', {
         'tag--add': type === 'add',
         'tag--remove': type === 'remove',

src/ui/page/discover/index.js

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux';
 import { selectFollowedTags } from 'lbry-redux';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import DiscoverPage from './view';
 
 const select = state => ({
   followedTags: selectFollowedTags(state),
+  subscribedChannels: selectSubscriptions(state),
 });
 
 const perform = {};

src/ui/page/discover/view.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import ClaimListDiscover from 'component/claimListDiscover';
 import TagsSelect from 'component/tagsSelect';
 import Page from 'component/page';
+import Button from 'component/button';
 
 type Props = {
   followedTags: Array<Tag>,
@@ -16,6 +17,7 @@ function DiscoverPage(props: Props) {
       <ClaimListDiscover
         personal
         tags={followedTags.map(tag => tag.name)}
+        meta={<Button button="link" label={__('Customize')} navigate="/$/following/customize" />}
         injectedItem={<TagsSelect showClose title={__('Customize Your Homepage')} />}
       />
     </Page>

src/ui/scss/component/_claim-list.scss

@@ -19,6 +19,7 @@
   // Normal link buttons are too dark on the black file list background
   .button--link {
     color: $lbry-teal-3;
+    font-size: 1.2em;
 
     &:hover {
       color: $lbry-teal-1;

src/ui/scss/component/_tags.scss

@@ -21,6 +21,7 @@ $main: $lbry-teal-5;
   @extend .tags;
   flex-direction: column;
   align-items: flex-start;
+  margin-top: var(--spacing-medium);
 }
 
 .tags--selected {

src/ui/scss/component/menu-button.scss

@@ -31,6 +31,7 @@
 
 [data-reach-menu-item] {
   display: block;
+  z-index: 2;
 }
 
 [data-reach-menu-item] {