Adding new unread comments. (#749)

package.json

@@ -78,7 +78,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
     "import-sort-style-module": "^6.0.0",
-    "lemmy-js-client": "0.17.0-rc.44",
+    "lemmy-js-client": "0.17.0-rc.45",
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
     "node-fetch": "^2.6.1",

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 } : {};

src/shared/components/post/post-report.tsx

@@ -45,6 +45,7 @@ export class PostReport extends Component<PostReportProps, any> {
       read: false,
       creator_blocked: false,
       my_vote: r.my_vote,
+      unread_comments: 0,
     };
 
     return (