Merge pull request #2477 from lbryio/discovery

Discovery UI

package.json

@@ -40,6 +40,8 @@
     "postinstall": "electron-builder install-app-deps && node ./build/downloadDaemon.js"
   },
   "dependencies": {
+    "@reach/menu-button": "^0.1.18",
+    "@reach/tooltip": "^0.2.1",
     "electron-dl": "^1.11.0",
     "electron-log": "^2.2.12",
     "electron-updater": "^4.0.6",
@@ -60,7 +62,7 @@
     "@exponent/electron-cookies": "^2.0.0",
     "@hot-loader/react-dom": "16.8",
     "@lbry/color": "^1.0.2",
-    "@lbry/components": "^2.7.0",
+    "@lbry/components": "^2.7.2",
     "@reach/rect": "^0.2.1",
     "@reach/tabs": "^0.1.5",
     "@types/three": "^0.93.1",
@@ -119,7 +121,7 @@
     "jsmediatags": "^3.8.1",
     "json-loader": "^0.5.4",
     "lbry-format": "https://github.com/lbryio/lbry-format.git",
-    "lbry-redux": "lbryio/lbry-redux#02f6918238110726c0b3b4248c61a84ac0b969e3",
+    "lbry-redux": "lbryio/lbry-redux#6a447d0542d23b9a37e266f5f85d3bde5297a451",
     "lbryinc": "lbryio/lbryinc#43d382d9b74d396a581a74d87e4c53105e04f845",
     "lint-staged": "^7.0.2",
     "localforage": "^1.7.1",
@@ -153,6 +155,7 @@
     "react-router": "^5.0.0",
     "react-router-dom": "^5.0.0",
     "react-simplemde-editor": "^4.0.0",
+    "react-spring": "^8.0.20",
     "react-toggle": "^4.0.2",
     "redux": "^3.6.0",
     "redux-persist": "^4.8.0",
@@ -191,7 +194,7 @@
     "yarn": "^1.3"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.37.4",
+    "lbrynetDaemonVersion": "0.38.0rc7",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-OSNAME.zip",
     "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet"

src/platforms/electron/createWindow.js

@@ -84,19 +84,6 @@ export default appState => {
   window.loadURL(rendererURL + deepLinkingURI);
   setupBarMenu();
 
-  // Windows back/forward mouse navigation
-  window.on('app-command', (e, cmd) => {
-    switch (cmd) {
-      case 'browser-backward':
-        window.webContents.send('navigate-backward', null);
-        break;
-      case 'browser-forward':
-        window.webContents.send('navigate-forward', null);
-        break;
-      default: // Do nothing
-    }
-  });
-
   window.on('close', event => {
     if (!appState.isQuitting && !appState.autoUpdateAccepted) {
       event.preventDefault();

src/platforms/web/electron.js

@@ -1,11 +1,7 @@
 export const clipboard = () => {
-  throw 'Fix me!';
+  throw new Error('Fix me!');
 };
 
 export const ipcRenderer = () => {
-  throw 'Fix me!';
+  throw new Error('Fix me!');
-};
-
-export const remote = () => {
-  throw 'Fix me!';
 };

src/platforms/web/stubs.js

@@ -1,7 +1,6 @@
 const callable = () => {
   throw Error('Need to fix this stub');
 };
-const returningCallable = value => () => value;
 
 export const remote = {
   dialog: {

src/ui/component/app/index.js

@@ -1,22 +1,20 @@
 import { hot } from 'react-hot-loader/root';
 import { connect } from 'react-redux';
 import { doUpdateBlockHeight, doError } from 'lbry-redux';
-import { doToggleEnhancedLayout } from 'redux/actions/app';
+import { selectUser, doRewardList, doFetchRewardedContent } from 'lbryinc';
-import { selectUser } from 'lbryinc';
 import { selectThemePath } from 'redux/selectors/settings';
-import { selectEnhancedLayout } from 'redux/selectors/app';
 import App from './view';
 
 const select = state => ({
   user: selectUser(state),
   theme: selectThemePath(state),
-  enhancedLayout: selectEnhancedLayout(state),
 });
 
 const perform = dispatch => ({
   alertError: errorList => dispatch(doError(errorList)),
   updateBlockHeight: () => dispatch(doUpdateBlockHeight()),
-  toggleEnhancedLayout: () => dispatch(doToggleEnhancedLayout()),
+  fetchRewards: () => dispatch(doRewardList()),
+  fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
 });
 
 export default hot(

src/ui/component/app/view.jsx

@@ -1,82 +1,54 @@
 // @flow
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Router from 'component/router/index';
 import ModalRouter from 'modal/modalRouter';
 import ReactModal from 'react-modal';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
 import { openContextMenu } from 'util/context-menu';
-import EnhancedLayoutListener from 'util/enhanced-layout';
+import useKonamiListener from 'util/enhanced-layout';
 import Yrbl from 'component/yrbl';
 
-const TWO_POINT_FIVE_MINUTES = 1000 * 60 * 2.5;
-
 type Props = {
   alertError: (string | {}) => void,
   pageTitle: ?string,
   language: string,
   theme: string,
-  updateBlockHeight: () => void,
+  fetchRewards: () => void,
-  toggleEnhancedLayout: () => void,
+  fetchRewardedContent: () => void,
-  enhancedLayout: boolean,
 };
 
-class App extends React.PureComponent<Props> {
+function App(props: Props) {
-  componentDidMount() {
+  const { theme, fetchRewards, fetchRewardedContent } = props;
-    const { updateBlockHeight, toggleEnhancedLayout, alertError, theme } = this.props;
+  const appRef = useRef();
+  const isEnhancedLayout = useKonamiListener();
 
-    // TODO: create type for this object
+  useEffect(() => {
-    // it lives in jsonrpc.js
+    ReactModal.setAppElement(appRef.current);
-    document.addEventListener('unhandledError', (event: any) => {
+    fetchRewards();
-      alertError(event.detail);
+    fetchRewardedContent();
-    });
+  }, [fetchRewards, fetchRewardedContent]);
 
+  useEffect(() => {
     // $FlowFixMe
     document.documentElement.setAttribute('data-mode', theme);
+  }, [theme]);
 
-    ReactModal.setAppElement('#window'); // fuck this
+  return (
+    <div ref={appRef} onContextMenu={e => openContextMenu(e)}>
+      <Header />
 
-    this.enhance = new EnhancedLayoutListener(() => toggleEnhancedLayout());
+      <div className="main-wrapper">
-
+        <div className="main-wrapper-inner">
-    updateBlockHeight();
-    setInterval(() => {
-      updateBlockHeight();
-    }, TWO_POINT_FIVE_MINUTES);
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const { theme: prevTheme } = prevProps;
-    const { theme } = this.props;
-
-    if (prevTheme !== theme) {
-      // $FlowFixMe
-      document.documentElement.setAttribute('data-mode', theme);
-    }
-  }
-
-  componentWillUnmount() {
-    this.enhance = null;
-  }
-
-  enhance: ?any;
-
-  render() {
-    const { enhancedLayout } = this.props;
-
-    return (
-      <div id="window" onContextMenu={e => openContextMenu(e)}>
-        <Header />
-        <SideBar />
-
-        <div className="main-wrapper">
           <Router />
+          <SideBar />
         </div>
-
-        <ModalRouter />
-        {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
       </div>
-    );
+
-  }
+      <ModalRouter />
+      {isEnhancedLayout && <Yrbl className="yrbl--enhanced" />}
+    </div>
+  );
 }
 
 export default App;

src/ui/component/button/view.jsx

@@ -62,8 +62,8 @@ class Button extends React.PureComponent<Props> {
             'button--primary': button === 'primary',
             'button--secondary': button === 'secondary',
             'button--alt': button === 'alt',
-            'button--danger': button === 'danger',
             'button--inverse': button === 'inverse',
+            'button--close': button === 'close',
             'button--disabled': disabled,
             'button--link': button === 'link',
             'button--constrict': constrict,
@@ -105,6 +105,7 @@ class Button extends React.PureComponent<Props> {
         exact
         to={path}
         title={title}
+        disabled={disabled}
         onClick={e => {
           e.stopPropagation();
           if (onClick) {

src/ui/component/categoryList/index.js

@@ -1,22 +0,0 @@
-import { connect } from 'react-redux';
-import { doFetchClaimsByChannel } from 'redux/actions/content';
-import { makeSelectCategoryListUris } from 'redux/selectors/content';
-import { makeSelectFetchingChannelClaims, doResolveUris } from 'lbry-redux';
-import { selectShowNsfw } from 'redux/selectors/settings';
-import CategoryList from './view';
-
-const select = (state, props) => ({
-  urisInList: makeSelectCategoryListUris(props.uris, props.categoryLink)(state),
-  fetching: makeSelectFetchingChannelClaims(props.categoryLink)(state),
-  obscureNsfw: !selectShowNsfw(state),
-});
-
-const perform = dispatch => ({
-  fetchChannel: channel => dispatch(doFetchClaimsByChannel(channel)),
-  resolveUris: uris => dispatch(doResolveUris(uris, true)),
-});
-
-export default connect(
-  select,
-  perform
-)(CategoryList);

src/ui/component/categoryList/view.jsx

@@ -1,316 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import React, { PureComponent, createRef } from 'react';
-import { normalizeURI, parseURI } from 'lbry-redux';
-import ToolTip from 'component/common/tooltip';
-import FileCard from 'component/fileCard';
-import Button from 'component/button';
-import SubscribeButton from 'component/subscribeButton';
-import throttle from 'util/throttle';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  category: string,
-  categoryLink: ?string,
-  fetching: boolean,
-  obscureNsfw: boolean,
-  currentPageAttributes: { scrollY: number },
-  fetchChannel: string => void,
-  urisInList: ?Array<string>,
-  resolveUris: (Array<string>) => void,
-  lazyLoad: boolean, // only fetch rows if they are on the screen
-};
-
-type State = {
-  canScrollNext: boolean,
-  canScrollPrevious: boolean,
-};
-
-class CategoryList extends PureComponent<Props, State> {
-  static defaultProps = {
-    categoryLink: undefined,
-    lazyLoad: false,
-  };
-
-  scrollWrapper: { current: null | HTMLUListElement };
-
-  constructor() {
-    super();
-
-    this.state = {
-      canScrollPrevious: false,
-      canScrollNext: true,
-    };
-
-    (this: any).handleScrollNext = this.handleScrollNext.bind(this);
-    (this: any).handleScrollPrevious = this.handleScrollPrevious.bind(this);
-    (this: any).handleArrowButtonsOnScroll = this.handleArrowButtonsOnScroll.bind(this);
-    // (this: any).handleResolveOnScroll = this.handleResolveOnScroll.bind(this);
-
-    this.scrollWrapper = createRef();
-  }
-
-  componentDidMount() {
-    const { fetching, categoryLink, fetchChannel, resolveUris, urisInList, lazyLoad } = this.props;
-    if (!fetching && categoryLink && (!urisInList || !urisInList.length)) {
-      // Only fetch the channels claims if no urisInList are specifically passed in
-      // This allows setting a channel link and and passing in a custom list of urisInList (featured content usually works this way)
-      fetchChannel(categoryLink);
-    }
-
-    const scrollWrapper = this.scrollWrapper.current;
-    if (scrollWrapper) {
-      scrollWrapper.addEventListener('scroll', throttle(this.handleArrowButtonsOnScroll, 500));
-
-      if (!urisInList) {
-        return;
-      }
-
-      if (lazyLoad) {
-        if (window.innerHeight > scrollWrapper.offsetTop) {
-          resolveUris(urisInList);
-        }
-      } else {
-        resolveUris(urisInList);
-      }
-    }
-  }
-
-  // The old lazy loading for home page relied on the navigation reducers copy of the scroll height
-  // Keeping it commented out for now to try and find a better way for better TTI on the homepage
-  // componentDidUpdate(prevProps: Props) {
-  //   const {scrollY: previousScrollY} = prevProps.currentPageAttributes;
-  //   const {scrollY} = this.props.currentPageAttributes;
-
-  //   if(scrollY > previousScrollY) {
-  //     this.handleResolveOnScroll();
-  //   }
-  // }
-
-  // handleResolveOnScroll() {
-  //   const {
-  //     urisInList,
-  //     resolveUris,
-  //     currentPageAttributes: {scrollY},
-  //   } = this.props;
-
-  //   const scrollWrapper = this.scrollWrapper.current;
-  //   if(!scrollWrapper) {
-  //     return;
-  //   }
-
-  //   const shouldResolve = window.innerHeight > scrollWrapper.offsetTop - scrollY;
-  //   if(shouldResolve && urisInList) {
-  //     resolveUris(urisInList);
-  //   }
-  // }
-
-  handleArrowButtonsOnScroll() {
-    // Determine if the arrow buttons should be disabled
-    const scrollWrapper = this.scrollWrapper.current;
-    if (scrollWrapper) {
-      // firstElementChild and lastElementChild will always exist
-      // $FlowFixMe
-      const hasHiddenCardToLeft = !this.isCardVisible(scrollWrapper.firstElementChild);
-      // $FlowFixMe
-      const hasHiddenCardToRight = !this.isCardVisible(scrollWrapper.lastElementChild);
-
-      this.setState({
-        canScrollPrevious: hasHiddenCardToLeft,
-        canScrollNext: hasHiddenCardToRight,
-      });
-    }
-  }
-
-  handleScroll(scrollTarget: number) {
-    const scrollWrapper = this.scrollWrapper.current;
-    if (scrollWrapper) {
-      const currentScrollLeft = scrollWrapper.scrollLeft;
-      const direction = currentScrollLeft > scrollTarget ? 'left' : 'right';
-      this.scrollCardsAnimated(scrollWrapper, scrollTarget, direction);
-    }
-  }
-
-  scrollCardsAnimated = (scrollWrapper: HTMLUListElement, scrollTarget: number, direction: string) => {
-    let start;
-    const step = timestamp => {
-      if (!start) start = timestamp;
-
-      const currentLeftVal = scrollWrapper.scrollLeft;
-
-      let newTarget;
-      let shouldContinue;
-      let progress = currentLeftVal;
-
-      if (direction === 'right') {
-        progress += timestamp - start;
-        newTarget = Math.min(progress, scrollTarget);
-        shouldContinue = newTarget < scrollTarget;
-      } else {
-        progress -= timestamp - start;
-        newTarget = Math.max(progress, scrollTarget);
-        shouldContinue = newTarget > scrollTarget;
-      }
-
-      scrollWrapper.scrollLeft = newTarget;
-
-      if (shouldContinue) {
-        window.requestAnimationFrame(step);
-      }
-    };
-
-    window.requestAnimationFrame(step);
-  };
-
-  // check if a card is fully visible horizontally
-  isCardVisible = (card: HTMLLIElement): boolean => {
-    if (!card) {
-      return false;
-    }
-    const scrollWrapper = this.scrollWrapper.current;
-    if (scrollWrapper) {
-      const rect = card.getBoundingClientRect();
-      const isVisible = scrollWrapper.scrollLeft < card.offsetLeft && rect.left >= 0 && rect.right <= window.innerWidth;
-      return isVisible;
-    }
-
-    return false;
-  };
-
-  handleScrollNext() {
-    const scrollWrapper = this.scrollWrapper.current;
-    if (!scrollWrapper) {
-      return;
-    }
-
-    const cards = scrollWrapper.getElementsByTagName('li');
-
-    // Loop over items until we find one that is visible
-    // The card before that (starting from the end) is the new "first" card on the screen
-
-    let previousCard: ?HTMLLIElement;
-    for (let i = cards.length - 1; i > 0; i -= 1) {
-      const currentCard: HTMLLIElement = cards[i];
-      const currentCardVisible = this.isCardVisible(currentCard);
-
-      if (currentCardVisible && previousCard) {
-        const scrollTarget = previousCard.offsetLeft;
-        this.handleScroll(scrollTarget - cards[0].offsetLeft);
-        break;
-      }
-
-      previousCard = currentCard;
-    }
-  }
-
-  handleScrollPrevious() {
-    const scrollWrapper = this.scrollWrapper.current;
-    if (!scrollWrapper) {
-      return;
-    }
-
-    const cards = scrollWrapper.getElementsByTagName('li');
-
-    let hasFoundCard;
-    let numberOfCardsThatCanFit = 0;
-
-    // loop starting at the end until we find a visible card
-    // then count to find how many cards can fit on the screen
-    for (let i = cards.length - 1; i >= 0; i -= 1) {
-      const currentCard = cards[i];
-      const isCurrentCardVisible = this.isCardVisible(currentCard);
-
-      if (isCurrentCardVisible) {
-        if (!hasFoundCard) {
-          hasFoundCard = true;
-        }
-
-        numberOfCardsThatCanFit += 1;
-      } else if (hasFoundCard) {
-        // this card is off the screen to the left
-        // we know how many cards can fit on a screen
-        // find the new target and scroll
-        const firstCardOffsetLeft = cards[0].offsetLeft;
-        const cardIndexToScrollTo = i + 1 - numberOfCardsThatCanFit;
-        const newFirstCard = cards[cardIndexToScrollTo];
-
-        let scrollTarget;
-        if (newFirstCard) {
-          scrollTarget = newFirstCard.offsetLeft;
-        } else {
-          // more cards can fit on the screen than are currently hidden
-          // just scroll to the first card
-          scrollTarget = cards[0].offsetLeft;
-        }
-
-        scrollTarget -= firstCardOffsetLeft; // to play nice with the margins
-
-        this.handleScroll(scrollTarget);
-        break;
-      }
-    }
-  }
-
-  render() {
-    const { category, categoryLink, urisInList, obscureNsfw, lazyLoad } = this.props;
-    const { canScrollNext, canScrollPrevious } = this.state;
-    const isCommunityTopBids = category.match(/^community/i);
-    const showScrollButtons = isCommunityTopBids ? !obscureNsfw : true;
-
-    let channelLink;
-    if (categoryLink) {
-      channelLink = formatLbryUriForWeb(categoryLink);
-    }
-
-    return (
-      <section className="media-group--row">
-        <header className="media-group__header">
-          <h2 className="media-group__header-title">
-            {categoryLink ? (
-              <React.Fragment>
-                <Button label={category} navigate={channelLink} />
-                <SubscribeButton button="alt" showSnackBarOnSubscribe uri={`lbry://${categoryLink}`} />
-              </React.Fragment>
-            ) : (
-              <span>{category}</span>
-            )}
-            {isCommunityTopBids && (
-              <ToolTip
-                direction="top"
-                label={__("What's this?")}
-                body={__(
-                  'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names from "one" to "ten" to put your content here!'
-                )}
-              />
-            )}
-          </h2>
-          {showScrollButtons && (
-            <nav className="media-group__header-navigation">
-              <Button disabled={!canScrollPrevious} onClick={this.handleScrollPrevious} icon={ICONS.ARROW_LEFT} />
-              <Button disabled={!canScrollNext} onClick={this.handleScrollNext} icon={ICONS.ARROW_RIGHT} />
-            </nav>
-          )}
-        </header>
-        {obscureNsfw && isCommunityTopBids ? (
-          <p className="media__message help--warning">
-            {__(
-              'The community top bids section is only visible if you allow mature content in the app. You can change your content viewing preferences'
-            )}{' '}
-            <Button button="link" navigate="/$/settings" label={__('here')} />.
-          </p>
-        ) : (
-          <ul className="media-scrollhouse" ref={this.scrollWrapper}>
-            {urisInList &&
-              urisInList.map(uri => (
-                <FileCard placeholder preventResolve={lazyLoad} showSubscribedLogo key={uri} uri={normalizeURI(uri)} />
-              ))}
-
-            {!urisInList && new Array(10).fill(1).map((x, i) => <FileCard placeholder key={i} />)}
-          </ul>
-        )}
-      </section>
-    );
-  }
-}
-
-export default CategoryList;

src/ui/component/channelAbout/view.jsx

@@ -22,8 +22,8 @@ function ChannelContent(props: Props) {
   const showAbout = description || email || website;
 
   return (
-    <section>
+    <section className="card--section">
-      {!showAbout && <h2 className="empty">{__('Nothing here yet')}</h2>}
+      {!showAbout && <h2 className="main--empty empty">{__('Nothing here yet')}</h2>}
       {showAbout && (
         <Fragment>
           {description && (

src/ui/component/channelContent/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React, { Fragment } from 'react';
-import FileList from 'component/fileList';
+import ClaimList from 'component/claimList';
 import HiddenNsfwClaims from 'component/hiddenNsfwClaims';
 import { withRouter } from 'react-router-dom';
 import Paginate from 'component/common/paginate';
@@ -19,7 +19,6 @@ type Props = {
 function ChannelContent(props: Props) {
   const { uri, fetching, claimsInChannel, totalPages, channelIsMine, fetchClaims } = props;
   const hasContent = Boolean(claimsInChannel && claimsInChannel.length);
-
   return (
     <Fragment>
       {fetching && !hasContent && (
@@ -28,11 +27,15 @@ function ChannelContent(props: Props) {
         </section>
       )}
 
-      {!fetching && !hasContent && <h2 className="empty">{__("This channel hasn't uploaded anything.")}</h2>}
+      {!fetching && !hasContent && (
+        <div className="card--section">
+          <h2 className="card__content help">{__("This channel hasn't uploaded anything.")}</h2>
+        </div>
+      )}
 
       {!channelIsMine && <HiddenNsfwClaims className="card__content help" uri={uri} />}
 
-      {hasContent && <FileList sortByHeight hideFilter fileInfos={claimsInChannel} />}
+      {hasContent && <ClaimList header={false} uris={claimsInChannel.map(claim => claim.permanent_url)} />}
 
       <Paginate
         onPageChange={page => fetchClaims(uri, page)}

src/ui/component/channelThumbnail/view.jsx

@@ -7,20 +7,21 @@ import Gerbil from './gerbil.png';
 type Props = {
   thumbnail: ?string,
   uri: string,
+  className?: string,
 };
 
 function ChannelThumbnail(props: Props) {
-  const { thumbnail, uri } = props;
+  const { thumbnail, uri, className } = props;
 
   // Generate a random color class based on the first letter of the channel name
   const { channelName } = parseURI(uri);
   const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
-  const className = `channel-thumbnail__default--${initializer % 4}`;
+  const colorClassName = `channel-thumbnail__default--${initializer % 4}`;
 
   return (
     <div
-      className={classnames('channel-thumbnail', {
+      className={classnames('channel-thumbnail', className, {
-        [className]: !thumbnail,
+        [colorClassName]: !thumbnail,
       })}
     >
       {!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}

src/ui/component/channelTile/index.js

@@ -1,23 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  doResolveUri,
-  makeSelectClaimForUri,
-  makeSelectIsUriResolving,
-  makeSelectTotalItemsForChannel,
-} from 'lbry-redux';
-import ChannelTile from './view';
-
-const select = (state, props) => ({
-  claim: makeSelectClaimForUri(props.uri)(state),
-  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-  totalItems: makeSelectTotalItemsForChannel(props.uri)(state),
-});
-
-const perform = dispatch => ({
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-});
-
-export default connect(
-  select,
-  perform
-)(ChannelTile);

src/ui/component/channelTile/view.jsx

@@ -1,89 +0,0 @@
-// @flow
-import * as React from 'react';
-import CardMedia from 'component/cardMedia';
-import TruncatedText from 'component/common/truncated-text';
-import classnames from 'classnames';
-import SubscribeButton from 'component/subscribeButton';
-import { withRouter } from 'react-router-dom';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  uri: string,
-  isResolvingUri: boolean,
-  totalItems: number,
-  size: string,
-  claim: ?ChannelClaim,
-  resolveUri: string => void,
-  history: { push: string => void },
-};
-
-class ChannelTile extends React.PureComponent<Props> {
-  static defaultProps = {
-    size: 'regular',
-  };
-
-  componentDidMount() {
-    const { uri, resolveUri } = this.props;
-
-    resolveUri(uri);
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    const { uri, resolveUri } = this.props;
-
-    if (nextProps.uri !== uri) {
-      resolveUri(uri);
-    }
-  }
-
-  render() {
-    const { claim, isResolvingUri, totalItems, uri, size, history } = this.props;
-
-    let channelName;
-    let subscriptionUri;
-    if (claim) {
-      channelName = claim.name;
-      subscriptionUri = claim.permanent_url;
-    }
-
-    const onClick = () => history.push(formatLbryUriForWeb(uri));
-
-    return (
-      <section
-        onClick={onClick}
-        role="button"
-        className={classnames('media-tile card--link', {
-          'media-tile--small': size === 'small',
-          'media-tile--large': size === 'large',
-        })}
-      >
-        <CardMedia title={channelName} thumbnail={null} />
-        <div className="media__info">
-          {isResolvingUri && <div className="media__title">{__('Loading...')}</div>}
-          {!isResolvingUri && (
-            <React.Fragment>
-              <div className="media__title">
-                <TruncatedText text={channelName || uri} lines={1} />
-              </div>
-              <div className="media__subtitle">
-                {totalItems > 0 && (
-                  <span>
-                    {totalItems} {totalItems === 1 ? 'publish' : 'publishes'}
-                  </span>
-                )}
-                {!isResolvingUri && !totalItems && <span>This is an empty channel.</span>}
-              </div>
-            </React.Fragment>
-          )}
-          {subscriptionUri && (
-            <div className="media__actions">
-              <SubscribeButton buttonStyle="inverse" uri={subscriptionUri} />
-            </div>
-          )}
-        </div>
-      </section>
-    );
-  }
-}
-
-export default withRouter(ChannelTile);

src/ui/component/claimList/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import ClaimList from './view';
+
+const select = state => ({});
+
+const perform = dispatch => ({});
+
+export default connect(
+  select,
+  perform
+)(ClaimList);

src/ui/component/claimList/view.jsx

@@ -0,0 +1,70 @@
+// @flow
+import type { Node } from 'react';
+import React from 'react';
+import classnames from 'classnames';
+import ClaimListItem from 'component/claimListItem';
+import Spinner from 'component/spinner';
+import { FormField } from 'component/common/form';
+import usePersistedState from 'util/use-persisted-state';
+
+const SORT_NEW = 'new';
+const SORT_OLD = 'old';
+
+type Props = {
+  uris: Array<string>,
+  header: Node | boolean,
+  headerAltControls: Node,
+  injectedItem?: Node,
+  loading: boolean,
+  type: string,
+  empty?: string,
+  meta?: Node,
+  // If using the default header, this is a unique ID needed to persist the state of the filter setting
+  persistedStorageKey?: string,
+};
+
+export default function ClaimList(props: Props) {
+  const { uris, headerAltControls, injectedItem, loading, persistedStorageKey, empty, meta, type, header } = props;
+  const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
+  const sortedUris = uris && currentSort === SORT_OLD ? uris.reverse() : uris;
+  const hasUris = uris && !!uris.length;
+
+  function handleSortChange() {
+    setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
+  }
+
+  return (
+    <section className={classnames('file-list')}>
+      {header !== false && (
+        <div className={classnames('file-list__header', { 'file-list__header--small': type === 'small' })}>
+          {header || (
+            <FormField
+              className="file-list__dropdown"
+              type="select"
+              name="file_sort"
+              value={currentSort}
+              onChange={handleSortChange}
+            >
+              <option value={SORT_NEW}>{__('Newest First')}</option>
+              <option value={SORT_OLD}>{__('Oldest First')}</option>
+            </FormField>
+          )}
+          {loading && <Spinner light type="small" />}
+          <div className="file-list__alt-controls">{headerAltControls}</div>
+        </div>
+      )}
+      {meta && <div className="file-list__meta">{meta}</div>}
+      {hasUris && (
+        <ul>
+          {sortedUris.map((uri, index) => (
+            <React.Fragment key={uri}>
+              <ClaimListItem uri={uri} type={type} />
+              {index === 4 && injectedItem && <li className="file-list__item--injected">{injectedItem}</li>}
+            </React.Fragment>
+          ))}
+        </ul>
+      )}
+      {!hasUris && !loading && <h2 className="main--empty empty">{empty || __('No results')}</h2>}
+    </section>
+  );
+}

src/ui/component/claimListDiscover/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { doClaimSearch, selectLastClaimSearchUris, selectFetchingClaimSearch, doToggleTagFollow } from 'lbry-redux';
+import ClaimListDiscover from './view';
+
+const select = state => ({
+  uris: selectLastClaimSearchUris(state),
+  loading: selectFetchingClaimSearch(state),
+});
+
+const perform = {
+  doClaimSearch,
+  doToggleTagFollow,
+};
+
+export default connect(
+  select,
+  perform
+)(ClaimListDiscover);

src/ui/component/claimListDiscover/view.jsx

@@ -0,0 +1,140 @@
+// @flow
+import type { Node } from 'react';
+import React, { useEffect } from 'react';
+import moment from 'moment';
+import { FormField } from 'component/common/form';
+import ClaimList from 'component/claimList';
+import Tag from 'component/tag';
+import usePersistedState from 'util/use-persisted-state';
+
+const TIME_DAY = 'day';
+const TIME_WEEK = 'week';
+const TIME_MONTH = 'month';
+const TIME_YEAR = 'year';
+const TIME_ALL = 'all';
+const SEARCH_SORT_YOU = 'you';
+const SEARCH_SORT_ALL = 'everyone';
+const TYPE_TRENDING = 'trending';
+const TYPE_TOP = 'top';
+const TYPE_NEW = 'new';
+const SEARCH_FILTER_TYPES = [SEARCH_SORT_YOU, 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>,
+  doClaimSearch: (number, {}) => void,
+  injectedItem: any,
+  tags: Array<string>,
+  loading: boolean,
+  personal: boolean,
+  doToggleTagFollow: string => void,
+  meta?: Node,
+};
+
+function ClaimListDiscover(props: Props) {
+  const { doClaimSearch, uris, tags, loading, personal, injectedItem, meta } = 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);
+
+  const toCapitalCase = string => string.charAt(0).toUpperCase() + string.slice(1);
+  const tagsString = tags.join(',');
+  useEffect(() => {
+    const options = {};
+    const newTags = tagsString.split(',');
+
+    if ((newTags && !personal) || (newTags && personal && personalSort === SEARCH_SORT_YOU)) {
+      options.any_tags = newTags;
+    }
+
+    if (typeSort === TYPE_TRENDING) {
+      options.order_by = ['trending_global', 'trending_mixed'];
+    } else if (typeSort === TYPE_NEW) {
+      options.order_by = ['release_time'];
+    } else if (typeSort === TYPE_TOP) {
+      options.order_by = ['effective_amount'];
+      if (timeSort !== TIME_ALL) {
+        const time = Math.floor(
+          moment()
+            .subtract(1, timeSort)
+            .unix()
+        );
+        options.release_time = `>${time}`;
+      }
+    }
+
+    doClaimSearch(20, options);
+  }, [personal, personalSort, typeSort, timeSort, doClaimSearch, tagsString]);
+
+  const header = (
+    <h1 className="card__title--flex">
+      <FormField
+        className="file-list__dropdown"
+        type="select"
+        name="trending_sort"
+        value={typeSort}
+        onChange={e => setTypeSort(e.target.value)}
+      >
+        {SEARCH_TYPES.map(type => (
+          <option key={type} value={type}>
+            {toCapitalCase(type)}
+          </option>
+        ))}
+      </FormField>
+      <span>{__('For')}</span>
+      {!personal && tags && tags.length ? (
+        tags.map(tag => <Tag key={tag} name={tag} disabled />)
+      ) : (
+        <FormField
+          type="select"
+          name="trending_overview"
+          className="file-list__dropdown"
+          value={personalSort}
+          onChange={e => setPersonalSort(e.target.value)}
+        >
+          {SEARCH_FILTER_TYPES.map(type => (
+            <option key={type} value={type}>
+              {toCapitalCase(type)}
+            </option>
+          ))}
+        </FormField>
+      )}
+    </h1>
+  );
+
+  const headerAltControls = (
+    <React.Fragment>
+      {typeSort === 'top' && (
+        <FormField
+          className="file-list__dropdown"
+          type="select"
+          name="trending_time"
+          value={timeSort}
+          onChange={e => setTimeSort(e.target.value)}
+        >
+          {SEARCH_TIMES.map(time => (
+            <option key={time} value={time}>
+              {toCapitalCase(time)}
+            </option>
+          ))}
+        </FormField>
+      )}
+    </React.Fragment>
+  );
+
+  return (
+    <div className="card">
+      <ClaimList
+        meta={meta}
+        loading={loading}
+        uris={uris}
+        injectedItem={personalSort === SEARCH_SORT_YOU && injectedItem}
+        header={header}
+        headerAltControls={headerAltControls}
+      />
+    </div>
+  );
+}
+
+export default ClaimListDiscover;

src/ui/component/claimListItem/index.js

@@ -2,8 +2,6 @@ import { connect } from 'react-redux';
 import {
   doResolveUri,
   makeSelectClaimForUri,
-  makeSelectMetadataForUri,
-  makeSelectFileInfoForUri,
   makeSelectIsUriResolving,
   makeSelectClaimIsMine,
   makeSelectClaimIsPending,
@@ -11,25 +9,15 @@ import {
   makeSelectTitleForUri,
   makeSelectClaimIsNsfw,
 } from 'lbry-redux';
-import { selectRewardContentClaimIds } from 'lbryinc';
-import { makeSelectContentPositionForUri } from 'redux/selectors/content';
 import { selectShowNsfw } from 'redux/selectors/settings';
-import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
+import ClaimListItem from './view';
-import { doClearContentHistoryUri } from 'redux/actions/content';
-import FileCard from './view';
 
 const select = (state, props) => ({
   pending: makeSelectClaimIsPending(props.uri)(state),
   claim: makeSelectClaimForUri(props.uri)(state),
   obscureNsfw: !selectShowNsfw(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
-  fileInfo: makeSelectFileInfoForUri(props.uri)(state),
-  metadata: makeSelectMetadataForUri(props.uri)(state),
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-  position: makeSelectContentPositionForUri(props.uri)(state),
-  isSubscribed: makeSelectIsSubscribed(props.uri)(state),
-  isNew: makeSelectIsNew(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
   title: makeSelectTitleForUri(props.uri)(state),
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
@@ -37,10 +25,9 @@ const select = (state, props) => ({
 
 const perform = dispatch => ({
   resolveUri: uri => dispatch(doResolveUri(uri)),
-  clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),
 });
 
 export default connect(
   select,
   perform
-)(FileCard);
+)(ClaimListItem);

src/ui/component/claimListItem/view.jsx

@@ -0,0 +1,130 @@
+// @flow
+import React, { useEffect } from 'react';
+import classnames from 'classnames';
+import { convertToShareLink } from 'lbry-redux';
+import { withRouter } from 'react-router-dom';
+import { openCopyLinkMenu } from 'util/context-menu';
+import { formatLbryUriForWeb } from 'util/uri';
+import CardMedia from 'component/cardMedia';
+import UriIndicator from 'component/uriIndicator';
+import TruncatedText from 'component/common/truncated-text';
+import DateTime from 'component/dateTime';
+import FileProperties from 'component/fileProperties';
+import ClaimTags from 'component/claimTags';
+import SubscribeButton from 'component/subscribeButton';
+import ChannelThumbnail from 'component/channelThumbnail';
+
+type Props = {
+  uri: string,
+  claim: ?Claim,
+  obscureNsfw: boolean,
+  claimIsMine: boolean,
+  pending?: boolean,
+  resolveUri: string => void,
+  isResolvingUri: boolean,
+  preventResolve: boolean,
+  history: { push: string => void },
+  thumbnail: string,
+  title: string,
+  nsfw: boolean,
+  placeholder: boolean,
+  type: string,
+};
+
+function ClaimListItem(props: Props) {
+  const {
+    obscureNsfw,
+    claimIsMine,
+    pending,
+    history,
+    uri,
+    isResolvingUri,
+    thumbnail,
+    title,
+    nsfw,
+    resolveUri,
+    claim,
+    placeholder,
+    type,
+  } = props;
+
+  const haventFetched = claim === undefined;
+  const abandoned = !isResolvingUri && !claim;
+  const shouldHide = abandoned || (!claimIsMine && obscureNsfw && nsfw);
+  const isChannel = claim && claim.value_type === 'channel';
+  const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+
+  function handleContextMenu(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (claim) {
+      openCopyLinkMenu(convertToShareLink(claim.permanent_url), e);
+    }
+  }
+
+  function onClick(e) {
+    if ((isChannel || title) && !pending) {
+      history.push(formatLbryUriForWeb(uri));
+    }
+  }
+
+  useEffect(() => {
+    if (!isResolvingUri && haventFetched && uri) {
+      resolveUri(uri);
+    }
+  }, [isResolvingUri, uri, resolveUri, haventFetched]);
+
+  if (shouldHide) {
+    return null;
+  }
+
+  if (placeholder && !claim) {
+    return (
+      <li className="file-list__item" disabled>
+        <div className="placeholder media__thumb" />
+        <div className="placeholder__wrapper">
+          <div className="placeholder file-list__item-title" />
+          <div className="placeholder media__subtitle" />
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      role="link"
+      onClick={onClick}
+      onContextMenu={handleContextMenu}
+      className={classnames('file-list__item', {
+        'file-list__item--large': type === 'large',
+      })}
+    >
+      {isChannel ? <ChannelThumbnail uri={uri} /> : <CardMedia thumbnail={thumbnail} />}
+      <div className="file-list__item-metadata">
+        <div className="file-list__item-info">
+          <div className="file-list__item-title">
+            <TruncatedText text={title || (claim && claim.name)} lines={1} />
+          </div>
+          {type !== 'small' && (
+            <div>
+              {isChannel && <SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />}
+              {!isChannel && <FileProperties uri={uri} />}
+            </div>
+          )}
+        </div>
+
+        <div className="file-list__item-properties">
+          <div className="media__subtitle">
+            <UriIndicator uri={uri} link />
+            {pending && <div>Pending...</div>}
+            <div>{isChannel ? `${claimsInChannel} ${__('publishes')}` : <DateTime timeAgo uri={uri} />}</div>
+          </div>
+
+          <ClaimTags uri={uri} type={type} />
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export default withRouter(ClaimListItem);

src/ui/component/claimTags/index.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { makeSelectTagsForUri, selectFollowedTags } from 'lbry-redux';
+import ClaimTags from './view';
+
+const select = (state, props) => ({
+  tags: makeSelectTagsForUri(props.uri)(state),
+  followedTags: selectFollowedTags(state),
+});
+
+export default connect(
+  select,
+  null
+)(ClaimTags);

src/ui/component/claimTags/view.jsx

@@ -0,0 +1,52 @@
+// @flow
+import * as React from 'react';
+import classnames from 'classnames';
+import Button from 'component/button';
+
+const SLIM_TAGS = 2;
+const NORMAL_TAGS = 4;
+const LARGE_TAGS = 10;
+
+type Props = {
+  tags: Array<string>,
+  followedTags: Array<Tag>,
+  type: string,
+};
+
+export default function ClaimTags(props: Props) {
+  const { tags, followedTags, type } = props;
+  const numberOfTags = type === 'small' ? SLIM_TAGS : type === 'large' ? LARGE_TAGS : NORMAL_TAGS;
+
+  let tagsToDisplay = [];
+  for (var i = 0; tagsToDisplay.length < numberOfTags - 2; i++) {
+    const tag = followedTags[i];
+    if (!tag) {
+      break;
+    }
+
+    if (tags.includes(tag.name)) {
+      tagsToDisplay.push(tag.name);
+    }
+  }
+
+  const sortedTags = tags.sort((a, b) => a.localeCompare(b));
+
+  for (var i = 0; i < sortedTags.length; i++) {
+    const tag = sortedTags[i];
+    if (!tag || tagsToDisplay.length === numberOfTags) {
+      break;
+    }
+
+    if (!tagsToDisplay.includes(tag)) {
+      tagsToDisplay.push(tag);
+    }
+  }
+
+  return (
+    <div className={classnames('file-properties', { 'file-properties--large': type === 'large' })}>
+      {tagsToDisplay.map(tag => (
+        <Button key={tag} title={tag} navigate={`$/tags?t=${tag}`} className="tag" label={tag} />
+      ))}
+    </div>
+  );
+}

src/ui/component/common/credit-amount.jsx

@@ -10,7 +10,6 @@ type Props = {
   showFullPrice: boolean,
   showPlus: boolean,
   isEstimate?: boolean,
-  large?: boolean,
   showLBC?: boolean,
   fee?: boolean,
   badge?: boolean,
@@ -27,7 +26,7 @@ class CreditAmount extends React.PureComponent<Props> {
   };
 
   render() {
-    const { amount, precision, showFullPrice, showFree, showPlus, large, isEstimate, fee, showLBC, badge } = this.props;
+    const { amount, precision, showFullPrice, showFree, showPlus, isEstimate, fee, showLBC, badge } = this.props;
 
     const minimumRenderableAmount = 10 ** (-1 * precision);
     const fullPrice = formatFullPrice(amount, 2);
@@ -69,7 +68,6 @@ class CreditAmount extends React.PureComponent<Props> {
           badge,
           'badge--cost': badge && amount > 0,
           'badge--free': badge && isFree,
-          'badge--large': large,
         })}
       >
         {amountText}

src/ui/component/copyableText/view.jsx

@@ -44,7 +44,7 @@ export default class CopyableText extends React.PureComponent<Props> {
         onFocus={this.onFocus}
         inputButton={
           <Button
-            button="primary"
+            button="inverse"
             icon={ICONS.CLIPBOARD}
             onClick={() => {
               clipboard.writeText(copyable);

src/ui/component/emailCollection/index.js

@@ -12,10 +12,6 @@ const select = state => ({
 });
 
 const perform = dispatch => () => ({
-  completeFirstRun: () => {
-    dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true));
-    dispatch(doSetClientSetting(SETTINGS.FIRST_RUN_COMPLETED, true));
-  },
   acknowledgeEmail: () => {
     dispatch(doSetClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED, true));
   },

src/ui/component/fileCard/view.jsx

@@ -1,154 +0,0 @@
-// @flow
-import * as icons from 'constants/icons';
-import * as React from 'react';
-import { normalizeURI, convertToShareLink } from 'lbry-redux';
-import CardMedia from 'component/cardMedia';
-import TruncatedText from 'component/common/truncated-text';
-import Icon from 'component/common/icon';
-import UriIndicator from 'component/uriIndicator';
-import classnames from 'classnames';
-import FilePrice from 'component/filePrice';
-import { openCopyLinkMenu } from 'util/context-menu';
-import DateTime from 'component/dateTime';
-import { withRouter } from 'react-router-dom';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  uri: string,
-  claim: ?StreamClaim,
-  fileInfo: ?{},
-  metadata: ?StreamMetadata,
-  rewardedContentClaimIds: Array<string>,
-  obscureNsfw: boolean,
-  claimIsMine: boolean,
-  pending?: boolean,
-  resolveUri: string => void,
-  isResolvingUri: boolean,
-  isSubscribed: boolean,
-  isNew: boolean,
-  placeholder: boolean,
-  preventResolve: boolean,
-  history: { push: string => void },
-  thumbnail: string,
-  title: string,
-  nsfw: boolean,
-};
-
-class FileCard extends React.PureComponent<Props> {
-  static defaultProps = {
-    placeholder: false,
-    preventResolve: false,
-  };
-
-  componentDidMount() {
-    if (!this.props.preventResolve) {
-      this.resolve(this.props);
-    }
-  }
-
-  componentDidUpdate() {
-    if (!this.props.preventResolve) {
-      this.resolve(this.props);
-    }
-  }
-
-  resolve = (props: Props) => {
-    const { isResolvingUri, resolveUri, claim, uri, pending } = props;
-
-    if (!pending && !isResolvingUri && claim === undefined && uri) {
-      resolveUri(uri);
-    }
-  };
-
-  render() {
-    const {
-      claim,
-      fileInfo,
-      rewardedContentClaimIds,
-      obscureNsfw,
-      claimIsMine,
-      pending,
-      isSubscribed,
-      isNew,
-      isResolvingUri,
-      placeholder,
-      history,
-      thumbnail,
-      title,
-      nsfw,
-    } = this.props;
-
-    const abandoned = !isResolvingUri && !claim && !pending && !placeholder;
-
-    if (abandoned) {
-      return null;
-    }
-
-    if (!claim && (!pending || placeholder)) {
-      return (
-        <li className="media-card media-placeholder">
-          <div className="media__thumb placeholder" />
-          <div className="media__title placeholder" />
-          <div className="media__channel placeholder" />
-          <div className="media__date placeholder" />
-          <div className="media__properties" />
-        </li>
-      );
-    }
-
-    // fix to use tags - one of many nsfw tags...
-    const shouldHide = !claimIsMine && !pending && obscureNsfw && nsfw;
-    if (shouldHide) {
-      return null;
-    }
-
-    const uri = !pending ? normalizeURI(this.props.uri) : this.props.uri;
-    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
-    const handleContextMenu = event => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (claim) {
-        openCopyLinkMenu(convertToShareLink(claim.permanent_url), event);
-      }
-    };
-
-    const onClick = e => {
-      e.stopPropagation();
-      history.push(formatLbryUriForWeb(uri));
-    };
-
-    return (
-      <li
-        tabIndex="0"
-        role="button"
-        onClick={!pending && claim ? onClick : () => {}}
-        className={classnames('media-card', {
-          'card--link': !pending,
-          'media--pending': pending,
-        })}
-        onContextMenu={handleContextMenu}
-      >
-        <CardMedia thumbnail={thumbnail} />
-        <div className="media__title">
-          <TruncatedText text={title} lines={2} />
-        </div>
-        <div className="media__subtitle">
-          {pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
-          <div>
-            <DateTime timeAgo uri={uri} />
-          </div>
-        </div>
-        <div className="media__properties">
-          <FilePrice hideFree uri={uri} />
-          {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
-          {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
-          {claimIsMine && <Icon icon={icons.PUBLISHED} />}
-          {!claimIsMine && fileInfo && <Icon icon={icons.DOWNLOAD} />}
-          {isNew && <span className="badge badge--alert">{__('NEW')}</span>}
-        </div>
-      </li>
-    );
-  }
-}
-
-export default withRouter(FileCard);

src/ui/component/fileList/index.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import { selectClaimsById, doSetFileListSort } from 'lbry-redux';
-import FileList from './view';
-
-const select = state => ({
-  claimsById: selectClaimsById(state),
-});
-
-const perform = dispatch => ({
-  setFileListSort: (page, value) => dispatch(doSetFileListSort(page, value)),
-});
-
-export default connect(
-  select,
-  perform
-)(FileList);

src/ui/component/fileList/view.jsx

@@ -1,165 +0,0 @@
-// @flow
-import * as React from 'react';
-import { buildURI, SORT_OPTIONS } from 'lbry-redux';
-import { FormField, Form } from 'component/common/form';
-import FileCard from 'component/fileCard';
-
-type Props = {
-  hideFilter: boolean,
-  sortByHeight?: boolean,
-  claimsById: Array<StreamClaim>,
-  fileInfos: Array<FileListItem>,
-  sortBy: string,
-  page?: string,
-  setFileListSort: (?string, string) => void,
-};
-
-class FileList extends React.PureComponent<Props> {
-  static defaultProps = {
-    hideFilter: false,
-    sortBy: SORT_OPTIONS.DATE_NEW,
-  };
-
-  constructor(props: Props) {
-    super(props);
-    (this: any).handleSortChanged = this.handleSortChanged.bind(this);
-
-    this.sortFunctions = {
-      [SORT_OPTIONS.DATE_NEW]: fileInfos =>
-        this.props.sortByHeight
-          ? fileInfos.sort((fileInfo1, fileInfo2) => {
-              if (fileInfo1.confirmations < 1) {
-                return -1;
-              } else if (fileInfo2.confirmations < 1) {
-                return 1;
-              }
-
-              const height1 = this.props.claimsById[fileInfo1.claim_id]
-                ? this.props.claimsById[fileInfo1.claim_id].height
-                : 0;
-              const height2 = this.props.claimsById[fileInfo2.claim_id]
-                ? this.props.claimsById[fileInfo2.claim_id].height
-                : 0;
-
-              if (height1 !== height2) {
-                // flipped because heigher block height is newer
-                return height2 - height1;
-              }
-
-              if (fileInfo1.absolute_channel_position && fileInfo2.absolute_channel_position) {
-                return fileInfo1.absolute_channel_position - fileInfo2.absolute_channel_position;
-              }
-
-              return 0;
-            })
-          : [...fileInfos].reverse(),
-      [SORT_OPTIONS.DATE_OLD]: fileInfos =>
-        this.props.sortByHeight
-          ? fileInfos.slice().sort((fileInfo1, fileInfo2) => {
-              const height1 = this.props.claimsById[fileInfo1.claim_id]
-                ? this.props.claimsById[fileInfo1.claim_id].height
-                : 999999;
-              const height2 = this.props.claimsById[fileInfo2.claim_id]
-                ? this.props.claimsById[fileInfo2.claim_id].height
-                : 999999;
-              if (height1 < height2) {
-                return -1;
-              } else if (height1 > height2) {
-                return 1;
-              }
-              return 0;
-            })
-          : fileInfos,
-      [SORT_OPTIONS.TITLE]: fileInfos =>
-        fileInfos.slice().sort((fileInfo1, fileInfo2) => {
-          const getFileTitle = fileInfo => {
-            const { value, name, claim_name: claimName } = fileInfo;
-            if (value) {
-              return value.title || claimName;
-            }
-
-            // Invalid claim
-            return '';
-          };
-          const title1 = getFileTitle(fileInfo1).toLowerCase();
-          const title2 = getFileTitle(fileInfo2).toLowerCase();
-          if (title1 < title2) {
-            return -1;
-          } else if (title1 > title2) {
-            return 1;
-          }
-          return 0;
-        }),
-      [SORT_OPTIONS.FILENAME]: fileInfos =>
-        fileInfos.slice().sort(({ file_name: fileName1 }, { file_name: fileName2 }) => {
-          const fileName1Lower = fileName1.toLowerCase();
-          const fileName2Lower = fileName2.toLowerCase();
-          if (fileName1Lower < fileName2Lower) {
-            return -1;
-          } else if (fileName2Lower > fileName1Lower) {
-            return 1;
-          }
-          return 0;
-        }),
-    };
-  }
-
-  getChannelSignature = (fileInfo: { pending: boolean } & FileListItem) => {
-    if (fileInfo.pending) {
-      return undefined;
-    }
-
-    return fileInfo.channel_claim_id;
-  };
-
-  handleSortChanged(event: SyntheticInputEvent<*>) {
-    this.props.setFileListSort(this.props.page, event.target.value);
-  }
-
-  sortFunctions: {};
-
-  render() {
-    const { fileInfos, hideFilter, sortBy } = this.props;
-
-    const content = [];
-    if (!fileInfos) {
-      return null;
-    }
-
-    this.sortFunctions[sortBy](fileInfos).forEach(fileInfo => {
-      const { name: claimName, claim_name: claimNameDownloaded, claim_id: claimId, txid, nout, isNew } = fileInfo;
-      const uriParams = {};
-
-      // This is unfortunate
-      // https://github.com/lbryio/lbry/issues/1159
-      const name = claimName || claimNameDownloaded;
-      uriParams.contentName = name;
-      uriParams.claimId = claimId;
-      const uri = buildURI(uriParams);
-      const outpoint = `${txid}:${nout}`;
-
-      // See https://github.com/lbryio/lbry-desktop/issues/1327 for discussion around using outpoint as the key
-      content.push(<FileCard key={outpoint} uri={uri} isNew={isNew} />);
-    });
-
-    return (
-      <section>
-        {!hideFilter && (
-          <Form>
-            <FormField label={__('Sort by')} type="select" value={sortBy} onChange={this.handleSortChanged}>
-              <option value={SORT_OPTIONS.DATE_NEW}>{__('Newest First')}</option>
-              <option value={SORT_OPTIONS.DATE_OLD}>{__('Oldest First')}</option>
-              <option value={SORT_OPTIONS.TITLE}>{__('Title')}</option>
-            </FormField>
-          </Form>
-        )}
-
-        <section className="media-group--list">
-          <div className="card__list">{content}</div>
-        </section>
-      </section>
-    );
-  }
-}
-
-export default FileList;

src/ui/component/fileListSearch/index.js

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  makeSelectSearchUris,
-  selectIsSearching,
-  selectSearchDownloadUris,
-  makeSelectQueryWithOptions,
-} from 'lbry-redux';
-import FileListSearch from './view';
-
-const select = (state, props) => ({
-  uris: makeSelectSearchUris(makeSelectQueryWithOptions()(state))(state),
-  downloadUris: selectSearchDownloadUris(props.query)(state),
-  isSearching: selectIsSearching(state),
-});
-
-export default connect(select)(FileListSearch);

src/ui/component/fileListSearch/view.jsx

@@ -1,44 +0,0 @@
-// @flow
-import * as React from 'react';
-import { parseURI } from 'lbry-redux';
-import FileTile from 'component/fileTile';
-import ChannelTile from 'component/channelTile';
-import HiddenNsfwClaims from 'component/hiddenNsfwClaims';
-
-const NoResults = () => <div className="file-tile">{__('No results')}</div>;
-
-type Props = {
-  query: string,
-  isSearching: boolean,
-  uris: ?Array<string>,
-};
-
-class FileListSearch extends React.PureComponent<Props> {
-  render() {
-    const { uris, query, isSearching } = this.props;
-    return (
-      query && (
-        <React.Fragment>
-          <div className="search__results">
-            <section className="search__results-section">
-              <HiddenNsfwClaims uris={uris} />
-              {!isSearching && uris && uris.length ? (
-                uris.map(uri =>
-                  parseURI(uri).claimName[0] === '@' ? (
-                    <ChannelTile key={uri} uri={uri} />
-                  ) : (
-                    <FileTile key={uri} uri={uri} />
-                  )
-                )
-              ) : (
-                <NoResults />
-              )}
-            </section>
-          </div>
-        </React.Fragment>
-      )
-    );
-  }
-}
-
-export default FileListSearch;

src/ui/component/fileProperties/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { makeSelectFileInfoForUri, makeSelectClaimIsMine } from 'lbry-redux';
+import { selectRewardContentClaimIds } from 'lbryinc';
+import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
+import FileProperties from './view';
+
+const select = (state, props) => ({
+  rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
+  downloaded: !!makeSelectFileInfoForUri(props.uri)(state),
+  isSubscribed: makeSelectIsSubscribed(props.uri)(state),
+  isNew: makeSelectIsNew(props.uri)(state),
+  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
+});
+
+export default connect(
+  select,
+  null
+)(FileProperties);

src/ui/component/fileProperties/view.jsx

@@ -0,0 +1,30 @@
+// @flow
+import * as icons from 'constants/icons';
+import * as React from 'react';
+import { parseURI } from 'lbry-redux';
+import Icon from 'component/common/icon';
+import FilePrice from 'component/filePrice';
+
+type Props = {
+  uri: string,
+  downloaded: boolean,
+  claimIsMine: boolean,
+  isSubscribed: boolean,
+  isNew: boolean,
+  rewardedContentClaimIds: Array<string>,
+};
+
+export default function FileProperties(props: Props) {
+  const { uri, downloaded, claimIsMine, rewardedContentClaimIds, isSubscribed } = props;
+  const { claimId } = parseURI(uri);
+  const isRewardContent = rewardedContentClaimIds.includes(claimId);
+
+  return (
+    <div className="file-properties">
+      {isSubscribed && <Icon icon={icons.SUBSCRIPTION} />}
+      {!claimIsMine && downloaded && <Icon icon={icons.DOWNLOAD} />}
+      {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+      <FilePrice hideFree uri={uri} />
+    </div>
+  );
+}

src/ui/component/fileTile/index.js

@@ -1,43 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  doResolveUri,
-  makeSelectClaimForUri,
-  makeSelectMetadataForUri,
-  makeSelectFileInfoForUri,
-  makeSelectIsUriResolving,
-  makeSelectClaimIsMine,
-  makeSelectThumbnailForUri,
-  makeSelectTitleForUri,
-  makeSelectClaimIsNsfw,
-} from 'lbry-redux';
-import { selectRewardContentClaimIds } from 'lbryinc';
-import { selectShowNsfw } from 'redux/selectors/settings';
-import { doClearPublish, doUpdatePublishForm } from 'redux/actions/publish';
-import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
-import FileTile from './view';
-
-const select = (state, props) => ({
-  claim: makeSelectClaimForUri(props.uri)(state),
-  isDownloaded: !!makeSelectFileInfoForUri(props.uri)(state),
-  metadata: makeSelectMetadataForUri(props.uri)(state),
-  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
-  rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
-  obscureNsfw: !selectShowNsfw(state),
-  claimIsMine: makeSelectClaimIsMine(props.uri)(state),
-  isSubscribed: makeSelectIsSubscribed(props.uri)(state),
-  isNew: makeSelectIsNew(props.uri)(state),
-  thumbnail: makeSelectThumbnailForUri(props.uri)(state),
-  title: makeSelectTitleForUri(props.uri)(state),
-  nsfw: makeSelectClaimIsNsfw(props.uri)(state),
-});
-
-const perform = dispatch => ({
-  clearPublish: () => dispatch(doClearPublish()),
-  resolveUri: uri => dispatch(doResolveUri(uri)),
-  updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
-});
-
-export default connect(
-  select,
-  perform
-)(FileTile);

src/ui/component/fileTile/view.jsx

@@ -1,216 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import React, { Fragment } from 'react';
-import { normalizeURI, parseURI } from 'lbry-redux';
-import CardMedia from 'component/cardMedia';
-import TruncatedText from 'component/common/truncated-text';
-import Icon from 'component/common/icon';
-import Button from 'component/button';
-import classnames from 'classnames';
-import FilePrice from 'component/filePrice';
-import UriIndicator from 'component/uriIndicator';
-import DateTime from 'component/dateTime';
-import Yrbl from 'component/yrbl';
-import { withRouter } from 'react-router-dom';
-import { formatLbryUriForWeb } from 'util/uri';
-
-type Props = {
-  obscureNsfw: boolean,
-  claimIsMine: boolean,
-  isDownloaded: boolean,
-  uri: string,
-  isResolvingUri: boolean,
-  rewardedContentClaimIds: Array<string>,
-  claim: ?StreamClaim,
-  metadata: ?StreamMetadata,
-  resolveUri: string => void,
-  clearPublish: () => void,
-  updatePublishForm: ({}) => void,
-  hideNoResult: boolean, // don't show the tile if there is no claim at this uri
-  displayHiddenMessage?: boolean,
-  size: string,
-  isSubscribed: boolean,
-  isNew: boolean,
-  history: { push: string => void },
-  thumbnail: ?string,
-  title: ?string,
-  nsfw: boolean,
-};
-
-class FileTile extends React.PureComponent<Props> {
-  static defaultProps = {
-    size: 'regular',
-  };
-
-  componentDidMount() {
-    const { isResolvingUri, claim, uri, resolveUri } = this.props;
-    if (!isResolvingUri && !claim && uri) resolveUri(uri);
-  }
-
-  componentDidUpdate() {
-    const { isResolvingUri, claim, uri, resolveUri } = this.props;
-    if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
-  }
-
-  renderFileProperties() {
-    const { isSubscribed, isDownloaded, claim, uri, rewardedContentClaimIds, isNew, claimIsMine } = this.props;
-    const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
-
-    if (!isNew && !isSubscribed && !isRewardContent && !isDownloaded) {
-      return null;
-    }
-
-    return (
-      // TODO: turn this into it's own component and share it with FileCard
-      // The only issue is icon placement on the search page
-      <div className="media__properties">
-        <FilePrice hideFree uri={uri} />
-        {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
-        {isSubscribed && <Icon icon={ICONS.SUBSCRIPTION} />}
-        {isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
-        {!claimIsMine && isDownloaded && <Icon icon={ICONS.DOWNLOAD} />}
-        {claimIsMine && <Icon icon={ICONS.PUBLISHED} />}
-      </div>
-    );
-  }
-
-  render() {
-    const {
-      claim,
-      metadata,
-      isResolvingUri,
-      obscureNsfw,
-      claimIsMine,
-      clearPublish,
-      updatePublishForm,
-      hideNoResult,
-      displayHiddenMessage,
-      size,
-      history,
-      thumbnail,
-      title,
-      nsfw,
-    } = this.props;
-
-    if (!claim && isResolvingUri) {
-      return (
-        <div
-          className={classnames('media-tile media-placeholder', {
-            'media-tile--large': size === 'large',
-          })}
-        >
-          <div className="media__thumb placeholder" />
-          <div className="media__info">
-            <div className="media__title placeholder" />
-            <div className="media__channel placeholder" />
-            <div className="media__subtitle placeholder" />
-          </div>
-        </div>
-      );
-    }
-
-    const shouldHide = !claimIsMine && obscureNsfw && nsfw;
-    if (shouldHide) {
-      return displayHiddenMessage ? (
-        <span className="help">
-          {__('This file is hidden because it is marked NSFW. Update your')}{' '}
-          <Button button="link" navigate="/$/settings" label={__('content viewing preferences')} /> {__('to see it')}.
-        </span>
-      ) : null;
-    }
-
-    const uri = normalizeURI(this.props.uri);
-    const isClaimed = !!claim;
-    const description = isClaimed && metadata && metadata.description ? metadata.description : '';
-
-    let height;
-    let name;
-    if (claim) {
-      ({ name, height } = claim);
-    }
-
-    const wrapperProps = name
-      ? {
-          onClick: () => history.push(formatLbryUriForWeb(uri)),
-          role: 'button',
-        }
-      : {};
-
-    return !name && hideNoResult ? null : (
-      <section
-        className={classnames('media-tile', {
-          'media-tile--small': size === 'small',
-          'media-tile--large': size === 'large',
-          'card--link': name,
-        })}
-        {...wrapperProps}
-      >
-        <CardMedia title={title || name} thumbnail={thumbnail} />
-        <div className="media__info">
-          {name && (
-            <Fragment>
-              <div className="media__title">
-                {(title || name) && <TruncatedText text={title || name} lines={size !== 'small' ? 1 : 2} />}
-              </div>
-
-              {size === 'small' && this.renderFileProperties()}
-
-              {size !== 'small' ? (
-                <div className="media__subtext">
-                  {__('Published to')} <UriIndicator uri={uri} link /> <DateTime timeAgo uri={uri} />
-                </div>
-              ) : (
-                <Fragment>
-                  <div className="media__subtext">
-                    <UriIndicator uri={uri} link />
-                    <div>
-                      <DateTime timeAgo block={height} />
-                    </div>
-                  </div>
-                </Fragment>
-              )}
-            </Fragment>
-          )}
-
-          {size !== 'small' && (
-            <div className="media__subtitle">
-              <TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
-            </div>
-          )}
-
-          {size !== 'small' && this.renderFileProperties()}
-
-          {!name && (
-            <Yrbl
-              className="yrbl--search"
-              title={__("You get first dibs! There aren't any files here yet.")}
-              subtitle={
-                <Button
-                  button="link"
-                  label={
-                    <Fragment>
-                      {__('Publish something at')} {uri}
-                    </Fragment>
-                  }
-                  onClick={e => {
-                    // avoid navigating to /show from clicking on the section
-                    e.stopPropagation();
-
-                    // strip prefix from the Uri and use that as navigation parameter
-                    const { claimName } = parseURI(uri);
-
-                    clearPublish(); // to remove any existing publish data
-                    updatePublishForm({ name: claimName }); // to populate the name
-                    history.push('/$/publish');
-                  }}
-                />
-              }
-            />
-          )}
-        </div>
-      </section>
-    );
-  }
-}
-
-export default withRouter(FileTile);

src/ui/component/firstRun/index.js

@@ -1,27 +0,0 @@
-import * as SETTINGS from 'constants/settings';
-import { connect } from 'react-redux';
-import { selectUser } from 'lbryinc';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { doSetClientSetting } from 'redux/actions/settings';
-import FirstRun from './view';
-
-const select = state => ({
-  emailCollectionAcknowledged: makeSelectClientSetting(SETTINGS.EMAIL_COLLECTION_ACKNOWLEDGED)(state),
-  welcomeAcknowledged: makeSelectClientSetting(SETTINGS.NEW_USER_ACKNOWLEDGED)(state),
-  firstRunComplete: makeSelectClientSetting(SETTINGS.FIRST_RUN_COMPLETED)(state),
-  user: selectUser(state),
-});
-
-const perform = dispatch => ({
-  acknowledgeWelcome: () => {
-    dispatch(doSetClientSetting(SETTINGS.NEW_USER_ACKNOWLEDGED, true));
-  },
-  completeFirstRun: () => {
-    dispatch(doSetClientSetting(SETTINGS.FIRST_RUN_COMPLETED, true));
-  },
-});
-
-export default connect(
-  select,
-  perform
-)(FirstRun);

src/ui/component/firstRun/view.jsx

@@ -1,131 +0,0 @@
-// @flow
-import React, { PureComponent } from 'react';
-import posed from 'react-pose';
-import Button from 'component/button';
-import EmailCollection from 'component/emailCollection';
-import Yrbl from 'component/yrbl';
-
-//
-// Animation for items inside banner
-// The height for items must be static (in banner.scss) so that we can reliably animate into the banner and be vertically centered
-//
-const spring = {
-  transition: {
-    duration: 250,
-    ease: 'easeOut',
-  },
-};
-
-const Welcome = posed.div({
-  hide: { opacity: 0, y: '310px', ...spring },
-  show: { opacity: 1, ...spring },
-});
-
-const Email = posed.div({
-  hide: { opacity: 0, y: '0', ...spring },
-  show: { opacity: 1, y: '-310px', ...spring, delay: 175 },
-});
-
-const Help = posed.div({
-  hide: { opacity: 0, y: '0', ...spring },
-  show: { opacity: 1, y: '-620px', ...spring, delay: 175 },
-});
-
-type Props = {
-  welcomeAcknowledged: boolean,
-  emailCollectionAcknowledged: boolean,
-  firstRunComplete: boolean,
-  acknowledgeWelcome: () => void,
-  completeFirstRun: () => void,
-};
-
-export default class FirstRun extends PureComponent<Props> {
-  getWelcomeMessage() {
-    // @if TARGET='app'
-    const message = (
-      <React.Fragment>
-        <p>
-          {__('Using LBRY is like dating a centaur. Totally normal up top, and')} <em>{__('way different')}</em>{' '}
-          {__('underneath.')}
-        </p>
-        <p>{__('Up top, LBRY is similar to popular media sites.')}</p>
-        <p>{__('Below, LBRY is controlled by users -- you -- via blockchain and decentralization.')}</p>
-      </React.Fragment>
-    );
-    // @endif
-    // @if TARGET='web'
-    // $FlowFixMe
-    const message = (
-      <React.Fragment>
-        <p>{__('Thanks for trying out lbry.tv')}</p>
-        <p>
-          {__(
-            'Some features are only available on our desktop app. We are working hard to add them here. Check back later or download the app.'
-          )}
-        </p>
-      </React.Fragment>
-    );
-    // @endif
-
-    return message;
-  }
-  render() {
-    const {
-      welcomeAcknowledged,
-      emailCollectionAcknowledged,
-      firstRunComplete,
-      acknowledgeWelcome,
-      completeFirstRun,
-    } = this.props;
-
-    if (firstRunComplete) {
-      return null;
-    }
-
-    const showWelcome = !welcomeAcknowledged;
-    const showEmail = !emailCollectionAcknowledged && welcomeAcknowledged;
-    const showHelp = !showWelcome && !showEmail;
-
-    return (
-      <div className="banner banner--first-run">
-        <Yrbl className="yrbl--first-run" />
-
-        <div className="banner__item">
-          <div className="banner__item--static-for-animation">
-            <Welcome className="banner__content" pose={showWelcome ? 'show' : 'hide'}>
-              <div>
-                <header className="card__header">
-                  <h1 className="card__title">{__('Hi There')}</h1>
-                </header>
-                <div className="card__content">
-                  {this.getWelcomeMessage()}
-                  <div className="card__actions card__actions--top-space">
-                    <Button button="primary" onClick={acknowledgeWelcome} label={__("I'm In")} />
-                  </div>
-                </div>
-              </div>
-            </Welcome>
-          </div>
-          <div className="banner__item--static-for-animation">
-            <Email pose={showEmail ? 'show' : 'hide'}>
-              <EmailCollection />
-            </Email>
-          </div>
-          <div className="banner__item--static-for-animation">
-            <Help pose={showHelp ? 'show' : 'hide'}>
-              <header className="card__header">
-                <h1 className="card__title">{__('You Are Awesome!')}</h1>
-              </header>
-              <div className="card__content">
-                <p>{__("Check out some of the neat content below me. I'll see you around!")}</p>
-                <div className="card__actions">
-                  <Button button="primary" onClick={completeFirstRun} label={__('Lets Get Started')} />
-                </div>
-              </div>
-            </Help>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}

src/ui/component/header/index.js

@@ -1,21 +1,21 @@
+import * as SETTINGS from 'constants/settings';
 import { connect } from 'react-redux';
-import { selectBalance, SETTINGS } from 'lbry-redux';
+import { selectBalance, SETTINGS as LBRY_REDUX_SETTINGS } from 'lbry-redux';
 import { formatCredits } from 'util/format-credits';
-import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
+import { doSetClientSetting } from 'redux/actions/settings';
-import { doDownloadUpgradeRequested } from 'redux/actions/app';
-import Header from './view';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import Header from './view';
 
 const select = state => ({
-  autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
   balance: selectBalance(state),
-  language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change
+  language: makeSelectClientSetting(LBRY_REDUX_SETTINGS.LANGUAGE)(state), // trigger redraw on language change
-  isUpgradeAvailable: selectIsUpgradeAvailable(state),
   roundedBalance: formatCredits(selectBalance(state) || 0, 2),
+  currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
+  automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
 });
 
 const perform = dispatch => ({
-  downloadUpgradeRequested: () => dispatch(doDownloadUpgradeRequested()),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(

src/ui/component/header/view.jsx

@@ -1,116 +1,124 @@
 // @flow
 import * as ICONS from 'constants/icons';
+import * as SETTINGS from 'constants/settings';
 import * as React from 'react';
+import { withRouter } from 'react-router';
 import Button from 'component/button';
 import LbcSymbol from 'component/common/lbc-symbol';
 import WunderBar from 'component/wunderbar';
 import Icon from 'component/common/icon';
+import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 
 type Props = {
   autoUpdateDownloaded: boolean,
   balance: string,
   isUpgradeAvailable: boolean,
-  roundedBalance: string,
+  roundedBalance: number,
-  isBackDisabled: boolean,
-  isForwardDisabled: boolean,
-  back: () => void,
-  forward: () => void,
   downloadUpgradeRequested: any => void,
+  history: { push: string => void },
+  currentTheme: string,
+  automaticDarkModeEnabled: boolean,
+  setClientSetting: (string, boolean | string) => void,
 };
 
 const Header = (props: Props) => {
-  const {
+  const { roundedBalance, history, setClientSetting, currentTheme, automaticDarkModeEnabled } = props;
-    autoUpdateDownloaded,
-    balance,
-    downloadUpgradeRequested,
-    isUpgradeAvailable,
-    roundedBalance,
-    back,
-    isBackDisabled,
-    forward,
-    isForwardDisabled,
-  } = props;
 
-  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
+  function handleThemeToggle() {
+    if (automaticDarkModeEnabled) {
+      setClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false);
+    }
+
+    if (currentTheme === 'dark') {
+      setClientSetting(SETTINGS.THEME, 'light');
+    } else {
+      setClientSetting(SETTINGS.THEME, 'dark');
+    }
+  }
 
   return (
     <header className="header">
-      <div className="header__navigation">
+      <div className="header__contents">
-        <Button
+        <div className="header__navigation">
-          className="header__navigation-item header__navigation-item--lbry"
-          label={__('LBRY')}
-          iconRight={ICONS.LBRY}
-          navigate="/"
-        />
-        {/* @if TARGET='app' */}
-        <div className="header__navigation-arrows">
           <Button
-            className="header__navigation-item header__navigation-item--back"
+            className="header__navigation-item header__navigation-item--lbry"
-            description={__('Navigate back')}
+            label={__('LBRY')}
-            onClick={() => window.history.back()}
+            icon={ICONS.LBRY}
-            icon={ICONS.ARROW_LEFT}
+            navigate="/"
-            iconSize={15}
           />
+          {/* @if TARGET='app' */}
+          <div className="header__navigation-arrows">
+            <Button
+              className="header__navigation-item header__navigation-item--back"
+              description={__('Navigate back')}
+              onClick={() => window.history.back()}
+              icon={ICONS.ARROW_LEFT}
+              iconSize={15}
+            />
 
-          <Button
+            <Button
-            className="header__navigation-item header__navigation-item--forward"
+              className="header__navigation-item header__navigation-item--forward"
-            description={__('Navigate forward')}
+              description={__('Navigate forward')}
-            onClick={() => window.history.forward()}
+              onClick={() => window.history.forward()}
-            icon={ICONS.ARROW_RIGHT}
+              icon={ICONS.ARROW_RIGHT}
-            iconSize={15}
+              iconSize={15}
-          />
+            />
+          </div>
+          {/* @endif */}
         </div>
-        {/* @endif */}
-      </div>
 
-      <WunderBar />
+        <WunderBar />
 
-      <div className="header__navigation">
+        <div className="header__navigation">
-        <Button
+          <Menu>
-          className="header__navigation-item header__navigation-item--menu"
+            <MenuButton className="header__navigation-item menu__title">
-          description={__('Menu')}
+              <Icon icon={ICONS.ACCOUNT} />
-          icon={ICONS.MENU}
+              {roundedBalance > 0 ? (
-          iconSize={15}
+                <React.Fragment>
-        />
+                  {roundedBalance} <LbcSymbol />
-
+                </React.Fragment>
-        <Button
+              ) : (
-          className="header__navigation-item header__navigation-item--right-action"
+                __('Account')
-          activeClass="header__navigation-item--active"
+              )}
-          description={__('Your wallet')}
+            </MenuButton>
-          title={`Your balance is ${balance} LBRY Credits`}
+            <MenuList>
-          label={
+              <MenuItem className="menu__link" onSelect={() => history.push(`/$/account`)}>
-            <React.Fragment>
+                <Icon aria-hidden icon={ICONS.OVERVIEW} />
-              {roundedBalance} <LbcSymbol />
+                {__('Overview')}
-            </React.Fragment>
+              </MenuItem>
-          }
+              <MenuItem className="menu__link" onSelect={() => history.push(`/$/wallet`)}>
-          navigate="/$/account"
+                <Icon aria-hidden icon={ICONS.WALLET} />
-        />
+                {__('Wallet')}
-
+              </MenuItem>
-        <Button
+              <MenuItem className="menu__link" onSelect={() => history.push(`/$/publish`)}>
-          className="header__navigation-item header__navigation-item--right-action"
+                <Icon aria-hidden icon={ICONS.UPLOAD} />
-          activeClass="header__navigation-item--active"
+                {__('Publish')}
-          description={__('Publish content')}
+              </MenuItem>
-          icon={ICONS.UPLOAD}
+            </MenuList>
-          iconSize={24}
+          </Menu>
-          label={isUpgradeAvailable ? '' : __('Publish')}
+          <Menu>
-          navigate="/$/publish"
+            <MenuButton className="header__navigation-item menu__title">
-        />
+              <Icon icon={ICONS.SETTINGS} />
-
+            </MenuButton>
-        {/* @if TARGET='app' */}
+            <MenuList>
-
+              <MenuItem className="menu__link" onSelect={() => history.push(`/$/settings`)}>
-        {showUpgradeButton && (
+                <Icon aria-hidden icon={ICONS.SETTINGS} />
-          <Button
+                {__('Settings')}
-            className="header__navigation-item header__navigation-item--right-action header__navigation-item--upgrade"
+              </MenuItem>
-            icon={ICONS.DOWNLOAD}
+              <MenuItem className="menu__link" onSelect={() => history.push(`/$/help`)}>
-            iconSize={24}
+                <Icon aria-hidden icon={ICONS.HELP} />
-            label={__('Upgrade App')}
+                {__('Help')}
-            onClick={downloadUpgradeRequested}
+              </MenuItem>
-          />
+              <MenuItem className="menu__link" onSelect={handleThemeToggle}>
-        )}
+                <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
-        {/* @endif */}
+                {currentTheme === 'light' ? 'Dark' : 'Light'}
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </div>
       </div>
     </header>
   );
 };
 
-export default Header;
+export default withRouter(Header);

src/ui/component/inviteNew/view.jsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import { Form, FormField, Submit } from 'component/common/form';
+import { Form, FormField } from 'component/common/form';
 import CopyableText from 'component/copyableText';
 
 type FormProps = {
@@ -48,7 +48,7 @@ class FormInviteNew extends React.PureComponent<FormProps, FormState> {
           name="email"
           value={this.state.email}
           error={errorMessage}
-          inputButton={<Submit label="Invite" disabled={isPending} />}
+          inputButton={<Button button="inverse" type="submit" label="Invite" disabled={isPending} />}
           onChange={event => {
             this.handleEmailChanged(event);
           }}

src/ui/component/navigationHistoryRecent/view.jsx

@@ -23,7 +23,7 @@ export default function NavigationHistoryRecent(props: Props) {
         ))}
       </section>
       <div className="card__actions">
-        <Button navigate="/$/history/all" button="link" label={__('See All Visited Links')} />
+        <Button navigate="/$/library/all" button="link" label={__('See All Visited Links')} />
       </div>
     </div>
   ) : null;

src/ui/component/page/index.js

@@ -1,2 +1,16 @@
+import { connect } from 'react-redux';
+import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded } from 'redux/selectors/app';
+import { doDownloadUpgradeRequested } from 'redux/actions/app';
 import Page from './view';
-export default Page;
+
+const select = state => ({
+  autoUpdateDownloaded: selectAutoUpdateDownloaded(state),
+  isUpgradeAvailable: selectIsUpgradeAvailable(state),
+});
+
+export default connect(
+  select,
+  {
+    doDownloadUpgradeRequested,
+  }
+)(Page);

src/ui/component/page/view.jsx

@@ -1,93 +1,34 @@
 // @flow
+import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import classnames from 'classnames';
-import Spinner from 'component/spinner';
+import Button from 'component/button';
-
-// time in ms to wait to show loading spinner
-const LOADER_TIMEOUT = 1000;
 
 type Props = {
   children: React.Node | Array<React.Node>,
-  pageTitle: ?string,
-  notContained: ?boolean, // No max-width, but keep the padding
-  loading: ?boolean,
   className: ?string,
+  autoUpdateDownloaded: boolean,
+  isUpgradeAvailable: boolean,
+  doDownloadUpgradeRequested: () => void,
 };
 
-type State = {
+function Page(props: Props) {
-  showLoader: ?boolean,
+  const { children, className, autoUpdateDownloaded, isUpgradeAvailable, doDownloadUpgradeRequested } = props;
-};
+  const showUpgradeButton = autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable);
 
-class Page extends React.PureComponent<Props, State> {
+  return (
-  constructor() {
+    <main className={classnames('main', className)}>
-    super();
+      {/* @if TARGET='app' */}
-
+      {showUpgradeButton && (
-    this.state = {
+        <div className="main__status">
-      showLoader: false,
+          {__('Update ready to install')}
-    };
+          <Button button="alt" icon={ICONS.DOWNLOAD} label={__('Install now')} onClick={doDownloadUpgradeRequested} />
-
+        </div>
-    this.loaderTimeout = null;
+      )}
-  }
+      {/* @endif */}
-
+      {children}
-  componentDidMount() {
+    </main>
-    const { loading } = this.props;
+  );
-    if (loading) {
-      this.beginLoadingTimeout();
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const { loading } = this.props;
-    const { showLoader } = this.state;
-
-    if (!this.loaderTimeout && !prevProps.loading && loading) {
-      this.beginLoadingTimeout();
-    } else if (!loading && this.loaderTimeout) {
-      clearTimeout(this.loaderTimeout);
-      if (showLoader) {
-        this.removeLoader();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.loaderTimeout) {
-      clearTimeout(this.loaderTimeout);
-    }
-  }
-
-  beginLoadingTimeout() {
-    this.loaderTimeout = setTimeout(() => {
-      this.setState({ showLoader: true });
-    }, LOADER_TIMEOUT);
-  }
-
-  removeLoader() {
-    this.setState({ showLoader: false });
-  }
-
-  loaderTimeout: ?TimeoutID;
-
-  render() {
-    const { children, notContained, loading, className } = this.props;
-    const { showLoader } = this.state;
-
-    return (
-      <main
-        className={classnames('main', className, {
-          'main--contained': !notContained,
-          'main--not-contained': notContained,
-        })}
-      >
-        {!loading && children}
-        {showLoader && (
-          <div className="main--empty">
-            <Spinner />
-          </div>
-        )}
-      </main>
-    );
-  }
 }
 
 export default Page;

src/ui/component/recommendedContent/view.jsx

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import FileTile from 'component/fileTile';
+import ClaimList from 'component/claimList';
 
 type Props = {
   uri: string,
@@ -51,15 +51,14 @@ export default class RecommendedContent extends React.PureComponent<Props> {
     const { recommendedContent, isSearching } = this.props;
 
     return (
-      <section className="media-group--list-recommended">
+      <section className="card">
-        <span>Related</span>
+        <ClaimList
-        {recommendedContent &&
+          type="small"
-          recommendedContent.map(recommendedUri => (
+          loading={isSearching}
-            <FileTile hideNoResult size="small" key={recommendedUri} uri={recommendedUri} />
+          uris={recommendedContent}
-          ))}
+          header={<span>{__('Related')}</span>}
-        {recommendedContent && !recommendedContent.length && !isSearching && (
+          empty={<div className="empty">{__('No related content found')}</div>}
-          <div className="media__subtitle">No related content found</div>
+        />
-        )}
       </section>
     );
   }

src/ui/component/rewardLink/view.jsx

@@ -18,7 +18,7 @@ const RewardLink = (props: Props) => {
   const { reward, claimReward, label, isPending, button } = props;
   return !reward ? null : (
     <Button
-      button={button ? 'primary' : 'link'}
+      button={button ? 'inverse' : 'link'}
       disabled={isPending}
       label={isPending ? __('Claiming...') : label || `${__('Get')} ${reward.reward_amount} LBC`}
       onClick={() => {

src/ui/component/rewardListClaimed/view.jsx

@@ -23,8 +23,8 @@ const RewardListClaimed = (props: Props) => {
   }
 
   return (
-    <section className="card card--section">
+    <section className="card">
-      <header className="card__header">
+      <header className="table__header">
         <h2 className="card__title">Claimed Rewards</h2>
 
         <p className="card__subtitle">

src/ui/component/rewardSummary/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { selectUnclaimedRewardValue, selectFetchingRewards, doRewardList, doFetchRewardedContent } from 'lbryinc';
+import { selectUnclaimedRewardValue, selectFetchingRewards, doFetchRewardedContent } from 'lbryinc';
 import RewardSummary from './view';
 
 const select = state => ({
@@ -8,7 +8,6 @@ const select = state => ({
 });
 
 const perform = dispatch => ({
-  fetchRewards: () => dispatch(doRewardList()),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
 });
 

src/ui/component/rewardSummary/view.jsx

@@ -2,51 +2,38 @@
 import * as React from 'react';
 import Button from 'component/button';
 import CreditAmount from 'component/common/credit-amount';
-import BusyIndicator from 'component/common/busy-indicator';
 
 type Props = {
   unclaimedRewardAmount: number,
   fetching: boolean,
-  fetchRewards: () => void,
-  fetchRewardedContent: () => void,
 };
 
 class RewardSummary extends React.Component<Props> {
-  componentDidMount() {
-    this.props.fetchRewards();
-    this.props.fetchRewardedContent();
-  }
-
   render() {
     const { unclaimedRewardAmount, fetching } = this.props;
     const hasRewards = unclaimedRewardAmount > 0;
-
     return (
       <section className="card card--section">
         <header className="card__header">
-          <h2 className="card__title">
+          <h2 className="card__title">{__('Rewards')}</h2>
-            {__('Rewards')}
-            {fetching && <BusyIndicator />}
-          </h2>
-
-          <p className="card__subtitle">
-            {!fetching &&
-              (hasRewards ? (
-                <React.Fragment>
-                  {__('You have')}
-                  &nbsp;
-                  <CreditAmount inheritStyle amount={unclaimedRewardAmount} precision={8} />
-                  &nbsp;
-                  {__('in unclaimed rewards')}.
-                </React.Fragment>
-              ) : (
-                <React.Fragment>
-                  {__('There are no rewards available at this time, please check back later')}.
-                </React.Fragment>
-              ))}
-          </p>
         </header>
 
+        <p className="card__subtitle">
+          {fetching && __('You have...')}
+          {!fetching && hasRewards ? (
+            <React.Fragment>
+              {/* @i18nfixme */}
+              {__('You have')}
+              &nbsp;
+              <CreditAmount inheritStyle amount={unclaimedRewardAmount} precision={8} />
+              &nbsp;
+              {__('in unclaimed rewards')}.
+            </React.Fragment>
+          ) : (
+            __('You have no rewards available, please check')
+          )}
+        </p>
+
         <div className="card__content">
           <div className="card__actions">
             <Button
@@ -54,12 +41,8 @@ class RewardSummary extends React.Component<Props> {
               navigate="/$/rewards"
               label={hasRewards ? __('Claim Rewards') : __('View Rewards')}
             />
+            <Button button="link" label={__('Learn more')} href="https://lbry.com/faq/rewards" />
           </div>
-
-          <p className="help">
-            {__('Read our')} <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/rewards" />{' '}
-            {__('to learn more about LBRY Rewards')}.
-          </p>
         </div>
       </section>
     );

src/ui/component/rewardTile/view.jsx

@@ -33,10 +33,10 @@ const RewardTile = (props: Props) => {
       <div className="card__content">
         <div className="card__actions">
           {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
-            <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
+            <Button button="inverse" onClick={openRewardCodeModal} label={__('Enter Code')} />
           )}
           {reward.reward_type === rewards.TYPE_REFERRAL && (
-            <Button button="primary" navigate="/$/invite" label={__('Go To Invites')} />
+            <Button button="inverse" navigate="/$/invite" label={__('Go To Invites')} />
           )}
           {reward.reward_type !== rewards.TYPE_REFERRAL &&
             (claimed ? (

src/ui/component/rewardTotal/index.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import {
+  selectUnclaimedRewardValue,
+  selectFetchingRewards,
+  doRewardList,
+  doFetchRewardedContent,
+  selectClaimedRewards,
+} from 'lbryinc';
+import RewardSummary from './view';
+
+const select = state => ({
+  unclaimedRewardAmount: selectUnclaimedRewardValue(state),
+  fetching: selectFetchingRewards(state),
+  rewards: selectClaimedRewards(state),
+});
+
+const perform = dispatch => ({
+  fetchRewards: () => dispatch(doRewardList()),
+  fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
+});
+
+export default connect(
+  select,
+  perform
+)(RewardSummary);

src/ui/component/rewardTotal/view.jsx

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import TotalBackground from './total-background.png';
+import useTween from 'util/use-tween';
+
+type Props = {
+  rewards: Array<Reward>,
+};
+
+function RewardTotal(props: Props) {
+  const { rewards } = props;
+  const rewardTotal = rewards.reduce((acc, val) => acc + val.reward_amount, 0);
+  const total = useTween(rewardTotal * 25);
+  const integer = Math.round(total * rewardTotal);
+
+  return (
+    <section className="card  card--section card--reward-total" style={{ backgroundImage: `url(${TotalBackground})` }}>
+      <span className="card__title">
+        {integer} LBC {__('Earned From Rewards')}
+      </span>
+    </section>
+  );
+}
+
+export default RewardTotal;

src/ui/component/router/view.jsx

@@ -17,8 +17,10 @@ import InvitePage from 'page/invite';
 import SubscriptionsPage from 'page/subscriptions';
 import SearchPage from 'page/search';
 import UserHistoryPage from 'page/userHistory';
-import SendCreditsPage from 'page/sendCredits';
+import WalletPage from 'page/wallet';
 import NavigationHistory from 'page/navigationHistory';
+import TagsPage from 'page/tags';
+import TagsEditPage from 'page/tagsEdit';
 
 const Scroll = withRouter(function ScrollWrapper(props) {
   const { pathname } = props.location;
@@ -50,12 +52,12 @@ export default function AppRouter() {
         <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
         <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
         <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
-        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.LIBRARY}`} exact component={UserHistoryPage} />
         <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
-        <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
+        <Route path={`/$/${PAGES.LIBRARY}/all`} exact component={NavigationHistory} />
-        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.TAGS}`} exact component={TagsPage} />
-        <Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
+        <Route path={`/$/${PAGES.TAGS}/edit`} exact component={TagsEditPage} />
-
+        <Route path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
         {/* Below need to go at the end to make sure we don't match any of our pages first */}
         <Route path="/:claimName" exact component={ShowPage} />
         <Route path="/:claimName/:claimId" exact component={ShowPage} />

src/ui/component/searchOptions/index.js

@@ -1,8 +1,7 @@
 import { connect } from 'react-redux';
-import { selectSearchOptions, doUpdateSearchOptions, makeSelectQueryWithOptions, doToast } from 'lbry-redux';
+import { selectSearchOptions, doUpdateSearchOptions, makeSelectQueryWithOptions } from 'lbry-redux';
 import { doToggleSearchExpanded } from 'redux/actions/app';
 import { selectSearchOptionsExpanded } from 'redux/selectors/app';
-import analytics from 'analytics';
 import SearchOptions from './view';
 
 const select = state => ({
@@ -14,24 +13,6 @@ const select = state => ({
 const perform = dispatch => ({
   setSearchOption: (option, value) => dispatch(doUpdateSearchOptions({ [option]: value })),
   toggleSearchExpanded: () => dispatch(doToggleSearchExpanded()),
-  onFeedbackPositive: query => {
-    analytics.apiSearchFeedback(query, 1);
-    dispatch(
-      doToast({
-        message: __('Thanks for the feedback! You help make the app better for everyone.'),
-      })
-    );
-  },
-  onFeedbackNegative: query => {
-    analytics.apiSearchFeedback(query, 0);
-    dispatch(
-      doToast({
-        message: __(
-          'Thanks for the feedback. Mark has been notified and is currently walking over to his computer to work on this.'
-        ),
-      })
-    );
-  },
 });
 
 export default connect(

src/ui/component/searchOptions/view.jsx

@@ -16,39 +16,20 @@ type Props = {
   options: {},
   expanded: boolean,
   toggleSearchExpanded: () => void,
-  query: string,
-  onFeedbackPositive: string => void,
-  onFeedbackNegative: string => void,
 };
 
 const SearchOptions = (props: Props) => {
-  const {
+  const { options, setSearchOption, expanded, toggleSearchExpanded } = props;
-    options,
-    setSearchOption,
-    expanded,
-    toggleSearchExpanded,
-    query,
-    onFeedbackPositive,
-    onFeedbackNegative,
-  } = props;
   const resultCount = options[SEARCH_OPTIONS.RESULT_COUNT];
 
   return (
-    <div className="search__options-wrapper">
+    <div>
-      <div className="card--space-between">
+      <Button
-        <Button
+        button="alt"
-          button="alt"
+        label={__('FILTER')}
-          label={__('FILTER')}
+        iconRight={expanded ? ICONS.UP : ICONS.DOWN}
-          iconRight={expanded ? ICONS.UP : ICONS.DOWN}
+        onClick={toggleSearchExpanded}
-          onClick={toggleSearchExpanded}
+      />
-        />
-
-        <div className="media__action-group">
-          <span>{__('Find what you were looking for?')}</span>
-          <Button button="alt" description={__('Yes')} onClick={() => onFeedbackPositive(query)} icon={ICONS.YES} />
-          <Button button="alt" description={__('No')} onClick={() => onFeedbackNegative(query)} icon={ICONS.NO} />
-        </div>
-      </div>
       <ExpandableOptions pose={expanded ? 'show' : 'hide'}>
         {expanded && (
           <Form className="card__content search__options">

src/ui/component/sideBar/index.js

@@ -1,14 +1,13 @@
 import { connect } from 'react-redux';
-import { selectUnreadAmount } from 'redux/selectors/subscriptions';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
-import { selectShouldShowInviteGuide } from 'redux/selectors/app';
+import { selectFollowedTags, SETTINGS } from 'lbry-redux';
 import SideBar from './view';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
-import { SETTINGS } from 'lbry-redux';
 
 const select = state => ({
-  unreadSubscriptionTotal: selectUnreadAmount(state),
+  subscriptions: selectSubscriptions(state),
+  followedTags: selectFollowedTags(state),
   language: makeSelectClientSetting(SETTINGS.LANGUAGE)(state), // trigger redraw on language change
-  shouldShowInviteGuide: selectShouldShowInviteGuide(state),
 });
 
 const perform = () => ({});

src/ui/component/sideBar/view.jsx

@@ -3,107 +3,79 @@ import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
 import * as React from 'react';
 import Button from 'component/button';
-import classnames from 'classnames';
+import Tag from 'component/tag';
-import Tooltip from 'component/common/tooltip';
 
 type Props = {
-  unreadSubscriptionTotal: number,
+  subscriptions: Array<Subscription>,
-  shouldShowInviteGuide: string,
+  followedTags: Array<Tag>,
 };
 
-class SideBar extends React.PureComponent<Props> {
+function SideBar(props: Props) {
-  render() {
+  const { subscriptions, followedTags } = props;
-    const { unreadSubscriptionTotal, shouldShowInviteGuide } = this.props;
+  const buildLink = (path, label, icon, guide) => ({
-    const buildLink = (path, label, icon, guide) => ({
+    navigate: path ? `$/${path}` : '/',
-      navigate: path ? `$/${path}` : '/',
+    label,
-      label,
+    icon,
-      icon,
+    guide,
-      guide,
+  });
-    });
 
-    const renderLink = (linkProps, index) => {
+  const renderLink = linkProps => (
-      const { guide } = linkProps;
+    <li key={linkProps.label}>
+      <Button {...linkProps} className="navigation__link" activeClass="navigation__link--active" />
+    </li>
+  );
 
-      const inner = (
+  return (
-        <Button
+    <div className="navigation-wrapper">
-          {...linkProps}
-          className={classnames('navigation__link', {
-            'navigation__link--guide': guide,
-          })}
-          activeClass="navigation__link--active"
-        />
-      );
-
-      return (
-        <li key={index}>
-          {guide ? (
-            <Tooltip key={guide} alwaysVisible direction="right" body={guide}>
-              {inner}
-            </Tooltip>
-          ) : (
-            inner
-          )}
-        </li>
-      );
-    };
-
-    return (
       <nav className="navigation">
         <ul className="navigation__links">
           {[
             {
-              ...buildLink(null, __('Discover'), ICONS.DISCOVER),
+              ...buildLink(null, __('Home'), ICONS.HOME),
             },
             {
-              ...buildLink(
+              ...buildLink(PAGES.SUBSCRIPTIONS, __('Subscriptions'), ICONS.SUBSCRIPTION),
-                PAGES.SUBSCRIPTIONS,
-                `${__('Subscriptions')} ${unreadSubscriptionTotal > 0 ? '(' + unreadSubscriptionTotal + ')' : ''}`,
-                ICONS.SUBSCRIPTION
-              ),
             },
             {
               ...buildLink(PAGES.PUBLISHED, __('Publishes'), ICONS.PUBLISHED),
             },
             {
-              ...buildLink(PAGES.HISTORY, __('Library'), ICONS.DOWNLOAD),
+              ...buildLink(PAGES.LIBRARY, __('Library'), ICONS.DOWNLOAD),
             },
           ].map(renderLink)}
-        </ul>
-        <div className="navigation__link navigation__link--title">Account</div>
 
-        <ul className="navigation__links">
+          <li>
-          {[
+            <Button
-            {
+              navigate="/$/tags/edit"
-              ...buildLink(PAGES.ACCOUNT, __('Overview'), ICONS.ACCOUNT),
+              icon={ICONS.EDIT}
-            },
+              className="navigation__link"
-            {
+              activeClass="navigation__link--active"
-              ...buildLink(PAGES.INVITE, __('Invite'), ICONS.INVITE, shouldShowInviteGuide && __('Check this out!')),
+              label={__('Following')}
-            },
+            />
-            {
+          </li>
-              ...buildLink(PAGES.REWARDS, __('Rewards'), ICONS.FEATURED),
-            },
-            {
-              ...buildLink(PAGES.SEND, __('Send & Recieve'), ICONS.SEND),
-            },
-            {
-              ...buildLink(PAGES.TRANSACTIONS, __('Transactions'), ICONS.TRANSACTIONS),
-            },
-            {
-              ...buildLink(PAGES.SETTINGS, __('Settings'), ICONS.SETTINGS),
-            },
-          ].map(renderLink)}
         </ul>
-
+        <ul className="navigation__links tags--vertical">
-        <ul className="navigation__links navigation__links--bottom">
+          {followedTags.map(({ name }, key) => (
-          {[
+            <li className="navigation__link--indented" key={name}>
-            {
+              <Tag navigate={`/$/tags?t${name}`} name={name} />
-              ...buildLink(PAGES.HELP, __('Help'), ICONS.HELP),
+            </li>
-            },
+          ))}
-          ].map(renderLink)}
+        </ul>
+        <ul className="navigation__links--small">
+          {subscriptions.map(({ uri, channelName }, index) => (
+            <li key={uri} className="navigation__link--indented">
+              <Button
+                navigate={uri}
+                label={channelName}
+                className="navigation__link"
+                activeClass="navigation__link--active"
+              />
+            </li>
+          ))}
         </ul>
       </nav>
-    );
+    </div>
-  }
+  );
 }
 
 export default SideBar;

src/ui/component/spinner/view.jsx

@@ -66,8 +66,8 @@ class Spinner extends PureComponent<Props, State> {
         className={classnames('spinner', {
           'spinner--dark': !light && (dark || theme === LIGHT_THEME),
           'spinner--light': !dark && (light || theme === DARK_THEME),
-          'spinner--splash': type === 'splash',
           'spinner--small': type === 'small',
+          'spinner--splash': type === 'splash',
         })}
       >
         <div className="rect rect1" />

src/ui/component/subscribeButton/view.jsx

@@ -19,10 +19,9 @@ type Props = {
   doOpenModal: (id: string) => void,
   showSnackBarOnSubscribe: boolean,
   doToast: ({ message: string }) => void,
-  buttonStyle: string,
 };
 
-export default (props: Props) => {
+export default function SubscribeButton(props: Props) {
   const {
     uri,
     doChannelSubscribe,
@@ -32,19 +31,18 @@ export default (props: Props) => {
     isSubscribed,
     showSnackBarOnSubscribe,
     doToast,
-    buttonStyle,
   } = props;
 
   const subscriptionHandler = isSubscribed ? doChannelUnsubscribe : doChannelSubscribe;
-  const subscriptionLabel = isSubscribed ? __('Unsubscribe') : __('Subscribe');
+  const subscriptionLabel = isSubscribed ? __('Subscribed') : __('Subscribe');
 
   const { claimName } = parseURI(uri);
 
   return (
     <Button
       iconColor="red"
-      icon={isSubscribed ? ICONS.UNSUBSCRIBE : ICONS.SUBSCRIPTION}
+      icon={ICONS.SUBSCRIPTION}
-      button={buttonStyle || 'alt'}
+      button={'alt'}
       label={subscriptionLabel}
       onClick={e => {
         e.stopPropagation();
@@ -64,4 +62,4 @@ export default (props: Props) => {
       }}
     />
   );
-};
+}

src/ui/component/subscribeSuggested/index.js

@@ -1,13 +0,0 @@
-import { connect } from 'react-redux';
-import { selectSuggestedChannels, selectIsFetchingSuggested } from 'redux/selectors/subscriptions';
-import SuggestedSubscriptions from './view';
-
-const select = state => ({
-  suggested: selectSuggestedChannels(state),
-  loading: selectIsFetchingSuggested(state),
-});
-
-export default connect(
-  select,
-  null
-)(SuggestedSubscriptions);

src/ui/component/subscribeSuggested/view.jsx

@@ -1,38 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import CategoryList from 'component/categoryList';
-import Spinner from 'component/spinner';
-
-type Props = {
-  suggested: ?Array<{ label: string, uri: string }>,
-  loading: boolean,
-};
-
-class SuggestedSubscriptions extends Component<Props> {
-  shouldComponentUpdate(nextProps: Props) {
-    const { suggested } = this.props;
-    return !suggested && !!nextProps.suggested;
-  }
-
-  render() {
-    const { suggested, loading } = this.props;
-
-    if (loading) {
-      return (
-        <div className="main--empty">
-          <Spinner delayed />
-        </div>
-      );
-    }
-
-    return suggested ? (
-      <div className="card__content subscriptions__suggested main__item--extend-outside">
-        {suggested.map(({ uri, label }) => (
-          <CategoryList key={uri} category={label} categoryLink={uri} />
-        ))}
-      </div>
-    ) : null;
-  }
-}
-
-export default SuggestedSubscriptions;

src/ui/component/tag/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import Tag from './view';
+
+const select = state => ({});
+
+const perform = () => ({});
+
+export default connect(
+  select,
+  perform
+)(Tag);

src/ui/component/tag/view.jsx

@@ -0,0 +1,32 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import classnames from 'classnames';
+import Button from 'component/button';
+
+type Props = {
+  name: string,
+  type?: string,
+  onClick?: any => any,
+  disabled: boolean,
+};
+
+export default function Tag(props: Props) {
+  const { name, onClick, type = 'link', disabled = false } = props;
+
+  const clickProps = onClick ? { onClick } : { navigate: `/$/tags?t=${name}` };
+
+  return (
+    <Button
+      {...clickProps}
+      disabled={disabled}
+      className={classnames('tag', {
+        'tag--add': type === 'add',
+        'tag--remove': type === 'remove',
+      })}
+      label={name}
+      iconSize={12}
+      iconRight={type !== 'link' && (type === 'remove' ? ICONS.CLOSE : ICONS.ADD)}
+    />
+  );
+}

src/ui/component/tagsSearch/index.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import {
+  selectUnfollowedTags,
+  selectFollowedTags,
+  doReplaceTags,
+  doToggleTagFollow,
+  doAddTag,
+  doDeleteTag,
+} from 'lbry-redux';
+import DiscoveryFirstRun from './view';
+
+const select = (state, props) => ({
+  unfollowedTags: selectUnfollowedTags(state),
+  followedTags: selectFollowedTags(state),
+});
+
+export default connect(
+  select,
+  {
+    doToggleTagFollow,
+    doAddTag,
+    doDeleteTag,
+    doReplaceTags,
+  }
+)(DiscoveryFirstRun);

src/ui/component/tagsSearch/view.jsx

@@ -0,0 +1,69 @@
+// @flow
+import React, { useState } from 'react';
+import { useTransition, animated } from 'react-spring';
+import { Form, FormField } from 'component/common/form';
+import Tag from 'component/tag';
+
+const unfollowedTagsAnimation = {
+  from: { opacity: 0 },
+  enter: { opacity: 1, maxWidth: 200 },
+  leave: { opacity: 0, maxWidth: 0 },
+};
+
+type Props = {
+  unfollowedTags: Array<Tag>,
+  followedTags: Array<Tag>,
+  doToggleTagFollow: string => void,
+  doAddTag: string => void,
+};
+
+export default function TagSelect(props: Props) {
+  const { unfollowedTags, followedTags, doToggleTagFollow, doAddTag } = props;
+  const [newTag, setNewTag] = useState('');
+  let tags = unfollowedTags.slice();
+  if (newTag) {
+    tags = [{ name: newTag }, ...tags];
+  }
+  const suggestedTags = tags
+    .filter(({ name }) => (newTag ? name.toLowerCase().includes(newTag.toLowerCase()) : true))
+    .slice(0, 5);
+  const suggestedTransitions = useTransition(suggestedTags, tag => tag.name, unfollowedTagsAnimation);
+
+  function onChange(e) {
+    setNewTag(e.target.value);
+  }
+
+  function handleSubmit() {
+    setNewTag('');
+
+    if (!unfollowedTags.includes(newTag)) {
+      doAddTag(newTag);
+    }
+
+    if (!followedTags.includes(newTag)) {
+      doToggleTagFollow(newTag);
+    }
+  }
+
+  return (
+    <div>
+      <Form onSubmit={handleSubmit}>
+        <FormField
+          label={__('Tags')}
+          onChange={onChange}
+          placeholder={__('Search for more tags')}
+          type="text"
+          value={newTag}
+        />
+      </Form>
+      <ul className="tags">
+        {suggestedTransitions.map(({ item, key, props }) => (
+          <animated.li key={key} style={props}>
+            <Tag name={item.name} type="add" onClick={() => doToggleTagFollow(item.name)} />
+          </animated.li>
+        ))}
+        {!suggestedTransitions.length && <p className="empty tags__empty-message">No suggested tags</p>}
+      </ul>
+    </div>
+  );
+}

src/ui/component/tagsSelect/index.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux';
+import {
+  selectUnfollowedTags,
+  selectFollowedTags,
+  doReplaceTags,
+  doToggleTagFollow,
+  doAddTag,
+  doDeleteTag,
+} from 'lbry-redux';
+import DiscoveryFirstRun from './view';
+
+const select = (state, props) => ({
+  unfollowedTags: selectUnfollowedTags(state),
+  followedTags: selectFollowedTags(state),
+});
+
+export default connect(
+  select,
+  {
+    doToggleTagFollow,
+    doAddTag,
+    doDeleteTag,
+    doReplaceTags,
+  }
+)(DiscoveryFirstRun);

src/ui/component/tagsSelect/view.jsx

@@ -0,0 +1,64 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import React from 'react';
+import Button from 'component/button';
+import Tag from 'component/tag';
+import TagsSearch from 'component/tagsSearch';
+import usePersistedState from 'util/use-persisted-state';
+import { useTransition, animated } from 'react-spring';
+
+type Props = {
+  followedTags: Array<Tag>,
+  showClose: boolean,
+  title: string,
+  doDeleteTag: string => void,
+};
+
+const tagsAnimation = {
+  from: { opacity: 0 },
+  enter: { opacity: 1, maxWidth: 400 },
+  leave: { opacity: 0, maxWidth: 0 },
+};
+
+export default function TagSelect(props: Props) {
+  const { title, followedTags, showClose, doDeleteTag } = props;
+  const [hasClosed, setHasClosed] = usePersistedState('tag-select:has-closed', false);
+
+  function handleClose() {
+    setHasClosed(true);
+  }
+
+  const transitions = useTransition(followedTags.map(tag => tag), tag => tag.name, tagsAnimation);
+
+  return (
+    ((showClose && !hasClosed) || !showClose) && (
+      <div className="card--section">
+        <h2 className="card__title card__title--flex-between">
+          {title}
+          {showClose && !hasClosed && <Button button="close" icon={ICONS.CLOSE} onClick={handleClose} />}
+        </h2>
+        <p className="help">{__("The tags you follow will change what's trending for you.")}</p>
+
+        <div className="card__content">
+          <ul className="tags--remove">
+            {transitions.map(({ item, props, key }) => (
+              <animated.li key={key} style={props}>
+                <Tag
+                  name={item.name}
+                  type="remove"
+                  onClick={() => {
+                    doDeleteTag(item.name);
+                  }}
+                />
+              </animated.li>
+            ))}
+            {!transitions.length && (
+              <div className="card__subtitle">{__("You aren't following any tags, try searching for one.")}</div>
+            )}
+          </ul>
+          <TagsSearch />
+        </div>
+      </div>
+    )
+  );
+}

src/ui/component/transactionList/index.js

@@ -6,6 +6,7 @@ import {
   selectSupportsByOutpoint,
   selectTransactionListFilter,
   doSetTransactionListFilter,
+  selectIsFetchingTransactions,
 } from 'lbry-redux';
 import TransactionList from './view';
 
@@ -14,6 +15,7 @@ const select = state => ({
   mySupports: selectSupportsByOutpoint(state),
   myClaims: selectAllMyClaimsByOutpoint(state),
   filterSetting: selectTransactionListFilter(state),
+  loading: selectIsFetchingTransactions(state),
 });
 
 const perform = dispatch => ({

src/ui/component/transactionList/internal/transaction-list-item.jsx

@@ -73,9 +73,7 @@ class TransactionListItem extends React.PureComponent<Props> {
         <td className="table__item--actionable">
           {reward && <span>{reward.reward_title}</span>}
           {claimName && claimId && (
-            <Button button="link" navigate={buildURI({ claimName: claimName, claimId })}>
+            <Button button="link" navigate={buildURI({ claimName: claimName, claimId })} label={claimName} />
-              {claimName}
-            </Button>
           )}
         </td>
 

src/ui/component/transactionList/view.jsx

@@ -7,17 +7,21 @@ import Button from 'component/button';
 import FileExporter from 'component/common/file-exporter';
 import { TRANSACTIONS } from 'lbry-redux';
 import TransactionListItem from './internal/transaction-list-item';
+import RefreshTransactionButton from 'component/transactionRefreshButton';
+import Spinner from 'component/spinner';
 
 type Props = {
   emptyMessage: ?string,
-  slim?: boolean,
+  filterSetting: string,
-  transactions: Array<Transaction>,
+  loading: boolean,
-  rewards: {},
-  openModal: (id: string, { nout: number, txid: string }) => void,
   mySupports: {},
   myClaims: any,
-  filterSetting: string,
+  openModal: (id: string, { nout: number, txid: string }) => void,
+  rewards: {},
   setTransactionFilter: string => void,
+  slim?: boolean,
+  title: string,
+  transactions: Array<Transaction>,
 };
 
 class TransactionList extends React.PureComponent<Props> {
@@ -53,8 +57,7 @@ class TransactionList extends React.PureComponent<Props> {
   }
 
   render() {
-    const { emptyMessage, rewards, transactions, slim, filterSetting } = this.props;
+    const { emptyMessage, rewards, transactions, slim, filterSetting, title, loading } = this.props;
-
     // The shorter "recent transactions" list shouldn't be filtered
     const transactionList = slim ? transactions : transactions.filter(this.filterTransaction);
 
@@ -65,9 +68,23 @@ class TransactionList extends React.PureComponent<Props> {
 
     return (
       <React.Fragment>
-        <header className="card__header">
+        <header className="table__header">
-          {!slim && !!transactions.length && (
+          <h2 className="card__title card__title--flex-between">
-            <div className="card__actions card__actions--between card__actions--top-space">
+            <span>
+              {title}
+              {loading && <Spinner type="small" />}
+            </span>
+            <div className="card__actions">
+              {slim && (
+                <Button button="link" className="button--alt" navigate="/$/transactions" label={__('Full History')} />
+              )}
+              <RefreshTransactionButton />
+            </div>
+          </h2>
+        </header>
+        {!slim && !!transactions.length && (
+          <header className="card__header table__header">
+            <div className="card__actions card__actions--between">
               <FileExporter
                 data={transactionList}
                 label={__('Export')}
@@ -100,9 +117,12 @@ class TransactionList extends React.PureComponent<Props> {
                 </FormField>
               </Form>
             </div>
-          )}
+          </header>
-        </header>
+        )}
-        {!transactionList.length && <p className="card__subtitle">{emptyMessage || __('No transactions to list.')}</p>}
+
+        {!loading && !transactionList.length && (
+          <p className="main--empty empty">{emptyMessage || __('No transactions.')}</p>
+        )}
 
         {!!transactionList.length && (
           <React.Fragment>

src/ui/component/transactionListRecent/index.js

@@ -1,17 +1,9 @@
 import { connect } from 'react-redux';
-import {
+import { doFetchTransactions, selectRecentTransactions, doFetchClaimListMine } from 'lbry-redux';
-  doFetchTransactions,
-  selectRecentTransactions,
-  selectHasTransactions,
-  selectIsFetchingTransactions,
-  doFetchClaimListMine,
-} from 'lbry-redux';
 import TransactionListRecent from './view';
 
 const select = state => ({
-  fetchingTransactions: selectIsFetchingTransactions(state),
   transactions: selectRecentTransactions(state),
-  hasTransactions: selectHasTransactions(state),
 });
 
 const perform = dispatch => ({

src/ui/component/transactionListRecent/view.jsx

@@ -1,10 +1,6 @@
 // @flow
-import * as icons from 'constants/icons';
+import React from 'react';
-import React, { Fragment } from 'react';
-import BusyIndicator from 'component/common/busy-indicator';
-import Button from 'component/button';
 import TransactionList from 'component/transactionList';
-import RefreshTransactionButton from 'component/transactionRefreshButton';
 
 type Props = {
   fetchTransactions: () => void,
@@ -23,42 +19,15 @@ class TransactionListRecent extends React.PureComponent<Props> {
   }
 
   render() {
-    const { fetchingTransactions, hasTransactions, transactions } = this.props;
+    const { transactions } = this.props;
     return (
-      <section className="card card--section">
+      <section className="card card__content">
-        <header className="card__header card__header--flat">
+        <TransactionList
-          <h2 className="card__title card__title--flex-between">
+          slim
-            {__('Recent Transactions')}
+          title={__('Recent Transactions')}
-            <RefreshTransactionButton />
+          transactions={transactions}
-          </h2>
+          emptyMessage={__("Looks like you don't have any recent transactions.")}
-        </header>
+        />
-
-        {fetchingTransactions && !hasTransactions && (
-          <div className="card__content">
-            <BusyIndicator message={__('Loading transactions')} />
-          </div>
-        )}
-
-        {!fetchingTransactions && !hasTransactions && (
-          <div className="card__content">
-            <p className="card__subtitle">{__('No transactions... yet.')}</p>
-          </div>
-        )}
-
-        {hasTransactions && (
-          <Fragment>
-            <div className="card__content">
-              <TransactionList
-                slim
-                transactions={transactions}
-                emptyMessage={__("Looks like you don't have any recent transactions.")}
-              />
-            </div>
-            <div className="card__actions">
-              <Button button="primary" navigate="/$/transactions" label={__('Full History')} icon={icons.HISTORY} />
-            </div>
-          </Fragment>
-        )}
       </section>
     );
   }

src/ui/component/uriIndicator/view.jsx

@@ -7,8 +7,7 @@ type Props = {
   isResolvingUri: boolean,
   channelUri: ?string,
   link: ?boolean,
-  claim: ?StreamClaim,
+  claim: ?Claim,
-  channelClaim: ?ChannelClaim,
   // Lint thinks we aren't using these, even though we are.
   // Possibly because the resolve function is an arrow function that is passed in props?
   resolveUri: string => void,
@@ -16,12 +15,12 @@ type Props = {
 };
 
 class UriIndicator extends React.PureComponent<Props> {
-  componentWillMount() {
+  componentDidMount() {
     this.resolve(this.props);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate() {
-    this.resolve(nextProps);
+    this.resolve(this.props);
   }
 
   resolve = (props: Props) => {
@@ -39,27 +38,35 @@ class UriIndicator extends React.PureComponent<Props> {
       return <span className="empty">{isResolvingUri ? 'Validating...' : 'Unused'}</span>;
     }
 
-    if (!claim.signing_channel) {
+    const isChannelClaim = claim.value_type === 'channel';
+
+    if (!claim.signing_channel && !isChannelClaim) {
       return <span className="channel-name">Anonymous</span>;
     }
 
-    const { name, claim_id: claimId } = claim.signing_channel;
+    const channelClaim = isChannelClaim ? claim : claim.signing_channel;
-    let channelLink;
+
-    if (claim.is_channel_signature_valid) {
+    if (channelClaim) {
-      channelLink = link ? buildURI({ channelName: name, claimId }) : false;
+      const { name, claim_id: claimId } = channelClaim;
+      let channelLink;
+      if (claim.is_channel_signature_valid) {
+        channelLink = link ? buildURI({ channelName: name, claimId }) : false;
+      }
+
+      const inner = <span className="channel-name">{name}</span>;
+
+      if (!channelLink) {
+        return inner;
+      }
+
+      return (
+        <Button className="button--uri-indicator" navigate={channelLink}>
+          {inner}
+        </Button>
+      );
+    } else {
+      return null;
     }
-
-    const inner = <span className="channel-name">{name}</span>;
-
-    if (!channelLink) {
-      return inner;
-    }
-
-    return (
-      <Button className="button--uri-indicator" navigate={channelLink}>
-        {inner}
-      </Button>
-    );
   }
 }
 

src/ui/component/userEmail/index.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { selectEmailToVerify, doUserResendVerificationEmail, doUserCheckEmailVerified, selectUser } from 'lbryinc';
+import UserEmailVerify from './view';
+
+const select = state => ({
+  email: selectEmailToVerify(state),
+  user: selectUser(state),
+});
+
+const perform = dispatch => ({
+  resendVerificationEmail: email => dispatch(doUserResendVerificationEmail(email)),
+  checkEmailVerified: () => dispatch(doUserCheckEmailVerified()),
+});
+
+export default connect(
+  select,
+  perform
+)(UserEmailVerify);

src/ui/component/userEmail/view.jsx

@@ -0,0 +1,60 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/button';
+import { FormField } from 'component/common/form';
+import UserEmailNew from 'component/userEmailNew';
+import UserEmailVerify from 'component/userEmailVerify';
+
+type Props = {
+  cancelButton: React.Node,
+  email: string,
+  resendVerificationEmail: string => void,
+  checkEmailVerified: () => void,
+  user: {
+    has_verified_email: boolean,
+  },
+};
+
+function UserEmail(props: Props) {
+  const { email, user } = props;
+  let isVerified = false;
+  if (user) {
+    isVerified = user.has_verified_email;
+  }
+
+  return (
+    <section className="card card--section">
+      {!email && <UserEmailNew />}
+      {user && email && !isVerified && <UserEmailVerify />}
+      {email && isVerified && (
+        <React.Fragment>
+          <div className="card__header">
+            <h2 className="card__title">{__('Email')}</h2>
+            <p className="card__subtitle">
+              {email && isVerified && __('Your email has been successfully verified')}
+              {!email && __('')}.
+            </p>
+          </div>
+
+          {isVerified && (
+            <FormField
+              type="text"
+              className="form-field--copyable"
+              readOnly
+              label={__('Your Email')}
+              value={email}
+              inputButton={<Button button="inverse" label={__('Change')} />}
+            />
+          )}
+          <p className="help">
+            {`${__(
+              'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards.'
+            )} `}
+          </p>
+        </React.Fragment>
+      )}
+    </section>
+  );
+}
+
+export default UserEmail;

src/ui/component/userEmailVerify/view.jsx

@@ -56,7 +56,7 @@ class UserEmailVerify extends React.PureComponent<Props> {
         </header>
 
         <div className="card__content">
-          <p>
+          <p className="card__subtitle">
             {__('An email was sent to')} {email}.{' '}
             {__('Follow the link and you will be good to go. This will update automatically.')}
           </p>

src/ui/component/walletAddress/view.jsx

@@ -1,5 +1,4 @@
 // @flow
-import * as icons from 'constants/icons';
 import React from 'react';
 import Button from 'component/button';
 import CopyableText from 'component/copyableText';
@@ -27,7 +26,7 @@ class WalletAddress extends React.PureComponent<Props, State> {
     (this: any).toggleQR = this.toggleQR.bind(this);
   }
 
-  componentWillMount() {
+  componentDidMount() {
     const { checkAddressIsMine, receiveAddress, getNewAddress } = this.props;
     if (!receiveAddress) {
       getNewAddress();
@@ -62,9 +61,8 @@ class WalletAddress extends React.PureComponent<Props, State> {
         <div className="card__content">
           <div className="card__actions">
             <Button
-              button="primary"
+              button="inverse"
               label={__('Get New Address')}
-              icon={icons.REFRESH}
               onClick={getNewAddress}
               disabled={gettingNewAddress}
             />

src/ui/component/walletBalance/view.jsx

@@ -19,7 +19,9 @@ const WalletBalance = (props: Props) => {
       </header>
       <div className="card__content">
         <h3>{__('You currently have')}</h3>
-        {(balance || balance === 0) && <CreditAmount large badge={false} amount={balance} precision={8} />}
+        <span className="card__content--large">
+          {(balance || balance === 0) && <CreditAmount badge={false} amount={balance} precision={8} />}
+        </span>
       </div>
     </section>
   );

src/ui/component/walletSend/view.jsx

@@ -1,6 +1,6 @@
 // @flow
-import React from 'react';
 import * as MODALS from 'constants/modal_types';
+import React from 'react';
 import Button from 'component/button';
 import { Form, FormField } from 'component/common/form';
 import { Formik } from 'formik';
@@ -82,7 +82,7 @@ class WalletSend extends React.PureComponent<Props> {
               </div>
               <div className="card__actions">
                 <Button
-                  button="primary"
+                  button="inverse"
                   type="submit"
                   label={__('Send')}
                   disabled={

src/ui/constants/action_types.js

@@ -18,7 +18,6 @@ export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';
 export const CHANGE_MODALS_ALLOWED = 'CHANGE_MODALS_ALLOWED';
 export const TOGGLE_SEARCH_EXPANDED = 'TOGGLE_SEARCH_EXPANDED';
-export const ENNNHHHAAANNNCEEE = 'ENNNHHHAAANNNCEEE';
 
 // Navigation
 export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH';
@@ -193,8 +192,6 @@ export const SET_VIEW_MODE = 'SET_VIEW_MODE';
 export const GET_SUGGESTED_SUBSCRIPTIONS_START = 'GET_SUGGESTED_SUBSCRIPTIONS_START';
 export const GET_SUGGESTED_SUBSCRIPTIONS_SUCCESS = 'GET_SUGGESTED_SUBSCRIPTIONS_SUCCESS';
 export const GET_SUGGESTED_SUBSCRIPTIONS_FAIL = 'GET_SUGGESTED_SUBSCRIPTIONS_FAIL';
-export const SUBSCRIPTION_FIRST_RUN_COMPLETED = 'SUBSCRIPTION_FIRST_RUN_COMPLETED';
-export const VIEW_SUGGESTED_SUBSCRIPTIONS = 'VIEW_SUGGESTED_SUBSCRIPTIONS';
 
 // Publishing
 export const CLEAR_PUBLISH = 'CLEAR_PUBLISH';

src/ui/constants/icons.js

@@ -13,6 +13,7 @@ export const DOWNLOAD = 'Download';
 export const UPLOAD = 'UploadCloud';
 export const PUBLISHED = 'Cloud';
 export const CLOSE = 'X';
+export const ADD = 'Plus';
 export const EDIT = 'Edit3';
 export const DELETE = 'Trash';
 export const REPORT = 'Flag';
@@ -23,6 +24,8 @@ export const CHANNEL = 'AtSign';
 export const REFRESH = 'RefreshCw';
 export const HISTORY = 'Clock';
 export const HOME = 'Home';
+export const OVERVIEW = 'Activity';
+export const WALLET = 'List';
 export const PHONE = 'Phone';
 export const COMPLETE = 'Check';
 export const COMPLETED = 'CheckCircle';
@@ -64,3 +67,6 @@ export const MUSIC_ALBUM = 'Disc';
 export const MUSIC_ARTIST = 'Mic';
 export const MUSIC_SONG = 'Music';
 export const MUSIC_EQUALIZER = 'Sliders';
+export const LIGHT = 'Sun';
+export const DARK = 'Moon';
+export const AUTO = 'Clock';

src/ui/constants/pages.js

@@ -4,7 +4,7 @@ export const CHANNEL = 'channel';
 export const DISCOVER = 'discover';
 export const DOWNLOADED = 'downloaded';
 export const HELP = 'help';
-export const HISTORY = 'history';
+export const LIBRARY = 'library';
 export const INVITE = 'invite';
 export const PUBLISH = 'publish';
 export const PUBLISHED = 'published';
@@ -18,3 +18,5 @@ export const ACCOUNT = 'account';
 export const SUBSCRIPTIONS = 'subscriptions';
 export const SEARCH = 'search';
 export const TRANSACTIONS = 'transactions';
+export const TAGS = 'tags';
+export const WALLET = 'wallet';

src/ui/constants/settings.js

@@ -3,7 +3,6 @@
 export const CREDIT_REQUIRED_ACKNOWLEDGED = 'credit_required_acknowledged';
 export const NEW_USER_ACKNOWLEDGED = 'welcome_acknowledged';
 export const EMAIL_COLLECTION_ACKNOWLEDGED = 'email_collection_acknowledged';
-export const FIRST_RUN_COMPLETED = 'first_run_completed';
 export const INVITE_ACKNOWLEDGED = 'invite_acknowledged';
 export const LANGUAGE = 'language';
 export const SHOW_NSFW = 'showNsfw';

src/ui/constants/tags.js

@@ -0,0 +1,14 @@
+export const defaultFollowedTags = [
+  'blockchain',
+  'news',
+  'learning',
+  'technology',
+  'automotive',
+  'economics',
+  'food',
+  'science',
+  'art',
+  'nature',
+];
+
+export const defaultKnownTags = ['beliefs', 'funny', 'gaming', 'pop culture', 'music', 'sports', 'weapons'];

src/ui/modal/modal.jsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import ReactModal from 'react-modal';
 import Button from 'component/button';
-import app from 'app';
 import classnames from 'classnames';
 
 type ModalProps = {
@@ -20,7 +19,6 @@ type ModalProps = {
   extraContent?: React.Node,
   expandButtonLabel?: string,
   hideButtonLabel?: string,
-  fullScreen: boolean,
   title?: string | React.Node,
 };
 
@@ -32,7 +30,6 @@ export class Modal extends React.PureComponent<ModalProps> {
     abortButtonLabel: __('Cancel'),
     confirmButtonDisabled: false,
     abortButtonDisabled: false,
-    fullScreen: false,
   };
 
   render() {
@@ -45,7 +42,6 @@ export class Modal extends React.PureComponent<ModalProps> {
       abortButtonLabel,
       abortButtonDisabled,
       onAborted,
-      fullScreen,
       className,
       title,
       ...modalProps
@@ -54,10 +50,7 @@ export class Modal extends React.PureComponent<ModalProps> {
       <ReactModal
         {...modalProps}
         onRequestClose={onAborted || onConfirmed}
-        className={classnames('card', className, {
+        className={classnames('card card--modal modal', className)}
-          modal: !fullScreen,
-          'modal--fullscreen': fullScreen,
-        })}
         overlayClassName="modal-overlay"
       >
         {title && (

src/ui/modal/modalAffirmPurchase/view.jsx

@@ -40,7 +40,7 @@ class ModalAffirmPurchase extends React.PureComponent<Props> {
         onAborted={cancelPurchase}
       >
         <section className="card__content">
-          <p>
+          <p className="card__subtitle">
             {__('This will purchase')} <strong>{title ? `"${title}"` : uri}</strong> {__('for')}{' '}
             <strong>
               <FilePrice uri={uri} showFullPrice inheritStyle showLBC={false} />

src/ui/modal/modalAutoGenerateThumbnail/view.jsx

@@ -50,8 +50,6 @@ function ModalAutoGenerateThumbnail(props: Props) {
       return;
     }
 
-    console.log('resized');
-
     const fixedWidth = 450;
     const videoWidth = player.videoWidth;
     const videoHeight = player.videoHeight;

src/ui/page/account/index.js

@@ -1,3 +1,9 @@
-import WalletPage from './view';
+import { connect } from 'react-redux';
+import AccountPage from './view';
 
-export default WalletPage;
+const select = state => ({});
+
+export default connect(
+  select,
+  null
+)(AccountPage);

src/ui/page/account/view.jsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import classnames from 'classnames';
-import WalletBalance from 'component/walletBalance';
 import RewardSummary from 'component/rewardSummary';
-import TransactionListRecent from 'component/transactionListRecent';
+import RewardTotal from 'component/rewardTotal';
-import WalletAddress from 'component/walletAddress';
 import Page from 'component/page';
 import UnsupportedOnWeb from 'component/common/unsupported-on-web';
-import WalletSend from 'component/walletSend';
+import UserEmail from 'component/userEmail';
+import InvitePage from 'page/invite';
 
 const WalletPage = () => (
   <Page>
     {IS_WEB && <UnsupportedOnWeb />}
     <div className={classnames({ 'card--disabled': IS_WEB })}>
       <div className="columns">
-        <WalletBalance />
+        <UserEmail />
-        <RewardSummary />
+        <div>
+          <RewardSummary />
+          <RewardTotal />
+        </div>
       </div>
-      <TransactionListRecent />
+      <InvitePage />
     </div>
   </Page>
 );

src/ui/page/auth/index.js

@@ -1,19 +1,10 @@
 import { connect } from 'react-redux';
-import {
+import { selectEmailToVerify, selectUser } from 'lbryinc';
-  selectAuthenticationIsPending,
-  selectEmailToVerify,
-  selectUserIsVerificationCandidate,
-  selectUser,
-  selectUserIsPending,
-  selectIdentityVerifyIsPending,
-} from 'lbryinc';
 import AuthPage from './view';
 
 const select = state => ({
-  isPending: selectAuthenticationIsPending(state) || selectUserIsPending(state) || selectIdentityVerifyIsPending(state),
   email: selectEmailToVerify(state),
   user: selectUser(state),
-  isVerificationCandidate: selectUserIsVerificationCandidate(state),
 });
 
 export default connect(

src/ui/page/auth/view.jsx

@@ -1,16 +1,12 @@
 // @flow
 import React from 'react';
-import BusyIndicator from 'component/common/busy-indicator';
+import UserEmail from 'component/userEmail';
-import Button from 'component/button';
-import UserEmailNew from 'component/userEmailNew';
-import UserEmailVerify from 'component/userEmailVerify';
 import UserVerify from 'component/userVerify';
 import Page from 'component/page';
 
 type Props = {
   isPending: boolean,
   email: string,
-  pathAfterAuth: string,
   location: UrlLocation,
   history: { push: string => void },
   user: ?{
@@ -21,12 +17,12 @@ type Props = {
 };
 
 class AuthPage extends React.PureComponent<Props> {
-  componentWillMount() {
+  componentDidMount() {
     this.navigateIfAuthenticated(this.props);
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentDidUpdate() {
-    this.navigateIfAuthenticated(nextProps);
+    this.navigateIfAuthenticated(this.props);
   }
 
   navigateIfAuthenticated = (props: Props) => {
@@ -40,42 +36,9 @@ class AuthPage extends React.PureComponent<Props> {
     }
   };
 
-  renderMain() {
-    const { email, isPending, user } = this.props;
-
-    if (isPending) {
-      return [<BusyIndicator message={__('Authenticating')} />, true];
-    } else if (user && !user.has_verified_email && !email) {
-      return [<UserEmailNew />, true];
-    } else if (user && !user.has_verified_email) {
-      return [<UserEmailVerify />, true];
-    } else if (user && !user.is_identity_verified) {
-      return [<UserVerify />, false];
-    }
-    return [<span className="empty">{__('No further steps.')}</span>, true];
-  }
-
   render() {
-    const [innerContent, useTemplate] = this.renderMain();
+    const { user, email } = this.props;
-
+    return <Page>{user && email && !user.is_identity_verified ? <UserVerify /> : <UserEmail />}</Page>;
-    return (
-      <Page>
-        {useTemplate ? (
-          <section className="card card--section">
-            {innerContent}
-
-            <p className="help">
-              {`${__(
-                'This information is disclosed only to LBRY, Inc. and not to the LBRY network. It is only required to earn LBRY rewards and may be used to sync usage data across devices.'
-              )} `}
-              <Button button="link" navigate="/" label={__('Return home.')} />
-            </p>
-          </section>
-        ) : (
-          innerContent
-        )}
-      </Page>
-    );
   }
 }
 

src/ui/page/channel/view.jsx

@@ -49,42 +49,44 @@ function ChannelPage(props: Props) {
   };
 
   return (
-    <Page notContained className="main--no-padding-top">
+    <Page>
-      <header className="channel-cover main__item--extend-outside">
+      <div className="card">
-        {cover && <img className="channel-cover__custom" src={cover} />}
+        <header className="channel-cover">
+          {cover && <img className="channel-cover__custom" src={cover} />}
 
-        <div className="channel__primary-info">
+          <div className="channel__primary-info">
-          <ChannelThumbnail uri={uri} />
+            <ChannelThumbnail className="channel__thumbnail--channel-page" uri={uri} />
 
-          <div>
+            <div>
-            <h1 className="channel__title">{title || channelName}</h1>
+              <h1 className="channel__title">{title || channelName}</h1>
-            <h2 className="channel__url">
+              <h2 className="channel__url">
-              {claimName}
+                {claimName}
-              {claimId && `#${claimId}`}
+                {claimId && `#${claimId}`}
-            </h2>
+              </h2>
+            </div>
           </div>
-        </div>
+        </header>
-      </header>
 
-      <Tabs onChange={onTabChange} index={tabIndex}>
+        <Tabs onChange={onTabChange} index={tabIndex}>
-        <TabList className="main__item--extend-outside tabs__list--channel-page">
+          <TabList className="tabs__list--channel-page">
-          <Tab>{__('Content')}</Tab>
+            <Tab>{__('Content')}</Tab>
-          <Tab>{__('About')}</Tab>
+            <Tab>{__('About')}</Tab>
-          <div className="card__actions">
+            <div className="card__actions">
-            <ShareButton uri={uri} />
+              <ShareButton uri={uri} />
-            <SubscribeButton uri={uri} />
+              <SubscribeButton uri={uri} />
-          </div>
+            </div>
-        </TabList>
+          </TabList>
 
-        <TabPanels>
+          <TabPanels className="channel__data">
-          <TabPanel>
+            <TabPanel>
-            <ChannelContent uri={uri} />
+              <ChannelContent uri={uri} />
-          </TabPanel>
+            </TabPanel>
-          <TabPanel>
+            <TabPanel>
-            <ChannelAbout uri={uri} />
+              <ChannelAbout uri={uri} />
-          </TabPanel>
+            </TabPanel>
-        </TabPanels>
+          </TabPanels>
-      </Tabs>
+        </Tabs>
+      </div>
     </Page>
   );
 }

src/ui/page/discover/index.js

@@ -1,23 +1,12 @@
 import { connect } from 'react-redux';
-import {
+import { selectFollowedTags } from 'lbry-redux';
-  doFetchRewardedContent,
-  doRewardList,
-  selectFeaturedUris,
-  doFetchFeaturedUris,
-  selectFetchingFeaturedUris,
-} from 'lbryinc';
 import DiscoverPage from './view';
 
 const select = state => ({
-  featuredUris: selectFeaturedUris(state),
+  followedTags: selectFollowedTags(state),
-  fetchingFeaturedUris: selectFetchingFeaturedUris(state),
 });
 
-const perform = dispatch => ({
+const perform = {};
-  fetchFeaturedUris: () => dispatch(doFetchFeaturedUris()),
-  fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
-  fetchRewards: () => dispatch(doRewardList()),
-});
 
 export default connect(
   select,

src/ui/page/discover/view.jsx

@@ -1,82 +1,24 @@
 // @flow
 import React from 'react';
+import ClaimListDiscover from 'component/claimListDiscover';
+import TagsSelect from 'component/tagsSelect';
 import Page from 'component/page';
-import CategoryList from 'component/categoryList';
-import FirstRun from 'component/firstRun';
 
 type Props = {
-  fetchFeaturedUris: () => void,
+  followedTags: Array<Tag>,
-  fetchRewardedContent: () => void,
-  fetchRewards: () => void,
-  fetchingFeaturedUris: boolean,
-  featuredUris: {},
 };
 
-class DiscoverPage extends React.PureComponent<Props> {
+function DiscoverPage(props: Props) {
-  constructor() {
+  const { followedTags } = props;
-    super();
+  return (
-    this.continousFetch = undefined;
+    <Page>
-  }
+      <ClaimListDiscover
-
+        personal
-  componentDidMount() {
+        tags={followedTags.map(tag => tag.name)}
-    const { fetchFeaturedUris, fetchRewardedContent, fetchRewards } = this.props;
+        injectedItem={<TagsSelect showClose title={__('Make This Your Own')} />}
-    fetchFeaturedUris();
+      />
-    fetchRewardedContent();
+    </Page>
-
+  );
-    this.continousFetch = setInterval(() => {
-      fetchFeaturedUris();
-      fetchRewardedContent();
-      fetchRewards();
-    }, 1000 * 60 * 60);
-  }
-
-  componentWillUnmount() {
-    this.clearContinuousFetch();
-  }
-
-  getCategoryLinkPartByCategory(category: string) {
-    const channelName = category.substr(category.indexOf('@'));
-    if (!channelName.includes('#')) {
-      return null;
-    }
-    return channelName;
-  }
-
-  trimClaimIdFromCategory(category: string) {
-    return category.split('#')[0];
-  }
-
-  continousFetch: ?IntervalID;
-
-  clearContinuousFetch() {
-    if (this.continousFetch) {
-      clearInterval(this.continousFetch);
-      this.continousFetch = null;
-    }
-  }
-
-  render() {
-    const { featuredUris, fetchingFeaturedUris } = this.props;
-    const hasContent = typeof featuredUris === 'object' && Object.keys(featuredUris).length;
-    const failedToLoad = !fetchingFeaturedUris && !hasContent;
-
-    return (
-      <Page notContained isLoading={!hasContent && fetchingFeaturedUris} className="main--no-padding">
-        <FirstRun />
-        {hasContent &&
-          Object.keys(featuredUris).map(category => (
-            <CategoryList
-              lazyLoad
-              key={category}
-              category={this.trimClaimIdFromCategory(category)}
-              uris={featuredUris[category]}
-              categoryLink={this.getCategoryLinkPartByCategory(category)}
-            />
-          ))}
-        {failedToLoad && <div className="empty">{__('Failed to load landing content.')}</div>}
-      </Page>
-    );
-  }
 }
 
 export default DiscoverPage;

src/ui/page/file/view.jsx

@@ -19,6 +19,7 @@ import FileDownloadLink from 'component/fileDownloadLink';
 import classnames from 'classnames';
 import getMediaType from 'util/get-media-type';
 import RecommendedContent from 'component/recommendedContent';
+import ClaimTags from 'component/claimTags';
 
 type Props = {
   claim: StreamClaim,
@@ -67,6 +68,8 @@ class FilePage extends React.Component<Props> {
     (this: any).viewerContainer = React.createRef();
   }
 
+  viewerContainer: { current: React.ElementRef<any> };
+
   componentDidMount() {
     const {
       uri,
@@ -108,15 +111,15 @@ class FilePage extends React.Component<Props> {
       fetchViewCount(claim.claim_id);
     }
 
+    if (prevProps.uri !== uri) {
+      setViewed(uri);
+    }
+
     // @if TARGET='app'
     if (fileInfo === undefined) {
       fetchFileInfo(uri);
     }
     // @endif
-
-    if (prevProps.uri !== uri) {
-      setViewed(uri);
-    }
   }
 
   removeFromSubscriptionNotifications() {
@@ -148,7 +151,8 @@ class FilePage extends React.Component<Props> {
     } = this.props;
 
     // File info
-    const { channel_name: channelName } = claim;
+    const { signing_channel: signingChannel } = claim;
+    const channelName = signingChannel && signingChannel.name;
     const { PLAYABLE_MEDIA_TYPES, PREVIEW_MEDIA_TYPES } = FilePage;
     const isRewardContent = (rewardedContentClaimIds || []).includes(claim.claim_id);
     const shouldObscureThumbnail = obscureNsfw && nsfw;
@@ -179,23 +183,12 @@ class FilePage extends React.Component<Props> {
     const insufficientCredits = !claimIsMine && costInfo && costInfo.cost > balance;
 
     return (
-      <Page notContained className="main--file-page">
+      <Page className="main--file-page">
-        <div className="grid-area--content">
+        <div className="grid-area--content card">
-          <Button
-            className="media__uri"
-            button="alt"
-            label={uri}
-            onClick={() => {
-              clipboard.writeText(uri);
-              showToast({
-                message: __('Text copied'),
-              });
-            }}
-          />
           {!fileInfo && insufficientCredits && (
             <div className="media__insufficient-credits help--warning">
               {__(
-                'The publisher has chosen to charge LBC to view this content. Your balance is currently to low to view it.'
+                'The publisher has chosen to charge LBC to view this content. Your balance is currently too low to view it.'
               )}{' '}
               {__('Checkout')} <Button button="link" navigate="/$/rewards" label={__('the rewards page')} />{' '}
               {__('or send more LBC to your wallet.')}
@@ -228,22 +221,6 @@ class FilePage extends React.Component<Props> {
         <div className="grid-area--info media__content media__content--large">
           <h1 className="media__title media__title--large">{title}</h1>
 
-          <div className="media__properties media__properties--large">
-            {isRewardContent && (
-              <Icon
-                size={20}
-                iconColor="red"
-                icon={icons.FEATURED}
-                // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
-                // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
-                // https://spee.ch/4/overflow-issue
-                // tooltip="bottom"
-              />
-            )}
-            {nsfw && <div className="badge badge--nsfw">MATURE</div>}
-            <FilePrice badge uri={normalizeURI(uri)} />
-          </div>
-
           <div className="media__actions media__actions--between">
             <div className="media__subtext media__subtext--large">
               <div className="media__subtitle__channel">
@@ -303,11 +280,42 @@ class FilePage extends React.Component<Props> {
             </div>
           </div>
 
+          <div className="media__info--large">
+            <ClaimTags uri={uri} type="large" />
+          </div>
           <div className="media__info--large">
             <FileDetails uri={uri} />
           </div>
         </div>
         <div className="grid-area--related">
+          <div className="media__uri-wrapper">
+            <Button
+              className="media__uri"
+              button="alt"
+              label={uri}
+              onClick={() => {
+                clipboard.writeText(uri);
+                showToast({
+                  message: __('Copied'),
+                });
+              }}
+            />
+            <div className="file-properties">
+              {isRewardContent && (
+                <Icon
+                  size={20}
+                  iconColor="red"
+                  icon={icons.FEATURED}
+                  // Figure out how to get the tooltip to overlap the navbar on the file page and I will love you
+                  // https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
+                  // https://spee.ch/4/overflow-issue
+                  // tooltip="bottom"
+                />
+              )}
+              {nsfw && <div className="badge badge--nsfw">MATURE</div>}
+              <FilePrice badge uri={normalizeURI(uri)} />
+            </div>
+          </div>
           <RecommendedContent uri={uri} />
         </div>
       </Page>

src/ui/page/fileListDownloaded/index.js

@@ -1,17 +1,10 @@
 import { connect } from 'react-redux';
-import {
+import { selectDownloadedUris, selectIsFetchingFileList } from 'lbry-redux';
-  selectFileInfosDownloaded,
-  selectMyClaimsWithoutChannels,
-  selectIsFetchingFileList,
-  selectFileListDownloadedSort,
-} from 'lbry-redux';
 import FileListDownloaded from './view';
 
 const select = state => ({
-  fileInfos: selectFileInfosDownloaded(state),
+  downloadedUris: selectDownloadedUris(state),
   fetching: selectIsFetchingFileList(state),
-  claims: selectMyClaimsWithoutChannels(state),
-  sortBy: selectFileListDownloadedSort(state),
 });
 
 export default connect(

src/ui/page/fileListDownloaded/view.jsx

@@ -1,45 +1,42 @@
 // @flow
 import React from 'react';
 import Button from 'component/button';
-import FileList from 'component/fileList';
+import ClaimList from 'component/claimList';
-import Page from 'component/page';
-import { PAGES } from 'lbry-redux';
 
 type Props = {
   fetching: boolean,
-  fileInfos: {},
+  downloadedUris: Array<string>,
-  sortBy: string,
 };
 
-class FileListDownloaded extends React.PureComponent<Props> {
+function FileListDownloaded(props: Props) {
-  render() {
+  const { fetching, downloadedUris } = props;
-    const { fetching, fileInfos, sortBy } = this.props;
+  const hasDownloads = !!downloadedUris.length;
-    const hasDownloads = fileInfos && Object.values(fileInfos).length > 0;
 
-    return (
+  return (
-      // Removed the <Page> wapper to try combining this page with UserHistory
+    // Removed the <Page> wapper to try combining this page with UserHistory
-      // This should eventually move into /components if we want to keep it this way
+    // This should eventually move into /components if we want to keep it this way
-      <React.Fragment>
+    <React.Fragment>
-        {hasDownloads ? (
+      {hasDownloads ? (
-          <FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} />
+        <div className="card">
-        ) : (
+          <ClaimList persistedStorageKey="claim-list-downloaded" uris={downloadedUris} loading={fetching} />
-          <div className="main--empty">
+        </div>
-            <section className="card card--section">
+      ) : (
-              <header className="card__header">
+        <div className="main--empty">
-                <h2 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h2>
+          <section className="card card--section">
-              </header>
+            <header className="card__header">
+              <h2 className="card__title">{__("You haven't downloaded anything from LBRY yet.")}</h2>
+            </header>
 
-              <div className="card__content">
+            <div className="card__content">
-                <div className="card__actions card__actions--center">
+              <div className="card__actions card__actions--center">
-                  <Button button="primary" navigate="/" label={__('Explore new content')} />
+                <Button button="primary" navigate="/" label={__('Explore new content')} />
-                </div>
               </div>
-            </section>
+            </div>
-          </div>
+          </section>
-        )}
+        </div>
-      </React.Fragment>
+      )}
-    );
+    </React.Fragment>
-  }
+  );
 }
 
 export default FileListDownloaded;

src/ui/page/fileListPublished/index.js

@@ -1,12 +1,11 @@
 import { connect } from 'react-redux';
-import { selectIsFetchingClaimListMine, selectFileListPublishedSort, selectMyClaimsWithoutChannels } from 'lbry-redux';
+import { selectIsFetchingClaimListMine, selectMyClaimUrisWithoutChannels } from 'lbry-redux';
 import { doCheckPendingPublishes } from 'redux/actions/publish';
 import FileListPublished from './view';
 
 const select = state => ({
-  claims: selectMyClaimsWithoutChannels(state),
+  uris: selectMyClaimUrisWithoutChannels(state),
   fetching: selectIsFetchingClaimListMine(state),
-  sortBy: selectFileListPublishedSort(state),
 });
 
 const perform = dispatch => ({

src/ui/page/fileListPublished/view.jsx

@@ -1,47 +1,45 @@
 // @flow
-import React from 'react';
+import React, { useEffect } from 'react';
 import Button from 'component/button';
-import FileList from 'component/fileList';
+import ClaimList from 'component/claimList';
 import Page from 'component/page';
-import { PAGES } from 'lbry-redux';
 
 type Props = {
-  claims: Array<StreamClaim>,
+  uris: Array<string>,
   checkPendingPublishes: () => void,
   fetching: boolean,
-  sortBy: string,
 };
 
-class FileListPublished extends React.PureComponent<Props> {
+function FileListPublished(props: Props) {
-  componentDidMount() {
+  const { checkPendingPublishes, fetching, uris } = props;
-    const { checkPendingPublishes } = this.props;
+
+  useEffect(() => {
     checkPendingPublishes();
-  }
+  }, [checkPendingPublishes]);
 
-  render() {
+  return (
-    const { fetching, claims, sortBy } = this.props;
+    <Page notContained>
-    return (
+      {uris && uris.length ? (
-      <Page notContained loading={fetching}>
+        <div className="card">
-        {claims && claims.length ? (
+          <ClaimList loading={fetching} persistedStorageKey="claim-list-published" uris={uris} />
-          <FileList checkPending fileInfos={claims} sortByHeight sortBy={sortBy} page={PAGES.PUBLISHED} />
+        </div>
-        ) : (
+      ) : (
-          <div className="main--empty">
+        <div className="main--empty">
-            <section className="card card--section">
+          <section className="card card--section">
-              <header className="card__header">
+            <header className="card__header">
-                <h2 className="card__title">{__("It looks like you haven't published anything to LBRY yet.")}</h2>
+              <h2 className="card__title">{__("It looks like you haven't published anything to LBRY yet.")}</h2>
-              </header>
+            </header>
 
-              <div className="card__content">
+            <div className="card__content">
-                <div className="card__actions card__actions--center">
+              <div className="card__actions card__actions--center">
-                  <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
+                <Button button="primary" navigate="/$/publish" label={__('Publish something new')} />
-                </div>
               </div>
-            </section>
+            </div>
-          </div>
+          </section>
-        )}
+        </div>
-      </Page>
+      )}
-    );
+    </Page>
-  }
+  );
 }
 
 export default FileListPublished;

src/ui/page/help/view.jsx

@@ -130,7 +130,7 @@ class HelpPage extends React.PureComponent<Props, State> {
 
           <div className="card__content">
             <div className="card__actions">
-              <Button href="https://lbry.com/faq" label={__('Read the FAQ')} icon={icons.HELP} button="primary" />
+              <Button href="https://lbry.com/faq" label={__('Read the FAQ')} icon={icons.HELP} button="inverse" />
             </div>
           </div>
         </section>
@@ -147,7 +147,7 @@ class HelpPage extends React.PureComponent<Props, State> {
 
           <div className="card__content">
             <div className="card__actions">
-              <Button button="primary" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
+              <Button button="inverse" label={__('Join Our Chat')} icon={icons.CHAT} href="https://chat.lbry.com" />
             </div>
           </div>
         </section>
@@ -167,7 +167,7 @@ class HelpPage extends React.PureComponent<Props, State> {
                 navigate="/$/report"
                 label={__('Submit a Bug Report/Feature Request')}
                 icon={icons.REPORT}
-                button="primary"
+                button="inverse"
               />
             </div>
 
@@ -188,8 +188,8 @@ class HelpPage extends React.PureComponent<Props, State> {
 
           <div className="card__content">
             <div className="card__actions">
-              <Button button="primary" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
+              <Button button="inverse" label={__('Open Log')} onClick={() => this.openLogFile(dataDirectory)} />
-              <Button button="primary" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
+              <Button button="inverse" label={__('Open Log Folder')} onClick={() => shell.openItem(dataDirectory)} />
             </div>
           </div>
         </section>
@@ -198,8 +198,8 @@ class HelpPage extends React.PureComponent<Props, State> {
         <BackupSection />
         {/* @endif */}
 
-        <section className="card card--section">
+        <section className="card">
-          <header className="card__header">
+          <header className="table__header">
             <h2 className="card__title">{__('About')}</h2>
 
             {this.state.upgradeAvailable !== null && this.state.upgradeAvailable ? (

src/ui/page/invite/view.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import BusyIndicator from 'component/common/busy-indicator';
 import InviteNew from 'component/inviteNew';
 import InviteList from 'component/inviteList';
-import Page from 'component/page';
 
 type Props = {
   isPending: boolean,
@@ -27,7 +26,7 @@ class InvitePage extends React.PureComponent<Props> {
     const { isPending, isFailed } = this.props;
 
     return (
-      <Page>
+      <div>
         {isPending && <BusyIndicator message={__('Checking your invite status')} />}
         {!isPending && isFailed && <span className="empty">{__('Failed to retrieve invite status.')}</span>}
         {!isPending && !isFailed && (
@@ -36,7 +35,7 @@ class InvitePage extends React.PureComponent<Props> {
             <InviteList />
           </React.Fragment>
         )}
-      </Page>
+      </div>
     );
   }
 }