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,
+ ]}>
+
+