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>

src/view/com/composer/char-progress/CharProgress.tsx

@@ -1,48 +1,56 @@
 import React from 'react'
-import {View} from 'react-native'
+import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
 // @ts-ignore no type definition -prf
 import ProgressCircle from 'react-native-progress/Circle'
 // @ts-ignore no type definition -prf
 import ProgressPie from 'react-native-progress/Pie'
 
-import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
+import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {s} from '#/lib/styles'
 import {Text} from '../../util/text/Text'
 
-const DANGER_LENGTH = MAX_GRAPHEME_LENGTH
-
-export function CharProgress({count}: {count: number}) {
+export function CharProgress({
+  count,
+  max,
+  style,
+  textStyle,
+  size,
+}: {
+  count: number
+  max?: number
+  style?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+  size?: number
+}) {
+  const maxLength = max || MAX_GRAPHEME_LENGTH
   const pal = usePalette('default')
-  const textColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.text
-  const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
+  const textColor = count > maxLength ? '#e60000' : pal.colors.text
+  const circleColor = count > maxLength ? '#e60000' : pal.colors.link
   return (
-    <>
-      <Text style={[s.mr10, s.tabularNum, {color: textColor}]}>
-        {MAX_GRAPHEME_LENGTH - count}
+    <View style={style}>
+      <Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
+        {maxLength - count}
       </Text>
       <View>
-        {count > DANGER_LENGTH ? (
+        {count > maxLength ? (
           <ProgressPie
-            size={30}
+            size={size ?? 30}
             borderWidth={4}
             borderColor={circleColor}
             color={circleColor}
-            progress={Math.min(
-              (count - MAX_GRAPHEME_LENGTH) / MAX_GRAPHEME_LENGTH,
-              1,
-            )}
+            progress={Math.min((count - maxLength) / maxLength, 1)}
           />
         ) : (
           <ProgressCircle
-            size={30}
+            size={size ?? 30}
             borderWidth={1}
             borderColor={pal.colors.border}
             color={circleColor}
-            progress={count / MAX_GRAPHEME_LENGTH}
+            progress={count / maxLength}
           />
         )}
       </View>
-    </>
+    </View>
   )
 }