diff options
Diffstat (limited to 'src/view/screens')
-rw-r--r-- | src/view/screens/AppPasswords.tsx | 17 | ||||
-rw-r--r-- | src/view/screens/Feeds.tsx | 31 | ||||
-rw-r--r-- | src/view/screens/Log.tsx | 5 | ||||
-rw-r--r-- | src/view/screens/PreferencesHomeFeed.tsx | 54 | ||||
-rw-r--r-- | src/view/screens/PreferencesThreads.tsx | 31 | ||||
-rw-r--r-- | src/view/screens/Profile.tsx | 11 | ||||
-rw-r--r-- | src/view/screens/ProfileFeed.tsx | 20 | ||||
-rw-r--r-- | src/view/screens/ProfileList.tsx | 37 | ||||
-rw-r--r-- | src/view/screens/Settings.tsx | 100 |
9 files changed, 193 insertions, 113 deletions
diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index 338adfbaf..092f4bc2c 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -16,6 +16,8 @@ import {useAnalytics} from 'lib/analytics/analytics' import {useFocusEffect} from '@react-navigation/native' import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' import {useLanguagePrefs} from '#/state/preferences' @@ -55,8 +57,10 @@ export const AppPasswords = withAuthRequired( <AppPasswordsHeader /> <View style={[styles.empty, pal.viewLight]}> <Text type="lg" style={[pal.text, styles.emptyText]}> - You have not created any app passwords yet. You can create one by - pressing the button below. + <Trans> + You have not created any app passwords yet. You can create one + by pressing the button below. + </Trans> </Text> </View> {!isTabletOrDesktop && <View style={styles.flex1} />} @@ -146,8 +150,10 @@ function AppPasswordsHeader() { pal.text, isTabletOrDesktop && styles.descriptionDesktop, ]}> - Use app passwords to login to other Bluesky clients without giving full - access to your account or password. + <Trans> + Use app passwords to login to other Bluesky clients without giving + full access to your account or password. + </Trans> </Text> </> ) @@ -164,6 +170,7 @@ function AppPassword({ }) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {openModal} = useModalControls() const {contentLanguages} = useLanguagePrefs() @@ -188,7 +195,7 @@ function AppPassword({ style={[styles.item, pal.border]} onPress={onDelete} accessibilityRole="button" - accessibilityLabel="Delete app password" + accessibilityLabel={_(msg`Delete app password`)} accessibilityHint=""> <View> <Text type="md-bold" style={pal.text}> diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 169660a8f..c2ec9208f 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -27,6 +27,8 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {FlatList} from 'view/com/util/Views' import {useFocusEffect} from '@react-navigation/native' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'> @@ -34,6 +36,7 @@ export const FeedsScreen = withAuthRequired( observer<Props>(function FeedsScreenImpl({}: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const {isMobile, isTabletOrDesktop} = useWebMediaQueries() const myFeeds = store.me.myFeeds @@ -88,12 +91,12 @@ export const FeedsScreen = withAuthRequired( href="/settings/saved-feeds" hitSlop={10} accessibilityRole="button" - accessibilityLabel="Edit Saved Feeds" + accessibilityLabel={_(msg`Edit Saved Feeds`)} accessibilityHint="Opens screen to edit Saved Feeds"> <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> </Link> ) - }, [pal]) + }, [pal, _]) const onRefresh = React.useCallback(() => { myFeeds.refresh() @@ -124,11 +127,11 @@ export const FeedsScreen = withAuthRequired( }, ]}> <Text type="title-lg" style={[pal.text, s.bold]}> - My Feeds + <Trans>My Feeds</Trans> </Text> <Link href="/settings/saved-feeds" - accessibilityLabel="Edit My Feeds" + accessibilityLabel={_(msg`Edit My Feeds`)} accessibilityHint=""> <CogIcon strokeWidth={1.5} style={pal.icon} size={28} /> </Link> @@ -139,7 +142,7 @@ export const FeedsScreen = withAuthRequired( } else if (item.type === 'saved-feeds-loading') { return ( <> - {Array.from(Array(item.numItems)).map((_, i) => ( + {Array.from(Array(item.numItems)).map((_i, i) => ( <SavedFeedLoadingPlaceholder key={`placeholder-${i}`} /> ))} </> @@ -161,7 +164,7 @@ export const FeedsScreen = withAuthRequired( }, ]}> <Text type="title-lg" style={[pal.text, s.bold]}> - Discover new feeds + <Trans>Discover new feeds</Trans> </Text> {!isMobile && ( <SearchInput @@ -203,14 +206,22 @@ export const FeedsScreen = withAuthRequired( paddingBottom: '150%', }}> <Text type="lg" style={pal.textLight}> - No results found for "{query}" + <Trans>No results found for "{query}"</Trans> </Text> </View> ) } return null }, - [isMobile, pal, query, onChangeQuery, onPressCancelSearch, onSubmitQuery], + [ + isMobile, + pal, + query, + onChangeQuery, + onPressCancelSearch, + onSubmitQuery, + _, + ], ) return ( @@ -249,7 +260,7 @@ export const FeedsScreen = withAuthRequired( onPress={onPressCompose} icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> </View> @@ -289,7 +300,7 @@ function SavedFeed({feed}: {feed: FeedSourceModel}) { {feed.error ? ( <View style={[styles.offlineSlug, pal.borderDark]}> <Text type="xs" style={pal.textLight}> - Feed offline + <Trans>Feed offline</Trans> </Text> </View> ) : null} diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index f524279a5..69c07edae 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -11,6 +11,8 @@ import {Text} from '../com/util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {getEntries} from '#/logger/logDump' import {ago} from 'lib/strings/time' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {useSetMinimalShellMode} from '#/state/shell' export const LogScreen = observer(function Log({}: NativeStackScreenProps< @@ -18,6 +20,7 @@ export const LogScreen = observer(function Log({}: NativeStackScreenProps< 'Log' >) { const pal = usePalette('default') + const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const [expanded, setExpanded] = React.useState<string[]>([]) @@ -47,7 +50,7 @@ export const LogScreen = observer(function Log({}: NativeStackScreenProps< <TouchableOpacity style={[styles.entry, pal.border, pal.view]} onPress={toggler(entry.id)} - accessibilityLabel="View debug entry" + accessibilityLabel={_(msg`View debug entry`)} accessibilityHint="Opens additional details for a debug entry"> {entry.level === 'debug' ? ( <FontAwesomeIcon icon="info" /> diff --git a/src/view/screens/PreferencesHomeFeed.tsx b/src/view/screens/PreferencesHomeFeed.tsx index 21c15931f..da99dc16f 100644 --- a/src/view/screens/PreferencesHomeFeed.tsx +++ b/src/view/screens/PreferencesHomeFeed.tsx @@ -14,6 +14,8 @@ import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' import debounce from 'lodash.debounce' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' function RepliesThresholdInput({enabled}: {enabled: boolean}) { const store = useStores() @@ -66,6 +68,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ }: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {isTabletOrDesktop} = useWebMediaQueries() return ( @@ -84,7 +87,7 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, ]}> <Text type="xl" style={[pal.textLight, styles.description]}> - Fine-tune the content you see on your home screen. + <Trans>Fine-tune the content you see on your home screen.</Trans> </Text> </View> @@ -92,10 +95,12 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ <View style={styles.cardsContainer}> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Replies + <Trans>Show Replies</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "No" to hide all replies from your feed. + <Trans> + Set this setting to "No" to hide all replies from your feed. + </Trans> </Text> <ToggleButton testID="toggleRepliesBtn" @@ -112,10 +117,13 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ store.preferences.homeFeed.hideReplies && styles.dimmed, ]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Reply Filters + <Trans>Reply Filters</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Enable this setting to only see replies between people you follow. + <Trans> + Enable this setting to only see replies between people you + follow. + </Trans> </Text> <ToggleButton type="default-light" @@ -129,8 +137,10 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ style={[s.mb10]} /> <Text style={[pal.text]}> - Adjust the number of likes a reply must have to be shown in your - feed. + <Trans> + Adjust the number of likes a reply must have to be shown in your + feed. + </Trans> </Text> <RepliesThresholdInput enabled={!store.preferences.homeFeed.hideReplies} @@ -139,10 +149,12 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Reposts + <Trans>Show Reposts</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "No" to hide all reposts from your feed. + <Trans> + Set this setting to "No" to hide all reposts from your feed. + </Trans> </Text> <ToggleButton type="default-light" @@ -154,11 +166,13 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Show Quote Posts + <Trans>Show Quote Posts</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "No" to hide all quote posts from your feed. - Reposts will still be visible. + <Trans> + Set this setting to "No" to hide all quote posts from your feed. + Reposts will still be visible. + </Trans> </Text> <ToggleButton type="default-light" @@ -170,12 +184,14 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - <FontAwesomeIcon icon="flask" color={pal.colors.text} /> Show - Posts from My Feeds + <FontAwesomeIcon icon="flask" color={pal.colors.text} /> + <Trans>Show Posts from My Feeds</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "Yes" to show samples of your saved feeds in - your following feed. This is an experimental feature. + <Trans> + Set this setting to "Yes" to show samples of your saved feeds in + your following feed. This is an experimental feature. + </Trans> </Text> <ToggleButton type="default-light" @@ -204,9 +220,11 @@ export const PreferencesHomeFeed = observer(function PreferencesHomeFeedImpl({ }} style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} accessibilityRole="button" - accessibilityLabel="Confirm" + accessibilityLabel={_(msg`Confirm`)} accessibilityHint=""> - <Text style={[s.white, s.bold, s.f18]}>Done</Text> + <Text style={[s.white, s.bold, s.f18]}> + <Trans>Done</Trans> + </Text> </TouchableOpacity> </View> </CenteredView> diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index af98a1833..8a2db13ce 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -12,6 +12,8 @@ import {RadioGroup} from 'view/com/util/forms/RadioGroup' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'> export const PreferencesThreads = observer(function PreferencesThreadsImpl({ @@ -19,6 +21,7 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ }: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const {isTabletOrDesktop} = useWebMediaQueries() return ( @@ -37,7 +40,7 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ isTabletOrDesktop && {paddingTop: 20, paddingBottom: 20}, ]}> <Text type="xl" style={[pal.textLight, styles.description]}> - Fine-tune the discussion threads. + <Trans>Fine-tune the discussion threads.</Trans> </Text> </View> @@ -45,10 +48,10 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ <View style={styles.cardsContainer}> <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Sort Replies + <Trans>Sort Replies</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Sort replies to the same post by: + <Trans>Sort replies to the same post by:</Trans> </Text> <View style={[pal.view, {borderRadius: 8, paddingVertical: 6}]}> <RadioGroup @@ -67,10 +70,12 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - Prioritize Your Follows + <Trans>Prioritize Your Follows</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Show replies by people you follow before all other replies. + <Trans> + Show replies by people you follow before all other replies. + </Trans> </Text> <ToggleButton type="default-light" @@ -84,12 +89,14 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ <View style={[pal.viewLight, styles.card]}> <Text type="title-sm" style={[pal.text, s.pb5]}> - <FontAwesomeIcon icon="flask" color={pal.colors.text} /> Threaded - Mode + <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '} + <Trans>Threaded Mode</Trans> </Text> <Text style={[pal.text, s.pb10]}> - Set this setting to "Yes" to show replies in a threaded view. This - is an experimental feature. + <Trans> + Set this setting to "Yes" to show replies in a threaded view. + This is an experimental feature. + </Trans> </Text> <ToggleButton type="default-light" @@ -118,9 +125,11 @@ export const PreferencesThreads = observer(function PreferencesThreadsImpl({ }} style={[styles.btn, isTabletOrDesktop && styles.btnDesktop]} accessibilityRole="button" - accessibilityLabel="Confirm" + accessibilityLabel={_(msg`Confirm`)} accessibilityHint=""> - <Text style={[s.white, s.bold, s.f18]}>Done</Text> + <Text style={[s.white, s.bold, s.f18]}> + <Trans>Done</Trans> + </Text> </TouchableOpacity> </View> </CenteredView> diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 9a25612ad..f2aa7f05d 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -30,6 +30,8 @@ import {FeedSourceModel} from 'state/models/content/feed-source' import {useSetTitle} from 'lib/hooks/useSetTitle' import {combinedDisplayName} from 'lib/strings/display-names' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useSetMinimalShellMode} from '#/state/shell' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'> @@ -38,6 +40,7 @@ export const ProfileScreen = withAuthRequired( const store = useStores() const setMinimalShellMode = useSetMinimalShellMode() const {screen, track} = useAnalytics() + const {_} = useLingui() const viewSelectorRef = React.useRef<ViewSelectorHandle>(null) const name = route.params.name === 'me' ? store.me.did : route.params.name @@ -206,7 +209,11 @@ export const ProfileScreen = withAuthRequired( // if section is posts or posts & replies } else { if (item === ProfileUiModel.END_ITEM) { - return <Text style={styles.endItem}>- end of feed -</Text> + return ( + <Text style={styles.endItem}> + <Trans>- end of feed -</Trans> + </Text> + ) } else if (item === ProfileUiModel.LOADING_ITEM) { return <PostFeedLoadingPlaceholder /> } else if (item._reactKey === '__error__') { @@ -296,7 +303,7 @@ export const ProfileScreen = withAuthRequired( onPress={onPressCompose} icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />} accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> </ScreenHider> diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 3d1081642..8a8851c97 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -47,6 +47,8 @@ import {sanitizeHandle} from 'lib/strings/handles' import {makeProfileLink} from 'lib/routes/links' import {ComposeIcon2} from 'lib/icons' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' const SECTION_TITLES = ['Posts', 'About'] @@ -60,6 +62,7 @@ export const ProfileFeedScreen = withAuthRequired( observer(function ProfileFeedScreenImpl(props: Props) { const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const navigation = useNavigation<NavigationProp>() const {name: handleOrDid} = props.route.params @@ -98,7 +101,7 @@ export const ProfileFeedScreen = withAuthRequired( <CenteredView> <View style={[pal.view, pal.border, styles.notFoundContainer]}> <Text type="title-lg" style={[pal.text, s.mb10]}> - Could not load feed + <Trans>Could not load feed</Trans> </Text> <Text type="md" style={[pal.text, s.mb20]}> {error} @@ -107,12 +110,12 @@ export const ProfileFeedScreen = withAuthRequired( <View style={{flexDirection: 'row'}}> <Button type="default" - accessibilityLabel="Go Back" + accessibilityLabel={_(msg`Go Back`)} accessibilityHint="Return to previous page" onPress={onPressBack} style={{flexShrink: 1}}> <Text type="button" style={pal.text}> - Go Back + <Trans>Go Back</Trans> </Text> </Button> </View> @@ -142,6 +145,7 @@ export const ProfileFeedScreenInner = observer( const pal = usePalette('default') const store = useStores() const {track} = useAnalytics() + const {_} = useLingui() const feedSectionRef = React.useRef<SectionRef>(null) const {rkey, name: handleOrDid} = route.params const uri = useMemo( @@ -313,7 +317,7 @@ export const ProfileFeedScreenInner = observer( <NativeDropdown testID="headerDropdownBtn" items={dropdownItems} - accessibilityLabel="More options" + accessibilityLabel={_(msg`More options`)} accessibilityHint=""> <View style={[pal.viewLight, styles.btn]}> <FontAwesomeIcon @@ -334,6 +338,7 @@ export const ProfileFeedScreenInner = observer( onTogglePinned, onToggleSaved, dropdownItems, + _, ]) return ( @@ -374,7 +379,7 @@ export const ProfileFeedScreenInner = observer( /> } accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> </View> @@ -448,6 +453,7 @@ const AboutSection = observer(function AboutPageImpl({ onScroll: (e: NativeScrollEvent) => void }) { const pal = usePalette('default') + const {_} = useLingui() const scrollHandler = useAnimatedScrollHandler({onScroll}) if (!feedInfo) { @@ -478,14 +484,14 @@ const AboutSection = observer(function AboutPageImpl({ /> ) : ( <Text type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}> - No description + <Trans>No description</Trans> </Text> )} <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}> <Button type="default" testID="toggleLikeBtn" - accessibilityLabel="Like this feed" + accessibilityLabel={_(msg`Like this feed`)} accessibilityHint="" onPress={onToggleLiked} style={{paddingHorizontal: 10}}> diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index a165502b7..0bbb512c1 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -45,6 +45,8 @@ import {makeProfileLink, makeListLink} from 'lib/routes/links' import {ComposeIcon2} from 'lib/icons' import {ListItems} from 'view/com/lists/ListItems' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' @@ -107,6 +109,7 @@ export const ProfileListScreenInner = observer( listOwnerDid, }: Props & {listOwnerDid: string}) { const store = useStores() + const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const {rkey} = route.params const feedSectionRef = React.useRef<SectionRef>(null) @@ -208,7 +211,7 @@ export const ProfileListScreenInner = observer( /> } accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> </View> @@ -246,7 +249,7 @@ export const ProfileListScreenInner = observer( /> } accessibilityRole="button" - accessibilityLabel="New post" + accessibilityLabel={_(msg`New post`)} accessibilityHint="" /> </View> @@ -270,6 +273,7 @@ const Header = observer(function HeaderImpl({ }) { const pal = usePalette('default') const palInverted = usePalette('inverted') + const {_} = useLingui() const navigation = useNavigation<NavigationProp>() const {openModal, closeModal} = useModalControls() @@ -526,10 +530,12 @@ const Header = observer(function HeaderImpl({ <NativeDropdown testID="subscribeBtn" items={subscribeDropdownItems} - accessibilityLabel="Subscribe to this list" + accessibilityLabel={_(msg`Subscribe to this list`)} accessibilityHint=""> <View style={[palInverted.view, styles.btn]}> - <Text style={palInverted.text}>Subscribe</Text> + <Text style={palInverted.text}> + <Trans>Subscribe</Trans> + </Text> </View> </NativeDropdown> ) @@ -537,7 +543,7 @@ const Header = observer(function HeaderImpl({ <NativeDropdown testID="headerDropdownBtn" items={dropdownItems} - accessibilityLabel="More options" + accessibilityLabel={_(msg`More options`)} accessibilityHint=""> <View style={[pal.viewLight, styles.btn]}> <FontAwesomeIcon icon="ellipsis" size={20} color={pal.colors.text} /> @@ -624,6 +630,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( ref, ) { const pal = usePalette('default') + const {_} = useLingui() const {isMobile} = useWebMediaQueries() const scrollElRef = React.useRef<FlatList>(null) @@ -662,7 +669,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( testID="listDescriptionEmpty" type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}> - No description + <Trans>No description</Trans> </Text> )} <Text type="md" style={[pal.textLight]} numberOfLines={1}> @@ -688,12 +695,14 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( paddingBottom: isMobile ? 14 : 18, }, ]}> - <Text type="lg-bold">Users</Text> + <Text type="lg-bold"> + <Trans>Users</Trans> + </Text> {isOwner && ( <Pressable testID="addUserBtn" accessibilityRole="button" - accessibilityLabel="Add a user to this list" + accessibilityLabel={_(msg`Add a user to this list`)} accessibilityHint="" onPress={onPressAddUser} style={{flexDirection: 'row', alignItems: 'center', gap: 6}}> @@ -702,7 +711,9 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( color={pal.colors.link} size={16} /> - <Text style={pal.link}>Add</Text> + <Text style={pal.link}> + <Trans>Add</Trans> + </Text> </Pressable> )} </View> @@ -717,6 +728,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( isCurateList, isOwner, onPressAddUser, + _, ]) const renderEmptyState = useCallback(() => { @@ -757,6 +769,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>( function ErrorScreen({error}: {error: string}) { const pal = usePalette('default') const navigation = useNavigation<NavigationProp>() + const {_} = useLingui() const onPressBack = useCallback(() => { if (navigation.canGoBack()) { navigation.goBack() @@ -778,7 +791,7 @@ function ErrorScreen({error}: {error: string}) { }, ]}> <Text type="title-lg" style={[pal.text, s.mb10]}> - Could not load list + <Trans>Could not load list</Trans> </Text> <Text type="md" style={[pal.text, s.mb20]}> {error} @@ -787,12 +800,12 @@ function ErrorScreen({error}: {error: string}) { <View style={{flexDirection: 'row'}}> <Button type="default" - accessibilityLabel="Go Back" + accessibilityLabel={_(msg`Go Back`)} accessibilityHint="Return to previous page" onPress={onPressBack} style={{flexShrink: 1}}> <Text type="button" style={pal.text}> - Go Back + <Trans>Go Back</Trans> </Text> </Button> </View> diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx index f912996ef..010de23db 100644 --- a/src/view/screens/Settings.tsx +++ b/src/view/screens/Settings.tsx @@ -63,6 +63,8 @@ import { // -prf import {useDebugHeaderSetting} from 'lib/api/debug-appview-proxy-header' import {STATUS_PAGE_URL} from 'lib/constants' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> export const SettingsScreen = withAuthRequired( @@ -71,6 +73,7 @@ export const SettingsScreen = withAuthRequired( const setColorMode = useSetColorMode() const pal = usePalette('default') const store = useStores() + const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() const requireAltTextEnabled = useRequireAltTextEnabled() const setRequireAltTextEnabled = useSetRequireAltTextEnabled() @@ -213,7 +216,7 @@ export const SettingsScreen = withAuthRequired( {store.session.currentSession !== undefined ? ( <> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Account + <Trans>Account</Trans> </Text> <View style={[styles.infoLine]}> <Text type="lg-medium" style={pal.text}> @@ -233,17 +236,17 @@ export const SettingsScreen = withAuthRequired( </Text> <Link onPress={() => openModal({name: 'change-email'})}> <Text type="lg" style={pal.link}> - Change + <Trans>Change</Trans> </Text> </Link> </View> <View style={[styles.infoLine]}> <Text type="lg-medium" style={pal.text}> - Birthday:{' '} + <Trans>Birthday: </Trans> </Text> <Link onPress={() => openModal({name: 'birth-date-settings'})}> <Text type="lg" style={pal.link}> - Show + <Trans>Show</Trans> </Text> </Link> </View> @@ -253,7 +256,7 @@ export const SettingsScreen = withAuthRequired( ) : null} <View style={[s.flexRow, styles.heading]}> <Text type="xl-bold" style={pal.text}> - Signed in as + <Trans>Signed in as</Trans> </Text> <View style={s.flex1} /> </View> @@ -282,10 +285,10 @@ export const SettingsScreen = withAuthRequired( testID="signOutBtn" onPress={isSwitching ? undefined : onPressSignout} accessibilityRole="button" - accessibilityLabel="Sign out" + accessibilityLabel={_(msg`Sign out`)} accessibilityHint={`Signs ${store.me.displayName} out of Bluesky`}> <Text type="lg" style={pal.link}> - Sign out + <Trans>Sign out</Trans> </Text> </TouchableOpacity> </View> @@ -321,7 +324,7 @@ export const SettingsScreen = withAuthRequired( style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} onPress={isSwitching ? undefined : onPressAddAccount} accessibilityRole="button" - accessibilityLabel="Add account" + accessibilityLabel={_(msg`Add account`)} accessibilityHint="Create a new Bluesky account"> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon @@ -330,21 +333,21 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text}> - Add account + <Trans>Add account</Trans> </Text> </TouchableOpacity> <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Invite a Friend + <Trans>Invite a Friend</Trans> </Text> <TouchableOpacity testID="inviteFriendBtn" style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} onPress={isSwitching ? undefined : onPressInviteCodes} accessibilityRole="button" - accessibilityLabel="Invite" + accessibilityLabel={_(msg`Invite`)} accessibilityHint="Opens invite code list"> <View style={[ @@ -371,7 +374,7 @@ export const SettingsScreen = withAuthRequired( <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Accessibility + <Trans>Accessibility</Trans> </Text> <View style={[pal.view, styles.toggleCard]}> <ToggleButton @@ -386,7 +389,7 @@ export const SettingsScreen = withAuthRequired( <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Appearance + <Trans>Appearance</Trans> </Text> <View> <View style={[styles.linkCard, pal.view, styles.selectableBtns]}> @@ -415,7 +418,7 @@ export const SettingsScreen = withAuthRequired( <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Basics + <Trans>Basics</Trans> </Text> <TouchableOpacity testID="preferencesHomeFeedButton" @@ -423,7 +426,7 @@ export const SettingsScreen = withAuthRequired( onPress={openHomeFeedPreferences} accessibilityRole="button" accessibilityHint="" - accessibilityLabel="Opens the home feed preferences"> + accessibilityLabel={_(msg`Opens the home feed preferences`)}> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon icon="sliders" @@ -431,7 +434,7 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text}> - Home Feed Preferences + <Trans>Home Feed Preferences</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -440,7 +443,7 @@ export const SettingsScreen = withAuthRequired( onPress={openThreadsPreferences} accessibilityRole="button" accessibilityHint="" - accessibilityLabel="Opens the threads preferences"> + accessibilityLabel={_(msg`Opens the threads preferences`)}> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon icon={['far', 'comments']} @@ -449,20 +452,20 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text}> - Thread Preferences + <Trans>Thread Preferences</Trans> </Text> </TouchableOpacity> <TouchableOpacity testID="savedFeedsBtn" style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} accessibilityHint="My Saved Feeds" - accessibilityLabel="Opens screen with all saved feeds" + accessibilityLabel={_(msg`Opens screen with all saved feeds`)} onPress={onPressSavedFeeds}> <View style={[styles.iconContainer, pal.btn]}> <HashtagIcon style={pal.text} size={18} strokeWidth={3} /> </View> <Text type="lg" style={pal.text}> - My Saved Feeds + <Trans>My Saved Feeds</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -471,7 +474,7 @@ export const SettingsScreen = withAuthRequired( onPress={isSwitching ? undefined : onPressLanguageSettings} accessibilityRole="button" accessibilityHint="Language settings" - accessibilityLabel="Opens configurable language settings"> + accessibilityLabel={_(msg`Opens configurable language settings`)}> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon icon="language" @@ -479,7 +482,7 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text}> - Languages + <Trans>Languages</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -490,18 +493,18 @@ export const SettingsScreen = withAuthRequired( } accessibilityRole="button" accessibilityHint="" - accessibilityLabel="Opens moderation settings"> + accessibilityLabel={_(msg`Opens moderation settings`)}> <View style={[styles.iconContainer, pal.btn]}> <HandIcon style={pal.text} size={18} strokeWidth={6} /> </View> <Text type="lg" style={pal.text}> - Moderation + <Trans>Moderation</Trans> </Text> </TouchableOpacity> <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Advanced + <Trans>Advanced</Trans> </Text> <TouchableOpacity testID="appPasswordBtn" @@ -509,7 +512,7 @@ export const SettingsScreen = withAuthRequired( onPress={onPressAppPasswords} accessibilityRole="button" accessibilityHint="Open app password settings" - accessibilityLabel="Opens the app password settings page"> + accessibilityLabel={_(msg`Opens the app password settings page`)}> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon icon="lock" @@ -517,7 +520,7 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text}> - App passwords + <Trans>App passwords</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -525,7 +528,7 @@ export const SettingsScreen = withAuthRequired( style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]} onPress={isSwitching ? undefined : onPressChangeHandle} accessibilityRole="button" - accessibilityLabel="Change handle" + accessibilityLabel={_(msg`Change handle`)} accessibilityHint="Choose a new Bluesky username or create"> <View style={[styles.iconContainer, pal.btn]}> <FontAwesomeIcon @@ -534,19 +537,19 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={pal.text} numberOfLines={1}> - Change handle + <Trans>Change handle</Trans> </Text> </TouchableOpacity> <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Danger Zone + <Trans>Danger Zone</Trans> </Text> <TouchableOpacity style={[pal.view, styles.linkCard]} onPress={onPressDeleteAccount} accessible={true} accessibilityRole="button" - accessibilityLabel="Delete account" + accessibilityLabel={_(msg`Delete account`)} accessibilityHint="Opens modal for account deletion confirmation. Requires email code."> <View style={[styles.iconContainer, dangerBg]}> <FontAwesomeIcon @@ -556,21 +559,21 @@ export const SettingsScreen = withAuthRequired( /> </View> <Text type="lg" style={dangerText}> - Delete my account… + <Trans>Delete my account…</Trans> </Text> </TouchableOpacity> <View style={styles.spacer20} /> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Developer Tools + <Trans>Developer Tools</Trans> </Text> <TouchableOpacity style={[pal.view, styles.linkCardNoIcon]} onPress={onPressSystemLog} accessibilityRole="button" accessibilityHint="Open system log" - accessibilityLabel="Opens the system log page"> + accessibilityLabel={_(msg`Opens the system log page`)}> <Text type="lg" style={pal.text}> - System log + <Trans>System log</Trans> </Text> </TouchableOpacity> {__DEV__ ? ( @@ -588,9 +591,9 @@ export const SettingsScreen = withAuthRequired( onPress={onPressStorybook} accessibilityRole="button" accessibilityHint="Open storybook page" - accessibilityLabel="Opens the storybook page"> + accessibilityLabel={_(msg`Opens the storybook page`)}> <Text type="lg" style={pal.text}> - Storybook + <Trans>Storybook</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -598,9 +601,9 @@ export const SettingsScreen = withAuthRequired( onPress={onPressResetPreferences} accessibilityRole="button" accessibilityHint="Reset preferences" - accessibilityLabel="Resets the preferences state"> + accessibilityLabel={_(msg`Resets the preferences state`)}> <Text type="lg" style={pal.text}> - Reset preferences state + <Trans>Reset preferences state</Trans> </Text> </TouchableOpacity> <TouchableOpacity @@ -608,9 +611,9 @@ export const SettingsScreen = withAuthRequired( onPress={onPressResetOnboarding} accessibilityRole="button" accessibilityHint="Reset onboarding" - accessibilityLabel="Resets the onboarding state"> + accessibilityLabel={_(msg`Resets the onboarding state`)}> <Text type="lg" style={pal.text}> - Reset onboarding state + <Trans>Reset onboarding state</Trans> </Text> </TouchableOpacity> </> @@ -620,7 +623,9 @@ export const SettingsScreen = withAuthRequired( accessibilityRole="button" onPress={onPressBuildInfo}> <Text type="sm" style={[styles.buildInfo, pal.textLight]}> - Build version {AppInfo.appVersion} {AppInfo.updateChannel} + <Trans> + Build version {AppInfo.appVersion} {AppInfo.updateChannel} + </Trans> </Text> </TouchableOpacity> <Text type="sm" style={[pal.textLight]}> @@ -630,7 +635,7 @@ export const SettingsScreen = withAuthRequired( accessibilityRole="button" onPress={onPressStatusPage}> <Text type="sm" style={[styles.buildInfo, pal.textLight]}> - Status page + <Trans>Status page</Trans> </Text> </TouchableOpacity> </View> @@ -646,6 +651,7 @@ const EmailConfirmationNotice = observer( const pal = usePalette('default') const palInverted = usePalette('inverted') const store = useStores() + const {_} = useLingui() const {isMobile} = useWebMediaQueries() const {openModal} = useModalControls() @@ -656,7 +662,7 @@ const EmailConfirmationNotice = observer( return ( <View style={{marginBottom: 20}}> <Text type="xl-bold" style={[pal.text, styles.heading]}> - Verify email + <Trans>Verify email</Trans> </Text> <View style={[ @@ -681,7 +687,7 @@ const EmailConfirmationNotice = observer( isMobile && {flex: 1}, ]} accessibilityRole="button" - accessibilityLabel="Verify my email" + accessibilityLabel={_(msg`Verify my email`)} accessibilityHint="" onPress={() => openModal({name: 'verify-email'})}> <FontAwesomeIcon @@ -690,12 +696,12 @@ const EmailConfirmationNotice = observer( size={16} /> <Text type="button" style={palInverted.text}> - Verify My Email + <Trans>Verify My Email</Trans> </Text> </Pressable> </View> <Text style={pal.textLight}> - Protect your account by verifying your email. + <Trans>Protect your account by verifying your email.</Trans> </Text> </View> </View> |