+4 -2

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

··· 16 16 type BottomSheetState, 17 17 type BottomSheetViewProps, 18 18 } from './BottomSheet.types' 19 19 - import {BottomSheetPortalProvider} from './BottomSheetPortal' 20 20 - import {Context as PortalContext} from './BottomSheetPortal' 19 19 + import { 20 20 + BottomSheetPortalProvider, 21 21 + Context as PortalContext, 22 22 + } from './BottomSheetPortal' 21 23 22 24 const screenHeight = Dimensions.get('screen').height 23 25

+2 -2

src/components/Select/index.tsx

··· 103 103 <Button 104 104 label={label} 105 105 onPress={control.open} 106 106 - style={[a.flex_1, a.justify_between]} 106 106 + style={[a.flex_1, a.justify_between, a.pl_lg, a.pr_md]} 107 107 color="secondary" 108 108 - size="small" 108 108 + size="large" 109 109 shape="rectangular"> 110 110 <>{children}</> 111 111 </Button>

+88 -43

src/screens/Settings/LanguageSettings.tsx

··· 1 1 - import {useCallback, useMemo} from 'react' 1 1 + import {useCallback, useMemo, useState} from 'react' 2 2 import {View} from 'react-native' 3 3 import {msg, Trans} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 - import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages' 7 6 import { 8 7 type CommonNavigatorParams, 9 8 type NativeStackScreenProps, 10 9 } from '#/lib/routes/types' 11 10 import {languageName, sanitizeAppLanguageSetting} from '#/locale/helpers' 12 12 - import {useModalControls} from '#/state/modals' 11 11 + import {APP_LANGUAGES, LANGUAGES} from '#/locale/languages' 13 12 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' 14 14 - import {atoms as a, useTheme, web} from '#/alf' 15 15 - import {Button, ButtonIcon, ButtonText} from '#/components/Button' 16 16 - import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' 13 13 + import {atoms as a, web} from '#/alf' 14 14 + import {Admonition} from '#/components/Admonition' 15 15 + import {Button} from '#/components/Button' 16 16 + import {useDialogControl} from '#/components/Dialog' 17 17 + import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog' 18 18 + import * as Toggle from '#/components/forms/Toggle' 17 19 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' 18 20 import * as Layout from '#/components/Layout' 19 21 import * as Select from '#/components/Select' ··· 30 32 const {_} = useLingui() 31 33 const langPrefs = useLanguagePrefs() 32 34 const setLangPrefs = useLanguagePrefsApi() 33 33 - const t = useTheme() 34 35 35 35 - const {openModal} = useModalControls() 36 36 - 37 37 - const onPressContentLanguages = useCallback(() => { 38 38 - openModal({name: 'content-languages-settings'}) 39 39 - }, [openModal]) 36 36 + const contentLanguagePrefsControl = useDialogControl() 40 37 41 38 const onChangePrimaryLanguage = useCallback( 42 39 (value: string) => { ··· 58 55 [langPrefs, setLangPrefs], 59 56 ) 60 57 61 61 - const myLanguages = useMemo(() => { 62 62 - return ( 63 63 - langPrefs.contentLanguages 64 64 - .map(lang => LANGUAGES.find(l => l.code2 === lang)) 65 65 - .filter(Boolean) 66 66 - // @ts-ignore 67 67 - .map(l => languageName(l, langPrefs.appLanguage)) 68 68 - .join(', ') 69 69 - ) 70 70 - }, [langPrefs.appLanguage, langPrefs.contentLanguages]) 58 58 + const [recentLanguages, setRecentLanguages] = useState<string[]>( 59 59 + langPrefs.contentLanguages, 60 60 + ) 61 61 + 62 62 + const possibleLanguages = useMemo(() => { 63 63 + return [ 64 64 + ...new Set([ 65 65 + ...recentLanguages, 66 66 + ...langPrefs.contentLanguages, 67 67 + ...langPrefs.primaryLanguage, 68 68 + ]), 69 69 + ] 70 70 + .map(lang => LANGUAGES.find(l => l.code2 === lang)) 71 71 + .filter(x => !!x) 72 72 + }, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage]) 71 73 72 74 return ( 73 75 <Layout.Screen testID="PreferencesLanguagesScreen"> ··· 84 86 <SettingsList.Container> 85 87 <SettingsList.Group iconInset={false}> 86 88 <SettingsList.ItemText> 87 87 - <Trans>App Language</Trans> 89 89 + <Trans>App language</Trans> 88 90 </SettingsList.ItemText> 89 91 <View style={[a.gap_md, a.w_full]}> 90 92 <Text style={[a.leading_snug]}> ··· 118 120 <SettingsList.Divider /> 119 121 <SettingsList.Group iconInset={false}> 120 122 <SettingsList.ItemText> 121 121 - <Trans>Primary Language</Trans> 123 123 + <Trans>Primary language</Trans> 122 124 </SettingsList.ItemText> 123 125 <View style={[a.gap_md, a.w_full]}> 124 126 <Text style={[a.leading_snug]}> ··· 152 154 <SettingsList.Divider /> 153 155 <SettingsList.Group iconInset={false}> 154 156 <SettingsList.ItemText> 155 155 - <Trans>Content Languages</Trans> 157 157 + <Trans>Content languages</Trans> 156 158 </SettingsList.ItemText> 157 159 <View style={[a.gap_md]}> 158 160 <Text style={[a.leading_snug]}> ··· 162 164 </Trans> 163 165 </Text> 164 166 165 165 - <Button 166 166 - label={_(msg`Select content languages`)} 167 167 - size="small" 168 168 - color="secondary" 169 169 - shape="rectangular" 170 170 - onPress={onPressContentLanguages} 171 171 - style={[a.justify_start, web({maxWidth: 400})]}> 172 172 - <ButtonIcon 173 173 - icon={myLanguages.length > 0 ? CheckIcon : PlusIcon} 174 174 - /> 175 175 - <ButtonText 176 176 - style={[t.atoms.text, a.text_md, a.flex_1, a.text_left]} 177 177 - numberOfLines={1}> 178 178 - {myLanguages.length > 0 179 179 - ? myLanguages 180 180 - : _(msg`Select languages`)} 181 181 - </ButtonText> 182 182 - </Button> 167 167 + {langPrefs.contentLanguages.length === 0 && ( 168 168 + <Admonition type="info"> 169 169 + <Trans>All languages will be shown in your feeds.</Trans> 170 170 + </Admonition> 171 171 + )} 172 172 + 173 173 + <View style={[a.w_full, web({maxWidth: 400})]}> 174 174 + <Toggle.Group 175 175 + label={_(msg`Select content languages`)} 176 176 + values={langPrefs.contentLanguages} 177 177 + onChange={setLangPrefs.setContentLanguages}> 178 178 + <Toggle.PanelGroup> 179 179 + {possibleLanguages.map((language, index) => { 180 180 + const name = languageName(language, langPrefs.appLanguage) 181 181 + return ( 182 182 + <Toggle.Item 183 183 + key={language.code2} 184 184 + name={language.code2} 185 185 + label={name}> 186 186 + {({selected}) => ( 187 187 + <Toggle.Panel 188 188 + active={selected} 189 189 + adjacent={index === 0 ? 'trailing' : 'both'}> 190 190 + <Toggle.Checkbox /> 191 191 + <Toggle.PanelText>{name}</Toggle.PanelText> 192 192 + </Toggle.Panel> 193 193 + )} 194 194 + </Toggle.Item> 195 195 + ) 196 196 + })} 197 197 + <Button 198 198 + label={_(msg`Add more languages...`)} 199 199 + onPress={contentLanguagePrefsControl.open}> 200 200 + <Toggle.Panel adjacent="leading"> 201 201 + <Toggle.PanelIcon icon={PlusIcon} /> 202 202 + <Toggle.PanelText> 203 203 + Add more languages... 204 204 + </Toggle.PanelText> 205 205 + </Toggle.Panel> 206 206 + </Button> 207 207 + </Toggle.PanelGroup> 208 208 + </Toggle.Group> 209 209 + </View> 210 210 + 211 211 + <LanguageSelectDialog 212 212 + control={contentLanguagePrefsControl} 213 213 + titleText={<Trans>Select content languages</Trans>} 214 214 + subtitleText={ 215 215 + <Trans> 216 216 + If none are selected, all languages will be shown in your 217 217 + feeds. 218 218 + </Trans> 219 219 + } 220 220 + currentLanguages={langPrefs.contentLanguages} 221 221 + onSelectLanguages={languages => { 222 222 + setLangPrefs.setContentLanguages(languages) 223 223 + setRecentLanguages(recent => [ 224 224 + ...new Set([...recent, ...languages]), 225 225 + ]) 226 226 + }} 227 227 + /> 183 228 </View> 184 229 </SettingsList.Group> 185 230 </SettingsList.Container>

+6 -45

src/state/preferences/languages.tsx

··· 11 11 type ApiContext = { 12 12 setPrimaryLanguage: (code2: string) => void 13 13 setPostLanguage: (commaSeparatedLangCodes: string) => void 14 14 - setContentLanguage: (code2: string) => void 15 15 - toggleContentLanguage: (code2: string) => void 16 16 - togglePostLanguage: (code2: string) => void 14 14 + setContentLanguages: (code2s: string[]) => void 17 15 savePostLanguageToHistory: () => void 18 16 setAppLanguage: (code2: AppLanguage) => void 19 17 } ··· 25 23 const apiContext = React.createContext<ApiContext>({ 26 24 setPrimaryLanguage: (_: string) => {}, 27 25 setPostLanguage: (_: string) => {}, 28 28 - setContentLanguage: (_: string) => {}, 29 29 - toggleContentLanguage: (_: string) => {}, 30 30 - togglePostLanguage: (_: string) => {}, 26 26 + setContentLanguages: (_: string[]) => {}, 31 27 savePostLanguageToHistory: () => {}, 32 28 setAppLanguage: (_: AppLanguage) => {}, 33 29 }) 34 30 apiContext.displayName = 'LanguagePrefsApiContext' 35 31 36 32 export function Provider({children}: React.PropsWithChildren<{}>) { 37 37 - const [state, setState] = React.useState(persisted.get('languagePrefs')) 33 33 + const [state, setState] = React.useState(() => persisted.get('languagePrefs')) 38 34 39 35 const setStateWrapped = React.useCallback( 40 36 (fn: SetStateCb) => { ··· 59 55 setPostLanguage(commaSeparatedLangCodes: string) { 60 56 setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes})) 61 57 }, 62 62 - setContentLanguage(code2: string) { 63 63 - setStateWrapped(s => ({...s, contentLanguages: [code2]})) 64 64 - }, 65 65 - toggleContentLanguage(code2: string) { 66 66 - setStateWrapped(s => { 67 67 - const exists = s.contentLanguages.includes(code2) 68 68 - const next = exists 69 69 - ? s.contentLanguages.filter(lang => lang !== code2) 70 70 - : s.contentLanguages.concat(code2) 71 71 - return { 72 72 - ...s, 73 73 - contentLanguages: next, 74 74 - } 75 75 - }) 76 76 - }, 77 77 - togglePostLanguage(code2: string) { 78 78 - setStateWrapped(s => { 79 79 - const exists = hasPostLanguage(state.postLanguage, code2) 80 80 - let next = s.postLanguage 81 81 - 82 82 - if (exists) { 83 83 - next = toPostLanguages(s.postLanguage) 84 84 - .filter(lang => lang !== code2) 85 85 - .join(',') 86 86 - } else { 87 87 - // sort alphabetically for deterministic comparison in context menu 88 88 - next = toPostLanguages(s.postLanguage) 89 89 - .concat([code2]) 90 90 - .sort((a, b) => a.localeCompare(b)) 91 91 - .join(',') 92 92 - } 93 93 - 94 94 - return { 95 95 - ...s, 96 96 - postLanguage: next, 97 97 - } 98 98 - }) 58 58 + setContentLanguages(code2s: string[]) { 59 59 + setStateWrapped(s => ({...s, contentLanguages: code2s})) 99 60 }, 100 61 /** 101 62 * Saves whatever language codes are currently selected into a history array, ··· 120 81 setStateWrapped(s => ({...s, appLanguage: code2})) 121 82 }, 122 83 }), 123 123 - [state, setStateWrapped], 84 84 + [setStateWrapped], 124 85 ) 125 86 126 87 return (

+6 -2

src/state/shell/color-mode.tsx

··· 20 20 setContext.displayName = 'ColorModeSetContext' 21 21 22 22 export function Provider({children}: React.PropsWithChildren<{}>) { 23 23 - const [colorMode, setColorMode] = React.useState(persisted.get('colorMode')) 24 24 - const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme')) 23 23 + const [colorMode, setColorMode] = React.useState(() => 24 24 + persisted.get('colorMode'), 25 25 + ) 26 26 + const [darkTheme, setDarkTheme] = React.useState(() => 27 27 + persisted.get('darkTheme'), 28 28 + ) 25 29 26 30 const stateContextValue = React.useMemo( 27 31 () => ({

+22 -4

src/view/com/composer/select-language/PostLanguageSelect.tsx

··· 11 11 import {atoms as a, useTheme} from '#/alf' 12 12 import {Button, type ButtonProps} from '#/components/Button' 13 13 import * as Dialog from '#/components/Dialog' 14 14 + import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog' 14 15 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron' 15 16 import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' 16 17 import * as Menu from '#/components/Menu' 17 18 import {Text} from '#/components/Typography' 18 18 - import {PostLanguageSelectDialog} from './PostLanguageSelectDialog' 19 19 20 20 export function PostLanguageSelect({ 21 21 currentLanguages: currentLanguagesProp, ··· 36 36 const currentLanguages = 37 37 currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage) 38 38 39 39 + const onSelectLanguages = (languages: string[]) => { 40 40 + let langsString = languages.join(',') 41 41 + if (!langsString) { 42 42 + langsString = langPrefs.primaryLanguage 43 43 + } 44 44 + setLangPrefs.setPostLanguage(langsString) 45 45 + onSelectLanguage?.(langsString) 46 46 + } 47 47 + 39 48 if ( 40 49 dedupedHistory.length === 1 && 41 50 dedupedHistory[0] === langPrefs.postLanguage ··· 43 52 return ( 44 53 <> 45 54 <LanguageBtn onPress={languageDialogControl.open} /> 46 46 - <PostLanguageSelectDialog 55 55 + <LanguageSelectDialog 56 56 + titleText={<Trans>Choose post languages</Trans>} 57 57 + subtitleText={ 58 58 + <Trans>Select up to 3 languages used in this post</Trans> 59 59 + } 47 60 control={languageDialogControl} 48 61 currentLanguages={currentLanguages} 62 62 + onSelectLanguages={onSelectLanguages} 63 63 + maxLanguages={3} 49 64 /> 50 65 </> 51 66 ) ··· 94 109 </Menu.Outer> 95 110 </Menu.Root> 96 111 97 97 - <PostLanguageSelectDialog 112 112 + <LanguageSelectDialog 113 113 + titleText={<Trans>Choose post languages</Trans>} 114 114 + subtitleText={<Trans>Select up to 3 languages used in this post</Trans>} 98 115 control={languageDialogControl} 99 116 currentLanguages={currentLanguages} 100 100 - onSelectLanguage={onSelectLanguage} 117 117 + onSelectLanguages={onSelectLanguages} 118 118 + maxLanguages={3} 101 119 /> 102 120 </> 103 121 )

+41 -34

src/view/com/composer/select-language/PostLanguageSelectDialog.tsx src/components/dialogs/LanguageSelectDialog.tsx

··· 6 6 7 7 import {languageName} from '#/locale/helpers' 8 8 import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages' 9 9 - import { 10 10 - toPostLanguages, 11 11 - useLanguagePrefs, 12 12 - useLanguagePrefsApi, 13 13 - } from '#/state/preferences/languages' 9 9 + import {useLanguagePrefs} from '#/state/preferences/languages' 14 10 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' 15 11 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' 16 12 import {atoms as a, useTheme, web} from '#/alf' ··· 22 18 import {Text} from '#/components/Typography' 23 19 import {IS_NATIVE, IS_WEB} from '#/env' 24 20 25 25 - export function PostLanguageSelectDialog({ 21 21 + export function LanguageSelectDialog({ 22 22 + titleText, 23 23 + subtitleText, 26 24 control, 27 25 /** 28 26 * Optionally can be passed to show different values than what is saved in 29 27 * langPrefs. 30 28 */ 31 29 currentLanguages, 32 32 - onSelectLanguage, 30 30 + onSelectLanguages, 31 31 + maxLanguages, 33 32 }: { 34 33 control: Dialog.DialogControlProps 34 34 + titleText?: React.ReactNode 35 35 + subtitleText?: React.ReactNode 36 36 + /** 37 37 + * Defaults to the primary language 38 38 + */ 35 39 currentLanguages?: string[] 36 36 - onSelectLanguage?: (language: string) => void 40 40 + onSelectLanguages: (languages: string[]) => void 41 41 + maxLanguages?: number 37 42 }) { 38 43 const {height} = useWindowDimensions() 39 44 const insets = useSafeAreaInsets() ··· 50 55 <Dialog.Handle /> 51 56 <ErrorBoundary renderError={renderErrorBoundary}> 52 57 <DialogInner 58 58 + titleText={titleText} 59 59 + subtitleText={subtitleText} 53 60 currentLanguages={currentLanguages} 54 54 - onSelectLanguage={onSelectLanguage} 61 61 + onSelectLanguages={onSelectLanguages} 62 62 + maxLanguages={maxLanguages} 55 63 /> 56 64 </ErrorBoundary> 57 65 </Dialog.Outer> ··· 59 67 } 60 68 61 69 export function DialogInner({ 70 70 + titleText, 71 71 + subtitleText, 62 72 currentLanguages, 63 63 - onSelectLanguage, 73 73 + onSelectLanguages, 74 74 + maxLanguages, 64 75 }: { 76 76 + titleText?: React.ReactNode 77 77 + subtitleText?: React.ReactNode 65 78 currentLanguages?: string[] 66 66 - onSelectLanguage?: (language: string) => void 79 79 + onSelectLanguages?: (languages: string[]) => void 80 80 + maxLanguages?: number 67 81 }) { 68 82 const control = Dialog.useDialogContext() 69 83 const [headerHeight, setHeaderHeight] = useState(0) ··· 81 95 }, []) 82 96 83 97 const langPrefs = useLanguagePrefs() 84 84 - const postLanguagesPref = 85 85 - currentLanguages ?? toPostLanguages(langPrefs.postLanguage) 86 86 - 87 98 const [checkedLanguagesCode2, setCheckedLanguagesCode2] = useState<string[]>( 88 88 - postLanguagesPref || [langPrefs.primaryLanguage], 99 99 + currentLanguages || [langPrefs.primaryLanguage], 89 100 ) 90 101 const [search, setSearch] = useState('') 91 102 92 92 - const setLangPrefs = useLanguagePrefsApi() 93 103 const t = useTheme() 94 104 const {_} = useLingui() 95 105 96 106 const handleClose = () => { 97 107 control.close(() => { 98 98 - let langsString = checkedLanguagesCode2.join(',') 99 99 - if (!langsString) { 100 100 - langsString = langPrefs.primaryLanguage 101 101 - } 102 102 - setLangPrefs.setPostLanguage(langsString) 103 103 - onSelectLanguage?.(langsString) 108 108 + onSelectLanguages?.(checkedLanguagesCode2) 104 109 }) 105 110 } 106 111 ··· 181 186 a.text_xl, 182 187 a.mb_sm, 183 188 ]}> 184 184 - <Trans>Choose Post Languages</Trans> 189 189 + {titleText ?? <Trans>Choose languages</Trans>} 185 190 </Text> 186 186 - <Text 187 187 - nativeID="dialog-description" 188 188 - style={[ 189 189 - t.atoms.text_contrast_medium, 190 190 - a.text_left, 191 191 - a.text_md, 192 192 - a.mb_lg, 193 193 - ]}> 194 194 - <Trans>Select up to 3 languages used in this post</Trans> 195 195 - </Text> 191 191 + {subtitleText && ( 192 192 + <Text 193 193 + nativeID="dialog-description" 194 194 + style={[ 195 195 + t.atoms.text_contrast_medium, 196 196 + a.text_left, 197 197 + a.text_md, 198 198 + a.mb_lg, 199 199 + ]}> 200 200 + {subtitleText} 201 201 + </Text> 202 202 + )} 196 203 </View> 197 204 198 205 {IS_WEB && ( ··· 244 251 values={checkedLanguagesCode2} 245 252 onChange={setCheckedLanguagesCode2} 246 253 type="checkbox" 247 247 - maxSelections={3} 254 254 + maxSelections={maxLanguages} 248 255 label={_(msg`Select languages`)} 249 256 style={web([a.contents])}> 250 257 <Dialog.InnerFlatList

-4

src/view/com/modals/Modal.tsx

··· 7 7 import {useModalControls, useModals} from '#/state/modals' 8 8 import {FullWindowOverlay} from '#/components/FullWindowOverlay' 9 9 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' 10 10 - import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' 11 10 import * as UserAddRemoveListsModal from './UserAddRemoveLists' 12 11 13 12 const DEFAULT_SNAPPOINTS = ['90%'] ··· 44 43 if (activeModal?.name === 'user-add-remove-lists') { 45 44 snapPoints = UserAddRemoveListsModal.snapPoints 46 45 element = <UserAddRemoveListsModal.Component {...activeModal} /> 47 47 - } else if (activeModal?.name === 'content-languages-settings') { 48 48 - snapPoints = ContentLanguagesSettingsModal.snapPoints 49 49 - element = <ContentLanguagesSettingsModal.Component /> 50 46 } else { 51 47 return null 52 48 }

-3

src/view/com/modals/Modal.web.tsx

··· 6 6 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 7 7 import {type Modal as ModalIface} from '#/state/modals' 8 8 import {useModalControls, useModals} from '#/state/modals' 9 9 - import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' 10 9 import * as UserAddRemoveLists from './UserAddRemoveLists' 11 10 12 11 export function ModalsContainer() { ··· 47 46 let element 48 47 if (modal.name === 'user-add-remove-lists') { 49 48 element = <UserAddRemoveLists.Component {...modal} /> 50 50 - } else if (modal.name === 'content-languages-settings') { 51 51 - element = <ContentLanguagesSettingsModal.Component /> 52 49 } else { 53 50 return null 54 51 }

-64

src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx

··· 1 1 - import {Pressable, StyleSheet, Text, View} from 'react-native' 2 2 - import {LinearGradient} from 'expo-linear-gradient' 3 3 - import {msg, Trans} from '@lingui/macro' 4 4 - import {useLingui} from '@lingui/react' 5 5 - 6 6 - import {usePalette} from '#/lib/hooks/usePalette' 7 7 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 8 8 - import {colors, gradients, s} from '#/lib/styles' 9 9 - 10 10 - export const ConfirmLanguagesButton = ({ 11 11 - onPress, 12 12 - extraText, 13 13 - }: { 14 14 - onPress: () => void 15 15 - extraText?: string 16 16 - }) => { 17 17 - const pal = usePalette('default') 18 18 - const {_} = useLingui() 19 19 - const {isMobile} = useWebMediaQueries() 20 20 - return ( 21 21 - <View 22 22 - style={[ 23 23 - styles.btnContainer, 24 24 - pal.borderDark, 25 25 - isMobile && { 26 26 - paddingBottom: 40, 27 27 - borderTopWidth: 1, 28 28 - }, 29 29 - ]}> 30 30 - <Pressable 31 31 - testID="confirmContentLanguagesBtn" 32 32 - onPress={onPress} 33 33 - accessibilityRole="button" 34 34 - accessibilityLabel={_(msg`Confirm content language settings`)} 35 35 - accessibilityHint=""> 36 36 - <LinearGradient 37 37 - colors={[gradients.blueLight.start, gradients.blueLight.end]} 38 38 - start={{x: 0, y: 0}} 39 39 - end={{x: 1, y: 1}} 40 40 - style={[styles.btn]}> 41 41 - <Text style={[s.white, s.bold, s.f18]}> 42 42 - <Trans>Done{extraText}</Trans> 43 43 - </Text> 44 44 - </LinearGradient> 45 45 - </Pressable> 46 46 - </View> 47 47 - ) 48 48 - } 49 49 - 50 50 - const styles = StyleSheet.create({ 51 51 - btnContainer: { 52 52 - paddingTop: 10, 53 53 - paddingHorizontal: 10, 54 54 - }, 55 55 - btn: { 56 56 - flexDirection: 'row', 57 57 - alignItems: 'center', 58 58 - justifyContent: 'center', 59 59 - width: '100%', 60 60 - borderRadius: 32, 61 61 - padding: 14, 62 62 - backgroundColor: colors.gray1, 63 63 - }, 64 64 - })

-128

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

··· 1 1 - import React from 'react' 2 2 - import {StyleSheet, View} from 'react-native' 3 3 - import {Trans} from '@lingui/macro' 4 4 - 5 5 - import {usePalette} from '#/lib/hooks/usePalette' 6 6 - import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 7 7 - import {deviceLanguageCodes} from '#/locale/deviceLocales' 8 8 - import {languageName} from '#/locale/helpers' 9 9 - import {useModalControls} from '#/state/modals' 10 10 - import { 11 11 - useLanguagePrefs, 12 12 - useLanguagePrefsApi, 13 13 - } from '#/state/preferences/languages' 14 14 - import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' 15 15 - import {Text} from '../../util/text/Text' 16 16 - import {ScrollView} from '../util' 17 17 - import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' 18 18 - import {LanguageToggle} from './LanguageToggle' 19 19 - 20 20 - export const snapPoints = ['100%'] 21 21 - 22 22 - export function Component({}: {}) { 23 23 - const {closeModal} = useModalControls() 24 24 - const langPrefs = useLanguagePrefs() 25 25 - const setLangPrefs = useLanguagePrefsApi() 26 26 - const pal = usePalette('default') 27 27 - const {isMobile} = useWebMediaQueries() 28 28 - const onPressDone = React.useCallback(() => { 29 29 - closeModal() 30 30 - }, [closeModal]) 31 31 - 32 32 - const languages = React.useMemo(() => { 33 33 - const langs = LANGUAGES.filter( 34 34 - lang => 35 35 - !!lang.code2.trim() && 36 36 - LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3, 37 37 - ) 38 38 - // sort so that device & selected languages are on top, then alphabetically 39 39 - langs.sort((a, b) => { 40 40 - const hasA = 41 41 - langPrefs.contentLanguages.includes(a.code2) || 42 42 - deviceLanguageCodes.includes(a.code2) 43 43 - const hasB = 44 44 - langPrefs.contentLanguages.includes(b.code2) || 45 45 - deviceLanguageCodes.includes(b.code2) 46 46 - if (hasA === hasB) return a.name.localeCompare(b.name) 47 47 - if (hasA) return -1 48 48 - return 1 49 49 - }) 50 50 - return langs 51 51 - }, [langPrefs]) 52 52 - 53 53 - const onPress = React.useCallback( 54 54 - (code2: string) => { 55 55 - setLangPrefs.toggleContentLanguage(code2) 56 56 - }, 57 57 - [setLangPrefs], 58 58 - ) 59 59 - 60 60 - return ( 61 61 - <View 62 62 - testID="contentLanguagesModal" 63 63 - style={[ 64 64 - pal.view, 65 65 - styles.container, 66 66 - // @ts-ignore vh is web only 67 67 - isMobile 68 68 - ? { 69 69 - paddingTop: 20, 70 70 - } 71 71 - : { 72 72 - maxHeight: '90vh', 73 73 - }, 74 74 - ]}> 75 75 - <Text style={[pal.text, styles.title]}> 76 76 - <Trans>Content Languages</Trans> 77 77 - </Text> 78 78 - <Text style={[pal.text, styles.description]}> 79 79 - <Trans> 80 80 - Which languages would you like to see in your algorithmic feeds? 81 81 - </Trans> 82 82 - </Text> 83 83 - <Text style={[pal.textLight, styles.description]}> 84 84 - <Trans>Leave them all unselected to see any language.</Trans> 85 85 - </Text> 86 86 - <ScrollView style={styles.scrollContainer}> 87 87 - {languages.map(lang => ( 88 88 - <LanguageToggle 89 89 - key={lang.code2} 90 90 - code2={lang.code2} 91 91 - langType="contentLanguages" 92 92 - name={languageName(lang, langPrefs.appLanguage)} 93 93 - onPress={() => { 94 94 - onPress(lang.code2) 95 95 - }} 96 96 - /> 97 97 - ))} 98 98 - <View 99 99 - style={{ 100 100 - height: isMobile ? 60 : 0, 101 101 - }} 102 102 - /> 103 103 - </ScrollView> 104 104 - <ConfirmLanguagesButton onPress={onPressDone} /> 105 105 - </View> 106 106 - ) 107 107 - } 108 108 - 109 109 - const styles = StyleSheet.create({ 110 110 - container: { 111 111 - flex: 1, 112 112 - }, 113 113 - title: { 114 114 - textAlign: 'center', 115 115 - fontWeight: '600', 116 116 - fontSize: 24, 117 117 - marginBottom: 12, 118 118 - }, 119 119 - description: { 120 120 - textAlign: 'center', 121 121 - paddingHorizontal: 16, 122 122 - marginBottom: 10, 123 123 - }, 124 124 - scrollContainer: { 125 125 - flex: 1, 126 126 - paddingHorizontal: 10, 127 127 - }, 128 128 - })

-53

src/view/com/modals/lang-settings/LanguageToggle.tsx

··· 1 1 - import {StyleSheet} from 'react-native' 2 2 - 3 3 - import {usePalette} from '#/lib/hooks/usePalette' 4 4 - import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages' 5 5 - import {ToggleButton} from '#/view/com/util/forms/ToggleButton' 6 6 - 7 7 - export function LanguageToggle({ 8 8 - code2, 9 9 - name, 10 10 - onPress, 11 11 - langType, 12 12 - }: { 13 13 - code2: string 14 14 - name: string 15 15 - onPress: () => void 16 16 - langType: 'contentLanguages' | 'postLanguages' 17 17 - }) { 18 18 - const pal = usePalette('default') 19 19 - const langPrefs = useLanguagePrefs() 20 20 - 21 21 - const values = 22 22 - langType === 'contentLanguages' 23 23 - ? langPrefs.contentLanguages 24 24 - : toPostLanguages(langPrefs.postLanguage) 25 25 - const isSelected = values.includes(code2) 26 26 - 27 27 - // enforce a max of 3 selections for post languages 28 28 - let isDisabled = false 29 29 - if (langType === 'postLanguages' && values.length >= 3 && !isSelected) { 30 30 - isDisabled = true 31 31 - } 32 32 - 33 33 - return ( 34 34 - <ToggleButton 35 35 - label={name} 36 36 - isSelected={isSelected} 37 37 - onPress={isDisabled ? undefined : onPress} 38 38 - style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]} 39 39 - /> 40 40 - ) 41 41 - } 42 42 - 43 43 - const styles = StyleSheet.create({ 44 44 - languageToggle: { 45 45 - borderTopWidth: 1, 46 46 - borderRadius: 0, 47 47 - paddingHorizontal: 6, 48 48 - paddingVertical: 12, 49 49 - }, 50 50 - dimmed: { 51 51 - opacity: 0.5, 52 52 - }, 53 53 - })

-193

src/view/com/util/forms/ToggleButton.tsx

··· 1 1 - import { 2 2 - type StyleProp, 3 3 - StyleSheet, 4 4 - type TextStyle, 5 5 - View, 6 6 - type ViewStyle, 7 7 - } from 'react-native' 8 8 - 9 9 - import {choose} from '#/lib/functions' 10 10 - import {colors} from '#/lib/styles' 11 11 - import {useTheme} from '#/lib/ThemeContext' 12 12 - import {type TypographyVariant} from '#/lib/ThemeContext' 13 13 - import {Text} from '../text/Text' 14 14 - import {Button, type ButtonType} from './Button' 15 15 - 16 16 - /** 17 17 - * @deprecated use Toggle from `#/components/form/Toggle.tsx` instead 18 18 - */ 19 19 - export function ToggleButton({ 20 20 - testID, 21 21 - type = 'default-light', 22 22 - label, 23 23 - isSelected, 24 24 - style, 25 25 - labelType, 26 26 - onPress, 27 27 - }: { 28 28 - testID?: string 29 29 - type?: ButtonType 30 30 - label: string 31 31 - isSelected: boolean 32 32 - style?: StyleProp<ViewStyle> 33 33 - labelType?: TypographyVariant 34 34 - onPress?: () => void 35 35 - }) { 36 36 - const theme = useTheme() 37 37 - const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { 38 38 - primary: { 39 39 - borderColor: theme.palette.primary.text, 40 40 - }, 41 41 - secondary: { 42 42 - borderColor: theme.palette.secondary.text, 43 43 - }, 44 44 - inverted: { 45 45 - borderColor: theme.palette.inverted.text, 46 46 - }, 47 47 - 'primary-outline': { 48 48 - borderColor: theme.palette.primary.border, 49 49 - }, 50 50 - 'secondary-outline': { 51 51 - borderColor: theme.palette.secondary.border, 52 52 - }, 53 53 - 'primary-light': { 54 54 - borderColor: theme.palette.primary.border, 55 55 - }, 56 56 - 'secondary-light': { 57 57 - borderColor: theme.palette.secondary.border, 58 58 - }, 59 59 - default: { 60 60 - borderColor: theme.palette.default.border, 61 61 - }, 62 62 - 'default-light': { 63 63 - borderColor: theme.palette.default.border, 64 64 - }, 65 65 - }) 66 66 - const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>( 67 67 - type, 68 68 - { 69 69 - primary: { 70 70 - backgroundColor: theme.palette.primary.text, 71 71 - opacity: isSelected ? 1 : 0.33, 72 72 - }, 73 73 - secondary: { 74 74 - backgroundColor: theme.palette.secondary.text, 75 75 - opacity: isSelected ? 1 : 0.33, 76 76 - }, 77 77 - inverted: { 78 78 - backgroundColor: theme.palette.inverted.text, 79 79 - opacity: isSelected ? 1 : 0.33, 80 80 - }, 81 81 - 'primary-outline': { 82 82 - backgroundColor: theme.palette.primary.background, 83 83 - opacity: isSelected ? 1 : 0.5, 84 84 - }, 85 85 - 'secondary-outline': { 86 86 - backgroundColor: theme.palette.secondary.background, 87 87 - opacity: isSelected ? 1 : 0.5, 88 88 - }, 89 89 - 'primary-light': { 90 90 - backgroundColor: theme.palette.primary.background, 91 91 - opacity: isSelected ? 1 : 0.5, 92 92 - }, 93 93 - 'secondary-light': { 94 94 - backgroundColor: theme.palette.secondary.background, 95 95 - opacity: isSelected ? 1 : 0.5, 96 96 - }, 97 97 - default: { 98 98 - backgroundColor: isSelected 99 99 - ? theme.palette.primary.background 100 100 - : colors.gray3, 101 101 - }, 102 102 - 'default-light': { 103 103 - backgroundColor: isSelected 104 104 - ? theme.palette.primary.background 105 105 - : colors.gray3, 106 106 - }, 107 107 - }, 108 108 - ) 109 109 - const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, { 110 110 - primary: { 111 111 - color: theme.palette.primary.text, 112 112 - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 113 113 - }, 114 114 - secondary: { 115 115 - color: theme.palette.secondary.text, 116 116 - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 117 117 - }, 118 118 - inverted: { 119 119 - color: theme.palette.inverted.text, 120 120 - fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, 121 121 - }, 122 122 - 'primary-outline': { 123 123 - color: theme.palette.primary.textInverted, 124 124 - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 125 125 - }, 126 126 - 'secondary-outline': { 127 127 - color: theme.palette.secondary.textInverted, 128 128 - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 129 129 - }, 130 130 - 'primary-light': { 131 131 - color: theme.palette.primary.textInverted, 132 132 - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, 133 133 - }, 134 134 - 'secondary-light': { 135 135 - color: theme.palette.secondary.textInverted, 136 136 - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, 137 137 - }, 138 138 - default: { 139 139 - color: theme.palette.default.text, 140 140 - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 141 141 - }, 142 142 - 'default-light': { 143 143 - color: theme.palette.default.text, 144 144 - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, 145 145 - }, 146 146 - }) 147 147 - return ( 148 148 - <Button testID={testID} type={type} onPress={onPress} style={style}> 149 149 - <View style={styles.outer}> 150 150 - <View style={[circleStyle, styles.circle]}> 151 151 - <View 152 152 - style={[ 153 153 - circleFillStyle, 154 154 - styles.circleFill, 155 155 - isSelected ? styles.circleFillSelected : undefined, 156 156 - ]} 157 157 - /> 158 158 - </View> 159 159 - {label === '' ? null : ( 160 160 - <Text type={labelType || 'button'} style={[labelStyle, styles.label]}> 161 161 - {label} 162 162 - </Text> 163 163 - )} 164 164 - </View> 165 165 - </Button> 166 166 - ) 167 167 - } 168 168 - 169 169 - const styles = StyleSheet.create({ 170 170 - outer: { 171 171 - flexDirection: 'row', 172 172 - alignItems: 'center', 173 173 - gap: 10, 174 174 - }, 175 175 - circle: { 176 176 - width: 42, 177 177 - height: 26, 178 178 - borderRadius: 15, 179 179 - padding: 3, 180 180 - borderWidth: 2, 181 181 - }, 182 182 - circleFill: { 183 183 - width: 16, 184 184 - height: 16, 185 185 - borderRadius: 10, 186 186 - }, 187 187 - circleFillSelected: { 188 188 - marginLeft: 16, 189 189 - }, 190 190 - label: { 191 191 - flex: 1, 192 192 - }, 193 193 - })

+1 -82

src/view/screens/Debug.tsx

··· 14 14 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' 15 15 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' 16 16 import {Button} from '#/view/com/util/forms/Button' 17 17 - import {ToggleButton} from '#/view/com/util/forms/ToggleButton' 18 17 import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' 19 18 import {Text} from '#/view/com/util/text/Text' 20 19 import * as Toast from '#/view/com/util/Toast' ··· 47 46 ) 48 47 } 49 48 50 50 - function DebugInner({ 51 51 - colorScheme, 52 52 - onToggleColorScheme, 53 53 - }: { 49 49 + function DebugInner({}: { 54 50 colorScheme: 'light' | 'dark' 55 51 onToggleColorScheme: () => void 56 52 }) { ··· 61 57 const renderItem = (item: any) => { 62 58 return ( 63 59 <View key={`view-${item.currentView}`}> 64 64 - <View style={[s.pt10, s.pl10, s.pr10]}> 65 65 - <ToggleButton 66 66 - type="default-light" 67 67 - onPress={onToggleColorScheme} 68 68 - isSelected={colorScheme === 'dark'} 69 69 - label={_(msg`Dark mode`)} 70 70 - /> 71 71 - </View> 72 60 {item.currentView === 3 ? ( 73 61 <NotifsView /> 74 62 ) : item.currentView === 2 ? ( ··· 134 122 <ScrollView style={[s.pl10, s.pr10]}> 135 123 <Heading label="Buttons" /> 136 124 <ButtonsView /> 137 137 - <Heading label="Toggle Buttons" /> 138 138 - <ToggleButtonsView /> 139 125 <View style={s.footerSpacer} /> 140 126 </ScrollView> 141 127 ) ··· 401 387 </View> 402 388 ) 403 389 } 404 404 - 405 405 - function ToggleButtonsView() { 406 406 - const defaultPal = usePalette('default') 407 407 - const buttonStyles = s.mb5 408 408 - const [isSelected, setIsSelected] = React.useState(false) 409 409 - const onToggle = () => setIsSelected(!isSelected) 410 410 - return ( 411 411 - <View style={[defaultPal.view]}> 412 412 - <ToggleButton 413 413 - type="primary" 414 414 - label="Primary solid" 415 415 - style={buttonStyles} 416 416 - isSelected={isSelected} 417 417 - onPress={onToggle} 418 418 - /> 419 419 - <ToggleButton 420 420 - type="secondary" 421 421 - label="Secondary solid" 422 422 - style={buttonStyles} 423 423 - isSelected={isSelected} 424 424 - onPress={onToggle} 425 425 - /> 426 426 - <ToggleButton 427 427 - type="inverted" 428 428 - label="Inverted solid" 429 429 - style={buttonStyles} 430 430 - isSelected={isSelected} 431 431 - onPress={onToggle} 432 432 - /> 433 433 - <ToggleButton 434 434 - type="primary-outline" 435 435 - label="Primary outline" 436 436 - style={buttonStyles} 437 437 - isSelected={isSelected} 438 438 - onPress={onToggle} 439 439 - /> 440 440 - <ToggleButton 441 441 - type="secondary-outline" 442 442 - label="Secondary outline" 443 443 - style={buttonStyles} 444 444 - isSelected={isSelected} 445 445 - onPress={onToggle} 446 446 - /> 447 447 - <ToggleButton 448 448 - type="primary-light" 449 449 - label="Primary light" 450 450 - style={buttonStyles} 451 451 - isSelected={isSelected} 452 452 - onPress={onToggle} 453 453 - /> 454 454 - <ToggleButton 455 455 - type="secondary-light" 456 456 - label="Secondary light" 457 457 - style={buttonStyles} 458 458 - isSelected={isSelected} 459 459 - onPress={onToggle} 460 460 - /> 461 461 - <ToggleButton 462 462 - type="default-light" 463 463 - label="Default light" 464 464 - style={buttonStyles} 465 465 - isSelected={isSelected} 466 466 - onPress={onToggle} 467 467 - /> 468 468 - </View> 469 469 - ) 470 470 - }