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>

3 files changed, 43 insertions, 8 deletions

diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts
index fbe6c92a0..97b1ac1d8 100644
--- a/src/state/models/media/gallery.ts
+++ b/src/state/models/media/gallery.ts
@@ -65,6 +65,10 @@ export class GalleryModel {
     })
   }
 
+  setAltText(image: ImageModel) {
+    image.setAltText()
+  }
+
   crop(image: ImageModel) {
     image.crop()
   }
diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts
index 584bf90cc..3585bb083 100644
--- a/src/state/models/media/image.ts
+++ b/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, {
diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 47cc0aa82..b717fe05c 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -3,7 +3,7 @@ import {RootStoreModel} from '../root-store'
 import {makeAutoObservable} from 'mobx'
 import {ProfileModel} from '../content/profile'
 import {isObj, hasProp} from 'lib/type-guards'
-import {Image} from 'lib/media/types'
+import {Image as RNImage} from 'react-native-image-crop-picker'
 
 export interface ConfirmModal {
   name: 'confirm'
@@ -38,7 +38,12 @@ export interface ReportAccountModal {
 export interface CropImageModal {
   name: 'crop-image'
   uri: string
-  onSelect: (img?: Image) => void
+  onSelect: (img?: RNImage) => void
+}
+
+export interface AltTextImageModal {
+  name: 'alt-text-image'
+  onAltTextSet: (altText?: string) => void
 }
 
 export interface DeleteAccountModal {
@@ -70,18 +75,30 @@ export interface ContentFilteringSettingsModal {
 }
 
 export type Modal =
-  | ConfirmModal
+  // Account
+  | ChangeHandleModal
+  | DeleteAccountModal
   | EditProfileModal
-  | ServerInputModal
-  | ReportPostModal
+
+  // Curation
+  | ContentFilteringSettingsModal
+
+  // Reporting
   | ReportAccountModal
+  | ReportPostModal
+
+  // Posting
+  | AltTextImageModal
   | CropImageModal
-  | DeleteAccountModal
+  | ServerInputModal
   | RepostModal
-  | ChangeHandleModal
+
+  // Bluesky access
   | WaitlistModal
   | InviteCodesModal
-  | ContentFilteringSettingsModal
+
+  // Generic
+  | ConfirmModal
 
 interface LightboxModel {}