Followers/following exact count (#7057)

* followers exact count in heading

* exact count for following

* move files to new dir

* use <Plural>

5 files changed, 114 insertions, 70 deletions

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 0b162d363..cf0021526 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -57,8 +57,6 @@ import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
 import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
-import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
-import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
 import {ProfileListScreen} from '#/view/screens/ProfileList'
 import {SavedFeeds} from '#/view/screens/SavedFeeds'
 import {SearchScreen} from '#/view/screens/Search'
@@ -77,6 +75,8 @@ import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
 import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
 import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
 import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
+import {ProfileFollowersScreen} from '#/screens/Profile/ProfileFollowers'
+import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
 import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
diff --git a/src/screens/Profile/ProfileFollowers.tsx b/src/screens/Profile/ProfileFollowers.tsx
new file mode 100644
index 000000000..25c2adb18
--- /dev/null
+++ b/src/screens/Profile/ProfileFollowers.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import {Plural} from '@lingui/macro'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+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 * as Layout from '#/components/Layout'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollowers'>
+export const ProfileFollowersScreen = ({route}: Props) => {
+  const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
+
+  const {data: resolvedDid} = useResolveDidQuery(name)
+  const {data: profile} = useProfileQuery({
+    did: resolvedDid,
+  })
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  return (
+    <Layout.Screen testID="profileFollowersScreen">
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {profile && (
+            <>
+              <Layout.Header.TitleText>
+                {sanitizeDisplayName(profile.displayName || profile.handle)}
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={profile.followersCount ?? 0}
+                  one="# follower"
+                  other="# followers"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Center>
+        <ProfileFollowersComponent name={name} />
+      </Layout.Center>
+    </Layout.Screen>
+  )
+}
diff --git a/src/screens/Profile/ProfileFollows.tsx b/src/screens/Profile/ProfileFollows.tsx
new file mode 100644
index 000000000..a0b612795
--- /dev/null
+++ b/src/screens/Profile/ProfileFollows.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import {Plural} from '@lingui/macro'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+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 {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows'
+import * as Layout from '#/components/Layout'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
+export const ProfileFollowsScreen = ({route}: Props) => {
+  const {name} = route.params
+  const setMinimalShellMode = useSetMinimalShellMode()
+
+  const {data: resolvedDid} = useResolveDidQuery(name)
+  const {data: profile} = useProfileQuery({
+    did: resolvedDid,
+  })
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  return (
+    <Layout.Screen testID="profileFollowsScreen">
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {profile && (
+            <>
+              <Layout.Header.TitleText>
+                {sanitizeDisplayName(profile.displayName || profile.handle)}
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={profile.followersCount ?? 0}
+                  one="# following"
+                  other="# following"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Center>
+        <ProfileFollowsComponent name={name} />
+      </Layout.Center>
+    </Layout.Screen>
+  )
+}
diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx
deleted file mode 100644
index 90c0a57f9..000000000
--- a/src/view/screens/ProfileFollowers.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import {msg} 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 {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()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  return (
-    <Layout.Screen testID="profileFollowersScreen">
-      <CenteredView sideBorders={true}>
-        <ViewHeader title={_(msg`Followers`)} showBorder={!isWeb} />
-        <ProfileFollowersComponent name={name} />
-      </CenteredView>
-    </Layout.Screen>
-  )
-}
diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx
deleted file mode 100644
index 134f79993..000000000
--- a/src/view/screens/ProfileFollows.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import {msg} 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 {useSetMinimalShellMode} from '#/state/shell'
-import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileFollows'>
-export const ProfileFollowsScreen = ({route}: Props) => {
-  const {name} = route.params
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {_} = useLingui()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  return (
-    <Layout.Screen testID="profileFollowsScreen">
-      <CenteredView sideBorders={true}>
-        <ViewHeader title={_(msg`Following`)} showBorder={!isWeb} />
-        <ProfileFollowsComponent name={name} />
-      </CenteredView>
-    </Layout.Screen>
-  )
-}