feat(post): add avatars

src/components/post-desktop/post-desktop.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -54,6 +54,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   const stateString = useStateString(post);
   const isReply = parentCid;
   const { showOmittedReplies } = useShowOmittedReplies();
+  const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
 
   const params = useParams();
   const location = useLocation();
@@ -99,6 +100,13 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
         </span>
         {!(isDescription || isRules) && (
           <>
+            {isReply && author?.avatar && (
+              <Tooltip
+                children={<span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />}
+                content={avatarImageUrl?.toString() || ''}
+                showTooltip={!!avatarImageUrl}
+              />
+            )}
             (u/
             <Tooltip
               children={

src/components/post-mobile/post-mobile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAuthorAvatar, useComment, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../../views/post/post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
@@ -29,6 +29,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
   const { address, shortAddress } = author || {};
   const displayName = author?.displayName?.trim();
   const authorRole = roles?.[address]?.role;
+  const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
 
   const params = useParams();
   const location = useLocation();
@@ -73,6 +74,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
           </span>
           {!(isDescription || isRules) && (
             <>
+              {isReply && author?.avatar && (
+                <Tooltip
+                  children={<span className={styles.authorAvatar} style={{ backgroundImage: `url(${avatarImageUrl})` }} />}
+                  content={avatarImageUrl?.toString() || ''}
+                  showTooltip={!!avatarImageUrl}
+                />
+              )}
               (u/
               <Tooltip
                 children={

src/views/post/post.module.css

@@ -504,6 +504,17 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
+.authorAvatar {
+  width: 32px;
+  height: 32px;
+  background-size: 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 16px;
+}
+
 @media (max-width: 640px) {
   .replyQuotePreview {
     margin-right: 10px;