From 0645e6261621e5971d6f1b8057271c9451f2d024 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 25 Nov 2024 19:52:24 +0100
Subject: [PATCH 01/14] missing cursor pointer

---
 .../post/comment-tools/mod-menu/mod-menu.module.css           | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/post/comment-tools/mod-menu/mod-menu.module.css b/src/components/post/comment-tools/mod-menu/mod-menu.module.css
index b23edf01..ba703441 100644
--- a/src/components/post/comment-tools/mod-menu/mod-menu.module.css
+++ b/src/components/post/comment-tools/mod-menu/mod-menu.module.css
@@ -62,4 +62,8 @@
   .banInput {
     width: 3.5em;
   }
+}
+
+.modal .menuItem label {
+  cursor: pointer;
 }
\ No newline at end of file

From 00848a90e378ea1ef7562a0731ad00cb208a538c Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 25 Nov 2024 19:53:13 +0100
Subject: [PATCH 02/14] missing space

---
 src/components/reply/reply.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 2a78e8e1..e35496ef 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -392,7 +392,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                   {edit && <span className={styles.timeEdited}> {t('edited_timestamp', { timestamp: getFormattedTimeAgo(edit.timestamp) })}</span>}
                 </span>{' '}
                 {pinned && <span className={styles.pinned}>- {t('stickied_comment')}</span>}
-                {collapsed && <span className={styles.children}> ({childrenString})</span>}
+                {collapsed && <span className={styles.children}> ({childrenString}) </span>}
                 {stateLabel}{' '}
                 {!collapsed && flair && (
                   <>

From a02ed8f1163ca311a6137c3001a7d2402184d2cc Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 25 Nov 2024 21:44:22 +0100
Subject: [PATCH 03/14] fix(reply): pending edit label appeared cut off

---
 src/components/reply/reply.module.css | 22 ++++++++++++
 src/components/reply/reply.tsx        | 46 +++++++++++++++++-------
 src/hooks/use-element-position.ts     | 52 +++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/use-element-position.ts

diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index a77d031c..9fe9abd1 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -67,6 +67,7 @@
 }
 
 .tagline {
+  display: inline-block;
   color: var(--text);
   font-size: x-small;
 }
@@ -354,4 +355,25 @@
   .md {
     padding-right: 5px;
   }
+}
+
+.portalLabel {
+  pointer-events: none;
+  font-size: x-small;
+  font-family: verdana, arial, helvetica, sans-serif;
+  font-size: x-small;
+  display: inline-block;
+  margin-left: 4px;
+}
+
+.collapsedStateLabel {
+  display: inline-block;
+  margin-left: 4px;
+}
+
+.stamp {
+  font-family: inherit;
+  font-size: x-small;
+  line-height: normal;
+  vertical-align: middle;
 }
\ No newline at end of file
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index e35496ef..0e1b61b1 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import { Comment, useAccountComment, useAuthorAddress, useAuthorAvatar, useBlock, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
 import { Link, useLocation, useParams } from 'react-router-dom';
@@ -23,6 +23,8 @@ import { isInboxView, isPostContextView, isPostView } from '../../lib/utils/view
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import Markdown from '../markdown';
 import { getHostname } from '../../lib/utils/url-utils';
+import { createPortal } from 'react-dom';
+import { useElementPosition } from '../../hooks/use-element-position';
 
 interface ReplyAuthorProps {
   address: string;
@@ -329,16 +331,6 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
   const [upvoted, upvote] = useUpvote(reply);
   const [downvoted, downvote] = useDownvote(reply);
 
-  const stateLabel = (
-    <span className={styles.stateLabel}>
-      {state === 'failed' && <Label color='red' text={t('failed')} />}
-      {cid === undefined && state !== 'failed' && <Label color='yellow' text={t('pending')} />}
-      {editState === 'failed' && <Label color='red' text={t('failed_edit')} />}
-      {editState === 'pending' && <Label color='yellow' text={t('pending_edit')} />}
-      {spoiler && <Label color='black' text={t('spoiler')} />}
-    </span>
-  );
-
   const unnestedReplies = useMemo(() => flattenCommentsPages(reply.replies), [reply.replies]);
   const childrenCount = unnestedReplies.length;
   const childrenString = childrenCount === 1 ? t('child', { childrenCount }) : t('children', { childrenCount });
@@ -357,6 +349,18 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
     setCollapsed(!collapsed);
   };
 
+  const taglineRef = useRef<HTMLParagraphElement>(null);
+  const labelPosition = useElementPosition(taglineRef, collapsed);
+  const stateLabel = (
+    <span className={`${styles.stateLabel} ${collapsed ? styles.collapsedStateLabel : ''}`}>
+      {state === 'failed' && <Label color='red' text={t('failed')} />}
+      {cid === undefined && state !== 'failed' && <Label color='yellow' text={t('pending')} />}
+      {editState === 'failed' && <Label color='red' text={t('failed_edit')} />}
+      {editState === 'pending' && <Label color='yellow' text={t('pending_edit')} />}
+      {spoiler && <Label color='black' text={t('spoiler')} />}
+    </span>
+  );
+
   return (
     <div className={styles.reply}>
       {isSingleReply && !isInInboxView && <ParentLink postCid={cid ? postCid : parentOfPendingReply?.postCid} />}
@@ -371,7 +375,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
         <div className={`${isNotification && !markedAsRead ? styles.unreadNotification : ''}`}>
           <div className={`${styles.entry} ${collapsed && styles.collapsedEntry}`}>
             {!isInInboxView && (
-              <p className={styles.tagline}>
+              <p className={styles.tagline} ref={taglineRef}>
                 <span className={styles.expand} onClick={handleCollapseButton}>
                   [{collapsed ? '+' : '–'}]
                 </span>
@@ -393,7 +397,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                 </span>{' '}
                 {pinned && <span className={styles.pinned}>- {t('stickied_comment')}</span>}
                 {collapsed && <span className={styles.children}> ({childrenString}) </span>}
-                {stateLabel}{' '}
+                {!collapsed && stateLabel}
                 {!collapsed && flair && (
                   <>
                     {' '}
@@ -512,6 +516,22 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
           )}
         </div>
       </div>
+      {collapsed &&
+        labelPosition &&
+        createPortal(
+          <div
+            className={styles.portalLabel}
+            style={{
+              position: 'absolute',
+              top: `${labelPosition.top - 1}px`,
+              left: `${labelPosition.left - 13}px`,
+              transform: 'translateY(-50%)',
+            }}
+          >
+            {stateLabel}
+          </div>,
+          document.body,
+        )}
     </div>
   );
 };
diff --git a/src/hooks/use-element-position.ts b/src/hooks/use-element-position.ts
new file mode 100644
index 00000000..04000c2d
--- /dev/null
+++ b/src/hooks/use-element-position.ts
@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+
+interface Position {
+  top: number;
+  left: number;
+}
+
+export const useElementPosition = (ref: React.RefObject<HTMLElement>, enabled: boolean | undefined) => {
+  const [position, setPosition] = useState<Position | null>(null);
+
+  useEffect(() => {
+    if (!ref.current || !enabled) {
+      setPosition(null);
+      return;
+    }
+
+    let rafId: number;
+    let lastTop: number = 0;
+    let lastLeft: number = 0;
+
+    const updatePosition = () => {
+      if (!ref.current) return;
+
+      const rect = ref.current.getBoundingClientRect();
+      const newTop = window.scrollY + rect.top + rect.height / 2;
+      const newLeft = rect.right + 5;
+
+      // Only update state if position actually changed
+      if (newTop !== lastTop || newLeft !== lastLeft) {
+        lastTop = newTop;
+        lastLeft = newLeft;
+        setPosition({ top: newTop, left: newLeft });
+      }
+
+      rafId = requestAnimationFrame(updatePosition);
+    };
+
+    // Start the animation frame loop
+    updatePosition();
+
+    // Also watch for size changes
+    const resizeObserver = new ResizeObserver(updatePosition);
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      resizeObserver.disconnect();
+    };
+  }, [ref, enabled]);
+
+  return position;
+};

From 61c9f3061839d9112085001a4c7933d05a2b1961 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 28 Nov 2024 23:56:02 +0100
Subject: [PATCH 04/14] fix(header): seedit logo should show in subs without
 their own logo

---
 src/components/header/header.module.css | 3 +--
 src/components/header/header.tsx        | 8 +++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
index c05db094..083b45c2 100644
--- a/src/components/header/header.module.css
+++ b/src/components/header/header.module.css
@@ -41,8 +41,7 @@
   width: 84px;
   max-height: 26px;
   margin-top: 16px;
-  margin-right: 5px;
-  padding-right: 1ex;
+  padding-right: 5px;
   filter: var(--filter90);
 }
 
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 7818da24..593ac8e5 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -364,10 +364,12 @@ const Header = () => {
     (isInProfileView && !isInHomeAboutView) ||
     (isInAllView && !isInAllAboutView) ||
     (isInAuthorView && !isInHomeAboutView);
-  const logoSrc = isInSubplebbitView ? suggested?.avatarUrl : 'assets/logo/seedit.png';
+  const logoSrc = isInSubplebbitView && suggested?.avatarUrl ? suggested?.avatarUrl : 'assets/logo/seedit.png';
   const logoIsAvatar = isInSubplebbitView && suggested?.avatarUrl;
   const logoLink = isInSubplebbitView ? `/p/${params.subplebbitAddress}` : isInProfileView ? '/profile' : '/';
 
+  console.log(isInAuthorView);
+
   return (
     <div className={styles.header}>
       <div
@@ -377,10 +379,10 @@ const Header = () => {
       >
         <div className={styles.logoContainer}>
           <Link to={logoLink} className={styles.logoLink}>
-            {(logoIsAvatar || (!isInSubplebbitView && !isInProfileView && !isInAuthorView)) && (
+            {(logoIsAvatar || (!isInSubplebbitView && !isInProfileView && !isInAuthorView) || (isInSubplebbitView && !suggested?.avatarUrl)) && (
               <img className={`${logoIsAvatar ? styles.avatar : styles.logo}`} src={logoSrc} alt='' />
             )}
-            {!isInSubplebbitView && !isInProfileView && !isInAuthorView && (
+            {((!isInSubplebbitView && !isInProfileView && !isInAuthorView) || (isInSubplebbitView && !suggested?.avatarUrl)) && (
               <img src={`assets/logo/seedit-text-${theme === 'dark' ? 'dark' : 'light'}.svg`} className={styles.logoText} alt='' />
             )}
           </Link>

From 448673dd5b54f9ca1f08b4fab03a08a8cf698e0f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 10:33:28 +0100
Subject: [PATCH 05/14] fix(ellipsis animation): dots could appear cut off and
 cause displacement changing width of string

---
 .../loading-ellipsis.module.css               | 53 +++++++++++++++----
 .../loading-ellipsis/loading-ellipsis.tsx     | 15 +++++-
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
index 9dfe4e9f..7e1e6993 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.module.css
+++ b/src/components/loading-ellipsis/loading-ellipsis.module.css
@@ -1,21 +1,52 @@
-.ellipsis:after {
-  overflow: hidden;
+.nowrap {
+  white-space: nowrap;
+}
+
+.ellipsis {
   display: inline-block;
-  vertical-align: text-bottom;
-  -webkit-animation: ellipsis steps(4,end) 1500ms infinite;      
-  animation: ellipsis steps(4,end) 1500ms infinite;
-  content: "\2026"; /* ascii code for the ellipsis character */
-  width: 0px;
+  width: 4ch;
+}
+
+.ellipsis:after {
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis 1500ms steps(4, end) infinite;
+  animation: ellipsis 1500ms steps(4, end) infinite;
+  content: "";
 }
 
 @keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
   }
 }
 
 @-webkit-keyframes ellipsis {
-  to {
-    width: 1.25em;    
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+  100% {
+    content: "";
   }
 }
\ No newline at end of file
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
index 639d62f4..b94f4600 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.tsx
+++ b/src/components/loading-ellipsis/loading-ellipsis.tsx
@@ -5,7 +5,20 @@ interface LoadingEllipsisProps {
 }
 
 const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
-  return <span className={styles.ellipsis}>{string}</span>;
+  const words = string.split(' ');
+  const lastWord = words.pop();
+  const restOfString = words.join(' ');
+
+  return (
+    <span>
+      {restOfString}
+      {restOfString && ' '}
+      <span className={styles.nowrap}>
+        {lastWord}
+        <span className={styles.ellipsis} />
+      </span>
+    </span>
+  );
 };
 
 export default LoadingEllipsis;

From 260933dc168289f4f072e64747f0b09fe02dcf94 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 11:19:23 +0100
Subject: [PATCH 06/14] Update all.tsx

---
 src/views/all/all.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/all/all.tsx b/src/views/all/all.tsx
index 6d30d546..4881283a 100644
--- a/src/views/all/all.tsx
+++ b/src/views/all/all.tsx
@@ -62,7 +62,7 @@ const All = () => {
       footerContent = (
         <>
           {subplebbitAddressesWithNewerPosts.length > 0 ? (
-            <div className={styles.stateString}>
+            <div className={styles.morePostsSuggestion}>
               <Trans
                 i18nKey='newer_posts_available'
                 components={{
@@ -74,7 +74,7 @@ const All = () => {
             showMorePostsSuggestion &&
             monthlyFeed.length > feed.length &&
             (weeklyFeed.length > feed.length ? (
-              <div className={styles.stateString}>
+              <div className={styles.morePostsSuggestion}>
                 <Trans
                   i18nKey='more_posts_last_week'
                   values={{ currentTimeFilterName }}
@@ -84,7 +84,7 @@ const All = () => {
                 />
               </div>
             ) : (
-              <div className={styles.stateString}>
+              <div className={styles.morePostsSuggestion}>
                 <Trans
                   i18nKey='more_posts_last_month'
                   values={{ currentTimeFilterName }}

From 0341ccb413a8074def4baa7e7ce1aca0ceeb1b31 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 16:38:16 +0100
Subject: [PATCH 07/14] fix pending label placement in collapsed replies

---
 src/components/header/header.tsx |  2 --
 src/components/reply/reply.tsx   | 13 +++++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 593ac8e5..96bf87ec 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -368,8 +368,6 @@ const Header = () => {
   const logoIsAvatar = isInSubplebbitView && suggested?.avatarUrl;
   const logoLink = isInSubplebbitView ? `/p/${params.subplebbitAddress}` : isInProfileView ? '/profile' : '/';
 
-  console.log(isInAuthorView);
-
   return (
     <div className={styles.header}>
       <div
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 0e1b61b1..4e4b7933 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -375,7 +375,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
         <div className={`${isNotification && !markedAsRead ? styles.unreadNotification : ''}`}>
           <div className={`${styles.entry} ${collapsed && styles.collapsedEntry}`}>
             {!isInInboxView && (
-              <p className={styles.tagline} ref={taglineRef}>
+              <p className={styles.tagline}>
                 <span className={styles.expand} onClick={handleCollapseButton}>
                   [{collapsed ? '+' : '–'}]
                 </span>
@@ -396,7 +396,12 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                   {edit && <span className={styles.timeEdited}> {t('edited_timestamp', { timestamp: getFormattedTimeAgo(edit.timestamp) })}</span>}
                 </span>{' '}
                 {pinned && <span className={styles.pinned}>- {t('stickied_comment')}</span>}
-                {collapsed && <span className={styles.children}> ({childrenString}) </span>}
+                {collapsed && (
+                  <span className={styles.children} ref={taglineRef}>
+                    {' '}
+                    ({childrenString}){' '}
+                  </span>
+                )}
                 {!collapsed && stateLabel}
                 {!collapsed && flair && (
                   <>
@@ -404,7 +409,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                     <Flair flair={flair} />
                   </>
                 )}
-                {state === 'pending' && loadingString}
+                {state === 'pending' && !collapsed && <> {loadingString}</>}
               </p>
             )}
             {isInInboxView && (
@@ -528,7 +533,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
               transform: 'translateY(-50%)',
             }}
           >
-            {stateLabel}
+            {stateLabel} {state === 'pending' && loadingString}
           </div>,
           document.body,
         )}

From 9d8e5ce69c891190a0e27797f164f82a3017fa8d Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 16:42:06 +0100
Subject: [PATCH 08/14] refactor thumbnail fetching logic into hook

---
 src/components/post/post.tsx        | 34 ++++-------------------------
 src/components/reply/reply.tsx      | 23 +++++--------------
 src/hooks/use-comment-media-info.ts | 20 +++++++++++++++++
 3 files changed, 29 insertions(+), 48 deletions(-)
 create mode 100644 src/hooks/use-comment-media-info.ts

diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 74348fcf..f054d590 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import styles from './post.module.css';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { Comment, useAuthorAddress, useBlock, useComment, useEditedComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
 import { isAllView, isPostView, isProfileHiddenView, isSubplebbitView } from '../../lib/utils/view-utils';
-import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { getHasThumbnail } from '../../lib/utils/media-utils';
 import { getPostScore } from '../../lib/utils/post-utils';
 import { getHostname } from '../../lib/utils/url-utils';
 import { getFormattedTimeAgo, formatLocalizedUTCTimestamp } from '../../lib/utils/time-utils';
@@ -17,6 +17,7 @@ import Thumbnail from './thumbnail';
 import useDownvote from '../../hooks/use-downvote';
 import useUpvote from '../../hooks/use-upvote';
 import _ from 'lodash';
+import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
 
 interface PostAuthorProps {
   authorAddress: string;
@@ -70,33 +71,6 @@ interface PostProps {
   post: Comment | undefined;
 }
 
-const ThumbnailLoader = ({ post }: PostProps) => {
-  const { cid } = post || {};
-  // Reset state by remounting component when post changes
-  return useThumbnailContent(cid, post);
-};
-
-const useThumbnailContent = (key: string, post: any) => {
-  const [commentMediaInfo, setCommentMediaInfo] = useState<CommentMediaInfo | undefined>();
-
-  useEffect(() => {
-    const loadThumbnail = async () => {
-      const initialInfo = getCommentMediaInfo(post);
-      // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-      if (initialInfo?.type === 'webpage' && !initialInfo.thumbnail) {
-        const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialInfo);
-        setCommentMediaInfo(newMediaInfo);
-      } else {
-        setCommentMediaInfo(initialInfo);
-      }
-    };
-
-    loadThumbnail();
-  }, [post]);
-
-  return commentMediaInfo;
-};
-
 const Post = ({ index, post = {} }: PostProps) => {
   // handle single comment thread
   const op = useComment({ commentCid: post?.parentCid ? post?.postCid : '' });
@@ -147,7 +121,7 @@ const Post = ({ index, post = {} }: PostProps) => {
   const isInProfileHiddenView = isProfileHiddenView(location.pathname);
   const isInSubplebbitView = isSubplebbitView(location.pathname, params);
 
-  const commentMediaInfo = ThumbnailLoader({ post });
+  const commentMediaInfo = useCommentMediaInfo(post);
 
   const [isExpanded, setIsExpanded] = useState(isInPostView);
   const toggleExpanded = () => setIsExpanded(!isExpanded);
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 4e4b7933..661683db 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -1,11 +1,13 @@
-import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import { Fragment, useEffect, useMemo, useState, useRef } from 'react';
 import { Comment, useAccountComment, useAuthorAddress, useAuthorAvatar, useBlock, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './reply.module.css';
+import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
+import { useElementPosition } from '../../hooks/use-element-position';
 import useReplies from '../../hooks/use-replies';
-import { CommentMediaInfo, fetchWebpageThumbnailIfNeeded, getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { formatLocalizedUTCTimestamp, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import CommentEditForm from '../comment-edit-form';
 import LoadingEllipsis from '../loading-ellipsis/';
@@ -24,7 +26,6 @@ import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import Markdown from '../markdown';
 import { getHostname } from '../../lib/utils/url-utils';
 import { createPortal } from 'react-dom';
-import { useElementPosition } from '../../hooks/use-element-position';
 
 interface ReplyAuthorProps {
   address: string;
@@ -301,21 +302,7 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
   const showCommentEditForm = () => setIsEditing(true);
   const hideCommentEditForm = () => setIsEditing(false);
 
-  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
-  const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(reply), [reply]);
-  const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
-
-  const fetchThumbnail = useCallback(async () => {
-    if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
-      const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
-      setCommentMediaInfo(newMediaInfo);
-    }
-  }, [initialCommentMediaInfo]);
-
-  useEffect(() => {
-    fetchThumbnail();
-  }, [fetchThumbnail]);
-
+  const commentMediaInfo = useCommentMediaInfo(reply);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
   const { t, i18n } = useTranslation();
diff --git a/src/hooks/use-comment-media-info.ts b/src/hooks/use-comment-media-info.ts
new file mode 100644
index 00000000..711fa75e
--- /dev/null
+++ b/src/hooks/use-comment-media-info.ts
@@ -0,0 +1,20 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { getCommentMediaInfo, fetchWebpageThumbnailIfNeeded } from '../lib/utils/media-utils';
+
+export const useCommentMediaInfo = (comment: Comment) => {
+  // some sites have CORS access, so the thumbnail can be fetched client-side, which is helpful if subplebbit.settings.fetchThumbnailUrls is false
+  const initialCommentMediaInfo = useMemo(() => getCommentMediaInfo(comment), [comment]);
+  const [commentMediaInfo, setCommentMediaInfo] = useState(initialCommentMediaInfo);
+  const fetchThumbnail = useCallback(async () => {
+    if (initialCommentMediaInfo?.type === 'webpage' && !initialCommentMediaInfo.thumbnail) {
+      const newMediaInfo = await fetchWebpageThumbnailIfNeeded(initialCommentMediaInfo);
+      setCommentMediaInfo(newMediaInfo);
+    }
+  }, [initialCommentMediaInfo]);
+  useEffect(() => {
+    fetchThumbnail();
+  }, [fetchThumbnail]);
+
+  return commentMediaInfo;
+};

From ed435c207c4cc6bbd8e86c5669bd464ddd6c522d Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 16:52:28 +0100
Subject: [PATCH 09/14] rename rpc and data path settings and variables

---
 src/views/about/about.tsx                     |  2 +-
 .../plebbit-options/plebbit-options.tsx       | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/views/about/about.tsx b/src/views/about/about.tsx
index df001d9c..a33ead23 100644
--- a/src/views/about/about.tsx
+++ b/src/views/about/about.tsx
@@ -96,7 +96,7 @@ const FAQ = () => {
             Seedit desktop
           </a>
           , which automatically runs a full node and lets you create communities with the ease of a reddit-like graphical user interface. You can also open a remote
-          connection to an <HashLink to='/settings/plebbit-options#nodeRpc'>RPC node</HashLink> to create communities even on web and on mobile devices. In the near
+          connection to an <HashLink to='/settings/plebbit-options#plebbitRpc'>RPC node</HashLink> to create communities even on web and on mobile devices. In the near
           future, we plan to include a public RPC connection turned on by default, so you can create communities on any device without running your own node.
         </p>
         <hr />
diff --git a/src/views/settings/plebbit-options/plebbit-options.tsx b/src/views/settings/plebbit-options/plebbit-options.tsx
index d02eb7e2..1b1e68b4 100644
--- a/src/views/settings/plebbit-options/plebbit-options.tsx
+++ b/src/views/settings/plebbit-options/plebbit-options.tsx
@@ -13,7 +13,7 @@ interface SettingsProps {
   maticRpcRef?: RefObject<HTMLTextAreaElement>;
   avaxRpcRef?: RefObject<HTMLTextAreaElement>;
   plebbitRpcRef?: RefObject<HTMLInputElement>;
-  nodeDataPathRef?: RefObject<HTMLInputElement>;
+  plebbitDataPathRef?: RefObject<HTMLInputElement>;
 }
 
 const IPFSGatewaysSettings = ({ ipfsGatewayUrlsRef, mediaIpfsGatewayUrlRef }: SettingsProps) => {
@@ -129,16 +129,16 @@ const PlebbitRPCSettings = ({ plebbitRpcRef }: SettingsProps) => {
   );
 };
 
-const NodeDataPathSettings = ({ nodeDataPathRef }: SettingsProps) => {
+const PlebbitDataPathSettings = ({ plebbitDataPathRef }: SettingsProps) => {
   const plebbitRpc = usePlebbitRpcSettings();
   const { plebbitRpcSettings } = plebbitRpc || {};
   const isConnectedToRpc = plebbitRpc?.state === 'succeeded';
   const path = plebbitRpcSettings?.plebbitOptions?.dataPath || '';
 
   return (
-    <div className={styles.nodeDataPathSettings}>
+    <div className={styles.plebbitDataPathSettings}>
       <div>
-        <input type='text' defaultValue={path} disabled={!isConnectedToRpc} ref={nodeDataPathRef} />
+        <input type='text' defaultValue={path} disabled={!isConnectedToRpc} ref={plebbitDataPathRef} />
       </div>
     </div>
   );
@@ -158,7 +158,7 @@ const PlebbitOptions = () => {
   const maticRpcRef = useRef<HTMLTextAreaElement>(null);
   const avaxRpcRef = useRef<HTMLTextAreaElement>(null);
   const plebbitRpcRef = useRef<HTMLInputElement>(null);
-  const nodeDataPathRef = useRef<HTMLInputElement>(null);
+  const plebbitDataPathRef = useRef<HTMLInputElement>(null);
 
   const handleSave = async () => {
     const ipfsGatewayUrls = ipfsGatewayUrlsRef.current?.value.split('\n').map((url) => url.trim());
@@ -169,7 +169,7 @@ const PlebbitOptions = () => {
     const maticRpcUrls = maticRpcRef.current?.value.split('\n').map((url) => url.trim());
     const avaxRpcUrls = avaxRpcRef.current?.value.split('\n').map((url) => url.trim());
     const plebbitRpcClientsOptions = plebbitRpcRef.current?.value.trim();
-    const dataPath = nodeDataPathRef.current?.value.trim();
+    const dataPath = plebbitDataPathRef.current?.value.trim();
 
     const chainProviders = {
       eth: {
@@ -234,16 +234,16 @@ const PlebbitOptions = () => {
           <BlockchainProvidersSettings ethRpcRef={ethRpcRef} solRpcRef={solRpcRef} maticRpcRef={maticRpcRef} avaxRpcRef={avaxRpcRef} />
         </span>
       </div>
-      <div className={`${styles.category} ${location.hash === '#nodeRpc' ? styles.highlightedSetting : ''}`} id='nodeRpc'>
-        <span className={styles.categoryTitle}>node rpc</span>
+      <div className={`${styles.category} ${location.hash === '#plebbitRpc' ? styles.highlightedSetting : ''}`} id='plebbitRpc'>
+        <span className={styles.categoryTitle}>plebbit rpc</span>
         <span className={styles.categorySettings}>
           <PlebbitRPCSettings plebbitRpcRef={plebbitRpcRef} />
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>node data path</span>
+        <span className={styles.categoryTitle}>plebbit data path</span>
         <span className={styles.categorySettings}>
-          <NodeDataPathSettings nodeDataPathRef={nodeDataPathRef} />
+          <PlebbitDataPathSettings plebbitDataPathRef={plebbitDataPathRef} />
         </span>
       </div>
       <button className={styles.saveOptions} onClick={handleSave}>

From 8db2c15f4a33b1d603aea758c7c89e583361f33f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 16:57:10 +0100
Subject: [PATCH 10/14] fix: only show data path setting on electron

showing it on web/android is confusing
---
 .../settings/plebbit-options/plebbit-options.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/views/settings/plebbit-options/plebbit-options.tsx b/src/views/settings/plebbit-options/plebbit-options.tsx
index 1b1e68b4..c38c4944 100644
--- a/src/views/settings/plebbit-options/plebbit-options.tsx
+++ b/src/views/settings/plebbit-options/plebbit-options.tsx
@@ -144,6 +144,8 @@ const PlebbitDataPathSettings = ({ plebbitDataPathRef }: SettingsProps) => {
   );
 };
 
+const isElectron = window.isElectron === true;
+
 const PlebbitOptions = () => {
   const { t } = useTranslation();
   const location = useLocation();
@@ -240,12 +242,14 @@ const PlebbitOptions = () => {
           <PlebbitRPCSettings plebbitRpcRef={plebbitRpcRef} />
         </span>
       </div>
-      <div className={styles.category}>
-        <span className={styles.categoryTitle}>plebbit data path</span>
-        <span className={styles.categorySettings}>
-          <PlebbitDataPathSettings plebbitDataPathRef={plebbitDataPathRef} />
-        </span>
-      </div>
+      {isElectron && (
+        <div className={styles.category}>
+          <span className={styles.categoryTitle}>plebbit data path</span>
+          <span className={styles.categorySettings}>
+            <PlebbitDataPathSettings plebbitDataPathRef={plebbitDataPathRef} />
+          </span>
+        </div>
+      )}
       <button className={styles.saveOptions} onClick={handleSave}>
         {t('save_options')}
       </button>

From 221dab8e83f75290e2073a0775350568649b9dd5 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 17:01:31 +0100
Subject: [PATCH 11/14] fix(reply form): only show offline info message if the
 user clicks on textarea

making it appear by itself was distracting and it would displace the UI while the user is reading the replies
---
 src/components/reply-form/reply-form.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/reply-form/reply-form.tsx b/src/components/reply-form/reply-form.tsx
index cf22ba19..45b6ae79 100644
--- a/src/components/reply-form/reply-form.tsx
+++ b/src/components/reply-form/reply-form.tsx
@@ -87,6 +87,7 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm, subplebbitAddress, p
   const { t } = useTranslation();
   const [showOptions, setShowOptions] = useState(false);
   const [showFormattingHelp, setShowFormattingHelp] = useState(false);
+  const [isTextareaFocused, setIsTextareaFocused] = useState(false);
   const { setContent, resetContent, replyIndex, publishReply } = usePublishReply({ cid, subplebbitAddress, postCid });
 
   const mdContainerClass = isReplyingToReply ? `${styles.mdContainer} ${styles.mdContainerReplying}` : styles.mdContainer;
@@ -149,7 +150,7 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm, subplebbitAddress, p
   return (
     <div className={mdContainerClass}>
       <div className={styles.md}>
-        {isOffline && <div className={styles.infobar}>{offlineTitle}</div>}
+        {isOffline && isTextareaFocused && <div className={styles.infobar}>{offlineTitle}</div>}
         <div className={styles.options}>
           <span className={urlClass}>
             {t('media_url')}: <input className={`${styles.url} ${urlClass}`} ref={urlRef} onChange={(e) => setContent.link(e.target.value)} />
@@ -160,7 +161,13 @@ const ReplyForm = ({ cid, isReplyingToReply, hideReplyForm, subplebbitAddress, p
             </label>
           </span>
         </div>
-        <textarea className={styles.textarea} ref={textRef} onChange={(e) => setContent.content(e.target.value)} />
+        <textarea
+          className={styles.textarea}
+          ref={textRef}
+          onChange={(e) => setContent.content(e.target.value)}
+          onFocus={() => setIsTextareaFocused(true)}
+          onBlur={() => setIsTextareaFocused(false)}
+        />
       </div>
       <div className={styles.bottomArea}>
         <button className={styles.save} onClick={onPublish}>

From 1b5006ec491ec54976ea992fff965d6cc0db402e Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 17:18:01 +0100
Subject: [PATCH 12/14] add more spacing on mobile reply state string

---
 src/components/reply/reply.module.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index 9fe9abd1..eb1ad19c 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -72,6 +72,12 @@
   font-size: x-small;
 }
 
+@media (max-width: 640px) {
+  .tagline {
+    line-height: 1.5;
+  }
+}
+
 .expand {
   margin-right: 3px;
   padding: 1px;

From f79ced1db7e08e8cecddcf77211119e02cf0e3eb Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Mon, 2 Dec 2024 17:29:41 +0100
Subject: [PATCH 13/14] remove unnecessary portal

---
 src/components/reply/reply.module.css | 15 +-------
 src/components/reply/reply.tsx        | 29 +++------------
 src/hooks/use-element-position.ts     | 52 ---------------------------
 3 files changed, 5 insertions(+), 91 deletions(-)
 delete mode 100644 src/hooks/use-element-position.ts

diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index eb1ad19c..6ab77624 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -227,6 +227,7 @@
 
 .collapsedEntry {
   padding-left: 25px;
+  min-height: 16px;
 }
 
 .parent {
@@ -363,20 +364,6 @@
   }
 }
 
-.portalLabel {
-  pointer-events: none;
-  font-size: x-small;
-  font-family: verdana, arial, helvetica, sans-serif;
-  font-size: x-small;
-  display: inline-block;
-  margin-left: 4px;
-}
-
-.collapsedStateLabel {
-  display: inline-block;
-  margin-left: 4px;
-}
-
 .stamp {
   font-family: inherit;
   font-size: x-small;
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 661683db..89f249d4 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -1,11 +1,10 @@
-import { Fragment, useEffect, useMemo, useState, useRef } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { Comment, useAccountComment, useAuthorAddress, useAuthorAvatar, useBlock, useComment, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
 import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './reply.module.css';
 import { useCommentMediaInfo } from '../../hooks/use-comment-media-info';
-import { useElementPosition } from '../../hooks/use-element-position';
 import useReplies from '../../hooks/use-replies';
 import { CommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import { formatLocalizedUTCTimestamp, getFormattedTimeAgo } from '../../lib/utils/time-utils';
@@ -25,7 +24,6 @@ import { isInboxView, isPostContextView, isPostView } from '../../lib/utils/view
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import Markdown from '../markdown';
 import { getHostname } from '../../lib/utils/url-utils';
-import { createPortal } from 'react-dom';
 
 interface ReplyAuthorProps {
   address: string;
@@ -336,8 +334,6 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
     setCollapsed(!collapsed);
   };
 
-  const taglineRef = useRef<HTMLParagraphElement>(null);
-  const labelPosition = useElementPosition(taglineRef, collapsed);
   const stateLabel = (
     <span className={`${styles.stateLabel} ${collapsed ? styles.collapsedStateLabel : ''}`}>
       {state === 'failed' && <Label color='red' text={t('failed')} />}
@@ -384,10 +380,9 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
                 </span>{' '}
                 {pinned && <span className={styles.pinned}>- {t('stickied_comment')}</span>}
                 {collapsed && (
-                  <span className={styles.children} ref={taglineRef}>
-                    {' '}
-                    ({childrenString}){' '}
-                  </span>
+                  <>
+                    <span className={styles.children}>({childrenString})</span> {stateLabel} {state === 'pending' && loadingString}
+                  </>
                 )}
                 {!collapsed && stateLabel}
                 {!collapsed && flair && (
@@ -508,22 +503,6 @@ const Reply = ({ cidOfReplyWithContext, depth = 0, isSingleComment, isSingleRepl
           )}
         </div>
       </div>
-      {collapsed &&
-        labelPosition &&
-        createPortal(
-          <div
-            className={styles.portalLabel}
-            style={{
-              position: 'absolute',
-              top: `${labelPosition.top - 1}px`,
-              left: `${labelPosition.left - 13}px`,
-              transform: 'translateY(-50%)',
-            }}
-          >
-            {stateLabel} {state === 'pending' && loadingString}
-          </div>,
-          document.body,
-        )}
     </div>
   );
 };
diff --git a/src/hooks/use-element-position.ts b/src/hooks/use-element-position.ts
deleted file mode 100644
index 04000c2d..00000000
--- a/src/hooks/use-element-position.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState, useEffect } from 'react';
-
-interface Position {
-  top: number;
-  left: number;
-}
-
-export const useElementPosition = (ref: React.RefObject<HTMLElement>, enabled: boolean | undefined) => {
-  const [position, setPosition] = useState<Position | null>(null);
-
-  useEffect(() => {
-    if (!ref.current || !enabled) {
-      setPosition(null);
-      return;
-    }
-
-    let rafId: number;
-    let lastTop: number = 0;
-    let lastLeft: number = 0;
-
-    const updatePosition = () => {
-      if (!ref.current) return;
-
-      const rect = ref.current.getBoundingClientRect();
-      const newTop = window.scrollY + rect.top + rect.height / 2;
-      const newLeft = rect.right + 5;
-
-      // Only update state if position actually changed
-      if (newTop !== lastTop || newLeft !== lastLeft) {
-        lastTop = newTop;
-        lastLeft = newLeft;
-        setPosition({ top: newTop, left: newLeft });
-      }
-
-      rafId = requestAnimationFrame(updatePosition);
-    };
-
-    // Start the animation frame loop
-    updatePosition();
-
-    // Also watch for size changes
-    const resizeObserver = new ResizeObserver(updatePosition);
-    resizeObserver.observe(ref.current);
-
-    return () => {
-      cancelAnimationFrame(rafId);
-      resizeObserver.disconnect();
-    };
-  }, [ref, enabled]);
-
-  return position;
-};

From b8ebef0c6e11055bafdf059c0bae20f80499fbf0 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 4 Dec 2024 14:57:47 +0100
Subject: [PATCH 14/14] feat(settings): add option to hide avatars from replies

---
 public/translations/ar/default.json           |  3 ++-
 public/translations/bn/default.json           |  3 ++-
 public/translations/cs/default.json           |  3 ++-
 public/translations/da/default.json           |  3 ++-
 public/translations/de/default.json           |  3 ++-
 public/translations/el/default.json           |  3 ++-
 public/translations/en/default.json           |  3 ++-
 public/translations/es/default.json           |  3 ++-
 public/translations/fa/default.json           |  3 ++-
 public/translations/fi/default.json           |  3 ++-
 public/translations/fil/default.json          |  3 ++-
 public/translations/fr/default.json           |  3 ++-
 public/translations/he/default.json           |  3 ++-
 public/translations/hi/default.json           |  3 ++-
 public/translations/hu/default.json           |  3 ++-
 public/translations/id/default.json           |  3 ++-
 public/translations/it/default.json           |  3 ++-
 public/translations/ja/default.json           |  3 ++-
 public/translations/ko/default.json           |  3 ++-
 public/translations/mr/default.json           |  3 ++-
 public/translations/nl/default.json           |  3 ++-
 public/translations/no/default.json           |  3 ++-
 public/translations/pl/default.json           |  3 ++-
 public/translations/pt/default.json           |  3 ++-
 public/translations/ro/default.json           |  3 ++-
 public/translations/ru/default.json           |  3 ++-
 public/translations/sq/default.json           |  3 ++-
 public/translations/sv/default.json           |  3 ++-
 public/translations/te/default.json           |  3 ++-
 public/translations/th/default.json           |  3 ++-
 public/translations/tr/default.json           |  3 ++-
 public/translations/uk/default.json           |  3 ++-
 public/translations/ur/default.json           |  3 ++-
 public/translations/vi/default.json           |  3 ++-
 public/translations/zh/default.json           |  3 ++-
 src/components/reply/reply.tsx                |  5 +++--
 src/stores/use-avatar-visibility-store.ts     | 21 +++++++++++++++++++
 .../avatar-settings.module.css                | 16 +++++++++++++-
 .../avatar-settings/avatar-settings.tsx       |  8 +++++++
 39 files changed, 117 insertions(+), 38 deletions(-)
 create mode 100644 src/stores/use-avatar-visibility-store.ts

diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json
index 12674dae..6f05409a 100644
--- a/public/translations/ar/default.json
+++ b/public/translations/ar/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>إنشاء</1> حساب جديد",
   "wallet_number": "المحفظة #{{index}}",
   "view_more": "عرض المزيد",
-  "submit_community": "قدم مجتمعك"
+  "submit_community": "قدم مجتمعك",
+  "hide_avatars_from_replies": "إخفاء الصور الرمزية من الردود"
 }
\ No newline at end of file
diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json
index a7a66d95..2288db16 100644
--- a/public/translations/bn/default.json
+++ b/public/translations/bn/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>নতুন তৈরি করুন</1> অ্যাকাউন্ট",
   "wallet_number": "ওয়ালেট #{{index}}",
   "view_more": "আরও দেখুন",
-  "submit_community": "আপনার সম্প্রদায় জমা দিন"
+  "submit_community": "আপনার সম্প্রদায় জমা দিন",
+  "hide_avatars_from_replies": "প্রতিক্রিয়া থেকে অ্যাভাটারগুলি লুকান"
 }
\ No newline at end of file
diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json
index 58e33381..949d7c59 100644
--- a/public/translations/cs/default.json
+++ b/public/translations/cs/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>vytvořit</1> nový účet",
   "wallet_number": "peněženka #{{index}}",
   "view_more": "zobrazit více",
-  "submit_community": "Odešlete svou komunitu"
+  "submit_community": "Odešlete svou komunitu",
+  "hide_avatars_from_replies": "Skrýt avatary v odpovědích"
 }
\ No newline at end of file
diff --git a/public/translations/da/default.json b/public/translations/da/default.json
index ebe00b1b..2bb6b20c 100644
--- a/public/translations/da/default.json
+++ b/public/translations/da/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>oprette</1> en ny konto",
   "wallet_number": "tegneboks #{{index}}",
   "view_more": "se mere",
-  "submit_community": "Indsend dit fællesskab"
+  "submit_community": "Indsend dit fællesskab",
+  "hide_avatars_from_replies": "Skjul avatarer fra svar"
 }
\ No newline at end of file
diff --git a/public/translations/de/default.json b/public/translations/de/default.json
index 2a914cfd..372460ed 100644
--- a/public/translations/de/default.json
+++ b/public/translations/de/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>erstelle</1> ein neues Konto",
   "wallet_number": "Wallet #{{index}}",
   "view_more": "mehr anzeigen",
-  "submit_community": "Reichen Sie Ihre Gemeinschaft ein"
+  "submit_community": "Reichen Sie Ihre Gemeinschaft ein",
+  "hide_avatars_from_replies": "Avatare in Antworten ausblenden"
 }
\ No newline at end of file
diff --git a/public/translations/el/default.json b/public/translations/el/default.json
index 7972fa81..8a0bce05 100644
--- a/public/translations/el/default.json
+++ b/public/translations/el/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>δημιουργία</1> νέου λογαριασμού",
   "wallet_number": "πορτοφόλι #{{index}}",
   "view_more": "δείτε περισσότερα",
-  "submit_community": "Υποβάλετε την κοινότητά σας"
+  "submit_community": "Υποβάλετε την κοινότητά σας",
+  "hide_avatars_from_replies": "Απόκρυψη avatar από τις απαντήσεις"
 }
\ No newline at end of file
diff --git a/public/translations/en/default.json b/public/translations/en/default.json
index c793efaa..b6f8b60a 100644
--- a/public/translations/en/default.json
+++ b/public/translations/en/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>create</1> a new account",
   "wallet_number": "wallet #{{index}}",
   "view_more": "view more",
-  "submit_community": "Submit your community"
+  "submit_community": "Submit your community",
+  "hide_avatars_from_replies": "Hide avatars from replies"
 }
\ No newline at end of file
diff --git a/public/translations/es/default.json b/public/translations/es/default.json
index 30cea348..261172bd 100644
--- a/public/translations/es/default.json
+++ b/public/translations/es/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>crear</1> una nueva cuenta",
   "wallet_number": "billetera #{{index}}",
   "view_more": "ver más",
-  "submit_community": "Envía tu comunidad"
+  "submit_community": "Envía tu comunidad",
+  "hide_avatars_from_replies": "Ocultar avatares de las respuestas"
 }
\ No newline at end of file
diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json
index 6c1e2944..60efd580 100644
--- a/public/translations/fa/default.json
+++ b/public/translations/fa/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>ایجاد</1> یک حساب جدید",
   "wallet_number": "کیف پول #{{index}}",
   "view_more": "مشاهده بیشتر",
-  "submit_community": "جامعه خود را ارسال کنید"
+  "submit_community": "جامعه خود را ارسال کنید",
+  "hide_avatars_from_replies": "تصاویر پروفایل را از پاسخ‌ها پنهان کن"
 }
\ No newline at end of file
diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json
index 7fefd3fb..87401ea4 100644
--- a/public/translations/fi/default.json
+++ b/public/translations/fi/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>luo</1> uusi tili",
   "wallet_number": "lompakko #{{index}}",
   "view_more": "näytä lisää",
-  "submit_community": "Lähetä yhteisösi"
+  "submit_community": "Lähetä yhteisösi",
+  "hide_avatars_from_replies": "Piilota avatarit vastauksista"
 }
\ No newline at end of file
diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json
index 4c8e0f2b..0ffecc2a 100644
--- a/public/translations/fil/default.json
+++ b/public/translations/fil/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>lumikha</1> ng bagong account",
   "wallet_number": "wallet #{{index}}",
   "view_more": "tingnan pa",
-  "submit_community": "I-submit ang iyong komunidad"
+  "submit_community": "I-submit ang iyong komunidad",
+  "hide_avatars_from_replies": "Itago ang mga avatar mula sa mga sagot"
 }
\ No newline at end of file
diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json
index 95f1df91..61950de2 100644
--- a/public/translations/fr/default.json
+++ b/public/translations/fr/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>créer</1> un nouveau compte",
   "wallet_number": "portefeuille #{{index}}",
   "view_more": "voir plus",
-  "submit_community": "Soumettez votre communauté"
+  "submit_community": "Soumettez votre communauté",
+  "hide_avatars_from_replies": "Cacher les avatars des réponses"
 }
\ No newline at end of file
diff --git a/public/translations/he/default.json b/public/translations/he/default.json
index 8b1a9c06..7d2742e5 100644
--- a/public/translations/he/default.json
+++ b/public/translations/he/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>צור</1> חשבון חדש",
   "wallet_number": "ארנק #{{index}}",
   "view_more": "ראה עוד",
-  "submit_community": "שלח את הקהילה שלך"
+  "submit_community": "שלח את הקהילה שלך",
+  "hide_avatars_from_replies": "הסתרת תמונות פרופיל בתשובות"
 }
\ No newline at end of file
diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json
index e5cbe0fe..6cb10ef0 100644
--- a/public/translations/hi/default.json
+++ b/public/translations/hi/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>नया बनाएं</1> खाता",
   "wallet_number": "वॉलेट #{{index}}",
   "view_more": "और देखें",
-  "submit_community": "अपनी समुदाय सबमिट करें"
+  "submit_community": "अपनी समुदाय सबमिट करें",
+  "hide_avatars_from_replies": "उत्तर से अवतार छुपाएं"
 }
\ No newline at end of file
diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json
index 868d8132..c57ea378 100644
--- a/public/translations/hu/default.json
+++ b/public/translations/hu/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>hozzon létre</1> egy új fiókot",
   "wallet_number": "tárca #{{index}}",
   "view_more": "több megtekintése",
-  "submit_community": "Küldje el közösségét"
+  "submit_community": "Küldje el közösségét",
+  "hide_avatars_from_replies": "Rejtse el az avatarokat a válaszokból"
 }
\ No newline at end of file
diff --git a/public/translations/id/default.json b/public/translations/id/default.json
index a0a9dfeb..28af39c8 100644
--- a/public/translations/id/default.json
+++ b/public/translations/id/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>buat</1> akun baru",
   "wallet_number": "dompet #{{index}}",
   "view_more": "lihat lebih banyak",
-  "submit_community": "Kirim komunitas Anda"
+  "submit_community": "Kirim komunitas Anda",
+  "hide_avatars_from_replies": "Sembunyikan avatar dari balasan"
 }
\ No newline at end of file
diff --git a/public/translations/it/default.json b/public/translations/it/default.json
index 0d1a2274..d66ec63f 100644
--- a/public/translations/it/default.json
+++ b/public/translations/it/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>crea</1> un nuovo account",
   "wallet_number": "wallet #{{index}}",
   "view_more": "altri",
-  "submit_community": "Invia la tua comunità"
+  "submit_community": "Invia la tua comunità",
+  "hide_avatars_from_replies": "Nascondi avatar da commenti"
 }
\ No newline at end of file
diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json
index de444f2b..695f64b7 100644
--- a/public/translations/ja/default.json
+++ b/public/translations/ja/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>新しい</1>アカウントを作成",
   "wallet_number": "ウォレット #{{index}}",
   "view_more": "もっと見る",
-  "submit_community": "コミュニティを提出してください"
+  "submit_community": "コミュニティを提出してください",
+  "hide_avatars_from_replies": "返信からアバターを非表示にする"
 }
\ No newline at end of file
diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json
index ed9932d6..9427cf7f 100644
--- a/public/translations/ko/default.json
+++ b/public/translations/ko/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>새로 만들기</1> 계정",
   "wallet_number": "지갑 #{{index}}",
   "view_more": "더보기",
-  "submit_community": "커뮤니티를 제출하세요"
+  "submit_community": "커뮤니티를 제출하세요",
+  "hide_avatars_from_replies": "답글에서 아바타 숨기기"
 }
\ No newline at end of file
diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json
index 93b7d8fb..9b080c27 100644
--- a/public/translations/mr/default.json
+++ b/public/translations/mr/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>नवीन तयार करा</1> खाता",
   "wallet_number": "वॉलेट #{{index}}",
   "view_more": "अधिक पाहा",
-  "submit_community": "तुमच्या समुदायाला सबमिट करा"
+  "submit_community": "तुमच्या समुदायाला सबमिट करा",
+  "hide_avatars_from_replies": "उत्तरांमधून अवतार लपवा"
 }
\ No newline at end of file
diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json
index 2983c7ca..67c34480 100644
--- a/public/translations/nl/default.json
+++ b/public/translations/nl/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>maak</1> een nieuw account aan",
   "wallet_number": "portemonnee #{{index}}",
   "view_more": "meer bekijken",
-  "submit_community": "Dien uw gemeenschap in"
+  "submit_community": "Dien uw gemeenschap in",
+  "hide_avatars_from_replies": "Verberg avatars van reacties"
 }
\ No newline at end of file
diff --git a/public/translations/no/default.json b/public/translations/no/default.json
index 04a38181..26833f4a 100644
--- a/public/translations/no/default.json
+++ b/public/translations/no/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>opprett</1> en ny konto",
   "wallet_number": "lommebok #{{index}}",
   "view_more": "vis mer",
-  "submit_community": "Send inn ditt fellesskap"
+  "submit_community": "Send inn ditt fellesskap",
+  "hide_avatars_from_replies": "Skjul avatarer fra svar"
 }
\ No newline at end of file
diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json
index e4d7c6a0..efcc48e8 100644
--- a/public/translations/pl/default.json
+++ b/public/translations/pl/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>stwórz</1> nowe konto",
   "wallet_number": "portfel #{{index}}",
   "view_more": "zobacz więcej",
-  "submit_community": "Prześlij swoją społeczność"
+  "submit_community": "Prześlij swoją społeczność",
+  "hide_avatars_from_replies": "Ukryj avatary w odpowiedziach"
 }
\ No newline at end of file
diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json
index 3ae5f153..e4160916 100644
--- a/public/translations/pt/default.json
+++ b/public/translations/pt/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>criar</1> uma nova conta",
   "wallet_number": "carteira #{{index}}",
   "view_more": "ver mais",
-  "submit_community": "Envie sua comunidade"
+  "submit_community": "Envie sua comunidade",
+  "hide_avatars_from_replies": "Esconder avatares das respostas"
 }
\ No newline at end of file
diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json
index 289beb9e..a117e342 100644
--- a/public/translations/ro/default.json
+++ b/public/translations/ro/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>creați</1> un cont nou",
   "wallet_number": "portofel #{{index}}",
   "view_more": "vezi mai mult",
-  "submit_community": "Trimite comunitatea ta"
+  "submit_community": "Trimite comunitatea ta",
+  "hide_avatars_from_replies": "Ascunde avatarele din răspunsuri"
 }
\ No newline at end of file
diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json
index 4446d613..8bb49c0e 100644
--- a/public/translations/ru/default.json
+++ b/public/translations/ru/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>создать</1> новую учетную запись",
   "wallet_number": "кошелек #{{index}}",
   "view_more": "смотреть больше",
-  "submit_community": "Отправьте ваше сообщество"
+  "submit_community": "Отправьте ваше сообщество",
+  "hide_avatars_from_replies": "Скрыть аватары в ответах"
 }
\ No newline at end of file
diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json
index 807afcc0..66749be4 100644
--- a/public/translations/sq/default.json
+++ b/public/translations/sq/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>krijo</1> një llogari të re",
   "wallet_number": "portofol #{{index}}",
   "view_more": "shiko më shumë",
-  "submit_community": "Dorëzo komunitetin tuaj"
+  "submit_community": "Dorëzo komunitetin tuaj",
+  "hide_avatars_from_replies": "Fshih avatarët nga përgjigjet"
 }
\ No newline at end of file
diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json
index 3be4ae72..90062e73 100644
--- a/public/translations/sv/default.json
+++ b/public/translations/sv/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>skapa</1> ett nytt konto",
   "wallet_number": "plånbok #{{index}}",
   "view_more": "visa mer",
-  "submit_community": "Skicka in ditt samhälle"
+  "submit_community": "Skicka in ditt samhälle",
+  "hide_avatars_from_replies": "Dölj avatarer från svar"
 }
\ No newline at end of file
diff --git a/public/translations/te/default.json b/public/translations/te/default.json
index 090e18c7..c5110b1a 100644
--- a/public/translations/te/default.json
+++ b/public/translations/te/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>తరువాత</1> కొత్త ఖాతా",
   "wallet_number": "వాలెట్ #{{index}}",
   "view_more": "మరింత చూడండి",
-  "submit_community": "మీ కమ్యూనిటి పంపించండి"
+  "submit_community": "మీ కమ్యూనిటి పంపించండి",
+  "hide_avatars_from_replies": "ప్రతిస్పందనల నుండి అవతార్లను దాచు"
 }
\ No newline at end of file
diff --git a/public/translations/th/default.json b/public/translations/th/default.json
index c636d543..890aeba9 100644
--- a/public/translations/th/default.json
+++ b/public/translations/th/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>สร้าง</1> บัญชีใหม่",
   "wallet_number": "กระเป๋าเงิน #{{index}}",
   "view_more": "ดูเพิ่มเติม",
-  "submit_community": "ส่งชุมชนของคุณ"
+  "submit_community": "ส่งชุมชนของคุณ",
+  "hide_avatars_from_replies": "ซ่อนอวาตาร์จากคำตอบ"
 }
\ No newline at end of file
diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json
index 1c45a749..97e6578c 100644
--- a/public/translations/tr/default.json
+++ b/public/translations/tr/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>oluştur</1> yeni bir hesap",
   "wallet_number": "cüzdan #{{index}}",
   "view_more": "daha fazla görüntüle",
-  "submit_community": "Topluluğunuzu gönderin"
+  "submit_community": "Topluluğunuzu gönderin",
+  "hide_avatars_from_replies": "Yanıtlardan avatarları gizle"
 }
\ No newline at end of file
diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json
index 6c6af2e8..05b45b2d 100644
--- a/public/translations/uk/default.json
+++ b/public/translations/uk/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>створити</1> новий обліковий запис",
   "wallet_number": "гаманець #{{index}}",
   "view_more": "переглянути більше",
-  "submit_community": "Надішліть своє співтовариство"
+  "submit_community": "Надішліть своє співтовариство",
+  "hide_avatars_from_replies": "Сховати аватари в відповідях"
 }
\ No newline at end of file
diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json
index 5b4d750c..244f8f6b 100644
--- a/public/translations/ur/default.json
+++ b/public/translations/ur/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>نیا بنائیں</1> اکاؤنٹ",
   "wallet_number": "والٹ #{{index}}",
   "view_more": "مزید دیکھیں",
-  "submit_community": "اپنی کمیونٹی جمع کروائیں"
+  "submit_community": "اپنی کمیونٹی جمع کروائیں",
+  "hide_avatars_from_replies": "جوابوں سے اوتار چھپائیں"
 }
\ No newline at end of file
diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json
index 0fbebd0c..87187821 100644
--- a/public/translations/vi/default.json
+++ b/public/translations/vi/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>tạo</1> tài khoản mới",
   "wallet_number": "ví #{{index}}",
   "view_more": "xem thêm",
-  "submit_community": "Gửi cộng đồng của bạn"
+  "submit_community": "Gửi cộng đồng của bạn",
+  "hide_avatars_from_replies": "Ẩn avatar trong các câu trả lời"
 }
\ No newline at end of file
diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json
index 7d58c3f1..acf308fd 100644
--- a/public/translations/zh/default.json
+++ b/public/translations/zh/default.json
@@ -322,5 +322,6 @@
   "create_new_account": "<1>创建</1>新账户",
   "wallet_number": "钱包 #{{index}}",
   "view_more": "查看更多",
-  "submit_community": "提交您的社区"
+  "submit_community": "提交您的社区",
+  "hide_avatars_from_replies": "隐藏回复中的头像"
 }
\ No newline at end of file
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 89f249d4..a5cbf44b 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -24,6 +24,7 @@ import { isInboxView, isPostContextView, isPostView } from '../../lib/utils/view
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import Markdown from '../markdown';
 import { getHostname } from '../../lib/utils/url-utils';
+import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
 
 interface ReplyAuthorProps {
   address: string;
@@ -39,20 +40,20 @@ interface ReplyAuthorProps {
 
 const ReplyAuthor = ({ address, authorRole, cid, deleted, displayName, imageUrl, isAvatarDefined, removed, shortAuthorAddress }: ReplyAuthorProps) => {
   const { t } = useTranslation();
+  const { hideAvatars } = useAvatarVisibilityStore();
   const isAuthorAdmin = authorRole === 'admin';
   const isAuthorOwner = authorRole === 'owner';
   const isAuthorModerator = authorRole === 'moderator';
   const authorRoleInitial = (isAuthorOwner && 'O') || (isAuthorAdmin && 'A') || (isAuthorModerator && 'M') || '';
   const moderatorClass = `${isAuthorOwner ? styles.owner : isAuthorAdmin ? styles.admin : isAuthorModerator ? styles.moderator : ''}`;
   const shortDisplayName = displayName?.length > 20 ? displayName?.slice(0, 20) + '...' : displayName;
-
   return (
     <>
       {removed || deleted ? (
         <span className={styles.removedUsername}>[{removed ? t('removed') : deleted ? t('deleted') : ''}]</span>
       ) : (
         <>
-          {isAvatarDefined && (
+          {!hideAvatars && isAvatarDefined && (
             <span className={styles.authorAvatar}>
               <img src={imageUrl} alt='' />
             </span>
diff --git a/src/stores/use-avatar-visibility-store.ts b/src/stores/use-avatar-visibility-store.ts
new file mode 100644
index 00000000..aa2c3f7e
--- /dev/null
+++ b/src/stores/use-avatar-visibility-store.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AvatarVisibilityState {
+  hideAvatars: boolean;
+  setHideAvatars: (hide: boolean) => void;
+}
+
+const useAvatarVisibilityStore = create<AvatarVisibilityState>()(
+  persist(
+    (set) => ({
+      hideAvatars: false,
+      setHideAvatars: (hide) => set({ hideAvatars: hide }),
+    }),
+    {
+      name: 'avatar-visibility-storage',
+    },
+  ),
+);
+
+export default useAvatarVisibilityStore;
diff --git a/src/views/settings/avatar-settings/avatar-settings.module.css b/src/views/settings/avatar-settings/avatar-settings.module.css
index e099e570..c83041b8 100644
--- a/src/views/settings/avatar-settings/avatar-settings.module.css
+++ b/src/views/settings/avatar-settings/avatar-settings.module.css
@@ -74,4 +74,18 @@
 
 .copyMessage a:hover {
   text-decoration: underline;
-}
\ No newline at end of file
+}
+
+.hideAvatarsCheckbox {
+  padding-top: 10px;
+  display: inline-block;
+  text-transform: lowercase;
+}
+
+.hideAvatarsCheckbox label {
+  cursor: pointer;
+}
+
+.hideAvatarsCheckbox input {
+  margin-right: .5em;
+}
diff --git a/src/views/settings/avatar-settings/avatar-settings.tsx b/src/views/settings/avatar-settings/avatar-settings.tsx
index 673e14c9..38155fca 100644
--- a/src/views/settings/avatar-settings/avatar-settings.tsx
+++ b/src/views/settings/avatar-settings/avatar-settings.tsx
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { setAccount, useAccount, useAuthorAvatar } from '@plebbit/plebbit-react-hooks';
 import styles from './avatar-settings.module.css';
 import { Trans, useTranslation } from 'react-i18next';
+import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-store';
 
 interface AvatarSettingsProps {
   areSettingsShown?: boolean;
@@ -57,6 +58,7 @@ const AvatarSettings = () => {
   const [tokenId, setTokenId] = useState(account?.author?.avatar?.id);
   const [timestamp, setTimestamp] = useState(account?.author?.avatar?.timestamp);
   const [signature, setSignature] = useState(account?.author?.avatar?.signature?.signature);
+  const { hideAvatars, setHideAvatars } = useAvatarVisibilityStore();
 
   const getNftMessageToSign = (authorAddress: string, timestamp: number, tokenAddress: string, tokenId: string) => {
     let messageToSign: any = {};
@@ -205,6 +207,12 @@ const AvatarSettings = () => {
           </div>
         </div>
       )}
+      <div className={styles.hideAvatarsCheckbox}>
+        <label>
+          <input type='checkbox' checked={hideAvatars} onChange={(e) => setHideAvatars(e.target.checked)} />
+          {t('hide_avatars_from_replies')}
+        </label>
+      </div>
     </div>
   );
 };