fix up other charprogress usage locations

eslint-suppressions.json

@@ -36,7 +36,7 @@
   },
   "src/components/Dialog/index.web.tsx": {
     "@typescript-eslint/no-explicit-any": {
-      "count": 4
+      "count": 2
     }
   },
   "src/components/DraggableList/index.web.tsx": {

src/components/Dialog/index.tsx

@@ -15,7 +15,6 @@ import {
   Pressable,
   ScrollView,
   type StyleProp,
-  TextInput,
   View,
   type ViewStyle,
 } from 'react-native'
@@ -42,7 +41,7 @@ import {
   type DialogInnerProps,
   type DialogOuterProps,
 } from '#/components/Dialog/types'
-import {createInput} from '#/components/forms/TextField'
+import {Input} from '#/components/forms/TextField'
 import {useOnKeyboard} from '#/components/hooks/useOnKeyboard'
 import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS} from '#/env'
 import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
@@ -51,13 +50,17 @@ import {
   type BottomSheetStateChangeEvent,
 } from '../../../modules/bottom-sheet/src/BottomSheet.types'
 import {type BottomSheetNativeComponent} from '../../../modules/bottom-sheet/src/BottomSheetNativeComponent'
-
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/shared'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 
-export const Input = createInput(TextInput)
+export {
+  /**
+   * @deprecated use `TextField.Input` from `#/components/forms/TextField` instead
+   */
+  Input,
+}
 
 export function Outer({
   children,

src/components/Dialog/index.web.tsx

@@ -32,6 +32,7 @@ import {
   type DialogInnerProps,
   type DialogOuterProps,
 } from '#/components/Dialog/types'
+import {Input} from '#/components/forms/TextField'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Portal} from '#/components/Portal'
 
@@ -39,13 +40,20 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/shared'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
-export {Input} from '#/components/forms/TextField'
+
+export {
+  /**
+   * @deprecated use `TextField.Input` from `#/components/forms/TextField` instead
+   */
+  Input,
+}
 
 // 100 minus 10vh of paddingVertical
 export const WEB_DIALOG_HEIGHT = '80vh'
 
-const stopPropagation = (e: any) => e.stopPropagation()
-const preventDefault = (e: any) => e.preventDefault()
+const stopPropagation = (e: {stopPropagation: () => void}) =>
+  e.stopPropagation()
+const preventDefault = (e: {preventDefault: () => void}) => e.preventDefault()
 
 export function Outer({
   children,

src/components/moderation/ReportDialog/index.tsx

@@ -24,6 +24,7 @@ import * as Admonition from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
+import * as TextField from '#/components/forms/TextField'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotate'
 import {
@@ -540,30 +541,34 @@ function Inner(props: ReportDialogProps) {
 
                 {state.detailsOpen && (
                   <View>
-                    <Dialog.Input
-                      testID="report:details"
-                      multiline
-                      value={state.details}
-                      onChangeText={details => {
-                        dispatch({type: 'setDetails', details})
-                      }}
-                      label={_(msg`Additional details (limit 300 characters)`)}
-                      style={{paddingRight: 60}}
-                      numberOfLines={4}
-                    />
+                    <TextField.Root>
+                      <TextField.Input
+                        testID="report:details"
+                        multiline
+                        value={state.details}
+                        onChangeText={details => {
+                          dispatch({type: 'setDetails', details})
+                        }}
+                        label={_(
+                          msg`Additional details (limit 300 characters)`,
+                        )}
+                        style={{paddingRight: 50}}
+                        numberOfLines={4}
+                      />
+                    </TextField.Root>
+
                     <View
                       style={[
                         a.absolute,
-                        a.flex_row,
-                        a.align_center,
                         a.pr_md,
                         a.pb_sm,
-                        {
-                          bottom: 0,
-                          right: 0,
-                        },
+                        a.bottom_0,
+                        a.right_0,
                       ]}>
-                      <CharProgress count={state.details?.length || 0} />
+                      <CharProgress
+                        size={30}
+                        count={state.details?.length || 0}
+                      />
                     </View>
                   </View>
                 )}

src/screens/Takendown.tsx

@@ -177,14 +177,10 @@ export function Takendown() {
                     <View
                       style={[
                         a.absolute,
-                        a.flex_row,
-                        a.align_center,
                         a.pr_md,
                         a.pb_sm,
-                        {
-                          bottom: 0,
-                          right: 0,
-                        },
+                        a.bottom_0,
+                        a.right_0,
                       ]}>
                       <CharProgress
                         count={reasonGraphemeLength}

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

@@ -9,6 +9,7 @@ import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
 import {atoms as a, useTheme} from '#/alf'
 import {ProgressCircle} from '#/components/Progress'
 import {Text} from '#/components/Typography'
+import {IS_WEB} from '#/env'
 
 export function CharProgress({
   count,
@@ -26,6 +27,27 @@ export function CharProgress({
   const t = useTheme()
   const textColor = count > max ? '#e60000' : t.atoms.text.color
   const circleColor = count > max ? '#e60000' : t.palette.primary_500
+
+  //
+  if (IS_WEB && count > max) {
+    return (
+      <View style={[style, {minHeight: size}]}>
+        <Text
+          style={[
+            {color: textColor, fontVariant: ['tabular-nums']},
+            a.text_center,
+            a.text_xs,
+            {maxWidth: '100%'},
+            textStyle,
+          ]}
+          maxFontSizeMultiplier={1}
+          numberOfLines={1}>
+          {max - count}
+        </Text>
+      </View>
+    )
+  }
+
   return (
     <View style={[style]}>
       {max - count < 100 && (