From 922a0c43a96dd2692c885b8ba982bdc552b2e81f Mon Sep 17 00:00:00 2001 From: Daniela Henkel Date: Wed, 19 Nov 2025 19:40:06 +0000 Subject: [PATCH] tweak to enable square avatars for entire site (mostly done) --- src/screens/Profile/Header/Shell.tsx | 8 +++++--- src/screens/Settings/DeerSettings.tsx | 19 +++++++++++++++++++ src/state/persisted/schema.ts | 2 ++ src/state/preferences/enable-square-avatars.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/state/preferences/index.tsx | 5 ++++- src/view/com/util/UserAvatar.tsx | 9 ++++++++- 6 file(s) changed, 88 insertion(s)(+), 5 deletion(s)(-) diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx --- a/src/screens/Profile/Header/Shell.tsx +++ b/src/screens/Profile/Header/Shell.tsx @@ -22,6 +22,7 @@ import {logger} from '#/logger' import {isIOS} from '#/platform/detection' import {type Shadow} from '#/state/cache/types' import {useLightboxControls} from '#/state/lightbox' +import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' import { maybeModifyHighQualityImage, useHighQualityImages, @@ -66,6 +67,7 @@ const {top: topInset} = useSafeAreaInsets() const playHaptic = useHaptics() const liveStatusControl = useDialogControl() const highQualityImages = useHighQualityImages() + const enableSquareAvatars = useEnableSquareAvatars() const aviRef = useAnimatedRef() const bannerRef = useAnimatedRef() @@ -92,13 +94,13 @@ height: 1000, width: 1000, }, thumbDimensions: null, - type: 'circle-avi', + type: enableSquareAvatars ? 'rect-avi' : 'circle-avi', }, ], index: 0, }) }, - [openLightbox, highQualityImages], + [openLightbox, highQualityImages, enableSquareAvatars], ) // theres probs a better way instead of just making a separate one but this works:tm: so its whatever @@ -311,7 +313,7 @@ accessibilityHint=""> setHideSimilarAccountsRecomm(value)} style={[a.w_full]}> Hide similar accounts recommendations + + + + + setEnableSquareAvatars(value)} + style={[a.w_full]}> + + Enable square avatars diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -141,6 +141,7 @@ disableQuotesMetrics: z.boolean().optional(), disableSavesMetrics: z.boolean().optional(), disableReplyMetrics: z.boolean().optional(), hideSimilarAccountsRecomm: z.boolean().optional(), + enableSquareAvatars: z.boolean().optional(), deerVerification: z .object({ enabled: z.boolean(), @@ -218,6 +219,7 @@ disableQuotesMetrics: false, disableSavesMetrics: false, disableReplyMetrics: false, hideSimilarAccountsRecomm: false, + enableSquareAvatars: false, deerVerification: { enabled: false, // https://social.daniela.lol/profile/did:plc:p2cp5gopk7mgjegy6wadk3ep/post/3lndyqyyr4k2k diff --git a/src/state/preferences/enable-square-avatars.tsx b/src/state/preferences/enable-square-avatars.tsx new file mode 100644 --- /dev/null +++ b/src/state/preferences/enable-square-avatars.tsx @@ -0,0 +1,50 @@ +import React from 'react' + +import * as persisted from '#/state/persisted' + +// Preference: enableSquareAvatars – when true, disables notifications sent when liking/reposting a post someone else reposted + +type StateContext = persisted.Schema['enableSquareAvatars'] +// Same setter signature used across other preference modules +type SetContext = (v: persisted.Schema['enableSquareAvatars']) => void + +const stateContext = React.createContext( + persisted.defaults.enableSquareAvatars, +) +const setContext = React.createContext( + (_: persisted.Schema['enableSquareAvatars']) => {}, +) + +export function Provider({children}: React.PropsWithChildren<{}>) { + const [state, setState] = React.useState(persisted.get('enableSquareAvatars')) + + const setStateWrapped = React.useCallback( + (value: persisted.Schema['enableSquareAvatars']) => { + setState(value) + persisted.write('enableSquareAvatars', value) + }, + [setState], + ) + + React.useEffect(() => { + return persisted.onUpdate('enableSquareAvatars', next => { + setState(next) + }) + }, [setStateWrapped]) + + return ( + + + {children} + + + ) +} + +export function useEnableSquareAvatars() { + return React.useContext(stateContext) +} + +export function useSetEnableSquareAvatars() { + return React.useContext(setContext) +} diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -13,6 +13,7 @@ import {Provider as DisableReplyMetricsProvider} from './disable-reply-metrics' import {Provider as DisableRepostsMetricsProvider} from './disable-reposts-metrics' import {Provider as DisableSavesMetricsProvider} from './disable-saves-metrics' import {Provider as DisableViaRepostNotificationProvider} from './disable-via-repost-notification' +import {Provider as EnableSquareAvatarsProvider} from './enable-square-avatars' import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs' import {Provider as GoLinksProvider} from './go-links-enabled' import {Provider as HiddenPostsProvider} from './hidden-posts' @@ -83,7 +84,9 @@ - {children} + + {children} + diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -34,6 +34,7 @@ type ComposerImage, compressImage, createComposerImage, } from '#/state/gallery' +import {useEnableSquareAvatars} from '#/state/preferences/enable-square-avatars' import { maybeModifyHighQualityImage, useHighQualityImages, @@ -227,11 +228,17 @@ hideLiveBadge, noBorder, }: UserAvatarProps): React.ReactNode => { const t = useTheme() - const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square') + + const enableSquareAvatars = useEnableSquareAvatars() + const avishapeforce = enableSquareAvatars ? 'square' : 'circle' + + const finalShape = + overrideShape ?? (type === 'user' ? avishapeforce : 'square') const highQualityImages = useHighQualityImages() const aviStyle = useMemo(() => { let borderRadius + if (finalShape === 'square') { borderRadius = size > 32 ? 8 : 3 } else { -- tangled.sh