Adding new unread comments. (#749)

[lemmy-ui.git] / src / shared / components / post / post-listing.tsx

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index fd94d4d0137e78be5d94f5c855c0175b1eaed241..c14ea2f41edb3d97332aa0ef81f1c5465b5e90c4 100644 (file)
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -631,15 +631,34 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           to={`/post/${post_view.post.id}?scrollToComments=true`}
         >
           <Icon icon="message-square" classes="mr-1" inline />
-          {i18n.t("number_of_comments", {
-            count: post_view.counts.comments,
-            formattedCount: numToSI(post_view.counts.comments),
+          <span className="mr-2">
+            {i18n.t("number_of_comments", {
+              count: post_view.counts.comments,
+              formattedCount: numToSI(post_view.counts.comments),
+            })}
+          </span>
+          {this.unreadCount.match({
+            some: unreadCount => (
+              <span className="small text-warning">
+                ({unreadCount} {i18n.t("new")})
+              </span>
+            ),
+            none: <></>,
           })}
         </Link>
       </button>
     );
   }
 
+  get unreadCount(): Option<number> {
+    let pv = this.props.post_view;
+    if (pv.unread_comments == pv.counts.comments || pv.unread_comments == 0) {
+      return None;
+    } else {
+      return Some(pv.unread_comments);
+    }
+  }
+
   get mobileVotes() {
     // TODO: make nicer
     let tippy = showScores() ? { "data-tippy-content": this.pointsTippy } : {};