Revamp edit image alt text dialog (#5461)

* revamp alt dialog

* readd the limit check

don't trim with enforceLen, it ruins copy-pasting long text and it's overall annoying behavior

* Update src/view/com/composer/photos/ImageAltTextDialog.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/view/com/composer/photos/Gallery.tsx

@@ -18,9 +18,10 @@ import {Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
 import {ComposerImage, cropImage} from '#/state/gallery'
-import {useModalControls} from '#/state/modals'
 import {Text} from '#/view/com/util/text/Text'
 import {useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {ImageAltTextDialog} from './ImageAltTextDialog'
 
 const IMAGE_GAP = 8
 
@@ -141,7 +142,8 @@ const GalleryItem = ({
 }: GalleryItemProps): React.ReactNode => {
   const {_} = useLingui()
   const t = useTheme()
-  const {openModal} = useModalControls()
+
+  const altTextControl = Dialog.useDialogControl()
 
   const onImageEdit = () => {
     if (isNative) {
@@ -153,7 +155,7 @@ const GalleryItem = ({
 
   const onAltTextEdit = () => {
     Keyboard.dismiss()
-    openModal({name: 'alt-text-image', image, onChange})
+    altTextControl.open()
   }
 
   return (
@@ -229,6 +231,12 @@ const GalleryItem = ({
         accessible={true}
         accessibilityIgnoresInvertColors
       />
+
+      <ImageAltTextDialog
+        control={altTextControl}
+        image={image}
+        onChange={onChange}
+      />
     </View>
   )
 }

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {ImageStyle, useWindowDimensions, View} from 'react-native'
+import {Image} from 'expo-image'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {MAX_ALT_TEXT} from '#/lib/constants'
+import {isWeb} from '#/platform/detection'
+import {ComposerImage} from '#/state/gallery'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {Text} from '#/components/Typography'
+
+type Props = {
+  control: Dialog.DialogOuterProps['control']
+  image: ComposerImage
+  onChange: (next: ComposerImage) => void
+}
+
+export const ImageAltTextDialog = (props: Props): React.ReactNode => {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <ImageAltTextInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+const ImageAltTextInner = ({
+  control,
+  image,
+  onChange,
+}: Props): React.ReactNode => {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const windim = useWindowDimensions()
+
+  const [altText, setAltText] = React.useState(image.alt)
+
+  const onPressSubmit = React.useCallback(() => {
+    control.close()
+    onChange({...image, alt: altText.trim()})
+  }, [control, image, altText, onChange])
+
+  const imageStyle = React.useMemo<ImageStyle>(() => {
+    const maxWidth = isWeb ? 450 : windim.width
+    const source = image.transformed ?? image.source
+
+    if (source.height > source.width) {
+      return {
+        resizeMode: 'contain',
+        width: '100%',
+        aspectRatio: 1,
+        borderRadius: 8,
+      }
+    }
+    return {
+      width: '100%',
+      height: (maxWidth / source.width) * source.height,
+      borderRadius: 8,
+    }
+  }, [image, windim])
+
+  return (
+    <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
+      <Dialog.Close />
+
+      <View>
+        <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_sm]}>
+          <Trans>Add alt text</Trans>
+        </Text>
+
+        <View style={[t.atoms.bg_contrast_50, a.rounded_sm, a.overflow_hidden]}>
+          <Image
+            style={imageStyle}
+            source={{
+              uri: (image.transformed ?? image.source).path,
+            }}
+            contentFit="contain"
+            accessible={true}
+            accessibilityIgnoresInvertColors
+            enableLiveTextInteraction
+          />
+        </View>
+      </View>
+
+      <View style={[a.mt_md, a.gap_md]}>
+        <View>
+          <TextField.LabelText>
+            <Trans>Descriptive alt text</Trans>
+          </TextField.LabelText>
+          <TextField.Root>
+            <Dialog.Input
+              label={_(msg`Alt text`)}
+              onChangeText={text => setAltText(text)}
+              value={altText}
+              multiline
+              numberOfLines={3}
+              autoFocus
+            />
+          </TextField.Root>
+        </View>
+        <Button
+          label={_(msg`Save`)}
+          disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
+          size="large"
+          color="primary"
+          variant="solid"
+          onPress={onPressSubmit}>
+          <ButtonText>
+            <Trans>Save</Trans>
+          </ButtonText>
+        </Button>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}