From e44de946ac33c658ad1260b31ef55dd3db959869 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 15:51:53 -0500
Subject: [PATCH 1/7] Add alt text limit to image dialog

---
 src/lib/constants.ts                          |  2 +-
 .../composer/char-progress/CharProgress.tsx   | 26 +++----
 .../composer/photos/ImageAltTextDialog.tsx    | 72 ++++++++++++++-----
 3 files changed, 67 insertions(+), 33 deletions(-)

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 9bf1fb35ea..0edc9f2ad2 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -50,7 +50,7 @@ export const MAX_DM_GRAPHEME_LENGTH = 1000
 
 // Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html
 // but increasing limit per user feedback
-export const MAX_ALT_TEXT = 1000
+export const MAX_ALT_TEXT = 2000
 
 export function IS_TEST_USER(handle?: string) {
   return handle && handle?.endsWith('.test')
diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx
index a205fe0963..fdfe354e88 100644
--- a/src/view/com/composer/char-progress/CharProgress.tsx
+++ b/src/view/com/composer/char-progress/CharProgress.tsx
@@ -5,33 +5,29 @@ 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}: {count: number; max?: 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}
+        {maxLength - count}
       </Text>
       <View>
-        {count > DANGER_LENGTH ? (
+        {count > maxLength ? (
           <ProgressPie
             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
@@ -39,7 +35,7 @@ export function CharProgress({count}: {count: number}) {
             borderWidth={1}
             borderColor={pal.colors.border}
             color={circleColor}
-            progress={count / MAX_GRAPHEME_LENGTH}
+            progress={count / maxLength}
           />
         )}
       </View>
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 16ce4351af..0f9c463b5d 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -5,12 +5,15 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {MAX_ALT_TEXT} from '#/lib/constants'
+import {enforceLen} from '#/lib/strings/helpers'
 import {isAndroid, isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
+import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
@@ -35,7 +38,7 @@ const ImageAltTextInner = ({
   image,
   onChange,
 }: Props): React.ReactNode => {
-  const {_} = useLingui()
+  const {_, i18n} = useLingui()
   const t = useTheme()
 
   const windim = useWindowDimensions()
@@ -44,7 +47,7 @@ const ImageAltTextInner = ({
 
   const onPressSubmit = React.useCallback(() => {
     control.close()
-    onChange({...image, alt: altText.trim()})
+    onChange({...image, alt: enforceLen(altText.trim(), MAX_ALT_TEXT, true)})
   }, [control, image, altText, onChange])
 
   const imageStyle = React.useMemo<ImageStyle>(() => {
@@ -90,24 +93,59 @@ const ImageAltTextInner = ({
       </View>
 
       <View style={[a.mt_md, a.gap_md]}>
-        <View>
-          <TextField.LabelText>
-            <Trans>Descriptive alt text</Trans>
-          </TextField.LabelText>
-          <TextField.Root>
-            <Dialog.Input
-              label={_(msg`Alt text`)}
-              onChangeText={text => setAltText(text)}
-              value={altText}
-              multiline
-              numberOfLines={3}
-              autoFocus
-            />
-          </TextField.Root>
+        <View style={[a.gap_sm]}>
+          <View style={[a.relative]}>
+            <TextField.LabelText>
+              <Trans>Descriptive alt text</Trans>
+            </TextField.LabelText>
+            <TextField.Root>
+              <Dialog.Input
+                label={_(msg`Alt text`)}
+                onChangeText={text => setAltText(text)}
+                value={altText}
+                multiline
+                numberOfLines={3}
+                autoFocus
+              />
+            </TextField.Root>
+
+            <View
+              style={[
+                a.absolute,
+                a.flex_row,
+                a.align_center,
+                a.pr_md,
+                a.pb_sm,
+                {
+                  bottom: 0,
+                  right: 0,
+                },
+              ]}>
+              <CharProgress count={altText?.length || 0} max={MAX_ALT_TEXT} />
+            </View>
+          </View>
+
+          {altText.length > MAX_ALT_TEXT && (
+            <View style={[a.pb_sm, a.flex_row, a.gap_xs]}>
+              <CircleInfo fill={t.palette.negative_500} />
+              <Text
+                style={[
+                  a.italic,
+                  a.leading_snug,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>
+                  Alt text will be truncated. Limit: {i18n.number(MAX_ALT_TEXT)}{' '}
+                  characters.
+                </Trans>
+              </Text>
+            </View>
+          )}
         </View>
+
         <Button
           label={_(msg`Save`)}
-          disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
+          disabled={altText === image.alt}
           size="large"
           color="primary"
           variant="solid"

From 41f75f5e9107fca3000972c0f64bda8a3ed3a820 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 16:02:46 -0500
Subject: [PATCH 2/7] GIF alt text too

---
 src/view/com/composer/GifAltText.tsx | 82 ++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 3479fb973c..e5cd99cb3b 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -14,11 +14,13 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
+import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
@@ -124,7 +126,8 @@ function AltTextInner({
   params: EmbedPlayerParams
   initialValue: string
 }) {
-  const {_} = useLingui()
+  const t = useTheme()
+  const {_, i18n} = useLingui()
   const [altText, setAltText] = useState(initalValue)
   const control = Dialog.useDialogContext()
 
@@ -136,29 +139,64 @@ function AltTextInner({
     <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
       <View style={a.flex_col_reverse}>
         <View style={[a.mt_md, a.gap_md]}>
-          <View>
-            <TextField.LabelText>
-              <Trans>Descriptive alt text</Trans>
-            </TextField.LabelText>
-            <TextField.Root>
-              <Dialog.Input
-                label={_(msg`Alt text`)}
-                placeholder={link.title}
-                onChangeText={text =>
-                  setAltText(enforceLen(text, MAX_ALT_TEXT))
-                }
-                value={altText}
-                multiline
-                numberOfLines={3}
-                autoFocus
-                onKeyPress={({nativeEvent}) => {
-                  if (nativeEvent.key === 'Escape') {
-                    control.close()
+          <View style={[a.gap_sm]}>
+            <View style={[a.relative]}>
+              <TextField.LabelText>
+                <Trans>Descriptive alt text</Trans>
+              </TextField.LabelText>
+              <TextField.Root>
+                <Dialog.Input
+                  label={_(msg`Alt text`)}
+                  placeholder={link.title}
+                  onChangeText={text =>
+                    setAltText(enforceLen(text, MAX_ALT_TEXT))
                   }
-                }}
-              />
-            </TextField.Root>
+                  value={altText}
+                  multiline
+                  numberOfLines={3}
+                  autoFocus
+                  onKeyPress={({nativeEvent}) => {
+                    if (nativeEvent.key === 'Escape') {
+                      control.close()
+                    }
+                  }}
+                />
+              </TextField.Root>
+
+              <View
+                style={[
+                  a.absolute,
+                  a.flex_row,
+                  a.align_center,
+                  a.pr_md,
+                  a.pb_sm,
+                  {
+                    bottom: 0,
+                    right: 0,
+                  },
+                ]}>
+                <CharProgress count={altText?.length || 0} max={MAX_ALT_TEXT} />
+              </View>
+            </View>
+
+            {altText.length > MAX_ALT_TEXT && (
+              <View style={[a.pb_sm, a.flex_row, a.gap_xs]}>
+                <CircleInfo fill={t.palette.negative_500} />
+                <Text
+                  style={[
+                    a.italic,
+                    a.leading_snug,
+                    t.atoms.text_contrast_medium,
+                  ]}>
+                  <Trans>
+                    Alt text will be truncated. Limit:{' '}
+                    {i18n.number(MAX_ALT_TEXT)} characters.
+                  </Trans>
+                </Text>
+              </View>
+            )}
           </View>
+
           <Button
             label={_(msg`Save`)}
             size="large"

From 97f9fbdd18005f16691102b1b03eb7b933f4524f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 16:06:07 -0500
Subject: [PATCH 3/7] Fix

---
 src/view/com/composer/GifAltText.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index e5cd99cb3b..258f6bea8b 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -132,7 +132,7 @@ function AltTextInner({
   const control = Dialog.useDialogContext()
 
   const onPressSubmit = useCallback(() => {
-    onSubmit(altText)
+    onSubmit(enforceLen(altText, MAX_ALT_TEXT, true))
   }, [onSubmit, altText])
 
   return (
@@ -148,9 +148,7 @@ function AltTextInner({
                 <Dialog.Input
                   label={_(msg`Alt text`)}
                   placeholder={link.title}
-                  onChangeText={text =>
-                    setAltText(enforceLen(text, MAX_ALT_TEXT))
-                  }
+                  onChangeText={text => setAltText(text)}
                   value={altText}
                   multiline
                   numberOfLines={3}

From 39c5435237b5b069e95588b065cc475c2f27efad Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 18:56:32 -0700
Subject: [PATCH 4/7] tweaks, save alt on dialog dismiss

---
 .../com/composer/AltTextCounterWrapper.tsx    | 33 +++++++
 src/view/com/composer/GifAltText.tsx          | 59 +++++------
 .../composer/char-progress/CharProgress.tsx   | 26 +++--
 .../composer/photos/ImageAltTextDialog.tsx    | 98 +++++++++++--------
 4 files changed, 139 insertions(+), 77 deletions(-)
 create mode 100644 src/view/com/composer/AltTextCounterWrapper.tsx

diff --git a/src/view/com/composer/AltTextCounterWrapper.tsx b/src/view/com/composer/AltTextCounterWrapper.tsx
new file mode 100644
index 0000000000..d69252f4b1
--- /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>
+  )
+}
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 258f6bea8b..2a12624054 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -14,7 +14,7 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
-import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
+import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -63,9 +63,11 @@ export function GifAltText({
     [onSubmit, control],
   )
 
+  const parsedAlt = parseAltFromGIFDescription(link.description)
+  const altTextRef = React.useRef<string>('')
+
   if (!gif || !params) return null
 
-  const parsedAlt = parseAltFromGIFDescription(link.description)
   return (
     <>
       <TouchableOpacity
@@ -101,9 +103,15 @@ export function GifAltText({
 
       <AltTextReminder />
 
-      <Dialog.Outer control={control} Portal={Portal}>
+      <Dialog.Outer
+        control={control}
+        onClose={() => {
+          onSubmit(altTextRef.current)
+        }}
+        Portal={Portal}>
         <Dialog.Handle />
         <AltTextInner
+          altTextRef={altTextRef}
           onSubmit={onPressSubmit}
           link={link}
           params={params}
@@ -116,11 +124,13 @@ export function GifAltText({
 }
 
 function AltTextInner({
+  altTextRef,
   onSubmit,
   link,
   params,
   initialValue: initalValue,
 }: {
+  altTextRef: React.MutableRefObject<string>
   onSubmit: (text: string) => void
   link: AppBskyEmbedExternal.ViewExternal
   params: EmbedPlayerParams
@@ -148,7 +158,10 @@ function AltTextInner({
                 <Dialog.Input
                   label={_(msg`Alt text`)}
                   placeholder={link.title}
-                  onChangeText={text => setAltText(text)}
+                  onChangeText={text => {
+                    altTextRef.current = text
+                    setAltText(text)
+                  }}
                   value={altText}
                   multiline
                   numberOfLines={3}
@@ -160,21 +173,6 @@ function AltTextInner({
                   }}
                 />
               </TextField.Root>
-
-              <View
-                style={[
-                  a.absolute,
-                  a.flex_row,
-                  a.align_center,
-                  a.pr_md,
-                  a.pb_sm,
-                  {
-                    bottom: 0,
-                    right: 0,
-                  },
-                ]}>
-                <CharProgress count={altText?.length || 0} max={MAX_ALT_TEXT} />
-              </View>
             </View>
 
             {altText.length > MAX_ALT_TEXT && (
@@ -195,16 +193,19 @@ function AltTextInner({
             )}
           </View>
 
-          <Button
-            label={_(msg`Save`)}
-            size="large"
-            color="primary"
-            variant="solid"
-            onPress={onPressSubmit}>
-            <ButtonText>
-              <Trans>Save</Trans>
-            </ButtonText>
-          </Button>
+          <AltTextCounterWrapper altText={altText}>
+            <Button
+              label={_(msg`Save`)}
+              size="large"
+              color="primary"
+              variant="solid"
+              onPress={onPressSubmit}
+              style={[a.flex_grow]}>
+              <ButtonText>
+                <Trans>Save</Trans>
+              </ButtonText>
+            </Button>
+          </AltTextCounterWrapper>
         </View>
         {/* below the text input to force tab order */}
         <View>
diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx
index fdfe354e88..c61f753f26 100644
--- a/src/view/com/composer/char-progress/CharProgress.tsx
+++ b/src/view/com/composer/char-progress/CharProgress.tsx
@@ -1,5 +1,5 @@
 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
@@ -10,20 +10,32 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {s} from '#/lib/styles'
 import {Text} from '../../util/text/Text'
 
-export function CharProgress({count, max}: {count: number; max?: 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 > maxLength ? '#e60000' : pal.colors.text
   const circleColor = count > maxLength ? '#e60000' : pal.colors.link
   return (
-    <>
-      <Text style={[s.mr10, s.tabularNum, {color: textColor}]}>
+    <View style={style}>
+      <Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
         {maxLength - count}
       </Text>
       <View>
         {count > maxLength ? (
           <ProgressPie
-            size={30}
+            size={size ?? 30}
             borderWidth={4}
             borderColor={circleColor}
             color={circleColor}
@@ -31,7 +43,7 @@ export function CharProgress({count, max}: {count: number; max?: number}) {
           />
         ) : (
           <ProgressCircle
-            size={30}
+            size={size ?? 30}
             borderWidth={1}
             borderColor={pal.colors.border}
             color={circleColor}
@@ -39,6 +51,6 @@ export function CharProgress({count, max}: {count: number; max?: number}) {
           />
         )}
       </View>
-    </>
+    </View>
   )
 }
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 0f9c463b5d..cec71ce02d 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -8,7 +8,7 @@ import {MAX_ALT_TEXT} from '#/lib/constants'
 import {enforceLen} from '#/lib/strings/helpers'
 import {isAndroid, isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
-import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
+import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -24,31 +24,56 @@ type Props = {
   Portal: PortalComponent
 }
 
-export const ImageAltTextDialog = (props: Props): React.ReactNode => {
+export const ImageAltTextDialog = ({
+  control,
+  image,
+  onChange,
+  Portal,
+}: Props): React.ReactNode => {
+  const altTextRef = React.useRef<string>(image.alt)
+
+  const onSubmit = (text: string) => {
+    control.close()
+    onChange({
+      ...image,
+      alt: enforceLen(text, MAX_ALT_TEXT, true),
+    })
+  }
+
   return (
-    <Dialog.Outer control={props.control} Portal={props.Portal}>
+    <Dialog.Outer
+      control={control}
+      onClose={() => {
+        onSubmit(altTextRef.current)
+      }}
+      Portal={Portal}>
       <Dialog.Handle />
-      <ImageAltTextInner {...props} />
+      <ImageAltTextInner
+        image={image}
+        altTextRef={altTextRef}
+        onSubmit={onSubmit}
+      />
     </Dialog.Outer>
   )
 }
 
 const ImageAltTextInner = ({
-  control,
   image,
-  onChange,
-}: Props): React.ReactNode => {
+  altTextRef,
+  onSubmit,
+}: {
+  image: Props['image']
+  altTextRef: React.MutableRefObject<string>
+  onSubmit: (text: string) => void
+}): React.ReactNode => {
   const {_, i18n} = useLingui()
   const t = useTheme()
-
   const windim = useWindowDimensions()
-
   const [altText, setAltText] = React.useState(image.alt)
 
-  const onPressSubmit = React.useCallback(() => {
-    control.close()
-    onChange({...image, alt: enforceLen(altText.trim(), MAX_ALT_TEXT, true)})
-  }, [control, image, altText, onChange])
+  const onPressSubmit = () => {
+    onSubmit(altText)
+  }
 
   const imageStyle = React.useMemo<ImageStyle>(() => {
     const maxWidth = isWeb ? 450 : windim.width
@@ -94,35 +119,23 @@ const ImageAltTextInner = ({
 
       <View style={[a.mt_md, a.gap_md]}>
         <View style={[a.gap_sm]}>
-          <View style={[a.relative]}>
+          <View style={[a.relative, {width: '100%'}]}>
             <TextField.LabelText>
               <Trans>Descriptive alt text</Trans>
             </TextField.LabelText>
             <TextField.Root>
               <Dialog.Input
                 label={_(msg`Alt text`)}
-                onChangeText={text => setAltText(text)}
+                onChangeText={text => {
+                  altTextRef.current = text
+                  setAltText(text)
+                }}
                 value={altText}
                 multiline
                 numberOfLines={3}
                 autoFocus
               />
             </TextField.Root>
-
-            <View
-              style={[
-                a.absolute,
-                a.flex_row,
-                a.align_center,
-                a.pr_md,
-                a.pb_sm,
-                {
-                  bottom: 0,
-                  right: 0,
-                },
-              ]}>
-              <CharProgress count={altText?.length || 0} max={MAX_ALT_TEXT} />
-            </View>
           </View>
 
           {altText.length > MAX_ALT_TEXT && (
@@ -143,17 +156,20 @@ const ImageAltTextInner = ({
           )}
         </View>
 
-        <Button
-          label={_(msg`Save`)}
-          disabled={altText === image.alt}
-          size="large"
-          color="primary"
-          variant="solid"
-          onPress={onPressSubmit}>
-          <ButtonText>
-            <Trans>Save</Trans>
-          </ButtonText>
-        </Button>
+        <AltTextCounterWrapper altText={altText}>
+          <Button
+            label={_(msg`Save`)}
+            disabled={altText === image.alt}
+            size="large"
+            color="primary"
+            variant="solid"
+            onPress={onPressSubmit}
+            style={[a.flex_grow]}>
+            <ButtonText>
+              <Trans>Save</Trans>
+            </ButtonText>
+          </Button>
+        </AltTextCounterWrapper>
       </View>
       {/* Maybe fix this later -h */}
       {isAndroid ? <View style={{height: 300}} /> : null}

From 95c19c8ef403634a89ae46e492791ed9e0055fbc Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 19:01:05 -0700
Subject: [PATCH 5/7] simplify close behavior

---
 src/view/com/composer/GifAltText.tsx          | 33 +++++--------------
 .../composer/photos/ImageAltTextDialog.tsx    | 32 ++++++++----------
 2 files changed, 22 insertions(+), 43 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 2a12624054..052b3569f2 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import React, {useState} from 'react'
 import {TouchableOpacity, View} from 'react-native'
 import {AppBskyEmbedExternal} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -11,13 +11,13 @@ import {
   EmbedPlayerParams,
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
-import {enforceLen} from '#/lib/strings/helpers'
 import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
 import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {DialogControlProps} from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
@@ -54,15 +54,6 @@ export function GifAltText({
     }
   }, [linkProp])
 
-  const onPressSubmit = useCallback(
-    (alt: string) => {
-      control.close(() => {
-        onSubmit(alt)
-      })
-    },
-    [onSubmit, control],
-  )
-
   const parsedAlt = parseAltFromGIFDescription(link.description)
   const altTextRef = React.useRef<string>('')
 
@@ -112,10 +103,9 @@ export function GifAltText({
         <Dialog.Handle />
         <AltTextInner
           altTextRef={altTextRef}
-          onSubmit={onPressSubmit}
+          control={control}
           link={link}
           params={params}
-          initialValue={parsedAlt.isPreferred ? parsedAlt.alt : ''}
           key={link.uri}
         />
       </Dialog.Outer>
@@ -125,25 +115,18 @@ export function GifAltText({
 
 function AltTextInner({
   altTextRef,
-  onSubmit,
+  control,
   link,
   params,
-  initialValue: initalValue,
 }: {
   altTextRef: React.MutableRefObject<string>
-  onSubmit: (text: string) => void
+  control: DialogControlProps
   link: AppBskyEmbedExternal.ViewExternal
   params: EmbedPlayerParams
-  initialValue: string
 }) {
   const t = useTheme()
   const {_, i18n} = useLingui()
-  const [altText, setAltText] = useState(initalValue)
-  const control = Dialog.useDialogContext()
-
-  const onPressSubmit = useCallback(() => {
-    onSubmit(enforceLen(altText, MAX_ALT_TEXT, true))
-  }, [onSubmit, altText])
+  const [altText, setAltText] = useState(altTextRef.current)
 
   return (
     <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
@@ -199,7 +182,9 @@ function AltTextInner({
               size="large"
               color="primary"
               variant="solid"
-              onPress={onPressSubmit}
+              onPress={() => {
+                control.close()
+              }}
               style={[a.flex_grow]}>
               <ButtonText>
                 <Trans>Save</Trans>
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index cec71ce02d..d33db4d22c 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -12,6 +12,7 @@ import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {DialogControlProps} from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {PortalComponent} from '#/components/Portal'
@@ -32,49 +33,40 @@ export const ImageAltTextDialog = ({
 }: Props): React.ReactNode => {
   const altTextRef = React.useRef<string>(image.alt)
 
-  const onSubmit = (text: string) => {
-    control.close()
-    onChange({
-      ...image,
-      alt: enforceLen(text, MAX_ALT_TEXT, true),
-    })
-  }
-
   return (
     <Dialog.Outer
       control={control}
       onClose={() => {
-        onSubmit(altTextRef.current)
+        onChange({
+          ...image,
+          alt: enforceLen(altTextRef.current, MAX_ALT_TEXT, true),
+        })
       }}
       Portal={Portal}>
       <Dialog.Handle />
       <ImageAltTextInner
+        control={control}
         image={image}
         altTextRef={altTextRef}
-        onSubmit={onSubmit}
       />
     </Dialog.Outer>
   )
 }
 
 const ImageAltTextInner = ({
-  image,
   altTextRef,
-  onSubmit,
+  control,
+  image,
 }: {
-  image: Props['image']
   altTextRef: React.MutableRefObject<string>
-  onSubmit: (text: string) => void
+  control: DialogControlProps
+  image: Props['image']
 }): React.ReactNode => {
   const {_, i18n} = useLingui()
   const t = useTheme()
   const windim = useWindowDimensions()
   const [altText, setAltText] = React.useState(image.alt)
 
-  const onPressSubmit = () => {
-    onSubmit(altText)
-  }
-
   const imageStyle = React.useMemo<ImageStyle>(() => {
     const maxWidth = isWeb ? 450 : windim.width
     const source = image.transformed ?? image.source
@@ -163,7 +155,9 @@ const ImageAltTextInner = ({
             size="large"
             color="primary"
             variant="solid"
-            onPress={onPressSubmit}
+            onPress={() => {
+              control.close()
+            }}
             style={[a.flex_grow]}>
             <ButtonText>
               <Trans>Save</Trans>

From 13d195afc3c833dc6ee3fd6e6db66ff12974231b Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 22:08:44 -0700
Subject: [PATCH 6/7] use state in gif alt

---
 src/view/com/composer/GifAltText.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 052b3569f2..a60956794a 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -55,7 +55,7 @@ export function GifAltText({
   }, [linkProp])
 
   const parsedAlt = parseAltFromGIFDescription(link.description)
-  const altTextRef = React.useRef<string>('')
+  const [altText, setAltText] = useState(parsedAlt.alt)
 
   if (!gif || !params) return null
 
@@ -97,12 +97,13 @@ export function GifAltText({
       <Dialog.Outer
         control={control}
         onClose={() => {
-          onSubmit(altTextRef.current)
+          onSubmit(altText)
         }}
         Portal={Portal}>
         <Dialog.Handle />
         <AltTextInner
-          altTextRef={altTextRef}
+          altText={altText}
+          setAltText={setAltText}
           control={control}
           link={link}
           params={params}
@@ -114,19 +115,20 @@ export function GifAltText({
 }
 
 function AltTextInner({
-  altTextRef,
+  altText,
+  setAltText,
   control,
   link,
   params,
 }: {
-  altTextRef: React.MutableRefObject<string>
+  altText: string
+  setAltText: (text: string) => void
   control: DialogControlProps
   link: AppBskyEmbedExternal.ViewExternal
   params: EmbedPlayerParams
 }) {
   const t = useTheme()
   const {_, i18n} = useLingui()
-  const [altText, setAltText] = useState(altTextRef.current)
 
   return (
     <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
@@ -142,7 +144,6 @@ function AltTextInner({
                   label={_(msg`Alt text`)}
                   placeholder={link.title}
                   onChangeText={text => {
-                    altTextRef.current = text
                     setAltText(text)
                   }}
                   value={altText}

From 8285f08195203632d465c4f292daab631c52de79 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 22:23:38 -0700
Subject: [PATCH 7/7] state

---
 src/view/com/composer/GifAltText.tsx            |  2 +-
 .../com/composer/photos/ImageAltTextDialog.tsx  | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index a60956794a..90d20d94f7 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -146,7 +146,7 @@ function AltTextInner({
                   onChangeText={text => {
                     setAltText(text)
                   }}
-                  value={altText}
+                  defaultValue={altText}
                   multiline
                   numberOfLines={3}
                   autoFocus
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index d33db4d22c..e9e8d42224 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -31,7 +31,7 @@ export const ImageAltTextDialog = ({
   onChange,
   Portal,
 }: Props): React.ReactNode => {
-  const altTextRef = React.useRef<string>(image.alt)
+  const [altText, setAltText] = React.useState(image.alt)
 
   return (
     <Dialog.Outer
@@ -39,7 +39,7 @@ export const ImageAltTextDialog = ({
       onClose={() => {
         onChange({
           ...image,
-          alt: enforceLen(altTextRef.current, MAX_ALT_TEXT, true),
+          alt: enforceLen(altText, MAX_ALT_TEXT, true),
         })
       }}
       Portal={Portal}>
@@ -47,25 +47,27 @@ export const ImageAltTextDialog = ({
       <ImageAltTextInner
         control={control}
         image={image}
-        altTextRef={altTextRef}
+        altText={altText}
+        setAltText={setAltText}
       />
     </Dialog.Outer>
   )
 }
 
 const ImageAltTextInner = ({
-  altTextRef,
+  altText,
+  setAltText,
   control,
   image,
 }: {
-  altTextRef: React.MutableRefObject<string>
+  altText: string
+  setAltText: (text: string) => void
   control: DialogControlProps
   image: Props['image']
 }): React.ReactNode => {
   const {_, i18n} = useLingui()
   const t = useTheme()
   const windim = useWindowDimensions()
-  const [altText, setAltText] = React.useState(image.alt)
 
   const imageStyle = React.useMemo<ImageStyle>(() => {
     const maxWidth = isWeb ? 450 : windim.width
@@ -119,10 +121,9 @@ const ImageAltTextInner = ({
               <Dialog.Input
                 label={_(msg`Alt text`)}
                 onChangeText={text => {
-                  altTextRef.current = text
                   setAltText(text)
                 }}
-                value={altText}
+                defaultValue={altText}
                 multiline
                 numberOfLines={3}
                 autoFocus