get rid of AltTextCounterWrapper

src/view/com/composer/AltTextCounterWrapper.tsx

@@ -1,32 +0,0 @@
-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>
-  )
-}

src/view/com/composer/GifAltText.tsx

@@ -3,6 +3,7 @@ import {TouchableOpacity, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Plural, Trans} from '@lingui/react/macro'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
 
 import {HITSLOP_10, MAX_ALT_TEXT} from '#/lib/constants'
 import {parseAltFromGIFDescription} from '#/lib/gif-alt-text'
@@ -11,7 +12,6 @@ import {
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
 import {useResolveGifQuery} from '#/state/queries/resolve-link'
-import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, useTheme} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonText} from '#/components/Button'
@@ -146,6 +146,8 @@ function AltTextInner({
   const t = useTheme()
   const {_, i18n} = useLingui()
 
+  const altTextLength = countGraphemes(altText)
+
   return (
     <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
       <View style={a.flex_col_reverse}>
@@ -153,7 +155,9 @@ function AltTextInner({
           <View style={[a.gap_sm]}>
             <View style={[a.relative]}>
               <TextField.LabelText>
-                <Trans>Descriptive alt text</Trans>
+                <Trans>
+                  Descriptive alt text ({altTextLength}/{MAX_ALT_TEXT})
+                </Trans>
               </TextField.LabelText>
               <TextField.Root>
                 <Dialog.Input
@@ -173,9 +177,9 @@ function AltTextInner({
               </TextField.Root>
             </View>
 
-            {altText.length > MAX_ALT_TEXT && (
+            {altTextLength > MAX_ALT_TEXT && (
               <View style={[a.pb_sm, a.flex_row, a.gap_xs]}>
-                <CircleInfo fill={t.palette.negative_500} />
+                <CircleInfo fill={t.palette.negative_500} size="sm" />
                 <Text
                   style={[
                     a.italic,
@@ -194,21 +198,17 @@ function AltTextInner({
             )}
           </View>
 
-          <AltTextCounterWrapper altText={altText}>
+          <Button
-            <Button
+            label={_(msg`Save`)}
-              label={_(msg`Save`)}
+            size="large"
-              size="large"
+            color="primary"
-              color="primary"
+            onPress={() => {
-              variant="solid"
+              control.close()
-              onPress={() => {
+            }}>
-                control.close()
+            <ButtonText>
-              }}
+              <Trans>Save</Trans>
-              style={[a.flex_grow]}>
+            </ButtonText>
-              <ButtonText>
+          </Button>
-                <Trans>Save</Trans>
-              </ButtonText>
-            </Button>
-          </AltTextCounterWrapper>
         </View>
         {/* below the text input to force tab order */}
         <View>

src/view/com/composer/photos/ImageAltTextDialog.tsx

@@ -4,11 +4,11 @@ import {Image} from 'expo-image'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Plural, Trans} from '@lingui/react/macro'
+import {countGraphemes} from 'unicode-segmenter'
 
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {enforceLen} from '#/lib/strings/helpers'
 import {type ComposerImage} from '#/state/gallery'
-import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -91,6 +91,8 @@ const ImageAltTextInner = ({
     }
   }, [image, screenWidth])
 
+  const altTextLength = countGraphemes(altText)
+
   return (
     <Dialog.ScrollableInner label={_(msg`Add alt text`)}>
       <Dialog.Close />
@@ -121,7 +123,9 @@ const ImageAltTextInner = ({
         <View style={[a.gap_sm]}>
           <View style={[a.relative, {width: '100%'}]}>
             <TextField.LabelText>
-              <Trans>Descriptive alt text</Trans>
+              <Trans>
+                Descriptive alt text ({altTextLength}/{MAX_ALT_TEXT})
+              </Trans>
             </TextField.LabelText>
             <TextField.Root>
               <Dialog.Input
@@ -137,9 +141,9 @@ const ImageAltTextInner = ({
             </TextField.Root>
           </View>
 
-          {altText.length > MAX_ALT_TEXT && (
+          {altTextLength > MAX_ALT_TEXT && (
             <View style={[a.pb_sm, a.flex_row, a.gap_xs]}>
-              <CircleInfo fill={t.palette.negative_500} />
+              <CircleInfo fill={t.palette.negative_500} size="sm" />
               <Text
                 style={[
                   a.italic,
@@ -158,22 +162,20 @@ const ImageAltTextInner = ({
           )}
         </View>
 
-        <AltTextCounterWrapper altText={altText}>
+        <Button
-          <Button
+          label={_(msg`Save`)}
-            label={_(msg`Save`)}
+          disabled={altText === image.alt}
-            disabled={altText === image.alt}
+          size="large"
-            size="large"
+          color="primary"
-            color="primary"
+          variant="solid"
-            variant="solid"
+          onPress={() => {
-            onPress={() => {
+            control.close()
-              control.close()
+          }}
-            }}
+          style={[a.flex_grow]}>
-            style={[a.flex_grow]}>
+          <ButtonText>
-            <ButtonText>
+            <Trans>Save</Trans>
-              <Trans>Save</Trans>
+          </ButtonText>
-            </ButtonText>
+        </Button>
-          </Button>
-        </AltTextCounterWrapper>
       </View>
     </Dialog.ScrollableInner>
   )