followers exact count in heading

src/view/screens/ProfileFollowers.tsx

@@ -1,21 +1,26 @@
 import React from 'react'
-import {msg} from '@lingui/macro'
+import {Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {isWeb} from '#/platform/detection'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
 export const ProfileFollowersScreen = ({route}: Props) => {
   const {name} = route.params
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {_} = useLingui()
+  const {i18n} = useLingui()
+
+  const {data: resolvedDid} = useResolveDidQuery(name)
+  const {data: profile} = useProfileQuery({
+    did: resolvedDid,
+  })
 
   useFocusEffect(
     React.useCallback(() => {
@@ -25,10 +30,27 @@ export const ProfileFollowersScreen = ({route}: Props) => {
 
   return (
     <Layout.Screen testID="profileFollowersScreen">
-      <CenteredView sideBorders={true}>
-        <ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {profile && (
+            <>
+              <Layout.Header.TitleText>
+                {sanitizeDisplayName(profile.displayName || profile.handle)}
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Trans>
+                  {i18n.number(profile.followersCount ?? 0)} followers
+                </Trans>
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Center>
         <ProfileFollowersComponent name={name} />
-      </CenteredView>
+      </Layout.Center>
     </Layout.Screen>
   )
 }