More exact counts (#7059)

* post liked by

* rm unnecessary layout.center

* do post quotes/reposts

* set height of header to prevent layout shifts

src/components/Layout/Header/index.tsx

@@ -48,8 +48,8 @@ export function Outer({
         a.gap_sm,
         gutters,
         platform({
-          native: [a.pb_sm, a.pt_xs],
+          native: [a.pb_xs, {minHeight: 48}],
-          web: [a.py_sm],
+          web: [a.py_xs, {minHeight: 52}],
         }),
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],

src/screens/Post/PostLikedBy.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
-import {msg} from '@lingui/macro'
+import {Plural, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
+import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostLikedBy'>
@@ -15,7 +14,12 @@ export const PostLikedByScreen = ({route}: Props) => {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
-  const {_} = useLingui()
+  const {data: post} = usePostThreadQuery(uri)
+
+  let likeCount
+  if (post?.thread.type === 'post') {
+    likeCount = post.thread.post.likeCount
+  }
 
   useFocusEffect(
     React.useCallback(() => {
@@ -25,7 +29,22 @@ export const PostLikedByScreen = ({route}: Props) => {
 
   return (
     <Layout.Screen>
-      <ViewHeader title={_(msg`Liked By`)} />
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          {post && (
+            <>
+              <Layout.Header.TitleText>
+                <Trans>Liked By</Trans>
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural value={likeCount ?? 0} one="# like" other="# likes" />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
       <PostLikedByComponent uri={uri} />
     </Layout.Screen>
   )

src/screens/Post/PostQuotes.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
-import {msg} from '@lingui/macro'
+import {Plural, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
-import {isWeb} from '#/platform/detection'
+import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuotes'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostQuotes'>
@@ -17,7 +14,12 @@ export const PostQuotesScreen = ({route}: Props) => {
   const setMinimalShellMode = useSetMinimalShellMode()
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
-  const {_} = useLingui()
+  const {data: post} = usePostThreadQuery(uri)
+
+  let quoteCount
+  if (post?.thread.type === 'post') {
+    quoteCount = post.thread.post.quoteCount
+  }
 
   useFocusEffect(
     React.useCallback(() => {
@@ -27,10 +29,27 @@ export const PostQuotesScreen = ({route}: Props) => {
 
   return (
     <Layout.Screen>
-      <CenteredView sideBorders={true}>
+      <Layout.Header.Outer>
-        <ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} />
+        <Layout.Header.BackButton />
-        <PostQuotesComponent uri={uri} />
+        <Layout.Header.Content>
-      </CenteredView>
+          {post && (
+            <>
+              <Layout.Header.TitleText>
+                <Trans>Quotes</Trans>
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={quoteCount ?? 0}
+                  one="# quote"
+                  other="# quotes"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <PostQuotesComponent uri={uri} />
     </Layout.Screen>
   )
 }

src/screens/Post/PostRepostedBy.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
-import {msg} from '@lingui/macro'
+import {Plural, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
-import {isWeb} from '#/platform/detection'
+import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/PostRepostedBy'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
 import * as Layout from '#/components/Layout'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostRepostedBy'>
@@ -17,7 +14,12 @@ export const PostRepostedByScreen = ({route}: Props) => {
   const {name, rkey} = route.params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {_} = useLingui()
+  const {data: post} = usePostThreadQuery(uri)
+
+  let quoteCount
+  if (post?.thread.type === 'post') {
+    quoteCount = post.thread.post.repostCount
+  }
 
   useFocusEffect(
     React.useCallback(() => {
@@ -27,10 +29,27 @@ export const PostRepostedByScreen = ({route}: Props) => {
 
   return (
     <Layout.Screen>
-      <CenteredView sideBorders={true}>
+      <Layout.Header.Outer>
-        <ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} />
+        <Layout.Header.BackButton />
-        <PostRepostedByComponent uri={uri} />
+        <Layout.Header.Content>
-      </CenteredView>
+          {post && (
+            <>
+              <Layout.Header.TitleText>
+                <Trans>Reposted By</Trans>
+              </Layout.Header.TitleText>
+              <Layout.Header.SubtitleText>
+                <Plural
+                  value={quoteCount ?? 0}
+                  one="# reposts"
+                  other="# reposts"
+                />
+              </Layout.Header.SubtitleText>
+            </>
+          )}
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <PostRepostedByComponent uri={uri} />
     </Layout.Screen>
   )
 }

src/screens/Profile/ProfileFollowers.tsx

@@ -48,9 +48,7 @@ export const ProfileFollowersScreen = ({route}: Props) => {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
-      <Layout.Center>
+      <ProfileFollowersComponent name={name} />
-        <ProfileFollowersComponent name={name} />
-      </Layout.Center>
     </Layout.Screen>
   )
 }

src/screens/Profile/ProfileFollows.tsx

@@ -48,9 +48,7 @@ export const ProfileFollowsScreen = ({route}: Props) => {
         </Layout.Header.Content>
         <Layout.Header.Slot />
       </Layout.Header.Outer>
-      <Layout.Center>
+      <ProfileFollowsComponent name={name} />
-        <ProfileFollowsComponent name={name} />
-      </Layout.Center>
     </Layout.Screen>
   )
 }