Update chat requests header (#10446)

src/screens/Messages/components/InboxPreview.tsx

@@ -1,72 +0,0 @@
-import {View} from 'react-native'
-import {type ChatBskyActorDefs} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
-
-import {atoms as a, useTheme} from '#/alf'
-import {AvatarStack} from '#/components/AvatarStack'
-import {ButtonIcon, ButtonText} from '#/components/Button'
-import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
-import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
-import {Link} from '#/components/Link'
-
-export function InboxPreview({
-  profiles,
-}: {
-  profiles: ChatBskyActorDefs.ProfileViewBasic[]
-}) {
-  const {_} = useLingui()
-  const t = useTheme()
-  return (
-    <Link
-      label={_(msg`Chat request inbox`)}
-      style={[
-        a.flex_1,
-        a.px_xl,
-        a.py_sm,
-        a.flex_row,
-        a.align_center,
-        a.gap_md,
-        a.border_t,
-        {marginTop: a.border_t.borderTopWidth * -1},
-        a.border_b,
-        t.atoms.border_contrast_low,
-        {minHeight: 44},
-        a.rounded_0,
-      ]}
-      to="/messages/inbox"
-      color="secondary"
-      variant="solid">
-      <View style={[a.relative]}>
-        <ButtonIcon icon={EnvelopeIcon} size="lg" />
-        {profiles.length > 0 && (
-          <View
-            style={[
-              a.absolute,
-              a.rounded_full,
-              a.z_20,
-              {
-                top: -4,
-                right: -5,
-                width: 10,
-                height: 10,
-                backgroundColor: t.palette.primary_500,
-              },
-            ]}
-          />
-        )}
-      </View>
-      <ButtonText
-        style={[a.flex_1, a.font_semi_bold, a.text_left]}
-        numberOfLines={1}>
-        <Trans>Chat requests</Trans>
-      </ButtonText>
-      <AvatarStack
-        profiles={profiles}
-        backgroundColor={t.atoms.bg_contrast_25.backgroundColor}
-      />
-      <ButtonIcon icon={ArrowRightIcon} size="lg" />
-    </Link>
-  )
-}

src/screens/Messages/components/InboxRequests.tsx

@@ -0,0 +1,32 @@
+import {plural} from '@lingui/core/macro'
+import {useLingui} from '@lingui/react/macro'
+
+import {UNREAD_LIMIT} from '#/state/queries/messages/list-conversations'
+import {atoms as a} from '#/alf'
+import {InlineLinkText} from '#/components/Link'
+
+export function InboxRequests({count, more}: {count: number; more: boolean}) {
+  const {t: l} = useLingui()
+
+  if (count < 1) return null
+
+  const label =
+    count >= UNREAD_LIMIT && more
+      ? l({
+          message: `${count}+ requests`,
+          comment: 'Displayed when the number of requests is greater than 20',
+        })
+      : plural(count, {
+          one: '# request',
+          other: '# requests',
+        })
+
+  return (
+    <InlineLinkText
+      label={label}
+      to="/messages/inbox"
+      style={[a.text_md, a.font_medium]}>
+      {label}
+    </InlineLinkText>
+  )
+}