feat(settings): add option to hide avatars

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

@@ -10,10 +10,12 @@ import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-util
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useAnonModeStore from '../../stores/use-anon-mode-store';
+import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
 import useAnonMode from '../../hooks/use-anon-mode';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
 import useEditCommentPrivileges from '../../hooks/use-author-privileges';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
+import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 import useHide from '../../hooks/use-hide';
 import useReplies from '../../hooks/use-replies';
 import useStateString from '../../hooks/use-state-string';
@@ -28,7 +30,6 @@ import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import { create } from 'zustand';
 import _ from 'lodash';
-import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
 
 interface ShowOmittedRepliesState {
   showOmittedReplies: Record<string, boolean>;
@@ -59,6 +60,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
   const isReply = parentCid;
   const { showOmittedReplies } = useShowOmittedReplies();
   const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
+  const { hideAvatars } = useAvatarVisibilityStore();
 
   const params = useParams();
   const location = useLocation();
@@ -116,7 +118,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
         </span>
         {!(isDescription || isRules) && (
           <>
-            {author?.avatar && !(deleted || removed) ? (
+            {author?.avatar && !(deleted || removed) && !hideAvatars ? (
               <span className={styles.authorAvatar}>
                 <img src={avatarImageUrl} alt='' />
               </span>

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

@@ -9,6 +9,7 @@ import { getTextColorForBackground, hashStringToColor } from '../../lib/utils/po
 import { getFormattedDate, getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import useAnonModeStore from '../../stores/use-anon-mode-store';
+import useAvatarVisibilityStore from '../../stores/use-avatar-visibility-store';
 import useAnonMode from '../../hooks/use-anon-mode';
 import useAuthorAddressClick from '../../hooks/use-author-address-click';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
@@ -33,6 +34,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
   const displayName = author?.displayName?.trim();
   const authorRole = roles?.[address]?.role;
   const { imageUrl: avatarImageUrl } = useAuthorAvatar({ author });
+  const { hideAvatars } = useAvatarVisibilityStore();
 
   const params = useParams();
   const location = useLocation();
@@ -87,7 +89,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
           </span>
           {!(isDescription || isRules) && (
             <>
-              {author?.avatar && !(deleted || removed) ? (
+              {author?.avatar && !(deleted || removed) && !hideAvatars ? (
                 <span className={styles.authorAvatar}>
                   <img src={avatarImageUrl} alt='' />
                 </span>

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -24,4 +24,8 @@
 
 .interfaceSettings {
   margin-bottom: 10px;
+}
+
+.setting input[type="checkbox"] {
+  margin-right: 2px;
 }

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import useTheme from '../../../hooks/use-theme';
 import styles from './interface-settings.module.css';
 import packageJson from '../../../../package.json';
+import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-store';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -107,6 +108,11 @@ const InterfaceLanguage = () => {
 
 const InterfaceSettings = () => {
   const { t } = useTranslation();
+  const { hideAvatars, setHideAvatars } = useAvatarVisibilityStore();
+
+  const handleHideAvatarsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHideAvatars(e.target.checked);
+  };
 
   return (
     <div className={styles.interfaceSettings}>
@@ -130,6 +136,11 @@ const InterfaceSettings = () => {
       <div className={styles.setting}>
         {t('interface_language')}: <InterfaceLanguage />
       </div>
+      <div className={styles.setting}>
+        <label>
+          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {t('hide_avatars')}
+        </label>
+      </div>
     </div>
   );
 };

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;