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, 26 insertions, 5 deletions

diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 1b12f29c5..3877b3ef7 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -10,15 +10,15 @@ import {
 import {AtUri} from '@atproto/api'
 import {RootStoreModel} from 'state/models/root-store'
 import {isNetworkError} from 'lib/strings/errors'
-import {Image} from 'lib/media/types'
 import {LinkMeta} from '../link-meta/link-meta'
 import {isWeb} from 'platform/detection'
+import {ImageModel} from 'state/models/media/image'
 
 export interface ExternalEmbedDraft {
   uri: string
   isLoading: boolean
   meta?: LinkMeta
-  localThumb?: Image
+  localThumb?: ImageModel
 }
 
 export async function resolveName(store: RootStoreModel, didOrHandle: string) {
@@ -61,7 +61,7 @@ interface PostOpts {
     cid: string
   }
   extLink?: ExternalEmbedDraft
-  images?: string[]
+  images?: ImageModel[]
   knownHandles?: Set<string>
   onStateChange?: (state: string) => void
 }
@@ -109,10 +109,11 @@ export async function post(store: RootStoreModel, opts: PostOpts) {
     const images: AppBskyEmbedImages.Image[] = []
     for (const image of opts.images) {
       opts.onStateChange?.(`Uploading image #${images.length + 1}...`)
-      const res = await uploadBlob(store, image, 'image/jpeg')
+      const path = image.compressed?.path ?? image.path
+      const res = await uploadBlob(store, path, 'image/jpeg')
       images.push({
         image: res.data.blob,
-        alt: '', // TODO supply alt text
+        alt: image.altText ?? '',
       })
     }
 
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index d49d8c75c..12bdc5543 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -4,6 +4,10 @@ export const FEEDBACK_FORM_URL =
 export const MAX_DISPLAY_NAME = 64
 export const MAX_DESCRIPTION = 256
 
+// Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html
+// but adding buffer room to account for languages like German
+export const MAX_ALT_TEXT = 120
+
 export const PROD_TEAM_HANDLES = [
   'jay.bsky.social',
   'pfrazee.com',
diff --git a/src/lib/media/alt-text.ts b/src/lib/media/alt-text.ts
new file mode 100644
index 000000000..9f9f907bf
--- /dev/null
+++ b/src/lib/media/alt-text.ts
@@ -0,0 +1,16 @@
+import {RootStoreModel} from 'state/index'
+
+export async function openAltTextModal(store: RootStoreModel): Promise<string> {
+  return new Promise((resolve, reject) => {
+    store.shell.openModal({
+      name: 'alt-text-image',
+      onAltTextSet: (altText?: string) => {
+        if (altText) {
+          resolve(altText)
+        } else {
+          reject(new Error('Canceled'))
+        }
+      },
+    })
+  })
+}