Rework alt-text input to use bottom sheet (#2355)

* Rework alt-text input to use bottom sheet

* Add translations

src/view/com/modals/AltImage.tsx

@@ -1,14 +1,12 @@
 import React, {useMemo, useCallback, useState} from 'react'
 import {
   ImageStyle,
-  KeyboardAvoidingView,
-  ScrollView,
   StyleSheet,
-  TextInput,
   TouchableOpacity,
   View,
   useWindowDimensions,
 } from 'react-native'
+import {ScrollView, TextInput} from './util'
 import {Image} from 'expo-image'
 import {usePalette} from 'lib/hooks/usePalette'
 import {gradients, s} from 'lib/styles'
@@ -17,13 +15,13 @@ import {MAX_ALT_TEXT} from 'lib/constants'
 import {useTheme} from 'lib/ThemeContext'
 import {Text} from '../util/text/Text'
 import LinearGradient from 'react-native-linear-gradient'
-import {isAndroid, isWeb} from 'platform/detection'
+import {isWeb} from 'platform/detection'
 import {ImageModel} from 'state/models/media/image'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
 import {useModalControls} from '#/state/modals'
 
-export const snapPoints = ['fullscreen']
+export const snapPoints = ['100%']
 
 interface Props {
   image: ImageModel
@@ -54,22 +52,24 @@ export function Component({image}: Props) {
     }
   }, [image, windim])
 
+  const onUpdate = useCallback(
+    (v: string) => {
+      v = enforceLen(v, MAX_ALT_TEXT)
+      setAltText(v)
+      image.setAltText(v)
+    },
+    [setAltText, image],
+  )
+
   const onPressSave = useCallback(() => {
     image.setAltText(altText)
     closeModal()
   }, [closeModal, image, altText])
 
-  const onPressCancel = () => {
-    closeModal()
-  }
-
   return (
-    <KeyboardAvoidingView
-      behavior={isAndroid ? 'height' : 'padding'}
-      style={[pal.view, styles.container]}>
     <ScrollView
       testID="altTextImageModal"
-        style={styles.scrollContainer}
+      style={[pal.view, styles.scrollContainer]}
       keyboardShouldPersistTaps="always"
       nativeID="imageAltText">
       <View style={styles.scrollInner}>
@@ -90,10 +90,10 @@ export function Component({image}: Props) {
           style={[styles.textArea, pal.border, pal.text]}
           keyboardAppearance={theme.colorScheme}
           multiline
-            placeholder="Add alt text"
+          placeholder={_(msg`Add alt text`)}
           placeholderTextColor={pal.colors.textLight}
           value={altText}
-            onChangeText={text => setAltText(enforceLen(text, MAX_ALT_TEXT))}
+          onChangeText={onUpdate}
           accessibilityLabel={_(msg`Image alt text`)}
           accessibilityHint=""
           accessibilityLabelledBy="imageAltText"
@@ -104,7 +104,7 @@ export function Component({image}: Props) {
             testID="altTextImageSaveBtn"
             onPress={onPressSave}
             accessibilityLabel={_(msg`Save alt text`)}
-              accessibilityHint={`Saves alt text, which reads: ${altText}`}
+            accessibilityHint=""
             accessibilityRole="button">
             <LinearGradient
               colors={[gradients.blueLight.start, gradients.blueLight.end]}
@@ -112,44 +112,26 @@ export function Component({image}: Props) {
               end={{x: 1, y: 1}}
               style={[styles.button]}>
               <Text type="button-lg" style={[s.white, s.bold]}>
-                  <Trans>Save</Trans>
+                <Trans>Done</Trans>
               </Text>
             </LinearGradient>
           </TouchableOpacity>
-            <TouchableOpacity
-              testID="altTextImageCancelBtn"
-              onPress={onPressCancel}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Cancel add image alt text`)}
-              accessibilityHint=""
-              onAccessibilityEscape={onPressCancel}>
-              <View style={[styles.button]}>
-                <Text type="button-lg" style={[pal.textLight]}>
-                  <Trans>Cancel</Trans>
-                </Text>
-              </View>
-            </TouchableOpacity>
         </View>
       </View>
     </ScrollView>
-    </KeyboardAvoidingView>
   )
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    height: '100%',
-    width: '100%',
-    paddingVertical: isWeb ? 0 : 18,
-  },
   scrollContainer: {
     flex: 1,
     height: '100%',
     paddingHorizontal: isWeb ? 0 : 12,
+    paddingVertical: isWeb ? 0 : 24,
   },
   scrollInner: {
     gap: 12,
+    paddingTop: isWeb ? 0 : 12,
   },
   imageContainer: {
     borderRadius: 8,
@@ -173,5 +155,6 @@ const styles = StyleSheet.create({
   },
   buttonControls: {
     gap: 8,
+    paddingBottom: isWeb ? 0 : 50,
   },
 })