feat(post): add moderator and administrator role indicators

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

@@ -57,7 +57,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, shortAddress } = author || {};
   const displayName = author?.displayName?.trim();
-  const authorRole = roles?.[address]?.role;
+  const authorRole = roles?.[address]?.role.replace('moderator', 'mod') || (isDescription || isRules ? 'mod' : undefined);
   const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
   const { hideAvatars } = useAvatarVisibilityStore();
 
@@ -101,7 +101,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
         <PostMenuMobile post={post} />
         <span className={(hidden || ((removed || deleted) && !reason)) && parentCid ? styles.postDesktopHidden : ''}>
           <span className={styles.nameBlock}>
-            <span className={`${styles.name} ${(isDescription || isRules || authorRole) && !(deleted || removed) && styles.capcodeMod}`}>
+            <span className={`${styles.name} ${authorRole && !(deleted || removed) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
               {removed ? (
                 _.capitalize(t('removed'))
               ) : deleted ? (
@@ -118,7 +118,19 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
               ) : (
                 _.capitalize(t('anonymous'))
               )}
-              {!(deleted || removed) && <span className='capitalize'>{authorRole && ` ## Board ${authorRole}`} </span>}
+              {!(deleted || removed) && authorRole && (
+                <span className='capitalize'>
+                  {' '}
+                  ## Board {authorRole}{' '}
+                  <span className={styles.capcodeIconMobileWrapper}>
+                    <span
+                      className={`${styles.capcodeIconMobile} ${authorRole === 'mod' ? styles.capcodeModIcon : styles.capcodeAdminIcon}`}
+                      title={authorRole === 'mod' ? t('moderator_of_this_board') : t('administrator_of_this_board')}
+                    />
+                  </span>
+                  &nbsp;
+                </span>
+              )}
             </span>
             {!(isDescription || isRules) && (
               <>
@@ -318,7 +330,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
     isRules: true,
     subplebbitAddress,
     timestamp: subplebbit?.createdAt,
-    author: { displayName: `## ${t('board_mods')}` },
+    author: { displayName: _.capitalize(t('anonymous')) },
     content: `${subplebbit?.rules?.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n')}`,
     replyCount: 0,
   };