diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index 235139ef86..00a108bb54 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -10,12 +10,13 @@ import {
} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
+import {Trans} from '@lingui/react/macro'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {type ComposerOptsPostRef} from '#/state/shell/composer'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, useTheme, utils, web} from '#/alf'
import {QuoteEmbed} from '#/components/Post/Embed'
import {ProfileBadges} from '#/components/ProfileBadges'
import {Text} from '#/components/Typography'
@@ -59,18 +60,28 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
})
: null
- const images = useMemo(() => {
+ const {images, totalNumber} = useMemo(() => {
if (AppBskyEmbedImages.isView(embed)) {
- return embed.images
+ return {images: embed.images, totalNumber: embed.images.length}
} else if (AppBskyEmbedGallery.isView(embed)) {
- return galleryItemsToImages(embed.items)
+ return {
+ images: galleryItemsToImages(embed.items),
+ totalNumber: embed.items.length,
+ }
} else if (AppBskyEmbedRecordWithMedia.isView(embed)) {
if (AppBskyEmbedImages.isView(embed.media)) {
- return embed.media.images
+ return {
+ images: embed.media.images,
+ totalNumber: embed.media.images.length,
+ }
} else if (AppBskyEmbedGallery.isView(embed.media)) {
- return galleryItemsToImages(embed.media.items)
+ return {
+ images: galleryItemsToImages(embed.media.items),
+ totalNumber: embed.media.items.length,
+ }
}
}
+ return {images: [], totalNumber: 0}
}, [embed])
return (
@@ -122,7 +133,7 @@ export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) {
{images && !replyTo.moderation?.ui('contentMedia').blur && (
-
+
)}
{showFull && parsedQuoteEmbed && parsedQuoteEmbed.type === 'post' && (
@@ -151,10 +162,13 @@ function galleryItemsToImages(
function ComposerReplyToImages({
images,
+ totalNumber,
}: {
images: AppBskyEmbedImages.ViewImage[]
- showFull: boolean
+ totalNumber: number
}) {
+ const t = useTheme()
+
return (
-
+
+
+ {totalNumber > 4 && (
+
+
+
+ +{totalNumber - 3}
+
+
+
+ )}
+
))}