Replace graphemer with unicode-segmenter (#9526)

* replace graphemer with unicode-segmenter

* use grapheme entrypoint

* force resolution of unicode-segmenter

src/screens/Takendown.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useState} from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
@@ -6,7 +6,7 @@ import {type ComAtprotoAdminDefs, ToolsOzoneReportDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'
-import Graphemer from 'graphemer'
+import {countGraphemes} from 'unicode-segmenter/grapheme'
 
 import {
   BLUESKY_MOD_SERVICE_HEADERS,
@@ -37,11 +37,10 @@ export function Takendown() {
   const agent = useAgent()
   const [isAppealling, setIsAppealling] = useState(false)
   const [reason, setReason] = useState('')
-  const graphemer = useMemo(() => new Graphemer(), [])
 
-  const reasonGraphemeLength = useMemo(() => {
-    return graphemer.countGraphemes(reason)
-  }, [graphemer, reason])
+  const reasonGraphemeLength = countGraphemes(reason)
+  const isOverMaxLength =
+    reasonGraphemeLength > MAX_REPORT_REASON_GRAPHEME_LENGTH
 
   const {
     mutate: submitAppeal,
@@ -72,14 +71,11 @@ export function Takendown() {
   const primaryBtn =
     isAppealling && !isSuccess ? (
       <Button
-        variant="solid"
         color="primary"
         size="large"
         label={_(msg`Submit appeal`)}
         onPress={() => submitAppeal(reason)}
-        disabled={
-          isPending || reasonGraphemeLength > MAX_REPORT_REASON_GRAPHEME_LENGTH
-        }>
+        disabled={isPending || isOverMaxLength}>
         <ButtonText>
           <Trans>Submit Appeal</Trans>
         </ButtonText>
@@ -87,7 +83,6 @@ export function Takendown() {
       </Button>
     ) : (
       <Button
-        variant="solid"
         size="large"
         color="secondary_inverted"
         label={_(msg`Sign out`)}
@@ -204,7 +199,7 @@ export function Takendown() {
                   <Text
                     style={[
                       a.text_md,
-                      a.leading_normal,
+                      a.leading_snug,
                       {color: t.palette.negative_500},
                       a.mt_lg,
                     ]}>
@@ -213,13 +208,13 @@ export function Takendown() {
                 )}
               </View>
             ) : (
-              <P style={[t.atoms.text_contrast_medium]}>
+              <P style={[t.atoms.text_contrast_medium, a.leading_snug]}>
                 <Trans>
                   Your account was found to be in violation of the{' '}
                   <SimpleInlineLinkText
                     label={_(msg`Bluesky Social Terms of Service`)}
                     to="https://bsky.social/about/support/tos"
-                    style={[a.text_md, a.leading_normal]}>
+                    style={[a.text_md, a.leading_snug]}>
                     Bluesky Social Terms of Service
                   </SimpleInlineLinkText>
                   . You have been sent an email outlining the specific violation