From 91a03056ad6d0fbd0c459c95c22c7d6004255e5e Mon Sep 17 00:00:00 2001 From: "xan.lol" Date: Sat, 30 May 2026 17:32:22 -0700 Subject: [PATCH] fix: useLingui + enableSquareButtons ephemeral follow actions using updated language syntax, lightbox should use square buttons --- src/components/Lightbox/Lightbox.web.tsx | 6 ++- .../Lightbox/chrome/CircleChromeButton.tsx | 12 +++-- .../chrome/CircleChromeButton.web.tsx | 12 +++-- .../hooks/useEphemeralFollowAction.ts | 44 ++++++++----------- 4 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/components/Lightbox/Lightbox.web.tsx b/src/components/Lightbox/Lightbox.web.tsx index 641b2c340..37365c43a 100644 --- a/src/components/Lightbox/Lightbox.web.tsx +++ b/src/components/Lightbox/Lightbox.web.tsx @@ -7,6 +7,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar' import {saveImageToMediaLibrary} from '#/lib/media/manip' import {useA11y} from '#/state/a11y' +import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' import { atoms as a, flatten, @@ -105,6 +106,7 @@ function LightboxGallery({ const [isAltExpanded, setAltExpanded] = useState(false) const {gtPhone} = useBreakpoints() + const enableSquareButtons = useEnableSquareButtons() const canGoLeft = index >= 1 const canGoRight = index < imgs.length - 1 @@ -195,7 +197,7 @@ function LightboxGallery({ hoverStyle={styles.blurredBackdropHover} color="secondary" label={l`Previous image`} - shape="round" + shape={enableSquareButtons ? 'square' : 'round'} size={gtPhone ? 'large' : 'small'}> const SIZE = 32 -const RADIUS = SIZE / 2 const ICON = 18 export function CircleChromeButton({ @@ -39,6 +40,8 @@ export function CircleChromeButton({ testID, ...rest }: Props) { + const enableSquareButtons = useEnableSquareButtons() + return ( [styles.root, pressed && styles.pressed]}> + style={({pressed}) => [ + styles.root, + enableSquareButtons ? a.rounded_sm : a.rounded_full, + pressed && styles.pressed, + ]}> @@ -60,7 +67,6 @@ const styles = StyleSheet.create({ root: { width: SIZE, height: SIZE, - borderRadius: RADIUS, overflow: 'hidden', }, inner: { diff --git a/src/components/Lightbox/chrome/CircleChromeButton.web.tsx b/src/components/Lightbox/chrome/CircleChromeButton.web.tsx index 5e8922c8c..891d548d0 100644 --- a/src/components/Lightbox/chrome/CircleChromeButton.web.tsx +++ b/src/components/Lightbox/chrome/CircleChromeButton.web.tsx @@ -9,6 +9,8 @@ import { } from 'react-native' import {HITSLOP_10} from '#/lib/constants' +import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons' +import {atoms as a} from '#/alf' import {type Props as IconProps} from '#/components/icons/common' type Props = { @@ -28,7 +30,6 @@ type Props = { > const SIZE = 44 -const RADIUS = 24 const ICON = 24 export function CircleChromeButton({ @@ -39,6 +40,8 @@ export function CircleChromeButton({ testID, ...rest }: Props) { + const enableSquareButtons = useEnableSquareButtons() + return ( [styles.root, pressed && styles.pressed]}> + style={({pressed}) => [ + styles.root, + enableSquareButtons ? a.rounded_sm : a.rounded_full, + pressed && styles.pressed, + ]}> @@ -60,7 +67,6 @@ const styles = StyleSheet.create({ root: { width: SIZE, height: SIZE, - borderRadius: RADIUS, overflow: 'hidden', }, inner: { diff --git a/src/components/hooks/useEphemeralFollowAction.ts b/src/components/hooks/useEphemeralFollowAction.ts index 020d378e0..ab98441e8 100644 --- a/src/components/hooks/useEphemeralFollowAction.ts +++ b/src/components/hooks/useEphemeralFollowAction.ts @@ -1,6 +1,5 @@ import {useCallback} from 'react' -import {msg} from '@lingui/core/macro' -import {useLingui} from '@lingui/react' +import {useLingui} from '@lingui/react/macro' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {logger} from '#/logger' @@ -24,7 +23,7 @@ export function useEphemeralFollowAction({ onFollow?: () => void onUnfollow?: () => void }) { - const {_} = useLingui() + const {t: l} = useLingui() const runWithEphemeralAgent = useRunWithEphemeralAgent() return useCallback( @@ -46,20 +45,16 @@ export function useEphemeralFollowAction({ if (result.followed) { onFollow?.() Toast.show( - _( - msg`Following ${sanitizeDisplayName( - profile.displayName || profile.handle, - )} as @${account.handle}`, - ), + l`Following ${sanitizeDisplayName( + profile.displayName || profile.handle, + )} as @${account.handle}`, ) } else { onUnfollow?.() Toast.show( - _( - msg`No longer following ${sanitizeDisplayName( - profile.displayName || profile.handle, - )} as @${account.handle}`, - ), + l`No longer following ${sanitizeDisplayName( + profile.displayName || profile.handle, + )} as @${account.handle}`, ) } } catch (e) { @@ -68,12 +63,12 @@ export function useEphemeralFollowAction({ targetDid: profile.did, accountDid: account.did, }) - Toast.show(_(msg`An issue occurred, please try again.`), { + Toast.show(l`An issue occurred, please try again.`, { type: 'error', }) } }, - [_, onFollow, onUnfollow, profile, runWithEphemeralAgent], + [l, onFollow, onUnfollow, profile, runWithEphemeralAgent], ) } @@ -82,7 +77,7 @@ export function useEphemeralFollowIntent({ }: { profile: Shadow }) { - const {_} = useLingui() + const {t: l} = useLingui() const runWithEphemeralAgent = useRunWithEphemeralAgent() return useCallback( @@ -98,20 +93,17 @@ export function useEphemeralFollowIntent({ return isFollowing ? 'unfollow' : 'follow' } catch (e) { - logger.error( - 'useEphemeralFollowIntent: failed to load follow state', - { - message: String(e), - targetDid: profile.did, - accountDid: account.did, - }, - ) - Toast.show(_(msg`An issue occurred, please try again.`), { + logger.error('useEphemeralFollowIntent: failed to load follow state', { + message: String(e), + targetDid: profile.did, + accountDid: account.did, + }) + Toast.show(l`An issue occurred, please try again.`, { type: 'error', }) return 'follow' } }, - [_, profile, runWithEphemeralAgent], + [l, profile, runWithEphemeralAgent], ) } -- 2.51.2