diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 11204f3090..1381f66b5d 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -71,7 +71,7 @@ const schema = z.object({ contentLanguages: z.array(z.string()), /** * The language(s) the user is currently posting in, configured within the - * composer. Multiple languages are psearate by commas. + * composer. Multiple languages are separated by commas. * * BCP-47 2-letter language code without region. */ diff --git a/src/state/preferences/languages.tsx b/src/state/preferences/languages.tsx index 14ba62dba9..5d4336814c 100644 --- a/src/state/preferences/languages.tsx +++ b/src/state/preferences/languages.tsx @@ -156,6 +156,10 @@ export function toPostLanguages(postLanguage: string): string[] { return postLanguage.split(',').filter(Boolean) } +export function fromPostLanguages(languages: string[]): string { + return languages.filter(Boolean).join(',') +} + export function hasPostLanguage(postLanguage: string, code2: string): boolean { return toPostLanguages(postLanguage).includes(code2) } diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index a4e0bd06fb..82b0dc6e29 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -88,6 +88,7 @@ import { import {useModalControls} from '#/state/modals' import {useRequireAltTextEnabled} from '#/state/preferences' import { + fromPostLanguages, toPostLanguages, useLanguagePrefs, useLanguagePrefsApi, @@ -196,6 +197,25 @@ export const ComposePost = ({ const [isPublishing, setIsPublishing] = useState(false) const [publishingStage, setPublishingStage] = useState('') const [error, setError] = useState('') + const [acceptedLanguageSuggestion, setAcceptedLanguageSuggestion] = useState< + string | null + >(null) + + // NOTE(@elijaharita): if a temporary language suggestion has been accepted, + // show that as the post language instead of the one from langPrefs. + const currentLanguages = useMemo( + () => + acceptedLanguageSuggestion + ? [acceptedLanguageSuggestion] + : toPostLanguages(langPrefs.postLanguage), + [acceptedLanguageSuggestion, langPrefs.postLanguage], + ) + + // This effect clears the temporary language suggestion if the post language + // is manually changed, so the user doesn't get stuck with the suggestion. + useEffect(() => { + setAcceptedLanguageSuggestion(null) + }, [langPrefs.postLanguage]) const [composerState, composerDispatch] = useReducer( composerReducer, @@ -414,7 +434,7 @@ export const ComposePost = ({ thread, replyTo: replyTo?.uri, onStateChange: setPublishingStage, - langs: toPostLanguages(langPrefs.postLanguage), + langs: currentLanguages, }) ).uris[0] @@ -490,7 +510,7 @@ export const ComposePost = ({ isPartOfThread: thread.posts.length > 1, hasLink: !!post.embed.link, hasQuote: !!post.embed.quote, - langs: langPrefs.postLanguage, + langs: fromPostLanguages(currentLanguages), logContext: 'Composer', }) index++ @@ -557,7 +577,7 @@ export const ComposePost = ({ thread, canPost, isPublishing, - langPrefs.postLanguage, + currentLanguages, onClose, onPost, onPostSuccess, @@ -656,6 +676,8 @@ export const ComposePost = ({ text={activePost.richtext.text} // NOTE(@elijaharita): currently just choosing the first language if any exists replyToLanguage={replyTo?.langs?.[0]} + currentLanguages={currentLanguages} + onChange={setAcceptedLanguageSuggestion} /> ) @@ -1289,6 +1312,7 @@ function ComposerFooter({ onEmojiButtonPress, onSelectVideo, onAddPost, + currentLanguages, }: { post: PostDraft dispatch: (action: PostAction) => void @@ -1297,6 +1321,7 @@ function ComposerFooter({ onError: (error: string) => void onSelectVideo: (postId: string, asset: ImagePickerAsset) => void onAddPost: () => void + currentLanguages: string[] }) { const t = useTheme() const {_} = useLingui() @@ -1450,7 +1475,7 @@ function ComposerFooter({ )} - + - + ) } @@ -43,7 +53,9 @@ export function PostLanguageSelect() { <> - {({props}) => } + {({props}) => ( + + )} @@ -59,7 +71,7 @@ export function PostLanguageSelect() { onPress={() => setLangPrefs.setPostLanguage(historyItem)}> {langName} ) @@ -77,17 +89,25 @@ export function PostLanguageSelect() { - + ) } -function LanguageBtn(props: Omit) { +function LanguageBtn( + props: Omit & { + currentLanguages?: string[] + }, +) { const {_} = useLingui() const langPrefs = useLanguagePrefs() const t = useTheme() const postLanguagesPref = toPostLanguages(langPrefs.postLanguage) + const currentLanguages = props.currentLanguages ?? postLanguagesPref return (