From 5b7acbc5689d9cebee10d0ba8661227c9996b3cf Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 3 Sep 2024 10:14:15 +0200 Subject: [PATCH] feat(settings): add option to hide avatars --- src/components/post-desktop/post-desktop.tsx | 6 ++++-- src/components/post-mobile/post-mobile.tsx | 4 +++- .../interface-settings.module.css | 4 ++++ .../interface-settings/interface-settings.tsx | 11 ++++++++++ src/stores/use-avatar-visibility-store.ts | 21 +++++++++++++++++++ 5 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 src/stores/use-avatar-visibility-store.ts diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx index 9f6149b6..899d5471 100644 --- a/src/components/post-desktop/post-desktop.tsx +++ b/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; @@ -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 }: {!(isDescription || isRules) && ( <> - {author?.avatar && !(deleted || removed) ? ( + {author?.avatar && !(deleted || removed) && !hideAvatars ? ( diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx index 24b09b3a..677241c7 100644 --- a/src/components/post-mobile/post-mobile.tsx +++ b/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 {!(isDescription || isRules) && ( <> - {author?.avatar && !(deleted || removed) ? ( + {author?.avatar && !(deleted || removed) && !hideAvatars ? ( diff --git a/src/components/settings-modal/interface-settings/interface-settings.module.css b/src/components/settings-modal/interface-settings/interface-settings.module.css index 650868a8..f5aa0bcf 100644 --- a/src/components/settings-modal/interface-settings/interface-settings.module.css +++ b/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; } \ No newline at end of file diff --git a/src/components/settings-modal/interface-settings/interface-settings.tsx b/src/components/settings-modal/interface-settings/interface-settings.tsx index cf9494eb..288cda52 100644 --- a/src/components/settings-modal/interface-settings/interface-settings.tsx +++ b/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) => { + setHideAvatars(e.target.checked); + }; return (
@@ -130,6 +136,11 @@ const InterfaceSettings = () => {
{t('interface_language')}:
+
+ +
); }; 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()( + persist( + (set) => ({ + hideAvatars: false, + setHideAvatars: (hide) => set({ hideAvatars: hide }), + }), + { + name: 'avatar-visibility-storage', + }, + ), +); + +export default useAvatarVisibilityStore;