diff options
Diffstat (limited to 'src/view/com/modals')
23 files changed, 236 insertions, 133 deletions
diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx index 812a36f45..7ec8268be 100644 --- a/src/view/com/modals/AddAppPasswords.tsx +++ b/src/view/com/modals/AddAppPasswords.tsx @@ -72,10 +72,10 @@ export function Component({}: {}) { const onCopy = React.useCallback(() => { if (appPassword) { Clipboard.setString(appPassword) - Toast.show('Copied to clipboard') + Toast.show(_(msg`Copied to clipboard`)) setWasCopied(true) } - }, [appPassword]) + }, [appPassword, _]) const onDone = React.useCallback(() => { closeModal() @@ -85,7 +85,9 @@ export function Component({}: {}) { // if name is all whitespace, we don't allow it if (!name || !name.trim()) { Toast.show( - 'Please enter a name for your app password. All spaces is not allowed.', + _( + msg`Please enter a name for your app password. All spaces is not allowed.`, + ), 'times', ) return @@ -93,14 +95,14 @@ export function Component({}: {}) { // if name is too short (under 4 chars), we don't allow it if (name.length < 4) { Toast.show( - 'App Password names must be at least 4 characters long.', + _(msg`App Password names must be at least 4 characters long.`), 'times', ) return } if (passwords?.find(p => p.name === name)) { - Toast.show('This name is already in use', 'times') + Toast.show(_(msg`This name is already in use`), 'times') return } @@ -109,11 +111,11 @@ export function Component({}: {}) { if (newPassword) { setAppPassword(newPassword.password) } else { - Toast.show('Failed to create app password.', 'times') + Toast.show(_(msg`Failed to create app password.`), 'times') // TODO: better error handling (?) } } catch (e) { - Toast.show('Failed to create app password.', 'times') + Toast.show(_(msg`Failed to create app password.`), 'times') logger.error('Failed to create app password', {error: e}) } } @@ -127,7 +129,9 @@ export function Component({}: {}) { setName(text) } else { Toast.show( - 'App Password names can only contain letters, numbers, spaces, dashes, and underscores.', + _( + msg`App Password names can only contain letters, numbers, spaces, dashes, and underscores.`, + ), ) } } @@ -158,7 +162,7 @@ export function Component({}: {}) { style={[styles.input, pal.text]} onChangeText={_onChangeText} value={name} - placeholder="Enter a name for this App Password" + placeholder={_(msg`Enter a name for this App Password`)} placeholderTextColor={pal.colors.textLight} autoCorrect={false} autoComplete="off" @@ -175,7 +179,7 @@ export function Component({}: {}) { onEndEditing={createAppPassword} accessible={true} accessibilityLabel={_(msg`Name`)} - accessibilityHint="Input name for app password" + accessibilityHint={_(msg`Input name for app password`)} /> </View> ) : ( @@ -184,7 +188,7 @@ export function Component({}: {}) { onPress={onCopy} accessibilityRole="button" accessibilityLabel={_(msg`Copy`)} - accessibilityHint="Copies app password"> + accessibilityHint={_(msg`Copies app password`)}> <Text type="2xl-bold" style={[pal.text]}> {appPassword} </Text> @@ -221,7 +225,7 @@ export function Component({}: {}) { <View style={styles.btnContainer}> <Button type="primary" - label={!appPassword ? 'Create App Password' : 'Done'} + label={!appPassword ? _(msg`Create App Password`) : _(msg`Done`)} style={styles.btn} labelStyle={styles.btnLabel} onPress={!appPassword ? createAppPassword : onDone} diff --git a/src/view/com/modals/AppealLabel.tsx b/src/view/com/modals/AppealLabel.tsx index edc6f4cd0..1a1947a9a 100644 --- a/src/view/com/modals/AppealLabel.tsx +++ b/src/view/com/modals/AppealLabel.tsx @@ -45,7 +45,7 @@ export function Component(props: ReportComponentProps) { }, reason: details, }) - Toast.show("We'll look into your appeal promptly.") + Toast.show(_(msg`We'll look into your appeal promptly.`)) } finally { closeModal() } diff --git a/src/view/com/modals/BirthDateSettings.tsx b/src/view/com/modals/BirthDateSettings.tsx index 1505d224f..5ebc61137 100644 --- a/src/view/com/modals/BirthDateSettings.tsx +++ b/src/view/com/modals/BirthDateSettings.tsx @@ -71,7 +71,7 @@ function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) { buttonStyle={[pal.border, styles.dateInputButton]} buttonLabelType="lg" accessibilityLabel={_(msg`Birthday`)} - accessibilityHint="Enter your birth date" + accessibilityHint={_(msg`Enter your birth date`)} accessibilityLabelledBy="birthDate" /> </View> diff --git a/src/view/com/modals/ChangeEmail.tsx b/src/view/com/modals/ChangeEmail.tsx index 44b102fa0..c5672bc81 100644 --- a/src/view/com/modals/ChangeEmail.tsx +++ b/src/view/com/modals/ChangeEmail.tsx @@ -38,7 +38,7 @@ export function Component() { const onRequestChange = async () => { if (email === currentAccount?.email) { - setError('Enter your new email above') + setError(_(msg`Enter your new email above`)) return } setError('') @@ -53,7 +53,7 @@ export function Component() { email: email.trim(), emailConfirmed: false, }) - Toast.show('Email updated') + Toast.show(_(msg`Email updated`)) setStage(Stages.Done) } } catch (e) { @@ -85,7 +85,7 @@ export function Component() { email: email.trim(), emailConfirmed: false, }) - Toast.show('Email updated') + Toast.show(_(msg`Email updated`)) setStage(Stages.Done) } catch (e) { setError(cleanError(String(e))) diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index 31f6d6ea7..e578fa7da 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -147,7 +147,7 @@ export function Inner({ onPress={onPressCancel} accessibilityRole="button" accessibilityLabel={_(msg`Cancel change handle`)} - accessibilityHint="Exits handle change process" + accessibilityHint={_(msg`Exits handle change process`)} onAccessibilityEscape={onPressCancel}> <Text type="lg" style={pal.textLight}> Cancel @@ -168,7 +168,7 @@ export function Inner({ onPress={onPressSave} accessibilityRole="button" accessibilityLabel={_(msg`Save handle change`)} - accessibilityHint={`Saves handle change to ${handle}`}> + accessibilityHint={_(msg`Saves handle change to ${handle}`)}> <Text type="2xl-medium" style={pal.link}> <Trans>Save</Trans> </Text> @@ -263,14 +263,16 @@ function ProvidedHandleForm({ editable={!isProcessing} accessible={true} accessibilityLabel={_(msg`Handle`)} - accessibilityHint="Sets Bluesky username" + accessibilityHint={_(msg`Sets Bluesky username`)} /> </View> <Text type="md" style={[pal.textLight, s.pl10, s.pt10]}> - <Trans>Your full handle will be</Trans>{' '} - <Text type="md-bold" style={pal.textLight}> - @{createFullHandle(handle, userDomain)} - </Text> + <Trans> + Your full handle will be{' '} + <Text type="md-bold" style={pal.textLight}> + @{createFullHandle(handle, userDomain)} + </Text> + </Trans> </Text> <TouchableOpacity onPress={onToggleCustom} diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 5e869f396..307897fb8 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/src/view/com/modals/Confirm.tsx @@ -12,7 +12,7 @@ import {cleanError} from 'lib/strings/errors' import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' import type {ConfirmModal} from '#/state/modals' import {useModalControls} from '#/state/modals' @@ -72,10 +72,10 @@ export function Component({ onPress={onPress} style={[styles.btn, confirmBtnStyle]} accessibilityRole="button" - accessibilityLabel={_(msg`Confirm`)} + accessibilityLabel={_(msg({message: 'Confirm', context: 'action'}))} accessibilityHint=""> <Text style={[s.white, s.bold, s.f18]}> - {confirmBtnText ?? 'Confirm'} + {confirmBtnText ?? <Trans context="action">Confirm</Trans>} </Text> </TouchableOpacity> )} @@ -85,10 +85,10 @@ export function Component({ onPress={onPressCancel} style={[styles.btnCancel, s.mt10]} accessibilityRole="button" - accessibilityLabel={_(msg`Cancel`)} + accessibilityLabel={_(msg({message: 'Cancel', context: 'action'}))} accessibilityHint=""> <Text type="button-lg" style={pal.textLight}> - {cancelBtnText ?? 'Cancel'} + {cancelBtnText ?? <Trans context="action">Cancel</Trans>} </Text> </TouchableOpacity> )} diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx index 88fb43443..d681fbf0b 100644 --- a/src/view/com/modals/ContentFilteringSettings.tsx +++ b/src/view/com/modals/ContentFilteringSettings.tsx @@ -148,9 +148,13 @@ function AdultContentEnabledPref() { ) : typeof preferences?.birthDate === 'undefined' ? ( <View style={[pal.viewLight, styles.agePrompt]}> <Text type="md" style={[pal.text, {flex: 1}]}> - Confirm your age to enable adult content. + <Trans>Confirm your age to enable adult content.</Trans> </Text> - <Button type="primary" label="Set Age" onPress={onSetAge} /> + <Button + type="primary" + label={_(msg({message: 'Set Age', context: 'action'}))} + onPress={onSetAge} + /> </View> ) : (preferences.userAge || 0) >= 18 ? ( <ToggleButton @@ -165,7 +169,11 @@ function AdultContentEnabledPref() { <Text type="md" style={[pal.text, {flex: 1}]}> <Trans>You must be 18 or older to enable adult content.</Trans> </Text> - <Button type="primary" label="Set Age" onPress={onSetAge} /> + <Button + type="primary" + label={_(msg({message: 'Set Age', context: 'action'}))} + onPress={onSetAge} + /> </View> )} </View> @@ -208,7 +216,7 @@ function ContentLabelPref({ {disabled || !visibility ? ( <Text type="sm-bold" style={pal.textLight}> - <Trans>Hide</Trans> + <Trans context="action">Hide</Trans> </Text> ) : ( <SelectGroup @@ -229,6 +237,7 @@ interface SelectGroupProps { function SelectGroup({current, onChange, labelGroup}: SelectGroupProps) { const {_} = useLingui() + return ( <View style={styles.selectableBtns}> <SelectableBtn @@ -279,6 +288,8 @@ function SelectableBtn({ }: SelectableBtnProps) { const pal = usePalette('default') const palPrimary = usePalette('inverted') + const {_} = useLingui() + return ( <Pressable style={[ @@ -291,7 +302,9 @@ function SelectableBtn({ onPress={() => onChange(value)} accessibilityRole="button" accessibilityLabel={value} - accessibilityHint={`Set ${value} for ${labelGroup} content moderation policy`}> + accessibilityHint={_( + msg`Set ${value} for ${labelGroup} content moderation policy`, + )}> <Text style={current === value ? palPrimary.text : pal.text}> {label} </Text> diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx index 8d13cdf2f..bd1eb3393 100644 --- a/src/view/com/modals/CreateOrEditList.tsx +++ b/src/view/com/modals/CreateOrEditList.tsx @@ -65,7 +65,6 @@ export function Component({ return 'app.bsky.graph.defs#curatelist' }, [list, purpose]) const isCurateList = activePurpose === 'app.bsky.graph.defs#curatelist' - const purposeLabel = isCurateList ? 'User' : 'Moderation' const [isProcessing, setProcessing] = useState<boolean>(false) const [name, setName] = useState<string>(list?.name || '') @@ -106,7 +105,7 @@ export function Component({ } const nameTrimmed = name.trim() if (!nameTrimmed) { - setError('Name is required') + setError(_(msg`Name is required`)) return } setProcessing(true) @@ -121,7 +120,11 @@ export function Component({ description: description.trim(), avatar: newAvatar, }) - Toast.show(`${purposeLabel} list updated`) + Toast.show( + isCurateList + ? _(msg`User list updated`) + : _(msg`Moderation list updated`), + ) onSave?.(list.uri) } else { const res = await listCreateMutation.mutateAsync({ @@ -130,14 +133,20 @@ export function Component({ description, avatar: newAvatar, }) - Toast.show(`${purposeLabel} list created`) + Toast.show( + isCurateList + ? _(msg`User list created`) + : _(msg`Moderation list created`), + ) onSave?.(res.uri) } closeModal() } catch (e: any) { if (isNetworkError(e)) { setError( - 'Failed to create the list. Check your internet connection and try again.', + _( + msg`Failed to create the list. Check your internet connection and try again.`, + ), ) } else { setError(cleanError(e)) @@ -153,13 +162,13 @@ export function Component({ closeModal, activePurpose, isCurateList, - purposeLabel, name, description, newAvatar, list, listMetadataMutation, listCreateMutation, + _, ]) return ( @@ -174,7 +183,17 @@ export function Component({ testID="createOrEditListModal"> <Text style={[styles.title, pal.text]}> <Trans> - {list ? 'Edit' : 'New'} {purposeLabel} List + {isCurateList ? ( + list ? ( + <Trans>Edit User List</Trans> + ) : ( + <Trans>New User List</Trans> + ) + ) : list ? ( + <Trans>Edit Moderation List</Trans> + ) : ( + <Trans>New Moderation List</Trans> + )} </Trans> </Text> {error !== '' && ( @@ -202,7 +221,9 @@ export function Component({ testID="editNameInput" style={[styles.textInput, pal.border, pal.text]} placeholder={ - isCurateList ? 'e.g. Great Posters' : 'e.g. Spammers' + isCurateList + ? _(msg`e.g. Great Posters`) + : _(msg`e.g. Spammers`) } placeholderTextColor={colors.gray4} value={name} @@ -222,8 +243,8 @@ export function Component({ style={[styles.textArea, pal.border, pal.text]} placeholder={ isCurateList - ? 'e.g. The posters who never miss.' - : 'e.g. Users that repeatedly reply with ads.' + ? _(msg`e.g. The posters who never miss.`) + : _(msg`e.g. Users that repeatedly reply with ads.`) } placeholderTextColor={colors.gray4} keyboardAppearance={theme.colorScheme} @@ -254,7 +275,7 @@ export function Component({ end={{x: 1, y: 1}} style={[styles.btn]}> <Text style={[s.white, s.bold]}> - <Trans>Save</Trans> + <Trans context="action">Save</Trans> </Text> </LinearGradient> </TouchableOpacity> @@ -269,7 +290,7 @@ export function Component({ onAccessibilityEscape={onPressCancel}> <View style={[styles.btn]}> <Text style={[s.black, s.bold, pal.text]}> - <Trans>Cancel</Trans> + <Trans context="action">Cancel</Trans> </Text> </View> </TouchableOpacity> diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx index ee16d46b3..0cfc098d4 100644 --- a/src/view/com/modals/DeleteAccount.tsx +++ b/src/view/com/modals/DeleteAccount.tsx @@ -62,7 +62,7 @@ export function Component({}: {}) { password, token, }) - Toast.show('Your account has been deleted') + Toast.show(_(msg`Your account has been deleted`)) resetToTab('HomeTab') removeAccount(currentAccount) clearCurrentAccount() @@ -125,7 +125,9 @@ export function Component({}: {}) { onPress={onPressSendEmail} accessibilityRole="button" accessibilityLabel={_(msg`Send email`)} - accessibilityHint="Sends email with confirmation code for account deletion"> + accessibilityHint={_( + msg`Sends email with confirmation code for account deletion`, + )}> <LinearGradient colors={[ gradients.blueLight.start, @@ -135,7 +137,7 @@ export function Component({}: {}) { end={{x: 1, y: 1}} style={[styles.btn]}> <Text type="button-lg" style={[s.white, s.bold]}> - <Trans>Send Email</Trans> + <Trans context="action">Send Email</Trans> </Text> </LinearGradient> </TouchableOpacity> @@ -147,7 +149,7 @@ export function Component({}: {}) { accessibilityHint="" onAccessibilityEscape={onCancel}> <Text type="button-lg" style={pal.textLight}> - <Trans>Cancel</Trans> + <Trans context="action">Cancel</Trans> </Text> </TouchableOpacity> </> @@ -174,7 +176,9 @@ export function Component({}: {}) { onChangeText={setConfirmCode} accessibilityLabelledBy="confirmationCode" accessibilityLabel={_(msg`Confirmation code`)} - accessibilityHint="Input confirmation code for account deletion" + accessibilityHint={_( + msg`Input confirmation code for account deletion`, + )} /> <Text type="lg" style={styles.description} nativeID="password"> <Trans>Please enter your password as well:</Trans> @@ -189,7 +193,7 @@ export function Component({}: {}) { onChangeText={setPassword} accessibilityLabelledBy="password" accessibilityLabel={_(msg`Password`)} - accessibilityHint="Input password for account deletion" + accessibilityHint={_(msg`Input password for account deletion`)} /> {error ? ( <View style={styles.mt20}> @@ -220,7 +224,7 @@ export function Component({}: {}) { accessibilityHint="Exits account deletion process" onAccessibilityEscape={onCancel}> <Text type="button-lg" style={pal.textLight}> - <Trans>Cancel</Trans> + <Trans context="action">Cancel</Trans> </Text> </TouchableOpacity> </> diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index 753907472..3b35ffee2 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -112,16 +112,16 @@ export const Component = observer(function EditImageImpl({ // }, { name: 'flip' as const, - label: 'Flip horizontal', + label: _(msg`Flip horizontal`), onPress: onFlipHorizontal, }, { name: 'flip' as const, - label: 'Flip vertically', + label: _(msg`Flip vertically`), onPress: onFlipVertical, }, ], - [onFlipHorizontal, onFlipVertical], + [onFlipHorizontal, onFlipVertical, _], ) useEffect(() => { @@ -284,7 +284,7 @@ export const Component = observer(function EditImageImpl({ size={label?.startsWith('Flip') ? 22 : 24} style={[ pal.text, - label === 'Flip vertically' + label === _(msg`Flip vertically`) ? styles.flipVertical : undefined, ]} @@ -330,7 +330,7 @@ export const Component = observer(function EditImageImpl({ end={{x: 1, y: 1}} style={[styles.btn]}> <Text type="xl-medium" style={s.white}> - <Trans>Done</Trans> + <Trans context="action">Done</Trans> </Text> </LinearGradient> </Pressable> diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index e044f8c0e..dd8ac9ae7 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -125,7 +125,7 @@ export function Component({ newUserAvatar, newUserBanner, }) - Toast.show('Profile updated') + Toast.show(_(msg`Profile updated`)) onUpdate?.() closeModal() } catch (e: any) { @@ -142,6 +142,7 @@ export function Component({ newUserAvatar, newUserBanner, setImageError, + _, ]) return ( @@ -181,7 +182,7 @@ export function Component({ <TextInput testID="editProfileDisplayNameInput" style={[styles.textInput, pal.border, pal.text]} - placeholder="e.g. Alice Roberts" + placeholder={_(msg`e.g. Alice Roberts`)} placeholderTextColor={colors.gray4} value={displayName} onChangeText={v => @@ -189,7 +190,7 @@ export function Component({ } accessible={true} accessibilityLabel={_(msg`Display name`)} - accessibilityHint="Edit your display name" + accessibilityHint={_(msg`Edit your display name`)} /> </View> <View style={s.pb10}> @@ -199,7 +200,7 @@ export function Component({ <TextInput testID="editProfileDescriptionInput" style={[styles.textArea, pal.border, pal.text]} - placeholder="e.g. Artist, dog-lover, and avid reader." + placeholder={_(msg`e.g. Artist, dog-lover, and avid reader.`)} placeholderTextColor={colors.gray4} keyboardAppearance={theme.colorScheme} multiline @@ -207,7 +208,7 @@ export function Component({ onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))} accessible={true} accessibilityLabel={_(msg`Description`)} - accessibilityHint="Edit your profile description" + accessibilityHint={_(msg`Edit your profile description`)} /> </View> {updateMutation.isPending ? ( @@ -221,7 +222,7 @@ export function Component({ onPress={onPressSave} accessibilityRole="button" accessibilityLabel={_(msg`Save`)} - accessibilityHint="Saves any changes to your profile"> + accessibilityHint={_(msg`Saves any changes to your profile`)}> <LinearGradient colors={[gradients.blueLight.start, gradients.blueLight.end]} start={{x: 0, y: 0}} diff --git a/src/view/com/modals/InviteCodes.tsx b/src/view/com/modals/InviteCodes.tsx index a0bb5f4af..c0318df01 100644 --- a/src/view/com/modals/InviteCodes.tsx +++ b/src/view/com/modals/InviteCodes.tsx @@ -19,7 +19,6 @@ import {usePalette} from 'lib/hooks/usePalette' import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {cleanError} from 'lib/strings/errors' import {useModalControls} from '#/state/modals' import {useInvitesState, useInvitesAPI} from '#/state/invites' @@ -31,6 +30,7 @@ import { useInviteCodesQuery, InviteCodesQueryResponse, } from '#/state/queries/invites' +import {useLingui} from '@lingui/react' export const snapPoints = ['70%'] @@ -166,10 +166,10 @@ function InviteCode({ accessibilityRole="button" accessibilityLabel={ invites.available.length === 1 - ? 'Invite codes: 1 available' - : `Invite codes: ${invites.available.length} available` + ? _(msg`Invite codes: 1 available`) + : _(msg`Invite codes: ${invites.available.length} available`) } - accessibilityHint="Opens list of invite codes"> + accessibilityHint={_(msg`Opens list of invite codes`)}> <Text testID={`${testID}-code`} type={used ? 'md' : 'md-bold'} diff --git a/src/view/com/modals/ListAddRemoveUsers.tsx b/src/view/com/modals/ListAddRemoveUsers.tsx index 14e16d6bf..27c33f806 100644 --- a/src/view/com/modals/ListAddRemoveUsers.tsx +++ b/src/view/com/modals/ListAddRemoveUsers.tsx @@ -67,7 +67,7 @@ export function Component({ <TextInput testID="searchInput" style={[styles.searchInput, pal.border, pal.text]} - placeholder="Search for users" + placeholder={_(msg`Search for users`)} placeholderTextColor={pal.colors.textLight} value={query} onChangeText={setQuery} @@ -85,7 +85,7 @@ export function Component({ onPress={onPressCancelSearch} accessibilityRole="button" accessibilityLabel={_(msg`Cancel search`)} - accessibilityHint="Exits inputting search query" + accessibilityHint={_(msg`Exits inputting search query`)} onAccessibilityEscape={onPressCancelSearch} hitSlop={HITSLOP_20}> <FontAwesomeIcon @@ -141,7 +141,7 @@ export function Component({ }} accessibilityLabel={_(msg`Done`)} accessibilityHint="" - label="Done" + label={_(msg({message: 'Done', context: 'action'}))} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> diff --git a/src/view/com/modals/ModerationDetails.tsx b/src/view/com/modals/ModerationDetails.tsx index c117023d4..ba7f76db1 100644 --- a/src/view/com/modals/ModerationDetails.tsx +++ b/src/view/com/modals/ModerationDetails.tsx @@ -10,6 +10,8 @@ import {isWeb} from 'platform/detection' import {listUriToHref} from 'lib/strings/url-helpers' import {Button} from '../util/forms/Button' import {useModalControls} from '#/state/modals' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' export const snapPoints = [300] @@ -23,19 +25,21 @@ export function Component({ const {closeModal} = useModalControls() const {isMobile} = useWebMediaQueries() const pal = usePalette('default') + const {_} = useLingui() let name let description if (!moderation.cause) { - name = 'Content Warning' - description = - 'Moderator has chosen to set a general warning on the content.' + name = _(msg`Content Warning`) + description = _( + msg`Moderator has chosen to set a general warning on the content.`, + ) } else if (moderation.cause.type === 'blocking') { if (moderation.cause.source.type === 'list') { const list = moderation.cause.source.list - name = 'User Blocked by List' + name = _(msg`User Blocked by List`) description = ( - <> + <Trans> This user is included in the{' '} <TextLink type="2xl" @@ -44,25 +48,30 @@ export function Component({ style={pal.link} />{' '} list which you have blocked. - </> + </Trans> ) } else { - name = 'User Blocked' - description = 'You have blocked this user. You cannot view their content.' + name = _(msg`User Blocked`) + description = _( + msg`You have blocked this user. You cannot view their content.`, + ) } } else if (moderation.cause.type === 'blocked-by') { - name = 'User Blocks You' - description = 'This user has blocked you. You cannot view their content.' + name = _(msg`User Blocks You`) + description = _( + msg`This user has blocked you. You cannot view their content.`, + ) } else if (moderation.cause.type === 'block-other') { - name = 'Content Not Available' - description = - 'This content is not available because one of the users involved has blocked the other.' + name = _(msg`Content Not Available`) + description = _( + msg`This content is not available because one of the users involved has blocked the other.`, + ) } else if (moderation.cause.type === 'muted') { if (moderation.cause.source.type === 'list') { const list = moderation.cause.source.list - name = <>Account Muted by List</> + name = _(msg`Account Muted by List`) description = ( - <> + <Trans> This user is included the{' '} <TextLink type="2xl" @@ -71,11 +80,11 @@ export function Component({ style={pal.link} />{' '} list which you have muted. - </> + </Trans> ) } else { - name = 'Account Muted' - description = 'You have muted this user.' + name = _(msg`Account Muted`) + description = _(msg`You have muted this user.`) } } else { name = moderation.cause.labelDef.strings[context].en.name diff --git a/src/view/com/modals/ProfilePreview.tsx b/src/view/com/modals/ProfilePreview.tsx index edfbf6a82..77e68db70 100644 --- a/src/view/com/modals/ProfilePreview.tsx +++ b/src/view/com/modals/ProfilePreview.tsx @@ -14,11 +14,14 @@ import {ErrorScreen} from '../util/error/ErrorScreen' import {CenteredView} from '../util/Views' import {cleanError} from '#/lib/strings/errors' import {useProfileShadow} from '#/state/cache/profile-shadow' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const snapPoints = [520, '100%'] export function Component({did}: {did: string}) { const pal = usePalette('default') + const {_} = useLingui() const moderationOpts = useModerationOpts() const { data: profile, @@ -43,7 +46,7 @@ export function Component({did}: {did: string}) { if (profileError) { return ( <ErrorScreen - title="Oops!" + title={_(msg`Oops!`)} message={cleanError(profileError)} onPressTryAgain={refetchProfile} /> @@ -55,8 +58,8 @@ export function Component({did}: {did: string}) { // should never happen return ( <ErrorScreen - title="Oops!" - message="Something went wrong and we're not sure what." + title={_(msg`Oops!`)} + message={_(msg`Something went wrong and we're not sure what.`)} onPressTryAgain={refetchProfile} /> ) @@ -104,7 +107,7 @@ function ComponentLoaded({ <> <InfoCircleIcon size={21} style={pal.textLight} /> <ThemedText type="xl" fg="light"> - Swipe up to see more + <Trans>Swipe up to see more</Trans> </ThemedText> </> )} diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx index a72da29b4..6e4881adc 100644 --- a/src/view/com/modals/Repost.tsx +++ b/src/view/com/modals/Repost.tsx @@ -37,11 +37,23 @@ export function Component({ style={[styles.actionBtn]} onPress={onRepost} accessibilityRole="button" - accessibilityLabel={isReposted ? 'Undo repost' : 'Repost'} - accessibilityHint={isReposted ? 'Remove repost' : 'Repost '}> + accessibilityLabel={ + isReposted + ? _(msg`Undo repost`) + : _(msg({message: `Repost`, context: 'action'})) + } + accessibilityHint={ + isReposted + ? _(msg`Remove repost`) + : _(msg({message: `Repost`, context: 'action'})) + }> <RepostIcon strokeWidth={2} size={24} style={s.blue3} /> <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}> - <Trans>{!isReposted ? 'Repost' : 'Undo repost'}</Trans> + {!isReposted ? ( + <Trans context="action">Repost</Trans> + ) : ( + <Trans>Undo repost</Trans> + )} </Text> </TouchableOpacity> <TouchableOpacity @@ -49,11 +61,13 @@ export function Component({ style={[styles.actionBtn]} onPress={onQuote} accessibilityRole="button" - accessibilityLabel={_(msg`Quote post`)} + accessibilityLabel={_( + msg({message: `Quote post`, context: 'action'}), + )} accessibilityHint=""> <FontAwesomeIcon icon="quote-left" size={24} style={s.blue3} /> <Text type="title-lg" style={[styles.actionBtnLabel, pal.text]}> - <Trans>Quote Post</Trans> + <Trans context="action">Quote Post</Trans> </Text> </TouchableOpacity> </View> diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx index 092dd2d32..779a9e71b 100644 --- a/src/view/com/modals/SelfLabel.tsx +++ b/src/view/com/modals/SelfLabel.tsx @@ -92,7 +92,7 @@ export function Component({ testID="sexualLabelBtn" selected={selected.includes('sexual')} left - label="Suggestive" + label={_(msg`Suggestive`)} onSelect={() => toggleAdultLabel('sexual')} accessibilityHint="" style={s.flex1} @@ -100,7 +100,7 @@ export function Component({ <SelectableBtn testID="nudityLabelBtn" selected={selected.includes('nudity')} - label="Nudity" + label={_(msg`Nudity`)} onSelect={() => toggleAdultLabel('nudity')} accessibilityHint="" style={s.flex1} @@ -108,7 +108,7 @@ export function Component({ <SelectableBtn testID="pornLabelBtn" selected={selected.includes('porn')} - label="Porn" + label={_(msg`Porn`)} right onSelect={() => toggleAdultLabel('porn')} accessibilityHint="" @@ -154,7 +154,7 @@ export function Component({ accessibilityLabel={_(msg`Confirm`)} accessibilityHint=""> <Text style={[s.white, s.bold, s.f18]}> - <Trans>Done</Trans> + <Trans context="action">Done</Trans> </Text> </TouchableOpacity> </View> diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index b30293859..550dffa1c 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -101,7 +101,9 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { onChangeText={setCustomUrl} accessibilityLabel={_(msg`Custom domain`)} // TODO: Simplify this wording further to be understandable by everyone - accessibilityHint="Use your domain as your Bluesky client service provider" + accessibilityHint={_( + msg`Use your domain as your Bluesky client service provider`, + )} /> <TouchableOpacity testID="customServerSelectBtn" @@ -110,7 +112,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { accessibilityRole="button" accessibilityLabel={`Confirm service. ${ customUrl === '' - ? 'Button disabled. Input custom domain to proceed.' + ? _(msg`Button disabled. Input custom domain to proceed.`) : '' }`} accessibilityHint="" diff --git a/src/view/com/modals/SwitchAccount.tsx b/src/view/com/modals/SwitchAccount.tsx index 37691e717..c034c4b52 100644 --- a/src/view/com/modals/SwitchAccount.tsx +++ b/src/view/com/modals/SwitchAccount.tsx @@ -62,7 +62,9 @@ function SwitchAccountCard({account}: {account: SessionAccount}) { onPress={isSwitchingAccounts ? undefined : onPressSignout} accessibilityRole="button" accessibilityLabel={_(msg`Sign out`)} - accessibilityHint={`Signs ${profile?.displayName} out of Bluesky`}> + accessibilityHint={_( + msg`Signs ${profile?.displayName} out of Bluesky`, + )}> <Text type="lg" style={pal.link}> <Trans>Sign out</Trans> </Text> @@ -92,8 +94,8 @@ function SwitchAccountCard({account}: {account: SessionAccount}) { isSwitchingAccounts ? undefined : () => onPressSwitchAccount(account) } accessibilityRole="button" - accessibilityLabel={`Switch to ${account.handle}`} - accessibilityHint="Switches the account you are logged in to"> + accessibilityLabel={_(msg`Switch to ${account.handle}`)} + accessibilityHint={_(msg`Switches the account you are logged in to`)}> {contents} </TouchableOpacity> ) diff --git a/src/view/com/modals/Threadgate.tsx b/src/view/com/modals/Threadgate.tsx index 0deef185b..0e49fc2f3 100644 --- a/src/view/com/modals/Threadgate.tsx +++ b/src/view/com/modals/Threadgate.tsx @@ -126,10 +126,10 @@ export function Component({ }} style={styles.btn} accessibilityRole="button" - accessibilityLabel={_(msg`Done`)} + accessibilityLabel={_(msg({message: `Done`, context: 'action'}))} accessibilityHint=""> <Text style={[s.white, s.bold, s.f18]}> - <Trans>Done</Trans> + <Trans context="action">Done</Trans> </Text> </TouchableOpacity> </View> diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index 78a3de0b6..23adbe1a8 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/src/view/com/modals/UserAddRemoveLists.tsx @@ -76,10 +76,10 @@ export function Component({ type="default" onPress={onPressDone} style={styles.footerBtn} - accessibilityLabel={_(msg`Done`)} + accessibilityLabel={_(msg({message: `Done`, context: 'action'}))} accessibilityHint="" onAccessibilityEscape={onPressDone} - label={_(msg`Done`)} + label={_(msg({message: `Done`, context: 'action'}))} /> </View> </View> @@ -175,12 +175,22 @@ function ListItem({ {sanitizeDisplayName(list.name)} </Text> <Text type="md" style={[pal.textLight]} numberOfLines={1}> - {list.purpose === 'app.bsky.graph.defs#curatelist' && 'User list '} - {list.purpose === 'app.bsky.graph.defs#modlist' && 'Moderation list '} - by{' '} - {list.creator.did === currentAccount?.did - ? 'you' - : sanitizeHandle(list.creator.handle, '@')} + {list.purpose === 'app.bsky.graph.defs#curatelist' && + (list.creator.did === currentAccount?.did ? ( + <Trans>User list by you</Trans> + ) : ( + <Trans> + User list by {sanitizeHandle(list.creator.handle, '@')} + </Trans> + ))} + {list.purpose === 'app.bsky.graph.defs#modlist' && + (list.creator.did === currentAccount?.did ? ( + <Trans>Moderation list by you</Trans> + ) : ( + <Trans> + Moderation list by {sanitizeHandle(list.creator.handle, '@')} + </Trans> + ))} </Text> </View> <View> diff --git a/src/view/com/modals/VerifyEmail.tsx b/src/view/com/modals/VerifyEmail.tsx index 4f2b1aadf..30a57afc5 100644 --- a/src/view/com/modals/VerifyEmail.tsx +++ b/src/view/com/modals/VerifyEmail.tsx @@ -75,7 +75,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { token: confirmationCode.trim(), }) updateCurrentAccount({emailConfirmed: true}) - Toast.show('Email verified') + Toast.show(_(msg`Email verified`)) closeModal() } catch (e) { setError(cleanError(String(e))) @@ -97,9 +97,15 @@ export function Component({showReminder}: {showReminder?: boolean}) { {stage === Stages.Reminder && <ReminderIllustration />} <View style={styles.titleSection}> <Text type="title-lg" style={[pal.text, styles.title]}> - {stage === Stages.Reminder ? 'Please Verify Your Email' : ''} - {stage === Stages.ConfirmCode ? 'Enter Confirmation Code' : ''} - {stage === Stages.Email ? 'Verify Your Email' : ''} + {stage === Stages.Reminder ? ( + <Trans>Please Verify Your Email</Trans> + ) : stage === Stages.Email ? ( + <Trans>Verify Your Email</Trans> + ) : stage === Stages.ConfirmCode ? ( + <Trans>Enter Confirmation Code</Trans> + ) : ( + '' + )} </Text> </View> @@ -133,7 +139,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { size={16} /> <Text type="xl-medium" style={[pal.text, s.flex1, {minWidth: 0}]}> - {currentAccount?.email || '(no email)'} + {currentAccount?.email || _(msg`(no email)`)} </Text> </View> <Pressable @@ -182,7 +188,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { onPress={() => setStage(Stages.Email)} accessibilityLabel={_(msg`Get Started`)} accessibilityHint="" - label="Get Started" + label={_(msg`Get Started`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -195,7 +201,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { onPress={onSendEmail} accessibilityLabel={_(msg`Send Confirmation Email`)} accessibilityHint="" - label="Send Confirmation Email" + label={_(msg`Send Confirmation Email`)} labelContainerStyle={{ justifyContent: 'center', padding: 4, @@ -207,7 +213,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { type="default" accessibilityLabel={_(msg`I have a code`)} accessibilityHint="" - label="I have a confirmation code" + label={_(msg`I have a confirmation code`)} labelContainerStyle={{ justifyContent: 'center', padding: 4, @@ -224,7 +230,7 @@ export function Component({showReminder}: {showReminder?: boolean}) { onPress={onConfirm} accessibilityLabel={_(msg`Confirm`)} accessibilityHint="" - label="Confirm" + label={_(msg`Confirm`)} labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> @@ -236,10 +242,16 @@ export function Component({showReminder}: {showReminder?: boolean}) { closeModal() }} accessibilityLabel={ - stage === Stages.Reminder ? 'Not right now' : 'Cancel' + stage === Stages.Reminder + ? _(msg`Not right now`) + : _(msg`Cancel`) } accessibilityHint="" - label={stage === Stages.Reminder ? 'Not right now' : 'Cancel'} + label={ + stage === Stages.Reminder + ? _(msg`Not right now`) + : _(msg`Cancel`) + } labelContainerStyle={{justifyContent: 'center', padding: 4}} labelStyle={[s.f18]} /> diff --git a/src/view/com/modals/Waitlist.tsx b/src/view/com/modals/Waitlist.tsx index a31545c0a..263dd27a2 100644 --- a/src/view/com/modals/Waitlist.tsx +++ b/src/view/com/modals/Waitlist.tsx @@ -48,7 +48,7 @@ export function Component({}: {}) { } else { setError( resBody.error || - 'Something went wrong. Check your email and try again.', + _(msg`Something went wrong. Check your email and try again.`), ) } } catch (e: any) { @@ -75,7 +75,7 @@ export function Component({}: {}) { </Text> <TextInput style={[styles.textInput, pal.borderDark, pal.text, s.mb10, s.mt10]} - placeholder="Enter your email" + placeholder={_(msg`Enter your email`)} placeholderTextColor={pal.textLight.color} autoCapitalize="none" autoCorrect={false} @@ -86,7 +86,9 @@ export function Component({}: {}) { enterKeyHint="done" accessible={true} accessibilityLabel={_(msg`Email`)} - accessibilityHint="Input your email to get on the Bluesky waitlist" + accessibilityHint={_( + msg`Input your email to get on the Bluesky waitlist`, + )} /> {error ? ( <View style={s.mt10}> @@ -114,7 +116,9 @@ export function Component({}: {}) { <TouchableOpacity onPress={onPressSignup} accessibilityRole="button" - accessibilityHint={`Confirms signing up ${email} to the waitlist`}> + accessibilityHint={_( + msg`Confirms signing up ${email} to the waitlist`, + )}> <LinearGradient colors={[gradients.blueLight.start, gradients.blueLight.end]} start={{x: 0, y: 0}} @@ -130,7 +134,9 @@ export function Component({}: {}) { onPress={onCancel} accessibilityRole="button" accessibilityLabel={_(msg`Cancel waitlist signup`)} - accessibilityHint={`Exits signing up for waitlist with ${email}`} + accessibilityHint={_( + msg`Exits signing up for waitlist with ${email}`, + )} onAccessibilityEscape={onCancel}> <Text type="button-lg" style={pal.textLight}> <Trans>Cancel</Trans> |