Add alt text support and rework image layout (#503)

* Add alt text support and rework image layout

* Add additional BottomSheet implementation to account for nested Composer modal

* Use mobile gallery layout on mobile web

* Missing key

* Fix lint

* Move altimage modal into the standard modal system

* Fix overflow wrapping of images

* Fixes to the alt-image modal

* Remove unnecessary switch

* Restore old imagelayoutgrid code

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/view/com/modals/AltImage.tsx

@@ -0,0 +1,106 @@
+import React, {useCallback, useState} from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {TextInput} from './util'
+import {gradients, s} from 'lib/styles'
+import {enforceLen} from 'lib/strings/helpers'
+import {MAX_ALT_TEXT} from 'lib/constants'
+import {useTheme} from 'lib/ThemeContext'
+import {Text} from '../util/text/Text'
+import {TouchableOpacity} from 'react-native-gesture-handler'
+import LinearGradient from 'react-native-linear-gradient'
+import {useStores} from 'state/index'
+import {isDesktopWeb} from 'platform/detection'
+
+export const snapPoints = [330]
+
+interface Props {
+  onAltTextSet: (altText?: string | undefined) => void
+}
+
+export function Component({onAltTextSet}: Props) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const theme = useTheme()
+  const [altText, setAltText] = useState('')
+
+  const onPressSave = useCallback(() => {
+    onAltTextSet(altText)
+    store.shell.closeModal()
+  }, [store, altText, onAltTextSet])
+
+  const onPressCancel = () => {
+    store.shell.closeModal()
+  }
+
+  return (
+    <View testID="altTextImageModal" style={[pal.view, styles.container]}>
+      <Text style={[styles.title, pal.text]}>Add alt text</Text>
+      <TextInput
+        testID="altTextImageInput"
+        style={[styles.textArea, pal.border, pal.text]}
+        keyboardAppearance={theme.colorScheme}
+        multiline
+        value={altText}
+        onChangeText={text => setAltText(enforceLen(text, MAX_ALT_TEXT))}
+      />
+      <View style={styles.buttonControls}>
+        <TouchableOpacity testID="altTextImageSaveBtn" onPress={onPressSave}>
+          <LinearGradient
+            colors={[gradients.blueLight.start, gradients.blueLight.end]}
+            start={{x: 0, y: 0}}
+            end={{x: 1, y: 1}}
+            style={[styles.button]}>
+            <Text type="button-lg" style={[s.white, s.bold]}>
+              Save
+            </Text>
+          </LinearGradient>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID="altTextImageCancelBtn"
+          onPress={onPressCancel}>
+          <View style={[styles.button]}>
+            <Text type="button-lg" style={[pal.textLight]}>
+              Cancel
+            </Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 18,
+    bottom: 0,
+    paddingVertical: 18,
+    paddingHorizontal: isDesktopWeb ? 0 : 12,
+    width: '100%',
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+  },
+  textArea: {
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingTop: 10,
+    paddingHorizontal: 12,
+    fontSize: 16,
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 10,
+  },
+  buttonControls: {
+    gap: 8,
+  },
+})

src/view/com/modals/Modal.tsx

@@ -1,5 +1,5 @@
 import React, {useRef, useEffect} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import BottomSheet from '@gorhom/bottom-sheet'
 import {useStores} from 'state/index'
@@ -11,6 +11,7 @@ import * as EditProfileModal from './EditProfile'
 import * as ServerInputModal from './ServerInput'
 import * as ReportPostModal from './ReportPost'
 import * as RepostModal from './Repost'
+import * as AltImageModal from './AltImage'
 import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as ChangeHandleModal from './ChangeHandle'
@@ -68,6 +69,9 @@ export const ModalsContainer = observer(function ModalsContainer() {
   } else if (activeModal?.name === 'repost') {
     snapPoints = RepostModal.snapPoints
     element = <RepostModal.Component {...activeModal} />
+  } else if (activeModal?.name === 'alt-text-image') {
+    snapPoints = AltImageModal.snapPoints
+    element = <AltImageModal.Component {...activeModal} />
   } else if (activeModal?.name === 'change-handle') {
     snapPoints = ChangeHandleModal.snapPoints
     element = <ChangeHandleModal.Component {...activeModal} />
@@ -81,7 +85,7 @@ export const ModalsContainer = observer(function ModalsContainer() {
     snapPoints = ContentFilteringSettingsModal.snapPoints
     element = <ContentFilteringSettingsModal.Component />
   } else {
-    return <View />
+    return null
   }
 
   return (

src/view/com/modals/Modal.web.tsx

@@ -14,6 +14,7 @@ import * as ReportAccountModal from './ReportAccount'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as RepostModal from './Repost'
 import * as CropImageModal from './crop-image/CropImage.web'
+import * as AltTextImageModal from './AltImage'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as WaitlistModal from './Waitlist'
 import * as InviteCodesModal from './InviteCodes'
@@ -78,6 +79,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <InviteCodesModal.Component />
   } else if (modal.name === 'content-filtering-settings') {
     element = <ContentFilteringSettingsModal.Component />
+  } else if (modal.name === 'alt-text-image') {
+    element = <AltTextImageModal.Component {...modal} />
   } else {
     return null
   }