Handle multiple languages

src/view/com/composer/Composer.tsx

@@ -208,11 +208,10 @@ export const ComposePost = ({
   >(null)
 
   /**
-   * The language of the post being replied to, if any. We just use the first
+   * The language(s) of the post being replied to.
-   * language available, for now.
    */
-  const [replyToLanguage, setReplyToLanguage] = useState<string | undefined>(
+  const [replyToLanguages, setReplyToLanguages] = useState<string[]>(
-    replyTo?.langs?.[0],
+    replyTo?.langs || [],
   )
 
   /**
@@ -234,7 +233,7 @@ export const ComposePost = ({
    */
   const onSelectLanguage = () => {
     setAcceptedLanguageSuggestion(null)
-    setReplyToLanguage(undefined)
+    setReplyToLanguages([])
   }
 
   const [composerState, composerDispatch] = useReducer(
@@ -694,7 +693,7 @@ export const ComposePost = ({
     <>
       <SuggestedLanguage
         text={activePost.richtext.text}
-        replyToLanguage={replyToLanguage}
+        replyToLanguages={replyToLanguages}
         currentLanguages={currentLanguages}
         onAcceptSuggestedLanguage={setAcceptedLanguageSuggestion}
       />

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

@@ -18,17 +18,30 @@ const cancelIdle = globalThis.cancelIdleCallback || clearTimeout
 
 export function SuggestedLanguage({
   text,
-  replyToLanguage: replyToLanguageProp,
+  replyToLanguages: replyToLanguagesProp,
   currentLanguages,
   onAcceptSuggestedLanguage,
 }: {
   text: string
-  replyToLanguage?: string
+  /**
+   * All languages associated with the post being replied to.
+   */
+  replyToLanguages: string[]
+  /**
+   * All languages currently selected for the post being composed.
+   */
   currentLanguages: string[]
+  /**
+   * Called when the user accepts a suggested language. We only pass a single
+   * language here. If the post being replied to has multiple languages, we
+   * only suggest the first one.
+   */
   onAcceptSuggestedLanguage: (language: string | null) => void
 }) {
   const langPrefs = useLanguagePrefs()
-  const replyToLanguage = cleanUpLanguage(replyToLanguageProp)
+  const replyToLanguages = replyToLanguagesProp
+    .map(lang => cleanUpLanguage(lang))
+    .filter(Boolean) as string[]
   const [hasInteracted, setHasInteracted] = useState(false)
   const [suggestedLanguage, setSuggestedLanguage] = useState<
     string | undefined
@@ -63,14 +76,15 @@ export function SuggestedLanguage({
   const hasLanguageSuggestion =
     suggestedLanguage && !currentLanguages.includes(suggestedLanguage)
   /*
-   * We have not detected a different language, and the user has not already
+   * We have not detected a different language, and the user is not already
-   * selected the language of the post they are replying to.
+   * using or has not already selected one of the languages of the post they
+   * are replying to.
    */
   const hasSuggestedReplyLanguage =
     !hasInteracted &&
     !suggestedLanguage &&
-    replyToLanguage &&
+    replyToLanguages.length &&
-    !currentLanguages.includes(replyToLanguage)
+    !replyToLanguages.some(l => currentLanguages.includes(l))
 
   if (hasLanguageSuggestion) {
     const suggestedLanguageName = codeToLanguageName(
@@ -94,7 +108,7 @@ export function SuggestedLanguage({
     )
   } else if (hasSuggestedReplyLanguage) {
     const suggestedLanguageName = codeToLanguageName(
-      replyToLanguage,
+      replyToLanguages[0],
       langPrefs.appLanguage,
     )
 
@@ -109,7 +123,7 @@ export function SuggestedLanguage({
             </Trans>
           </RNText>
         }
-        value={replyToLanguage}
+        value={replyToLanguages[0]}
         onAccept={onAcceptSuggestedLanguage}
       />
     )