acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Merge branch 'main' into app-2288

Browse Source 
Resolve conflict in src/components/dms/MessageOverlays.tsx: app-2288's
liveReactionsMessage/displayReactionsMessage already covers main's
reactionsMessage live-read for optimistic reaction updates, and adds a
last-known snapshot so the dialog can finish its close animation. Keep
app-2288's memoized reportSubject (with extracted convoId) over main's
unmemoized inline version.
This commit is contained in:
vineyardbovines
2026-06-05 14:09:12 -04:00
parent 4f7d6345e7 fd8df7e201
commit e44b3d35dd
32 changed files with 921 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/index.tsx
+7 -1
View File
@@ -9,7 +9,12 @@ import {
setFontScale as persistFontScale,
} from '#/alf/fonts'
import {themes} from '#/alf/themes'
import {darken, lighten, rgbToHex} from '#/alf/util/colorGeneration'
import {
contrastRatio,
darken,
lighten,
rgbToHex,
} from '#/alf/util/colorGeneration'
import {type Device} from '#/storage'
export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf'
@@ -26,6 +31,7 @@ export const utils = {
rgbToHex,
lighten,
darken,
contrastRatio,
}
export type Alf = {
src/alf/util/colorGeneration.test.ts
+37 -1
View File
@@ -1,4 +1,10 @@
import {darken, hexToRgb, lighten, rgbToHex} from './colorGeneration'
import {
contrastRatio,
darken,
hexToRgb,
lighten,
rgbToHex,
} from './colorGeneration'
describe('hexToRgb', () => {
it('parses 6-digit hex', () => {
@@ -92,3 +98,33 @@ describe('lighten / darken', () => {
expect(darken('#zzz', 10)).toBe('#zzz')
})
})
describe('contrastRatio', () => {
it('returns 21 for black on white', () => {
expect(contrastRatio('#000000', '#ffffff')).toBeCloseTo(21, 5)
})
it('returns 1 for identical colors', () => {
expect(contrastRatio('#abcdef', '#abcdef')).toBeCloseTo(1, 5)
})
it('is symmetric regardless of argument order', () => {
expect(contrastRatio('#123456', '#fedcba')).toBeCloseTo(
contrastRatio('#fedcba', '#123456')!,
5,
)
})
it('clears AAA large text (4.5:1) for a high-contrast pairing', () => {
expect(contrastRatio('#1d3a5f', '#ffffff')!).toBeGreaterThanOrEqual(4.5)
})
it('fails AAA large text (4.5:1) for a low-contrast pairing', () => {
expect(contrastRatio('#777777', '#888888')!).toBeLessThan(4.5)
})
it('returns null for invalid hex input', () => {
expect(contrastRatio('not-a-color', '#ffffff')).toBeNull()
expect(contrastRatio('#ffffff', '#zzz')).toBeNull()
})
})
src/alf/util/colorGeneration.ts
+42
View File
@@ -72,6 +72,48 @@ export function rgbToHex(r: number, g: number, b: number): string {
.slice(1)}`
}
/**
* Computes the WCAG contrast ratio between two colors, ranging from 1 (no
* contrast) to 21 (maximum contrast, i.e. black on white). Returns null if
* either argument is not a valid hex color.
*
* @see https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
*/
export function contrastRatio(hexA: string, hexB: string): number | null {
const rgbA = hexToRgb(hexA)
const rgbB = hexToRgb(hexB)
if (!rgbA || !rgbB) return null
const luminanceA = relativeLuminance(rgbA)
const luminanceB = relativeLuminance(rgbB)
const lighter = Math.max(luminanceA, luminanceB)
const darker = Math.min(luminanceA, luminanceB)
return (lighter + 0.05) / (darker + 0.05)
}
/**
* Computes the WCAG relative luminance of an RGB color, ranging from 0 (black)
* to 1 (white).
*
* @see https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
*/
function relativeLuminance({
r,
g,
b,
}: {
r: number
g: number
b: number
}): number {
const toLinear = (channel: number) => {
const normalized = channel / 255
return normalized <= 0.03928
? normalized / 12.92
: ((normalized + 0.055) / 1.055) ** 2.4
}
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b)
}
function rgbToHsl(
r: number,
g: number,
src/components/Post/Embed/ChatInviteEmbed.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export function ChatInviteEmbed({
style?: StyleProp<ViewStyle>
}) {
return (
<ChatInvite.Root code={code}>
<ChatInvite.Root code={code} hasFixedHeight>
<ChatInviteEmbedBody link={link} onOpen={onOpen} style={style} />
</ChatInvite.Root>
)
src/components/Post/Embed/GalleryFallbackEmbed.tsx
+99
View File
@@ -0,0 +1,99 @@
import {Linking, View} from 'react-native'
import {plural} from '@lingui/core/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {Sparkle_Stroke2_Corner0_Rounded as Sparkle} from '#/components/icons/Sparkle'
import {Text} from '#/components/Typography'
import {IS_NATIVE} from '#/env'
/**
* OTA-able fallback that ships to native builds which don't yet know how to
* render the new gallery embed (>4 images, Photos v2). Final copy and visual
* treatment pending design from Darrin/Danielle/Alex.
*
* Native-only per APP-2308 - web builds receive the new gallery support in
* the same release that adds it.
*/
export function GalleryFallbackEmbed({count}: {count?: number}) {
const t = useTheme()
const {t: l} = useLingui()
const bodyStyle = [
a.text_sm,
a.text_center,
a.leading_snug,
t.atoms.text_contrast_high,
]
return (
<View
style={[
a.mt_sm,
a.rounded_md,
a.border,
a.p_lg,
a.pb_2xl,
a.gap_sm,
a.align_center,
{
borderColor: t.palette.primary_200,
backgroundColor: t.palette.primary_25,
},
]}>
<Sparkle size="lg" fill={t.palette.primary_500} />
<Text style={[a.text_md, a.font_bold, a.text_center, t.atoms.text]}>
<Trans>Something new is here</Trans>
</Text>
{count ? (
<View>
<Text style={bodyStyle}>
{plural(count, {
one: 'This post has # photo.',
other: 'This post has # photos.',
})}
</Text>
{IS_NATIVE ? (
<Text style={bodyStyle}>
{plural(count, {
one: 'Update your app to see it.',
other: 'Update your app to see them all.',
})}
</Text>
) : (
<Text style={bodyStyle}>
{plural(count, {
one: 'Refresh the page to see it.',
other: 'Refresh the page to see them all.',
})}
</Text>
)}
</View>
) : IS_NATIVE ? (
<Text style={bodyStyle}>
<Trans>Update your app to see it.</Trans>
</Text>
) : (
<Text style={bodyStyle}>
<Trans>Refresh the page to see it.</Trans>
</Text>
)}
{IS_NATIVE && (
<Button
label={l`Update your app`}
size="small"
color="primary"
onPress={() => {
void Linking.openURL(BSKY_DOWNLOAD_URL)
}}
style={[a.mt_xs]}>
<ButtonText>
<Trans>Update app</Trans>
</ButtonText>
</Button>
)}
</View>
)
}
src/components/Post/Embed/JoinRequestEmbed.tsx
+4 -1
View File
@@ -31,7 +31,10 @@ export function JoinRequestEmbed({
if (!resolvedCode) return null
return (
<ChatInvite.Root code={resolvedCode} initialPreview={preview}>
<ChatInvite.Root
code={resolvedCode}
initialPreview={preview}
hasFixedHeight>
<JoinRequestEmbedBody style={style} onOpen={onOpen} />
</ChatInvite.Root>
)
src/components/Post/Embed/StandardSiteEmbed/index.tsx
+55 -36
View File
@@ -5,7 +5,6 @@ import {plural} from '@lingui/core/macro'
import {useLingui} from '@lingui/react/macro'
import {useHaptics} from '#/lib/haptics'
import {useCallOnce} from '#/lib/once'
import {shareUrl} from '#/lib/sharing'
import {niceDate} from '#/lib/strings/time'
import {toNiceDomain} from '#/lib/strings/url-helpers'
@@ -104,12 +103,6 @@ export const StandardSiteEmbed = ({
}
}
useCallOnce(() => {
if (!preview) {
ax.metric('embed:standardSite:view', {url: view.uri})
}
})()
if (isStandardPublication) {
return (
<PublicationCard
@@ -427,6 +420,26 @@ export function SubscribeButton({
? l`Subscribe on ${highlightedPublisher.name}`
: l`View publication`
/*
* The custom site theme paints the button background with `accent` and the
* text with `accentForeground`. Only honor it when that pairing clears WCAG
* AAA (4.5:1) for large text, which the button's bold label qualifies as.
* Otherwise we fall through to the default `secondary_inverted` styling,
* which is guaranteed to be legible.
*/
const {accentRGB, accentForegroundRGB} = view.source?.theme || {}
let useCustomTheme = false
if (accentRGB && accentForegroundRGB) {
const accent = utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b)
const accentForeground = utils.rgbToHex(
accentForegroundRGB.r,
accentForegroundRGB.g,
accentForegroundRGB.b,
)
const ratio = utils.contrastRatio(accent, accentForeground)
useCustomTheme = ratio !== null && ratio >= 4.5
}
if (!view.source) return null
const publicationTitle = view.source.title
@@ -468,36 +481,42 @@ export function SubscribeButton({
}
}
const button = (
<Link
shouldProxy
to={view.source.uri}
label={label}
size="small"
color="secondary_inverted"
style={[
style,
a.gap_sm,
preview ? a.pointer_events_none : a.pointer_events_auto,
]}
onPress={onPress}
onLongPress={onLongPress}>
{highlightedPublisher ? (
<>
<View style={[a.flex_row, a.align_center, {gap: 7}]}>
<ButtonIcon icon={highlightedPublisher.Icon} size="md" />
</View>
<ButtonText>{cta}</ButtonText>
</>
) : (
<>
<ButtonText>{cta}</ButtonText>
<ButtonIcon icon={ArrowTopRightIcon} />
</>
)}
</Link>
)
if (!useCustomTheme) {
return button
}
return (
<StandardSiteThemeProvider view={view}>
<Link
shouldProxy
to={view.source.uri}
label={label}
size="small"
color="secondary_inverted"
style={[
style,
a.gap_sm,
preview ? a.pointer_events_none : a.pointer_events_auto,
]}
onPress={onPress}
onLongPress={onLongPress}>
{highlightedPublisher ? (
<>
<View style={[a.flex_row, a.align_center, {gap: 7}]}>
<ButtonIcon icon={highlightedPublisher.Icon} size="md" />
</View>
<ButtonText>{cta}</ButtonText>
</>
) : (
<>
<ButtonText>{cta}</ButtonText>
<ButtonIcon icon={ArrowTopRightIcon} />
</>
)}
</Link>
</StandardSiteThemeProvider>
<StandardSiteThemeProvider view={view}>{button}</StandardSiteThemeProvider>
)
}
src/components/ProfileBadges.tsx
+8 -4
View File
@@ -31,10 +31,12 @@ export function ProfileBadges({
interactive = false,
size,
style,
allowFontScaling = true,
}: ViewStyleProp & {
profile: bsky.profile.AnyProfileView
interactive?: boolean
size: Size
allowFontScaling?: boolean
}) {
const shadowed = useProfileShadow(profile)
const verification = useSimpleVerificationState({profile})
@@ -48,10 +50,12 @@ export function ProfileBadges({
const isOnTheSmallSide = size === 'xs' || size === 'sm'
const verificationIconWidth =
verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
const botIconWidth =
botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
const scaleMultiplier = allowFontScaling
? nativeScaleMultiplier * alfScaleMultiplier
: 1
const verificationIconWidth = verificationIconSizes[size] * scaleMultiplier
const botIconWidth = botIconSizes[size] * scaleMultiplier
return (
<View
src/components/Typography.tsx
+3 -1
View File
@@ -23,6 +23,7 @@ export function Text({
title,
dataSet,
numberOfLines,
allowFontScaling = true,
...rest
}: TextProps) {
const {fonts, flags} = useAlf()
@@ -36,7 +37,7 @@ export function Text({
style,
],
{
fontScale: fonts.scaleMultiplier,
fontScale: allowFontScaling ? fonts.scaleMultiplier : 1,
fontFamily: fonts.family,
flags,
},
@@ -57,6 +58,7 @@ export function Text({
numberOfLines,
style: s,
dataSet: Object.assign({tooltip: title}, dataSet || {}),
allowFontScaling,
...rest,
}
src/components/dms/ChatInvite/Card.tsx
+20 -12
View File
@@ -16,7 +16,7 @@ import {useChatInvite} from './Context'
*/
export function Card({size}: {size: 'large' | 'small'}) {
const t = useTheme()
const {preview} = useChatInvite()
const {preview, hasFixedHeight} = useChatInvite()
if (!preview) return null
@@ -31,14 +31,15 @@ export function Card({size}: {size: 'large' | 'small'}) {
<Text
emoji
style={[size === 'large' ? a.text_lg : a.text_md, a.font_bold]}
numberOfLines={1}>
numberOfLines={1}
allowFontScaling={!hasFixedHeight}>
{preview.name}
</Text>
<View style={[a.flex_row, a.align_center, a.gap_sm]}>
<Text
style={[a.text_2xs, a.font_medium, t.atoms.text_contrast_high]}
allowFontScaling
numberOfLines={1}>
numberOfLines={1}
allowFontScaling={!hasFixedHeight}>
<Trans>Group chat</Trans>
</Text>
<Text
@@ -48,8 +49,8 @@ export function Card({size}: {size: 'large' | 'small'}) {
a.font_medium,
t.atoms.text_contrast_high,
]}
allowFontScaling
numberOfLines={1}>
numberOfLines={1}
allowFontScaling={!hasFixedHeight}>
<Trans comment="The number of members in a group chat, in the format '{members}/{total} members'.">
{preview.memberCount}/{preview.memberLimit}{' '}
<Plural
@@ -70,17 +71,24 @@ export function Card({size}: {size: 'large' | 'small'}) {
<Text
emoji
style={[a.flex_shrink, a.text_sm, a.font_medium]}
allowFontScaling
numberOfLines={1}>
numberOfLines={1}
allowFontScaling={!hasFixedHeight}>
<Trans comment="The group chat creator, in the format 'By {displayName}'.">
By <Text style={[a.font_medium]}>{ownerDisplayName}</Text>
By{' '}
<Text style={[a.font_medium]} allowFontScaling={!hasFixedHeight}>
{ownerDisplayName}
</Text>
</Trans>
</Text>
<ProfileBadges profile={preview.owner} size="sm" />
<ProfileBadges
profile={preview.owner}
size="sm"
allowFontScaling={!hasFixedHeight}
/>
<Text
style={[a.flex_shrink, t.atoms.text_contrast_medium]}
allowFontScaling
numberOfLines={1}>
numberOfLines={1}
allowFontScaling={!hasFixedHeight}>
{ownerHandle}
</Text>
</View>
src/components/dms/ChatInvite/Context.tsx
+2
View File
@@ -32,6 +32,8 @@ export type ChatInviteContextValue = {
* preview to act on.
*/
action: ChatInviteAction | undefined
/** Whether the invite is rendered inside a fixed-height container; when true, text inside disables font scaling so the card doesn't overflow. */
hasFixedHeight: boolean
}
const ChatInviteContext = createContext<ChatInviteContextValue | null>(null)
src/components/dms/ChatInvite/JoinButton.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ export function JoinButton({
onPress?: () => void
style?: StyleProp<ViewStyle>
}) {
const {action} = useChatInvite()
const {action, hasFixedHeight} = useChatInvite()
if (!action) return null
@@ -35,7 +35,7 @@ export function JoinButton({
disabled={action.disabled}
style={[a.w_full, style]}>
{action.side === 'left' && <ButtonIcon icon={action.icon} />}
<ButtonText>{action.label}</ButtonText>
<ButtonText allowFontScaling={!hasFixedHeight}>{action.label}</ButtonText>
{action.side === 'right' && <ButtonIcon icon={action.icon} />}
</Button>
)
src/components/dms/ChatInvite/Root.tsx
+3 -1
View File
@@ -30,6 +30,7 @@ export function Root({
code,
initialPreview,
currentConvoId,
hasFixedHeight,
children,
}: {
code: string
@@ -40,6 +41,7 @@ export function Root({
* open/join (you're already here).
*/
currentConvoId?: string
hasFixedHeight: boolean
children: React.ReactNode
}) {
const {hasSession} = useSession()
@@ -137,7 +139,7 @@ export function Root({
return (
<ChatInviteProvider
value={{code, loading, error: !!error, preview, action}}>
value={{code, loading, error: !!error, preview, action, hasFixedHeight}}>
{children}
</ChatInviteProvider>
)
src/components/dms/MessageItemInviteEmbed.tsx
+2 -1
View File
@@ -74,7 +74,8 @@ let MessageItemInviteEmbed = ({
<ChatInvite.Root
code={embed.joinLinkPreview.code}
initialPreview={embed.joinLinkPreview}
currentConvoId={convo.convo.view.id}>
currentConvoId={convo.convo.view.id}
hasFixedHeight={false}>
<ChatInvite.Card size="small" />
<ChatInvite.JoinButton />
</ChatInvite.Root>
src/components/dms/util.ts
+16
View File
@@ -47,6 +47,22 @@ export function canBeAddedToGroup(profile: bsky.profile.AnyProfileView) {
}
}
/**
* Resolves the effective `allowGroupInvites` value for a chat declaration.
* When unset, group invites follow the general DM preference
* (`allowIncoming`), which itself defaults to `following`. This mirrors the
* `undefined` fallthrough in canBeAddedToGroup, and is the single source of
* truth for both displaying and persisting the setting.
*/
export function resolveAllowGroupInvites(
chat: {allowIncoming?: string; allowGroupInvites?: string} | undefined,
): 'all' | 'none' | 'following' {
return (chat?.allowGroupInvites ?? chat?.allowIncoming ?? 'following') as
| 'all'
| 'none'
| 'following'
}
export function localDateString(date: Date) {
// can't use toISOString because it should be in local time
const mm = date.getMonth()
src/locale/locales/en/messages.po
+475 -363
View File
File diff suppressed because one or more lines are too long
src/screens/Messages/ChatList.tsx
+8
View File
@@ -451,6 +451,12 @@ export function Header({
const {gtMobile} = useBreakpoints()
const requireEmailVerification = useRequireEmailVerification()
const leftConvos = useLeftConvos()
const {isWithinSplitView} = useIsWithinSplitView()
// In split view, the left column (and this header) stays mounted while the
// right column shows the selected route. Pushing would stack duplicate routes
// on repeated clicks, so navigate instead to dedupe by route + params.
const action = isWithinSplitView ? 'navigate' : 'push'
const {data: unreadInboxData, hasNextPage: hasMoreRequests} =
useListConvosQuery({
@@ -494,9 +500,11 @@ export function Header({
count={inboxAllConvos.length}
more={hasMoreRequests}
variant="solid"
action={action}
/>
<Link
to="/messages/settings"
action={action}
label={l`Chat settings`}
size="small"
color="secondary"
src/screens/Messages/Inbox.tsx
+3 -42
View File
@@ -26,10 +26,9 @@ import {useLeftConvos} from '#/state/queries/messages/leave-conversation'
import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
import {useUpdateAllRead} from '#/state/queries/messages/update-all-read'
import {EmptyState} from '#/view/com/util/EmptyState'
import {FAB} from '#/view/com/util/fab/FAB'
import {List} from '#/view/com/util/List'
import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
import {atoms as a, useTheme, web} from '#/alf'
import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -62,8 +61,6 @@ export function MessagesInboxScreen(props: Props) {
}
export function MessagesInboxScreenInner({}: Props) {
const {gtTablet} = useBreakpoints()
const listConvosQuery = useListConvosQuery({status: 'request'})
const {data} = listConvosQuery
@@ -94,21 +91,16 @@ export function MessagesInboxScreenInner({}: Props) {
<Layout.Screen testID="messagesInboxScreen">
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content align={gtTablet ? 'left' : 'platform'}>
<Layout.Header.Content align="left">
<Layout.Header.TitleText>
<Trans>Chat requests</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
{hasUnreadConvos && gtTablet ? (
<MarkAsReadHeaderButton />
) : (
<Layout.Header.Slot />
)}
{hasUnreadConvos ? <MarkAsReadHeaderButton /> : <Layout.Header.Slot />}
</Layout.Header.Outer>
<RequestList
listConvosQuery={listConvosQuery}
conversations={conversations}
hasUnreadConvos={hasUnreadConvos}
/>
</Layout.Screen>
)
@@ -117,14 +109,12 @@ export function MessagesInboxScreenInner({}: Props) {
function RequestList({
listConvosQuery,
conversations,
hasUnreadConvos,
}: {
listConvosQuery: UseInfiniteQueryResult<
InfiniteData<ChatBskyConvoListConvos.OutputSchema>,
Error
>
conversations: ChatBskyConvoDefs.ConvoView[]
hasUnreadConvos: boolean
}) {
const {t: l} = useLingui()
const t = useTheme()
@@ -285,7 +275,6 @@ function RequestList({
desktopFixedHeight
sideBorders={false}
/>
{hasUnreadConvos && <MarkAllReadFAB />}
</>
)
}
@@ -298,34 +287,6 @@ function renderItem({item}: {item: ChatBskyConvoDefs.ConvoView}) {
return <RequestListItem convo={item} />
}
function MarkAllReadFAB() {
const {t: l} = useLingui()
const t = useTheme()
const {mutate: markAllRead} = useUpdateAllRead('request', {
onMutate: () => {
Toast.show(l`Marked all as read`, {
type: 'success',
})
},
onError: () => {
Toast.show(l`Failed to mark all requests as read`, {
type: 'error',
})
},
})
return (
<FAB
testID="markAllAsReadFAB"
onPress={() => markAllRead()}
icon={<CheckIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={l`Mark all as read`}
accessibilityHint=""
/>
)
}
function MarkAsReadHeaderButton() {
const {t: l} = useLingui()
const {mutate: markAllRead} = useUpdateAllRead('request', {
src/screens/Messages/Settings.tsx
+2 -4
View File
@@ -13,6 +13,7 @@ import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen
import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
import * as Dialog from '#/components/Dialog'
import {Divider} from '#/components/Divider'
import {resolveAllowGroupInvites} from '#/components/dms/util'
import * as Toggle from '#/components/forms/Toggle'
import {Bell_Stroke2_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
@@ -199,10 +200,7 @@ export function MessagesSettingsScreenInner({}: Props) {
<Toggle.Group
label={l`Allow group chat invites from`}
type="radio"
values={[
(profile?.associated?.chat
?.allowGroupInvites as AllowIncoming) ?? 'following',
]}
values={[resolveAllowGroupInvites(profile?.associated?.chat)]}
onChange={onSelectGroupInvitesFrom}>
<View>
{allowGroupInvitesFromOptions.map(option => (
src/screens/Messages/components/ChatListItem.tsx
+12 -9
View File
@@ -122,7 +122,7 @@ function DirectChatItem({
}) {
const {t: l} = useLingui()
const profile = useProfileShadow(convo.primaryMember)
const {isWithinSplitView} = useIsWithinSplitView()
const {isWithinLeftPanel} = useIsWithinSplitView()
const moderation = useMemo(
() => moderateProfile(profile, moderationOpts),
@@ -140,7 +140,7 @@ function DirectChatItem({
avatar={
<PreviewableUserAvatar
profile={profile}
size={isWithinSplitView ? 48 : 52}
size={isWithinLeftPanel ? 48 : 52}
moderation={moderation.ui('avatar')}
/>
}
@@ -161,7 +161,7 @@ function DirectChatItem({
isBlockedAccount={moderation.blocked}
showProfileBadges
postAlerts={
isWithinSplitView ? null : (
isWithinLeftPanel ? null : (
<PostAlerts
modui={moderation.ui('contentList')}
size="sm"
@@ -189,7 +189,7 @@ function GroupChatItem({
}) {
const {t: l} = useLingui()
const groupOwner = useMaybeProfileShadow(convo.primaryMember)
const {isWithinSplitView} = useIsWithinSplitView()
const {isWithinLeftPanel} = useIsWithinSplitView()
const moderation = useMemo(
() =>
@@ -205,7 +205,7 @@ function GroupChatItem({
avatar={
<AvatarBubbles
profiles={convo.members}
size={isWithinSplitView ? 48 : 52}
size={isWithinLeftPanel ? 48 : 52}
moderationOpts={moderationOpts}
/>
}
@@ -278,7 +278,7 @@ function BaseChatItem({
const leaveConvoControl = useDialogControl()
const {mutate: markAsRead} = useMarkAsReadMutation()
const {gtMobile} = useBreakpoints()
const {isWithinSplitView} = useIsWithinSplitView()
const {isWithinLeftPanel} = useIsWithinSplitView()
const playHaptic = useHaptics()
const queryClient = useQueryClient()
@@ -458,7 +458,7 @@ function BaseChatItem({
leftFirst: deleteAction,
}
const avatarSize = isWithinSplitView ? 48 : 52
const avatarSize = isWithinLeftPanel ? 48 : 52
return (
<ChatListItemPortal.Provider>
@@ -469,7 +469,7 @@ function BaseChatItem({
// @ts-expect-error web only
onFocus={onFocus}
onBlur={onMouseLeave}
style={[a.relative, t.atoms.bg, isWithinSplitView && a.mx_sm]}>
style={[a.relative, t.atoms.bg, isWithinLeftPanel && a.mx_sm]}>
<View
style={[
a.z_10,
@@ -481,6 +481,9 @@ function BaseChatItem({
<Link
to={`/messages/${convo.view.id}`}
// In split view, this list stays mounted alongside the open convo,
// so push would stack duplicate routes on repeated clicks.
action={isWithinLeftPanel ? 'navigate' : 'push'}
label={title}
accessibilityHint={accessibilityHint}
accessibilityActions={
@@ -512,7 +515,7 @@ function BaseChatItem({
a.px_lg,
a.py_md,
a.gap_md,
isWithinSplitView && a.rounded_sm,
isWithinLeftPanel && a.rounded_sm,
{
backgroundColor: hasUnread
? t.palette.primary_25
src/screens/Messages/components/InboxRequests.tsx
+4
View File
@@ -11,10 +11,12 @@ export function InboxRequests({
count,
more,
variant,
action,
}: {
count: number
more: boolean
variant?: 'ghost' | 'solid'
action?: 'push' | 'navigate'
}) {
const {t: l} = useLingui()
@@ -41,6 +43,7 @@ export function InboxRequests({
<Link
label={label}
to="/messages/inbox"
action={action}
size="small"
variant={unread ? 'solid' : 'ghost'}
color={unread ? 'primary_subtle' : 'secondary'}
@@ -66,6 +69,7 @@ export function InboxRequests({
<Link
label={label}
to="/messages/inbox"
action={action}
color={unread ? 'primary_subtle' : 'secondary'}
size="small">
<ButtonIcon icon={InboxIcon} />
src/screens/Messages/components/MessageInputEmbed.tsx
+1 -1
View File
@@ -273,7 +273,7 @@ function MessageInputInviteEmbed({
const {t: l} = useLingui()
return (
<ChatInvite.Root code={code}>
<ChatInvite.Root code={code} hasFixedHeight={false}>
<View
style={[
a.flex_1,
src/state/queries/messages/actor-declaration.ts
+22 -5
View File
@@ -7,6 +7,7 @@ import {useMutation, useQueryClient} from '@tanstack/react-query'
import {logger} from '#/logger'
import {useAgent, useSession} from '#/state/session'
import {resolveAllowGroupInvites} from '#/components/dms/util'
import {RQKEY as PROFILE_RKEY} from '../profile'
export function useUpdateActorDeclaration({
@@ -34,8 +35,12 @@ export function useUpdateActorDeclaration({
update.allowIncoming ??
current?.associated?.chat?.allowIncoming ??
'following'
const allowGroupInvites =
update.allowGroupInvites ?? current?.associated?.chat?.allowGroupInvites
const allowGroupInvites = resolveAllowGroupInvites({
allowIncoming,
allowGroupInvites:
update.allowGroupInvites ??
current?.associated?.chat?.allowGroupInvites,
})
const result = await agent.com.atproto.repo.putRecord({
repo: currentAccount.did,
collection: 'chat.bsky.actor.declaration',
@@ -43,7 +48,7 @@ export function useUpdateActorDeclaration({
record: {
$type: 'chat.bsky.actor.declaration',
allowIncoming,
...(allowGroupInvites && {allowGroupInvites}),
allowGroupInvites,
},
})
return result
@@ -54,14 +59,26 @@ export function useUpdateActorDeclaration({
PROFILE_RKEY(currentAccount?.did),
(old?: AppBskyActorDefs.ProfileViewDetailed) => {
if (!old) return old
const allowIncoming =
update.allowIncoming ??
old.associated?.chat?.allowIncoming ??
'following'
// resolve the same concrete value the server will receive, so
// optimistic cache and persisted record stay aligned
const allowGroupInvites = resolveAllowGroupInvites({
allowIncoming,
allowGroupInvites:
update.allowGroupInvites ??
old.associated?.chat?.allowGroupInvites,
})
return {
...old,
associated: {
...old.associated,
chat: {
allowIncoming: 'following',
...old.associated?.chat,
...update,
allowIncoming,
allowGroupInvites,
},
},
} satisfies AppBskyActorDefs.ProfileViewDetailed
src/state/queries/messages/list-conversations.tsx
+15 -48
View File
@@ -418,67 +418,34 @@ export function ListConvosProviderInner({
})),
)
} else if (ChatBskyConvoDefs.isLogLockConvo(log)) {
queryClient.setQueriesData(
{queryKey: [RQKEY_ROOT]},
(old?: ConvoListQueryData) =>
optimisticUpdate(log.convoId, old, convo => {
if (ChatBskyConvoDefs.isGroupConvo(convo.kind)) {
return {
...convo,
kind: {
...convo.kind,
lockStatus: 'locked',
},
rev: log.rev,
}
}
return {
mutateConvoView(log.convoId, convo =>
ChatBskyConvoDefs.isGroupConvo(convo.kind)
? {
...convo,
kind: {...convo.kind, lockStatus: 'locked'},
rev: log.rev,
}
}),
: {...convo, rev: log.rev},
)
} else if (ChatBskyConvoDefs.isLogUnlockConvo(log)) {
queryClient.setQueriesData(
{queryKey: [RQKEY_ROOT]},
(old?: ConvoListQueryData) =>
optimisticUpdate(log.convoId, old, convo => {
if (ChatBskyConvoDefs.isGroupConvo(convo.kind)) {
return {
...convo,
kind: {
...convo.kind,
lockStatus: 'unlocked',
},
rev: log.rev,
}
}
return {
mutateConvoView(log.convoId, convo =>
ChatBskyConvoDefs.isGroupConvo(convo.kind)
? {
...convo,
kind: {...convo.kind, lockStatus: 'unlocked'},
rev: log.rev,
}
}),
: {...convo, rev: log.rev},
)
} else if (ChatBskyConvoDefs.isLogLockConvoPermanently(log)) {
queryClient.setQueriesData(
{queryKey: [RQKEY_ROOT]},
(old?: ConvoListQueryData) =>
optimisticUpdate(log.convoId, old, convo => {
if (ChatBskyConvoDefs.isGroupConvo(convo.kind)) {
return {
...convo,
kind: {
...convo.kind,
lockStatus: 'locked-permanently',
},
rev: log.rev,
}
}
return {
mutateConvoView(log.convoId, convo =>
ChatBskyConvoDefs.isGroupConvo(convo.kind)
? {
...convo,
kind: {...convo.kind, lockStatus: 'locked-permanently'},
rev: log.rev,
}
}),
: {...convo, rev: log.rev},
)
} else if (
ChatBskyConvoDefs.isLogCreateJoinLink(log) ||
src/view/com/posts/PostFeed.tsx
+13
View File
@@ -12,6 +12,7 @@ import {
} from 'react-native'
import {
type AppBskyActorDefs,
AppBskyEmbedExternal,
AppBskyEmbedVideo,
type AppBskyFeedDefs,
} from '@atproto/api'
@@ -58,6 +59,7 @@ import {
} from '#/components/feeds/PostFeedVideoGridRow'
import {TrendingInterstitial} from '#/components/interstitials/Trending'
import {TrendingVideos as TrendingVideosInterstitial} from '#/components/interstitials/TrendingVideos'
import {isStandardSiteEmbed} from '#/components/Post/Embed/StandardSiteEmbed/utils'
import {useAnalytics} from '#/analytics'
import {IS_IOS, IS_NATIVE, IS_WEB} from '#/env'
import {DiscoverFeedLiveEventFeedsAndTrendingBanner} from '#/features/liveEvents/components/DiscoverFeedLiveEventFeedsAndTrendingBanner'
@@ -905,6 +907,7 @@ let PostFeed = ({
const seenActorWithStatusRef = useRef<Set<string>>(new Set())
const seenPostUrisRef = useRef<Set<string>>(new Set())
const seenStandardSiteUrisRef = useRef<Set<string>>(new Set())
// Helper to calculate position in feed (count only root posts, not interstitials or thread replies)
const getPostPosition = useNonReactiveCallback(
@@ -974,6 +977,16 @@ let PostFeed = ({
})
}
}
// Standard site embed view tracking
if (
AppBskyEmbedExternal.isView(post.embed) &&
isStandardSiteEmbed(post.embed.external) &&
!seenStandardSiteUrisRef.current.has(post.embed.external.uri)
) {
seenStandardSiteUrisRef.current.add(post.embed.external.uri)
ax.metric('embed:standardSite:view', {url: post.embed.external.uri})
}
} else if (item.type === 'videoGridRow') {
// Track each video in the grid row
for (let i = 0; i < item.items.length; i++) {
src/view/screens/Storybook/GalleryFallback.tsx
+25
View File
@@ -0,0 +1,25 @@
import {View} from 'react-native'
import {atoms as a} from '#/alf'
import {GalleryFallbackEmbed} from '#/components/Post/Embed/GalleryFallbackEmbed'
import {H1, H3} from '#/components/Typography'
export function GalleryFallback() {
return (
<View style={[a.gap_md]}>
<H1>Gallery fallback (APP-2308)</H1>
<H3>No count</H3>
<GalleryFallbackEmbed />
<H3>1 photo</H3>
<GalleryFallbackEmbed count={1} />
<H3>5 photos</H3>
<GalleryFallbackEmbed count={5} />
<H3>10 photos</H3>
<GalleryFallbackEmbed count={10} />
</View>
)
}
src/view/screens/Storybook/Storybook.tsx
+2
View File
@@ -16,6 +16,7 @@ import {Breakpoints} from './Breakpoints'
import {Buttons} from './Buttons'
import {Dialogs} from './Dialogs'
import {Forms} from './Forms'
import {GalleryFallback} from './GalleryFallback'
import {Icons} from './Icons'
import {Links} from './Links'
import {Menus} from './Menus'
@@ -120,6 +121,7 @@ export default function Storybook() {
<Breakpoints />
<Dialogs />
<Admonitions />
<GalleryFallback />
<Settings />
<Button
src/view/shell/Composer.ios.tsx
+12 -11
View File
@@ -1,29 +1,30 @@
import {useEffect, useRef} from 'react'
import {useEffect} from 'react'
import {Modal, View} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import {useDialogStateControlContext} from '#/state/dialogs'
import {useComposerState} from '#/state/shell/composer'
import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
import {atoms as a, useTheme} from '#/alf'
import {SheetCompatProvider as TooltipSheetCompatProvider} from '#/components/Tooltip'
import {IS_LIQUID_GLASS} from '#/env'
export function Composer({}: {winHeight: number}) {
const {setFullyExpandedCount} = useDialogStateControlContext()
export function Composer() {
const t = useTheme()
const state = useComposerState()
const ref = useComposerCancelRef()
const open = !!state
const prevOpen = useRef(open)
useEffect(() => {
if (open && !prevOpen.current) {
setFullyExpandedCount(c => c + 1)
} else if (!open && prevOpen.current) {
setFullyExpandedCount(c => c - 1)
if (open && !IS_LIQUID_GLASS) {
const entry = SystemBars.pushStackEntry({
style: {
statusBar: 'light',
},
})
return () => SystemBars.popStackEntry(entry)
}
prevOpen.current = open
}, [open, setFullyExpandedCount])
}, [open])
return (
<Modal
src/view/shell/Composer.tsx
+22 -30
View File
@@ -1,49 +1,41 @@
import {useEffect} from 'react'
import {Animated, Easing} from 'react-native'
import {SystemBars} from 'react-native-edge-to-edge'
import Animated, {
Easing,
SlideInDown,
SlideOutDown,
} from 'react-native-reanimated'
import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'
import {useComposerState} from '#/state/shell/composer'
import {ComposePost} from '#/view/com/composer/Composer'
import {atoms as a, useTheme} from '#/alf'
import {ComposePost} from '../com/composer/Composer'
export function Composer({winHeight}: {winHeight: number}) {
export function Composer() {
const state = useComposerState()
const t = useTheme()
const initInterp = useAnimatedValue(0)
const open = !!state
useEffect(() => {
if (state) {
Animated.timing(initInterp, {
toValue: 1,
duration: 300,
easing: Easing.out(Easing.exp),
useNativeDriver: true,
}).start()
} else {
initInterp.setValue(0)
if (open) {
const entry = SystemBars.pushStackEntry({
style: {
statusBar: t.name !== 'light' ? 'light' : 'dark',
},
})
return () => SystemBars.popStackEntry(entry)
}
}, [initInterp, state])
const wrapperAnimStyle = {
transform: [
{
translateY: initInterp.interpolate({
inputRange: [0, 1],
outputRange: [winHeight, 0],
}),
},
],
}
}, [open, t.name])
// rendering
// =
if (!state) {
if (!open) {
return null
}
return (
<Animated.View
style={[a.absolute, a.inset_0, t.atoms.bg, wrapperAnimStyle]}
style={[a.absolute, a.inset_0, t.atoms.bg]}
entering={SlideInDown.duration(300).easing(Easing.out(Easing.exp))}
exiting={SlideOutDown.duration(200).easing(Easing.in(Easing.quad))}
aria-modal
accessibilityViewIsModal>
<ComposePost
src/view/shell/Composer.web.tsx
+2 -5
View File
@@ -5,18 +5,15 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
import {useA11y} from '#/state/a11y'
import {useModals} from '#/state/modals'
import {type ComposerOpts, useComposerState} from '#/state/shell/composer'
import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
const BOTTOM_BAR_HEIGHT = 61
export function Composer({}: {winHeight: number}) {
export function Composer() {
const state = useComposerState()
const isActive = !!state
// rendering
// =
if (!isActive) {
return null
}
src/view/shell/index.tsx
+1 -3
View File
@@ -51,7 +51,6 @@ import {Composer} from './Composer'
import {DrawerContent} from './Drawer'
function ShellInner() {
const winDim = useWindowDimensions()
const insets = useSafeAreaInsets()
const {state: policyUpdateState} = usePolicyUpdateContext()
@@ -108,8 +107,7 @@ function ShellInner() {
<TabsNavigator layout={drawerLayout} />
</ErrorBoundary>
</View>
<Composer winHeight={winDim.height} />
<Composer />
<ModalsContainer />
<MutedWordsDialog />
<SigninDialog />
src/view/shell/index.web.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ function ShellInner() {
<ErrorBoundary>
<FlatNavigator layout={drawerLayout} />
</ErrorBoundary>
<Composer winHeight={0} />
<Composer />
<ModalsContainer />
<MutedWordsDialog />
<SigninDialog />