diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Layout/Header/index.tsx | 4 | ||||
-rw-r--r-- | src/screens/Post/PostLikedBy.tsx | 29 | ||||
-rw-r--r-- | src/screens/Post/PostQuotes.tsx | 39 | ||||
-rw-r--r-- | src/screens/Post/PostRepostedBy.tsx | 39 | ||||
-rw-r--r-- | src/screens/Profile/ProfileFollowers.tsx | 4 | ||||
-rw-r--r-- | src/screens/Profile/ProfileFollows.tsx | 4 |
6 files changed, 86 insertions, 33 deletions
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 321f7201f..f05350dca 100644 --- a/src/components/Layout/Header/index.tsx +++ b/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], - web: [a.py_sm], + native: [a.pb_xs, {minHeight: 48}], + web: [a.py_xs, {minHeight: 52}], }), t.atoms.border_contrast_low, gtMobile && [a.mx_auto, {maxWidth: 600}], diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index d35d33243..683818690 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -1,13 +1,12 @@ import React from 'react' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Plural, Trans} from '@lingui/macro' 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> ) diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index 2cd6be879..24e942abf 100644 --- a/src/screens/Post/PostQuotes.tsx +++ b/src/screens/Post/PostQuotes.tsx @@ -1,15 +1,12 @@ import React from 'react' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Plural, Trans} from '@lingui/macro' 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}> - <ViewHeader title={_(msg`Quotes`)} showBorder={!isWeb} /> - <PostQuotesComponent uri={uri} /> - </CenteredView> + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + {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> ) } diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx index 304e70808..28cd7e87c 100644 --- a/src/screens/Post/PostRepostedBy.tsx +++ b/src/screens/Post/PostRepostedBy.tsx @@ -1,15 +1,12 @@ import React from 'react' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Plural, Trans} from '@lingui/macro' 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}> - <ViewHeader title={_(msg`Reposted By`)} showBorder={!isWeb} /> - <PostRepostedByComponent uri={uri} /> - </CenteredView> + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + {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> ) } diff --git a/src/screens/Profile/ProfileFollowers.tsx b/src/screens/Profile/ProfileFollowers.tsx index 25c2adb18..64292d20e 100644 --- a/src/screens/Profile/ProfileFollowers.tsx +++ b/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} /> - </Layout.Center> + <ProfileFollowersComponent name={name} /> </Layout.Screen> ) } diff --git a/src/screens/Profile/ProfileFollows.tsx b/src/screens/Profile/ProfileFollows.tsx index a0b612795..97a05d5cf 100644 --- a/src/screens/Profile/ProfileFollows.tsx +++ b/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} /> - </Layout.Center> + <ProfileFollowsComponent name={name} /> </Layout.Screen> ) } |