Add alt text limit to image dialog (#5611)

* Add alt text limit to image dialog

* GIF alt text too

* Fix

* tweaks, save alt on dialog dismiss

* simplify close behavior

* use state in gif alt

* state

---------

Co-authored-by: Hailey <me@haileyok.com>

1 files changed, 33 insertions, 0 deletions

diff --git a/src/view/com/composer/AltTextCounterWrapper.tsx b/src/view/com/composer/AltTextCounterWrapper.tsx
new file mode 100644
index 000000000..d69252f4b
--- /dev/null
+++ b/src/view/com/composer/AltTextCounterWrapper.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {MAX_ALT_TEXT} from '#/lib/constants'
+import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
+import {atoms as a, useTheme} from '#/alf'
+
+export function AltTextCounterWrapper({
+  altText,
+  children,
+}: {
+  altText?: string
+  children: React.ReactNode
+}) {
+  const t = useTheme()
+  return (
+    <View style={[a.flex_row]}>
+      <CharProgress
+        style={[
+          a.flex_col_reverse,
+          a.align_center,
+          a.mr_xs,
+          {minWidth: 50, gap: 1},
+        ]}
+        textStyle={[{marginRight: 0}, a.text_sm, t.atoms.text_contrast_medium]}
+        size={26}
+        count={altText?.length || 0}
+        max={MAX_ALT_TEXT}
+      />
+      {children}
+    </View>
+  )
+}