Adding icon to represent replies to a post

src/components/app-body/posts/index.js

@@ -10,6 +10,7 @@ import { Container, Row, Col, Spinner, Table } from 'react-bootstrap'
 // Local libraries
 import MemoDb from '../../../services/memo-db'
 import AppUtil from '../../../util'
+import PostReplyCount from '../../post-reply-count'
 import '../../../App.css'
 
 const appUtil = new AppUtil()
@@ -92,7 +93,10 @@ function RecentPosts () {
                         {truncate(post.addr, 24)}
                       </Link>
                     </td>
-                    <td>{post.text}</td>
+                    <td>
+                      <div>{post.text}</div>
+                      <PostReplyCount count={post.replyCount ?? 0} />
+                    </td>
                     <td>{post.blockHeight}</td>
                     <td>{formatSeen(post.seen)}</td>
                     <td>

src/components/app-body/profile/index.js

@@ -8,6 +8,7 @@ import { Container, Row, Col, Spinner, Card } from 'react-bootstrap'
 import Jdenticon from '@chris.troutner/react-jdenticon'
 
 import MemoDb from '../../../services/memo-db'
+import PostReplyCount from '../../post-reply-count'
 import '../../../App.css'
 import './profile.css'
 
@@ -137,6 +138,7 @@ function Profile () {
                     <span className='profile-post-block ms-2'>Block {post.blockHeight}</span>
                   </div>
                   <Card.Text className='profile-post-text'>{post.text}</Card.Text>
+                  <PostReplyCount count={post.replyCount ?? 0} />
                 </Card.Body>
               </Card>
             ))}

src/components/post-reply-count/index.js

@@ -0,0 +1,22 @@
+/*
+  Reply count indicator for a post (icon + number).
+*/
+
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faComment } from '@fortawesome/free-solid-svg-icons'
+
+import './post-reply-count.css'
+
+function PostReplyCount ({ count = 0 }) {
+  const label = count === 1 ? '1 reply' : `${count} replies`
+
+  return (
+    <div className='post-reply-count' title={label} aria-label={label}>
+      <FontAwesomeIcon icon={faComment} className='post-reply-count-icon' />
+      <span className='post-reply-count-number'>{count}</span>
+    </div>
+  )
+}
+
+export default PostReplyCount

src/components/post-reply-count/post-reply-count.css

@@ -0,0 +1,12 @@
+.post-reply-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.75rem;
+  color: #6c757d;
+  font-size: 0.85rem;
+}
+
+.post-reply-count-icon {
+  font-size: 0.9rem;
+}