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/state/models/media/gallery.ts

@@ -65,6 +65,10 @@ export class GalleryModel {
     })
   }
 
+  setAltText(image: ImageModel) {
+    image.setAltText()
+  }
+
   crop(image: ImageModel) {
     image.crop()
   }

src/state/models/media/image.ts

@@ -5,6 +5,7 @@ import {makeAutoObservable, runInAction} from 'mobx'
 import {openCropper} from 'lib/media/picker'
 import {POST_IMG_MAX} from 'lib/constants'
 import {scaleDownDimensions} from 'lib/media/util'
+import {openAltTextModal} from 'lib/media/alt-text'
 
 // TODO: EXIF embed
 // Cases to consider: ExternalEmbed
@@ -14,6 +15,7 @@ export class ImageModel implements RNImage {
   width: number
   height: number
   size: number
+  altText?: string = undefined
   cropped?: RNImage = undefined
   compressed?: RNImage = undefined
   scaledWidth: number = POST_IMG_MAX.width
@@ -41,6 +43,18 @@ export class ImageModel implements RNImage {
     this.scaledHeight = height
   }
 
+  async setAltText() {
+    try {
+      const altText = await openAltTextModal(this.rootStore)
+
+      runInAction(() => {
+        this.altText = altText
+      })
+    } catch (err) {
+      this.rootStore.log.error('Failed to set alt text', err)
+    }
+  }
+
   async crop() {
     try {
       const cropped = await openCropper(this.rootStore, {