diff --git a/assets/icons/bookmark.svg b/assets/icons/bookmark.svg new file mode 100644 index 0000000000..24348ac497 --- /dev/null +++ b/assets/icons/bookmark.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/bookmarkFilled.svg b/assets/icons/bookmarkFilled.svg new file mode 100644 index 0000000000..8a57e9f3d0 --- /dev/null +++ b/assets/icons/bookmarkFilled.svg @@ -0,0 +1 @@ + diff --git a/src/components/PostControls/BookmarkButton.tsx b/src/components/PostControls/BookmarkButton.tsx new file mode 100644 index 0000000000..f018bb11db --- /dev/null +++ b/src/components/PostControls/BookmarkButton.tsx @@ -0,0 +1,28 @@ +import {memo} from 'react' +import {type AppBskyFeedDefs, type AppBskyFeedPost} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import type React from 'react' + +import {type Shadow} from '#/state/cache/post-shadow' +import {Bookmark} from '#/components/icons/Bookmark' +import {PostControlButton, PostControlButtonIcon} from './PostControlButton' + +export const BookmarkButton = memo(function BookmarkButton({ + big, +}: { + post: Shadow + big?: boolean + record: AppBskyFeedPost.Record +}): React.ReactNode { + const {_} = useLingui() + + return ( + + + + ) +}) diff --git a/src/components/PostControls/index.tsx b/src/components/PostControls/index.tsx index 16330a6826..278f54e422 100644 --- a/src/components/PostControls/index.tsx +++ b/src/components/PostControls/index.tsx @@ -26,8 +26,9 @@ import { } from '#/state/shell/progress-guide' import {formatCount} from '#/view/com/util/numeric/format' import * as Toast from '#/view/com/util/Toast' -import {atoms as a, useBreakpoints} from '#/alf' +import {atoms as a} from '#/alf' import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '#/components/icons/Bubble' +import {BookmarkButton} from './BookmarkButton' import { PostControlButton, PostControlButtonIcon, @@ -67,7 +68,6 @@ let PostControls = ({ viaRepost?: {uri: string; cid: string} }): React.ReactNode => { const {_, i18n} = useLingui() - const {gtMobile} = useBreakpoints() const {openComposer} = useOpenComposer() const {feedDescriptor} = useFeedFeedbackContext() const [queueLike, queueUnlike] = usePostLikeMutationQueue( @@ -193,102 +193,108 @@ let PostControls = ({ !big && a.pt_2xs, style, ]}> - - requireAuth(() => onPressReply()) : undefined - } - label={_( - msg({ - message: `Reply (${plural(post.replyCount || 0, { - one: '# reply', - other: '# replies', - })})`, - comment: - 'Accessibility label for the reply button, verb form followed by number of replies and noun form', - }), - )} - big={big}> - - {typeof post.replyCount !== 'undefined' && post.replyCount > 0 && ( - - {formatCount(i18n, post.replyCount)} - - )} - - - - - - - requireAuth(() => onPressToggleLike())} - label={ - post.viewer?.like - ? _( - msg({ - message: `Unlike (${plural(post.likeCount || 0, { - one: '# like', - other: '# likes', - })})`, - comment: - 'Accessibility label for the like button when the post has been liked, verb followed by number of likes and noun', - }), - ) - : _( - msg({ - message: `Like (${plural(post.likeCount || 0, { - one: '# like', - other: '# likes', - })})`, - comment: - 'Accessibility label for the like button when the post has not been liked, verb form followed by number of likes and noun form', - }), - ) - }> - + + requireAuth(() => onPressReply()) + : undefined + } + label={_( + msg({ + message: `Reply (${plural(post.replyCount || 0, { + one: '# reply', + other: '# replies', + })})`, + comment: + 'Accessibility label for the reply button, verb form followed by number of replies and noun form', + }), + )} + big={big}> + + {typeof post.replyCount !== 'undefined' && post.replyCount > 0 && ( + + {formatCount(i18n, post.replyCount)} + + )} + + + + - + + - - - - - + onPress={() => requireAuth(() => onPressToggleLike())} + label={ + post.viewer?.like + ? _( + msg({ + message: `Unlike (${plural(post.likeCount || 0, { + one: '# like', + other: '# likes', + })})`, + comment: + 'Accessibility label for the like button when the post has been liked, verb followed by number of likes and noun', + }), + ) + : _( + msg({ + message: `Like (${plural(post.likeCount || 0, { + one: '# like', + other: '# likes', + })})`, + comment: + 'Accessibility label for the like button when the post has not been liked, verb form followed by number of likes and noun form', + }), + ) + }> + + + + style={[ + a.flex_row, + a.justify_end, + a.flex_1, + big ? a.gap_sm : a.gap_xs, + ]}> + +