[APP-735] Post language improvements (#982)

* Fix composer character-counter bouncing around UI elements

* Fix composer toolbar padding when keyboard is dismissed on iOS

* Use the full name of the language in the composer footer

* Add headings to the DropdownButton

* Update the composer language control to use a simpler dropdown

* Fix lint

* Add translate link to Post component used in notifications

* Fix lint

src/view/com/composer/Composer.tsx

@@ -16,6 +16,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {RichText} from '@atproto/api'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
+import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible'
 import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'
 import * as Toast from '../util/Toast'
@@ -35,7 +36,7 @@ import {OpenCameraBtn} from './photos/OpenCameraBtn'
 import {usePalette} from 'lib/hooks/usePalette'
 import QuoteEmbed from '../util/post-embeds/QuoteEmbed'
 import {useExternalLinkFetch} from './useExternalLinkFetch'
-import {isDesktopWeb, isAndroid} from 'platform/detection'
+import {isDesktopWeb, isAndroid, isIOS} from 'platform/detection'
 import {GalleryModel} from 'state/models/media/gallery'
 import {Gallery} from './photos/Gallery'
 import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
@@ -55,6 +56,7 @@ export const ComposePost = observer(function ComposePost({
   const pal = usePalette('default')
   const store = useStores()
   const textInput = useRef<TextInputRef>(null)
+  const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isProcessing, setIsProcessing] = useState(false)
   const [processingState, setProcessingState] = useState('')
   const [error, setError] = useState('')
@@ -75,10 +77,11 @@ export const ComposePost = observer(function ComposePost({
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
     () => ({
-      paddingBottom: isAndroid ? insets.bottom : 0,
+      paddingBottom:
+        isAndroid || (isIOS && !isKeyboardVisible) ? insets.bottom : 0,
       paddingTop: isAndroid ? insets.top : isDesktopWeb ? 0 : 15,
     }),
-    [insets],
+    [insets, isKeyboardVisible],
   )
 
   // HACK

src/view/com/composer/char-progress/CharProgress.tsx

@@ -17,7 +17,7 @@ export function CharProgress({count}: {count: number}) {
   const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
   return (
     <>
-      <Text style={[s.mr10, {color: textColor}]}>
+      <Text style={[s.mr10, s.tabularNum, {color: textColor}]}>
         {MAX_GRAPHEME_LENGTH - count}
       </Text>
       <View>

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

@@ -1,22 +1,27 @@
-import React, {useCallback} from 'react'
-import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native'
+import React, {useCallback, useMemo} from 'react'
+import {StyleSheet, Keyboard} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {Text} from 'view/com/util/text/Text'
+import {
+  DropdownButton,
+  DropdownItem,
+  DropdownItemButton,
+} from 'view/com/util/forms/DropdownButton'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {isNative} from 'platform/detection'
-
-const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
+import {codeToLanguageName} from '../../../../locale/helpers'
+import {deviceLocales} from 'platform/detection'
 
 export const SelectLangBtn = observer(function SelectLangBtn() {
   const pal = usePalette('default')
   const store = useStores()
 
-  const onPress = useCallback(async () => {
+  const onPressMore = useCallback(async () => {
     if (isNative) {
       if (Keyboard.isVisible()) {
         Keyboard.dismiss()
@@ -25,18 +30,62 @@ export const SelectLangBtn = observer(function SelectLangBtn() {
     store.shell.openModal({name: 'post-languages-settings'})
   }, [store])
 
+  const postLanguagesPref = store.preferences.postLanguages
+  const items: DropdownItem[] = useMemo(() => {
+    let arr: DropdownItemButton[] = []
+
+    const add = (langCode: string) => {
+      const langName = codeToLanguageName(langCode)
+      if (arr.find((item: DropdownItemButton) => item.label === langName)) {
+        return
+      }
+      arr.push({
+        icon: store.preferences.hasPostLanguage(langCode)
+          ? ['fas', 'circle-check']
+          : ['far', 'circle'],
+        label: langName,
+        onPress() {
+          store.preferences.setPostLanguage(langCode)
+        },
+      })
+    }
+
+    for (const lang of postLanguagesPref) {
+      add(lang)
+    }
+    for (const lang of deviceLocales) {
+      add(lang)
+    }
+    add('en') // english
+    add('ja') // japanese
+    add('pt') // portugese
+    add('de') // german
+
+    return [
+      {heading: true, label: 'Post language'},
+      ...arr.slice(0, 6),
+      {sep: true},
+      {
+        label: 'Other...',
+        onPress: onPressMore,
+      },
+    ]
+  }, [store.preferences, postLanguagesPref, onPressMore])
+
   return (
-    <TouchableOpacity
+    <DropdownButton
+      type="bare"
       testID="selectLangBtn"
-      onPress={onPress}
+      items={items}
+      openUpwards
       style={styles.button}
-      hitSlop={HITSLOP}
-      accessibilityRole="button"
       accessibilityLabel="Language selection"
-      accessibilityHint="Opens screen or modal to select language of post">
+      accessibilityHint="">
       {store.preferences.postLanguages.length > 0 ? (
-        <Text type="lg-bold" style={pal.link}>
-          {store.preferences.postLanguages.join(', ')}
+        <Text type="lg-bold" style={[pal.link, styles.label]} numberOfLines={1}>
+          {store.preferences.postLanguages
+            .map(lang => codeToLanguageName(lang))
+            .join(', ')}
         </Text>
       ) : (
         <FontAwesomeIcon
@@ -45,7 +94,7 @@ export const SelectLangBtn = observer(function SelectLangBtn() {
           size={26}
         />
       )}
-    </TouchableOpacity>
+    </DropdownButton>
   )
 })
 
@@ -53,4 +102,7 @@ const styles = StyleSheet.create({
   button: {
     paddingHorizontal: 15,
   },
+  label: {
+    maxWidth: 100,
+  },
 })