add 'new' badge on every page in the app

src/renderer/component/common/truncated-text.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 type Props = {
-  text: string,
+  text: ?string,
   lines: number,
 };
 

src/renderer/component/fileCard/index.js

@@ -14,7 +14,7 @@ import {
   makeSelectContentPositionForUri,
 } from 'redux/selectors/content';
 import { selectShowNsfw } from 'redux/selectors/settings';
-import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
+import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
 import { doClearContentHistoryUri } from 'redux/actions/content';
 import FileCard from './view';
 
@@ -29,6 +29,7 @@ const select = (state, props) => ({
   isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
   position: makeSelectContentPositionForUri(props.uri)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
+  isNew: makeSelectIsNew(props.uri)(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/fileTile/index.js

@@ -11,7 +11,7 @@ import { selectShowNsfw } from 'redux/selectors/settings';
 import { doNavigate } from 'redux/actions/navigation';
 import { doClearPublish, doUpdatePublishForm } from 'redux/actions/publish';
 import { selectRewardContentClaimIds } from 'redux/selectors/content';
-import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
+import { makeSelectIsSubscribed, makeSelectIsNew } from 'redux/selectors/subscriptions';
 import FileTile from './view';
 
 const select = (state, props) => ({
@@ -23,6 +23,7 @@ const select = (state, props) => ({
   obscureNsfw: !selectShowNsfw(state),
   claimIsMine: makeSelectClaimIsMine(props.uri)(state),
   isSubscribed: makeSelectIsSubscribed(props.uri)(state),
+  isNew: makeSelectIsNew(props.uri)(state),
 });
 
 const perform = dispatch => ({

src/renderer/component/fileTile/view.jsx

@@ -30,6 +30,7 @@ type Props = {
   displayDescription?: boolean,
   size: string,
   isSubscribed: boolean,
+  isNew: boolean,
 };
 
 class FileTile extends React.PureComponent<Props> {
@@ -49,15 +50,24 @@ class FileTile extends React.PureComponent<Props> {
   }
 
   renderFileProperties() {
-    const { isSubscribed, isDownloaded, claim, uri, rewardedContentClaimIds, size } = this.props;
+    const {
+      isSubscribed,
+      isDownloaded,
+      claim,
+      uri,
+      rewardedContentClaimIds,
+      size,
+      isNew,
+    } = this.props;
     const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
 
     return (
       <div className={classnames('card__file-properties', { card__subtitle: size === 'large' })}>
         <FilePrice hideFree uri={uri} />
-        {isSubscribed && <Icon icon={ICONS.HEART} />}
-        {isRewardContent && <Icon iconColor="red" icon={ICONS.FEATURED} />}
-        {isDownloaded && <Icon icon={ICONS.LOCAL} />}
+        {isNew && <span className="badge badge--alert icon">{__('NEW')}</span>}
+        {isSubscribed && <Icon icon={icons.HEART} />}
+        {isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
+        {isDownloaded && <Icon icon={icons.LOCAL} />}
       </div>
     );
   }

src/renderer/page/subscriptions/internal/user-subscriptions.jsx

@@ -111,7 +111,7 @@ export default (props: Props) => {
                         />
                       </div>
                       <div className="card__list card__content">
-                        {uris.map(uri => <FileCard isNew key={uri} uri={uri} />)}
+                        {uris.map(uri => <FileCard key={uri} uri={uri} />)}
                       </div>
                     </section>
                   );

src/renderer/redux/selectors/subscriptions.js

@@ -253,3 +253,24 @@ export const makeSelectIsSubscribed = uri =>
       return false;
     }
   );
+
+export const makeSelectIsNew = uri =>
+  createSelector(
+    makeSelectIsSubscribed(uri),
+    makeSelectChannelForClaimUri(uri),
+    selectUnreadByChannel,
+    (isSubscribed, channel, unreadByChannel) => {
+      if (!isSubscribed) {
+        return false;
+      }
+      // console.log("uri", uri)
+      // console.log("channel", channel)
+      const unreadForChannel = unreadByChannel[`lbry://${channel}`];
+      if (unreadForChannel) {
+        return unreadForChannel.uris.includes(uri);
+      }
+
+      return false;
+      // If they are subscribed, check to see if this uri is in the list of unreads
+    }
+  );

src/renderer/scss/component/_card.scss

@@ -324,6 +324,7 @@
 
 .card-row__scrollhouse {
   padding-top: $spacing-vertical * 2/3;
+  padding-bottom: $spacing-vertical * 1/6;
   overflow: hidden;
 
   .card {