diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx
index d01743b18a..fefdac3f92 100644
--- a/src/components/dms/MessageItem.tsx
+++ b/src/components/dms/MessageItem.tsx
@@ -182,13 +182,11 @@ let MessageItem = ({
const hasEmbedAndText =
AppBskyEmbedRecord.isView(message.embed) && rt.text.length > 0
- const targetBottomRadius =
- squaredBottomCorner || hasEmbedAndText
- ? SQUARED_BORDER_RADIUS
- : BORDER_RADIUS
- const targetTopRadius = squaredTopCorner
+ const targetBottomRadius = squaredBottomCorner
? SQUARED_BORDER_RADIUS
: BORDER_RADIUS
+ const targetTopRadius =
+ squaredTopCorner || hasEmbedAndText ? SQUARED_BORDER_RADIUS : BORDER_RADIUS
const bottomRadiusSV = useSharedValue(targetBottomRadius)
const topRadiusSV = useSharedValue(targetTopRadius)
@@ -442,10 +440,9 @@ let MessageItem = ({
t.atoms.text_contrast_medium,
a.pt_xs,
a.pb_2xs,
- {
- paddingLeft: DISPLAY_NAME_INSET,
- },
- ]}>
+ {paddingLeft: DISPLAY_NAME_INSET},
+ ]}
+ emoji>
{displayName}
) : null}
@@ -463,6 +460,14 @@ let MessageItem = ({
toggleDivider(message.id)
}
}}>
+ {AppBskyEmbedRecord.isView(message.embed) && (
+
+ )}
{rt.text.length > 0 && (
)}
- {AppBskyEmbedRecord.isView(message.embed) && (
-
- )}
{appliedReactions}
diff --git a/src/components/dms/ReactionsDialog.tsx b/src/components/dms/ReactionsDialog.tsx
index 05233d1c1c..576ef4cead 100644
--- a/src/components/dms/ReactionsDialog.tsx
+++ b/src/components/dms/ReactionsDialog.tsx
@@ -6,7 +6,6 @@ import {
useWindowDimensions,
View,
} from 'react-native'
-import Animated from 'react-native-reanimated'
import {type ChatBskyActorDefs, type ChatBskyConvoDefs} from '@atproto/api'
import {Trans, useLingui} from '@lingui/react/macro'
@@ -15,6 +14,7 @@ import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-disp
import {sanitizeHandle} from '#/lib/strings/handles'
import {type ActiveConvoStates, useConvoActive} from '#/state/messages/convo'
import {useSession} from '#/state/session'
+import {type SessionAccount} from '#/state/session/types'
import {DraggableScrollView} from '#/view/com/pager/DraggableScrollView'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme, web} from '#/alf'
@@ -31,6 +31,8 @@ type Reaction = {
count: number
}
+type Tab = Omit
+
export function ReactionsDialog({
control,
relatedProfiles,
@@ -52,10 +54,6 @@ export function ReactionsDialog({
const [selected, setSelected] = useState('all')
- const handleFilter = (value: string) => {
- setSelected(value)
- }
-
const filteredReactions = reactions?.filter(
r => selected === 'all' || r.value === selected,
)
@@ -71,7 +69,7 @@ export function ReactionsDialog({
groupedReactions={groupedReactions}
selected={selected}
totalReactions={reactions?.length ?? 0}
- onFilter={handleFilter}
+ onFilter={setSelected}
/>
>
@@ -135,7 +133,7 @@ function ReactionRow({
}: {
control: Dialog.DialogControlProps
convo: ActiveConvoStates
- currentAccount?: bsky.profile.AnyProfileView
+ currentAccount?: SessionAccount
message: ChatBskyConvoDefs.MessageView
profile: bsky.profile.AnyProfileView
reaction: ChatBskyConvoDefs.ReactionView
@@ -149,14 +147,13 @@ function ReactionRow({
const isFromSelf = currentAccount?.did === profile.did
const displayName = createSanitizedDisplayName(profile, true)
- const handle = sanitizeHandle(profile?.handle ?? '', '@')
+ const handle = sanitizeHandle(profile.handle, '@')
const handleOnPress = () => {
- const remainingReactions =
- allReactions?.filter(
- r =>
- !(r.value === reaction.value && r.sender.did === currentAccount?.did),
- ) ?? []
+ const remainingReactions = allReactions.filter(
+ r =>
+ !(r.value === reaction.value && r.sender.did === currentAccount?.did),
+ )
if (remainingReactions.length === 0) {
control.close()
@@ -283,18 +280,13 @@ function ReactionTabs({
tabLayouts.current.set(key, layout)
}
- const tabs = [
- {
- key: 'all',
- value: l`All`,
- senders: [],
- count: totalReactions,
- } as Reaction,
+ const tabs: Tab[] = [
+ {key: 'all', value: l`All`, count: totalReactions},
...(groupedReactions ?? []),
]
return (
-
+
{
scrollState.current.width = e.nativeEvent.layout.width
}}>
-
- {tabs?.map((reaction, index) => (
+ {tabs.map((tab, index) => (
))}
-
+
)
@@ -336,14 +328,14 @@ function ReactionTabs({
function ReactionTab({
index,
- reaction,
+ tab,
selected,
total,
onPress,
onTabLayout,
}: {
index: number
- reaction: Reaction
+ tab: Tab
selected: string
total: number
onPress: (value: string) => void
@@ -354,11 +346,12 @@ function ReactionTab({
return (
{
- onTabLayout(reaction.key, {
+ onTabLayout(tab.key, {
x: e.nativeEvent.layout.x,
width: e.nativeEvent.layout.width,
})
}}
- onPress={() => onPress(reaction.key)}>
+ onPress={() => onPress(tab.key)}>
- {l`${reaction.value} ${reaction.count}`}
+ {tab.key === 'all'
+ ? l({
+ message: `All ${tab.count}`,
+ comment:
+ 'Tab label showing the total count of reactions on a chat message.',
+ })
+ : `${tab.value} ${tab.count}`}
)