Merge remote-tracking branch 'origin/main' into update-img-config

* origin/main: (31 commits)
  Add group chat join links to supported embed types (#10454)
  Disable overscroll on Android to fix settle discrepancy (#10717)
  Fix labeller highlight when selected on bottom bar (#10716)
  Use correct `Plural` macro in InviteLinkDialog (#10723)
  Fix invalid `zero` plural category and add plural formatting (#10722)
  Nightly source-language update
  `expo-image` tweaks (#10710)
  Make extra sure the drawer gesture doesn't accidentally trigger on Android (#10713)
  Fix image peek in carousels for quote posts (#10688)
  Compile i18n before running lint (#10711)
  [Android] Fix horizontal swipes being cancelled when leaving bounds (#10712)
  Enable ESLint errors and suppress existing violations (#10490)
  Hide accept button for locked chats (#10696)
  Mount message dialogs once at the list level (#10435)
  Fix alt text selection in lightbox on Android (and iOS) (#10698)
  Mention default `<Text>` style in CLAUDE.md (#10705)
  Use square icons for labellers in Automation Label preview card (#10701)
  [ALF] Set text to `leading_snug` by default (#10627)
  Nightly source-language update
  Transpile `@atproto/api` package for older browser support (#10700)
  ...

src/App.native.tsx

@@ -47,18 +47,18 @@ import {
 import {readLastActiveAccount} from '#/state/session/util'
 import {Provider as ShellStateProvider} from '#/state/shell'
 import {Provider as ComposerProvider} from '#/state/shell/composer'
+import {Provider as LandingProvider} from '#/state/shell/landing'
 import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as OnboardingProvider} from '#/state/shell/onboarding'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
-import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Shell} from '#/view/shell'
 import {atoms as a, ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as ContextMenuProvider} from '#/components/ContextMenu'
-import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
+import {useLandingEntry} from '#/components/hooks/useLandingEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as LightboxStateProvider} from '#/components/Lightbox/state'
 import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdateOverlay'
@@ -113,7 +113,7 @@ function InnerApp() {
   const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {t: l} = useLingui()
-  const hasCheckedReferrer = useStarterPackEntry()
+  const hasCheckedLanding = useLandingEntry()
 
   // init
   useEffect(() => {
@@ -146,7 +146,7 @@ function InnerApp() {
     <Alf theme={theme}>
       <ThemeProvider theme={theme}>
         <ContextMenuProvider>
-          <Splash isReady={isReady && hasCheckedReferrer}>
+          <Splash isReady={isReady && hasCheckedLanding}>
             <VideoVolumeProvider>
               <Fragment
                 // Resets the entire tree below when it changes:
@@ -246,12 +246,12 @@ function App() {
                             <LightboxStateProvider>
                               <PortalProvider>
                                 <BottomSheetProvider>
-                                  <StarterPackProvider>
+                                  <LandingProvider>
                                     <SafeAreaProvider
                                       initialMetrics={initialWindowMetrics}>
                                       <InnerApp />
                                     </SafeAreaProvider>
-                                  </StarterPackProvider>
+                                  </LandingProvider>
                                 </BottomSheetProvider>
                               </PortalProvider>
                             </LightboxStateProvider>

src/App.web.tsx

@@ -40,17 +40,17 @@ import {
 import {readLastActiveAccount} from '#/state/session/util'
 import {Provider as ShellStateProvider} from '#/state/shell'
 import {Provider as ComposerProvider} from '#/state/shell/composer'
+import {Provider as LandingProvider} from '#/state/shell/landing'
 import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as OnboardingProvider} from '#/state/shell/onboarding'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
-import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as ContextMenuProvider} from '#/components/ContextMenu'
-import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
+import {useLandingEntry} from '#/components/hooks/useLandingEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as LightboxStateProvider} from '#/components/Lightbox/state'
 import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdateOverlay'
@@ -92,7 +92,7 @@ function InnerApp() {
   const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {t: l} = useLingui()
-  const hasCheckedReferrer = useStarterPackEntry()
+  const hasCheckedLanding = useLandingEntry()
 
   // init
   useEffect(() => {
@@ -125,7 +125,7 @@ function InnerApp() {
     <Alf theme={theme}>
       <ThemeProvider theme={theme}>
         <ContextMenuProvider>
-          <Splash isReady={isReady && hasCheckedReferrer}>
+          <Splash isReady={isReady && hasCheckedLanding}>
             <VideoVolumeProvider>
               <ActiveVideoProvider>
                 <Fragment
@@ -224,9 +224,9 @@ function App() {
                           <DialogStateProvider>
                             <LightboxStateProvider>
                               <PortalProvider>
-                                <StarterPackProvider>
+                                <LandingProvider>
                                   <InnerApp />
-                                </StarterPackProvider>
+                                </LandingProvider>
                               </PortalProvider>
                             </LightboxStateProvider>
                           </DialogStateProvider>

src/Navigation.tsx

@@ -44,6 +44,7 @@ import {
   type State,
 } from '#/lib/routes/types'
 import {bskyTitle} from '#/lib/strings/headings'
+import {CHAT_INVITE_CODE_REGEX} from '#/lib/strings/url-helpers'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
@@ -81,6 +82,7 @@ import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
 import {MessagesConversationSettingsScreen} from '#/screens/Messages/ConversationSettings'
 import {MessagesInboxScreen} from '#/screens/Messages/Inbox'
+import {MessagesJoinRequestsScreen} from '#/screens/Messages/JoinRequests'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
 import {Screen as ModerationVerificationSettings} from '#/screens/Moderation/VerificationSettings'
@@ -487,6 +489,11 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
           getComponent={() => MessagesConversationSettingsScreen}
           options={{title: title(msg`Group chat settings`), requireAuth: true}}
         />
+        <Stack.Screen
+          name="MessagesJoinRequests"
+          getComponent={() => MessagesJoinRequestsScreen}
+          options={{title: title(msg`Requests to join`), requireAuth: true}}
+        />
         <Stack.Screen
           name="MessagesSettings"
           getComponent={() => MessagesSettingsScreen}
@@ -797,6 +804,19 @@ const LINKING = {
       return buildStateObject('Flat', 'Home', params)
     }
 
+    // Chat invite URLs (`/c/:code`) are handled by `useIntentHandler`, which
+    // opens the GroupChatJoinDialog (or the logged-out join flow). Route the
+    // path to Home so the dialog overlays Home instead of NotFound. On native,
+    // react-navigation strips the `bluesky://` prefix and passes the path
+    // without a leading slash, so normalize before matching.
+    const normalizedPath = path.startsWith('/') ? path : `/${path}`
+    if (CHAT_INVITE_CODE_REGEX.test(normalizedPath.split('?')[0])) {
+      if (IS_NATIVE) {
+        return buildStateObject('HomeTab', 'Home', params)
+      }
+      return buildStateObject('Flat', 'Home', params)
+    }
+
     if (IS_NATIVE) {
       if (name === 'Search') {
         return buildStateObject('SearchTab', 'Search', params)

src/components/AvatarBubbles.tsx

@@ -28,23 +28,29 @@ type Layout = {
   border?: boolean
 }
 
-type Props = {
-  animate?: boolean
-  profiles: bsky.profile.AnyProfileView[]
-  size?: number
-  moderationOpts?: ModerationOpts
-}
-
 export function AvatarBubbles({
   animate = false,
   profiles: allProfiles,
+  self = false,
   size = 120,
   moderationOpts,
-}: Props) {
+}: {
+  animate?: boolean
+  profiles: bsky.profile.AnyProfileView[]
+  /**
+   * By default, when there are more than 2 profiles, the current user is
+   * filtered out (so you don't see yourself among your own group's members).
+   * Set this to `true` for cases where every passed profile should appear,
+   * e.g. an invite preview where the owner is meaningful regardless of viewer.
+   */
+  self?: boolean
+  size?: number
+  moderationOpts?: ModerationOpts
+}) {
   const {currentAccount} = useSession()
   const profiles =
-    allProfiles.length > 2
-      ? allProfiles.filter(p => p.did !== currentAccount?.did)
+    !self && allProfiles.length > 2
+      ? allProfiles.filter(p => p?.did != null && p.did !== currentAccount?.did)
       : allProfiles
   const moderations = useMemo(() => {
     if (!moderationOpts) return []

src/components/Button.tsx

@@ -757,11 +757,11 @@ export function useSharedButtonTextStyles() {
     }
 
     if (size === 'large') {
-      baseStyles.push(a.text_md, a.leading_snug, a.font_medium)
+      baseStyles.push(a.text_md, a.font_medium)
     } else if (size === 'small') {
-      baseStyles.push(a.text_sm, a.leading_snug, a.font_medium)
+      baseStyles.push(a.text_sm, a.font_medium)
     } else if (size === 'tiny') {
-      baseStyles.push(a.text_xs, a.leading_snug, a.font_semi_bold)
+      baseStyles.push(a.text_xs, a.font_semi_bold)
     }
 
     return flatten(baseStyles)

src/components/ContextMenu/index.tsx

@@ -499,6 +499,7 @@ function TriggerClone({
         accessibilityLabel={label}
         accessibilityHint={_(msg`The subject of the context menu`)}
         accessibilityIgnoresInvertColors={false}
+        cachePolicy="none"
       />
     </Animated.View>
   )

src/components/Lightbox/Lightbox.web.tsx

@@ -230,7 +230,11 @@ function LightboxGallery({
           style={[
             a.px_4xl,
             a.py_2xl,
-            {backgroundColor: 'rgba(0, 0, 0, 0.45)'},
+            {
+              backgroundColor: 'rgba(0, 0, 0, 0.5)',
+              // @ts-expect-error web only
+              backdropFilter: 'blur(16px)',
+            },
             delayedFadeInAnim,
           ]}>
           <Pressable

src/components/Lightbox/chrome/Footer.tsx

@@ -1,15 +1,10 @@
 import {useRef} from 'react'
-import {
-  LayoutAnimation,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  View,
-} from 'react-native'
+import {LayoutAnimation, ScrollView, StyleSheet, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {BlurView} from 'expo-blur'
 import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, platform, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 type Props = {
@@ -37,36 +32,65 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
         {paddingBottom: insets.bottom + 8},
       ]}>
       <View style={[a.mx_md, styles.altWrap]}>
-        <ScrollView
-          scrollEnabled={isAltExpanded}
-          onMomentumScrollBegin={() => {
-            isMomentumScrolling.current = true
-          }}
-          onMomentumScrollEnd={() => {
-            isMomentumScrolling.current = false
-          }}
-          contentContainerStyle={[a.px_md, a.py_sm]}>
-          <Pressable
-            accessibilityRole="button"
-            accessibilityLabel={l`Expand alt text`}
-            accessibilityHint=""
-            onPress={() => {
-              if (isMomentumScrolling.current) return
-              LayoutAnimation.configureNext({
-                duration: 450,
-                update: {type: 'spring', springDamping: 1},
-              })
-              onToggleAltExpanded()
-            }}>
-            <Text
-              emoji
-              selectable
-              style={[a.text_sm, {color: t.palette.white}]}
-              numberOfLines={isAltExpanded ? undefined : 3}>
-              {altText}
-            </Text>
-          </Pressable>
-        </ScrollView>
+        <BlurView
+          intensity={16}
+          tint="dark"
+          style={[
+            // Tint kept over the blur so dense, text-heavy images stay
+            // readable. On Android the blur falls back to a flat overlay, so
+            // bump the opacity to keep the contrast the real blur provides
+            // elsewhere.
+            platform({
+              ios: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+              android: {backgroundColor: 'rgba(0, 0, 0, 0.7)'},
+            }),
+          ]}>
+          <ScrollView
+            scrollEnabled={isAltExpanded}
+            onMomentumScrollBegin={() => {
+              isMomentumScrolling.current = true
+            }}
+            onMomentumScrollEnd={() => {
+              isMomentumScrolling.current = false
+            }}
+            contentContainerStyle={[a.px_md, a.py_sm]}>
+            <View
+              accessibilityRole="button"
+              accessibilityLabel={l`Expand alt text`}
+              accessibilityHint="">
+              {/*
+               * The press handlers must live on the Text itself, not on a
+               * wrapping Pressable. Text selection is driven by the platform's
+               * native text view long-press (RN Text on Android, UITextView on
+               * iOS). A parent touchable consumes that long-press before the
+               * selectable Text can begin a selection - on Android this prevents
+               * selection entirely. Keeping onPress/onLongPress on the Text lets
+               * the same native node own both the tap-to-expand and the
+               * long-press-to-select. The empty onLongPress is intentional: it
+               * reserves the long-press for the OS selection gesture instead of
+               * firing the expand toggle. RN exposes no API to arbitrate tap vs
+               * native selection on a single node, so this is the supported
+               * workaround, and it behaves consistently on both platforms.
+               */}
+              <Text
+                emoji
+                selectable
+                style={[a.text_sm, {color: t.palette.white}]}
+                numberOfLines={isAltExpanded ? undefined : 3}
+                onPress={() => {
+                  if (isMomentumScrolling.current) return
+                  LayoutAnimation.configureNext({
+                    duration: 450,
+                    update: {type: 'spring', springDamping: 1},
+                  })
+                  onToggleAltExpanded()
+                }}
+                onLongPress={() => {}}>
+                {altText}
+              </Text>
+            </View>
+          </ScrollView>
+        </BlurView>
       </View>
     </View>
   )
@@ -74,7 +98,6 @@ export function Footer({altText, isAltExpanded, onToggleAltExpanded}: Props) {
 
 const styles = StyleSheet.create({
   altWrap: {
-    backgroundColor: 'rgba(0, 0, 0, 0.45)',
     borderRadius: 12,
     overflow: 'hidden',
   },

src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx

@@ -246,6 +246,7 @@ const ImageItem = ({
                     }
               }
               cachePolicy="memory"
+              useAppleWebpCodec
             />
           </Animated.View>
         </Animated.View>

src/components/Lightbox/pager/ImagePager.tsx

@@ -32,6 +32,7 @@ import Animated, {
   withSpring,
   type WithSpringConfig,
 } from 'react-native-reanimated'
+import {Image} from 'expo-image'
 import * as ScreenOrientation from 'expo-screen-orientation'
 
 import {type Dimensions} from '#/lib/media/types'
@@ -136,6 +137,9 @@ export default function ImageViewRoot({
       'worklet'
       thumbRects.set({})
     })()
+    requestIdleCallback(() => {
+      void Image.clearMemoryCache()
+    })
   }, [thumbRects])
 
   useAnimatedReaction(

src/components/Link.tsx

@@ -12,6 +12,7 @@ import {
 } from '@react-navigation/native'
 
 import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
+import {useGroupChatJoinIntent} from '#/lib/hooks/useIntentHandler'
 import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
 import {useOpenLink} from '#/lib/hooks/useOpenLink'
 import {type AllNavigatorParams, type RouteParams} from '#/lib/routes/types'
@@ -19,6 +20,7 @@ import {shareUrl} from '#/lib/sharing'
 import {
   convertBskyAppUrlIfNeeded,
   createProxiedUrl,
+  getChatInviteCodeFromUrl,
   isBskyDownloadUrl,
   isExternalUrl,
   linkRequiresWarning,
@@ -130,6 +132,7 @@ export function useLink({
   const {closeModal} = useModalControls()
   const {linkWarningDialogControl} = useGlobalDialogsControlContext()
   const openLink = useOpenLink()
+  const groupChatJoinIntent = useGroupChatJoinIntent()
 
   const onPress = useCallback(
     (e: GestureResponderEvent) => {
@@ -148,6 +151,12 @@ export function useLink({
         e.preventDefault()
       }
 
+      const chatInviteCode = getChatInviteCodeFromUrl(href)
+      if (chatInviteCode) {
+        groupChatJoinIntent(chatInviteCode, href)
+        return
+      }
+
       if (requiresWarning) {
         linkWarningDialogControl.open({
           displayText,
@@ -228,6 +237,7 @@ export function useLink({
       overridePresentation,
       shouldProxy,
       linkWarningDialogControl,
+      groupChatJoinIntent,
     ],
   )
 

src/components/MediaPreview.tsx

@@ -1,11 +1,16 @@
 import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
-import {type AppBskyFeedDefs} from '@atproto/api'
-import {Trans} from '@lingui/react/macro'
+import {type AppBskyEmbedImages, type AppBskyFeedDefs} from '@atproto/api'
+import {Trans, useLingui} from '@lingui/react/macro'
 
+import {shareImageModal} from '#/lib/media/manip'
+import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
 import {isGifEmbed} from '#/lib/strings/embed-player'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
+import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import * as PeekMenu from '#/components/PeekMenu'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
 import * as bsky from '#/types/bsky'
@@ -16,9 +21,11 @@ import * as bsky from '#/types/bsky'
 export function Embed({
   embed,
   style,
+  peekable = false,
 }: {
   embed: AppBskyFeedDefs.PostView['embed']
   style?: StyleProp<ViewStyle>
+  peekable?: boolean
 }) {
   const e = bsky.post.parseEmbed(embed)
 
@@ -27,13 +34,17 @@ export function Embed({
   if (e.type === 'images') {
     return (
       <Outer style={style}>
-        {e.view.images.map(image => (
-          <ImageItem
-            key={image.thumb}
-            thumbnail={image.thumb}
-            alt={image.alt}
-          />
-        ))}
+        {e.view.images.map(image =>
+          peekable ? (
+            <PeekableImageItem key={image.thumb} image={image} />
+          ) : (
+            <ImageItem
+              key={image.thumb}
+              thumbnail={image.thumb}
+              alt={image.alt}
+            />
+          ),
+        )}
       </Outer>
     )
   } else if (e.type === 'link') {
@@ -118,6 +129,7 @@ export function ImageItem({
         contentFit="cover"
         accessible={true}
         accessibilityIgnoresInvertColors
+        useAppleWebpCodec
       />
       <MediaInsetBorder style={[a.rounded_xs]} />
       {children}
@@ -156,6 +168,45 @@ export function VideoItem({
   )
 }
 
+function PeekableImageItem({image}: {image: AppBskyEmbedImages.ViewImage}) {
+  const {t: l} = useLingui()
+  const saveImage = useSaveImageToMediaLibrary()
+
+  const aspect =
+    image.aspectRatio && image.aspectRatio.height > 0
+      ? image.aspectRatio.width / image.aspectRatio.height
+      : undefined
+
+  return (
+    <PeekMenu.Root style={[a.flex_1, {maxWidth: 100}]}>
+      <PeekMenu.Trigger
+        preview={{
+          type: 'image',
+          uri: image.fullsize,
+          thumbUri: image.thumb,
+          aspectRatio: aspect && aspect > 0 ? aspect : 1,
+        }}
+        borderRadius={tokens.borderRadius.xs}>
+        <ImageItem thumbnail={image.thumb} alt={image.alt} />
+      </PeekMenu.Trigger>
+      <PeekMenu.Menu>
+        <PeekMenu.MenuItem
+          id="save"
+          onSelect={() => void saveImage(image.fullsize)}>
+          <PeekMenu.MenuItemIcon icon={DownloadIcon} />
+          <PeekMenu.MenuItemText>{l`Save image`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+        <PeekMenu.MenuItem
+          id="share"
+          onSelect={() => void shareImageModal({uri: image.fullsize})}>
+          <PeekMenu.MenuItemIcon icon={ShareIcon} />
+          <PeekMenu.MenuItemText>{l`Share`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+      </PeekMenu.Menu>
+    </PeekMenu.Root>
+  )
+}
+
 const styles = StyleSheet.create({
   altContainer: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',

src/components/PeekMenu.tsx

@@ -0,0 +1 @@
+export * from '@bsky.app/peek-menu'

src/components/Post/Embed/ChatInviteEmbed.tsx

@@ -0,0 +1,41 @@
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {type AppBskyEmbedExternal} from '@atproto/api'
+
+import {useJoinLinkPreviewsQuery} from '#/state/queries/join-links'
+import {useSession} from '#/state/session'
+import {atoms as a} from '#/alf'
+import {ExternalEmbed} from '#/components/Post/Embed/ExternalEmbed'
+import {JoinRequestEmbed} from '#/components/Post/Embed/JoinRequestEmbed'
+
+export function ChatInviteEmbed({
+  code,
+  link,
+  onOpen,
+  style,
+}: {
+  code: string
+  link: AppBskyEmbedExternal.ViewExternal
+  onOpen?: () => void
+  style?: StyleProp<ViewStyle>
+}) {
+  const {hasSession} = useSession()
+  const {data, error, isPending} = useJoinLinkPreviewsQuery({
+    codes: [code],
+    hasSession,
+  })
+
+  const preview = data?.joinLinkPreviews[0]
+
+  if (error) {
+    return <ExternalEmbed link={link} onOpen={onOpen} style={style} />
+  }
+
+  return (
+    <JoinRequestEmbed
+      loading={isPending}
+      preview={preview}
+      style={[a.mt_sm, style]}
+      onOpen={onOpen}
+    />
+  )
+}

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -108,6 +108,7 @@ export const ExternalEmbed = ({
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
               loading="lazy"
+              useAppleWebpCodec
             />
           ) : undefined}
 

src/components/Post/Embed/ImageContextMenu.tsx

@@ -0,0 +1,79 @@
+import {type ReactNode} from 'react'
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {useLingui} from '@lingui/react/macro'
+
+import {shareImageModal} from '#/lib/media/manip'
+import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
+import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
+import * as PeekMenu from '#/components/PeekMenu'
+import {IS_IOS} from '#/env'
+
+/**
+ * Wraps an image embed with the iOS peek-and-menu interaction. On non-iOS
+ * platforms this renders children unchanged.
+ *
+ * The aspect ratio is consumed by the native side to size the preview
+ * viewController correctly — which is what makes the lift animation clean
+ * for portrait/panorama images.
+ */
+export function ImageContextMenu({
+  fullsizeUri,
+  thumbUri,
+  aspectRatio,
+  borderRadius,
+  onPreviewPress,
+  style,
+  children,
+}: {
+  fullsizeUri: string
+  /** Thumbnail URL. Used as an instant placeholder in the native preview
+   *  while the fullsize loads, so there's no black flash on first peek. */
+  thumbUri?: string
+  /** width / height; defaults to 1 if missing. */
+  aspectRatio: number | undefined
+  borderRadius?: number
+  onPreviewPress?: () => void
+  style?: StyleProp<ViewStyle>
+  children: ReactNode
+}) {
+  const {t: l} = useLingui()
+  const saveImage = useSaveImageToMediaLibrary()
+
+  if (!IS_IOS) {
+    return children
+  }
+
+  const handleSave = () => {
+    void saveImage(fullsizeUri)
+  }
+  const handleShare = () => {
+    void shareImageModal({uri: fullsizeUri})
+  }
+
+  return (
+    <PeekMenu.Root style={style}>
+      <PeekMenu.Trigger
+        preview={{
+          type: 'image',
+          uri: fullsizeUri,
+          thumbUri,
+          aspectRatio: aspectRatio && aspectRatio > 0 ? aspectRatio : 1,
+        }}
+        borderRadius={borderRadius}
+        onPreviewPress={onPreviewPress}>
+        {children}
+      </PeekMenu.Trigger>
+      <PeekMenu.Menu>
+        <PeekMenu.MenuItem id="save" onSelect={handleSave}>
+          <PeekMenu.MenuItemIcon icon={DownloadIcon} />
+          <PeekMenu.MenuItemText>{l`Save image`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+        <PeekMenu.MenuItem id="share" onSelect={handleShare}>
+          <PeekMenu.MenuItemIcon icon={ShareIcon} />
+          <PeekMenu.MenuItemText>{l`Share`}</PeekMenu.MenuItemText>
+        </PeekMenu.MenuItem>
+      </PeekMenu.Menu>
+    </PeekMenu.Root>
+  )
+}

src/components/Post/Embed/ImageEmbed.tsx

@@ -1,3 +1,4 @@
+import {useRef} from 'react'
 import {InteractionManager, View} from 'react-native'
 import {type AnimatedRef} from 'react-native-reanimated'
 import {Image} from 'expo-image'
@@ -8,6 +9,7 @@ import {Gallery} from '#/components/images/Gallery'
 import {ImageLayoutGrid} from '#/components/images/ImageLayoutGrid'
 import {useLightboxControls} from '#/components/Lightbox/state'
 import {type Dimensions} from '#/components/Lightbox/types'
+import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {useAnalytics} from '#/analytics'
 import {type EmbedType} from '#/types/bsky/post'
@@ -24,6 +26,11 @@ export function ImageEmbed({
   const {images} = embed.view
   const galleryEnabled = ax.features.enabled(ax.features.PostGalleryEmbedEnable)
 
+  // Captured from AutoSizedImage so the peek-commit handler can reuse the same
+  // ref + dims that a tap would — keeps the lightbox's return animation intact.
+  const singleContainerRef = useRef<AnimatedRef<any> | null>(null)
+  const singleDimsRef = useRef<Dimensions | null>(null)
+
   if (images.length > 0) {
     const items = images.map(img => ({
       uri: img.fullsize,
@@ -59,24 +66,45 @@ export function ImageEmbed({
 
     if (images.length === 1) {
       const image = images[0]
+      const aspect =
+        image.aspectRatio && image.aspectRatio.height > 0
+          ? image.aspectRatio.width / image.aspectRatio.height
+          : undefined
+      const openFromSingle = () => {
+        if (singleContainerRef.current) {
+          onPress(0, [singleContainerRef.current], [singleDimsRef.current])
+        }
+      }
       return (
         <View style={[a.mt_sm, rest.style]}>
-          <AutoSizedImage
-            crop={
-              rest.viewContext === PostEmbedViewContext.ThreadHighlighted
-                ? 'none'
-                : rest.viewContext ===
-                    PostEmbedViewContext.FeedEmbedRecordWithMedia
-                  ? 'square'
-                  : 'constrained'
-            }
-            image={image}
-            onPress={(containerRef, dims) => onPress(0, [containerRef], [dims])}
-            onPressIn={() => onPressIn(0)}
-            hideBadge={
-              rest.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-            }
-          />
+          <ImageContextMenu
+            fullsizeUri={image.fullsize}
+            thumbUri={image.thumb}
+            aspectRatio={aspect}
+            borderRadius={tokens.borderRadius.md}
+            onPreviewPress={openFromSingle}>
+            <AutoSizedImage
+              crop={
+                rest.viewContext === PostEmbedViewContext.ThreadHighlighted
+                  ? 'none'
+                  : rest.isWithinQuote
+                    ? 'square'
+                    : 'constrained'
+              }
+              image={image}
+              onContainerRef={ref => {
+                singleContainerRef.current = ref
+              }}
+              onDimsChange={dims => {
+                singleDimsRef.current = dims
+              }}
+              onPress={(containerRef, dims) =>
+                onPress(0, [containerRef], [dims])
+              }
+              onPressIn={() => onPressIn(0)}
+              hideBadge={rest.isWithinQuote}
+            />
+          </ImageContextMenu>
         </View>
       )
     }
@@ -89,6 +117,7 @@ export function ImageEmbed({
             onPress={onPress}
             onPressIn={onPressIn}
             viewContext={rest.viewContext}
+            isWithinQuote={rest.isWithinQuote}
           />
         </View>
       )

src/components/Post/Embed/JoinRequestEmbed.tsx

@@ -0,0 +1,271 @@
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {type ChatBskyGroupDefs} from '@atproto/api'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
+import {useNavigation} from '@react-navigation/native'
+
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {type NavigationProp} from '#/lib/routes/types'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {atoms as a, useTheme} from '#/alf'
+import {AvatarBubbles} from '#/components/AvatarBubbles'
+import {
+  Button,
+  type ButtonColor,
+  ButtonIcon,
+  ButtonText,
+} from '#/components/Button'
+import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
+import {ArrowBoxRight_Stroke2_Corner3_Rounded as JoinIcon} from '#/components/icons/ArrowBoxRight'
+import {CheckThick_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {RaisingHand4Finger_Stroke2_Corner2_Rounded as HandIcon} from '#/components/icons/RaisingHand'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {useIntentDialogs} from '#/components/intents/IntentDialogs'
+import {Loader} from '#/components/Loader'
+import {ProfileBadges} from '#/components/ProfileBadges'
+import {Text} from '#/components/Typography'
+
+const JOIN_REQUEST_EMBED_HEIGHT = 152
+
+export function JoinRequestEmbed({
+  loading = false,
+  preview,
+  style,
+  onOpen,
+}: {
+  loading?: boolean
+  preview?: ChatBskyGroupDefs.JoinLinkPreviewView
+  style?: StyleProp<ViewStyle>
+  onOpen?: () => void
+}) {
+  const t = useTheme()
+
+  if (loading) {
+    return (
+      <View
+        style={[
+          a.align_center,
+          a.justify_center,
+          a.p_lg,
+          a.border,
+          a.rounded_lg,
+          t.atoms.border_contrast_high,
+          {height: JOIN_REQUEST_EMBED_HEIGHT},
+          style,
+        ]}>
+        <Loader size="md" fill={t.atoms.text.color} />
+      </View>
+    )
+  }
+
+  if (!preview) {
+    return (
+      <View
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          a.p_lg,
+          a.gap_xs,
+          a.border,
+          a.rounded_lg,
+          t.atoms.border_contrast_high,
+          t.atoms.bg_contrast_25,
+          {height: JOIN_REQUEST_EMBED_HEIGHT},
+          style,
+        ]}>
+        <WarningIcon size="md" fill={t.atoms.text_contrast_medium.color} />
+        <Text style={[a.text_sm, a.font_medium, t.atoms.text_contrast_medium]}>
+          <Trans>Chat invite link no longer available</Trans>
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <JoinRequestEmbedInner preview={preview} style={style} onOpen={onOpen} />
+  )
+}
+
+function JoinRequestEmbedInner({
+  preview,
+  style,
+  onOpen,
+}: {
+  preview: ChatBskyGroupDefs.JoinLinkPreviewView
+  style?: StyleProp<ViewStyle>
+  onOpen?: () => void
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+
+  const {groupChatJoinDialogControl, setGroupChatJoinState} = useIntentDialogs()
+
+  const ownerDisplayName = createSanitizedDisplayName(preview.owner)
+  const ownerHandle = sanitizeHandle(preview.owner.handle, '@')
+
+  const avatarProfiles = preview.convo?.members ?? [preview.owner]
+
+  const convoId = preview.convo?.id
+  const isFollowing = preview.owner.viewer?.following ?? false
+  const hasRequested = !convoId && preview.viewer?.requestedAt != null
+
+  let canJoin = true
+  let ButtonIconImage = JoinIcon
+  let buttonText = preview.requireApproval ? l`Request to join` : l`Join`
+  let buttonColor: ButtonColor = 'primary'
+  if (preview.enabledStatus !== 'enabled') {
+    canJoin = false
+    ButtonIconImage = WarningIcon
+    buttonText = l`Chat invite link no longer available`
+    buttonColor = 'secondary'
+  } else if (preview.memberCount >= preview.memberLimit) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`This chat is full`
+    buttonColor = 'secondary'
+  } else if (preview.joinRule === 'followedByOwner' && !isFollowing) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`Only people the chat owner follows can join`
+    buttonColor = 'secondary'
+  } else if (hasRequested) {
+    ButtonIconImage = CheckIcon
+    buttonText = l`Requested`
+    buttonColor = 'secondary'
+  }
+
+  return (
+    <View
+      style={[
+        a.justify_between,
+        a.border,
+        a.rounded_lg,
+        a.p_lg,
+        a.gap_lg,
+        t.atoms.border_contrast_high,
+        {height: JOIN_REQUEST_EMBED_HEIGHT},
+        style,
+      ]}>
+      <View style={[a.flex_row, a.gap_md, a.align_center]}>
+        <AvatarBubbles size={56} self profiles={avatarProfiles} />
+        <View style={[a.flex_1]}>
+          <Text
+            emoji
+            style={[a.text_lg, a.font_bold, a.leading_tight, t.atoms.text]}
+            numberOfLines={1}>
+            {preview.name}
+          </Text>
+          <View
+            style={[a.flex_row, a.align_center, a.gap_sm, a.mt_2xs, a.mb_sm]}>
+            <Text
+              style={[
+                a.text_xs,
+                a.leading_tight,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans>Group chat</Trans>
+            </Text>
+            <Text
+              style={[
+                a.text_xs,
+                a.leading_tight,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans comment="The number of members in a group chat, in the format '{members}/{total} members'.">
+                {preview.memberCount}/{preview.memberLimit}{' '}
+                <Plural
+                  value={preview.memberCount}
+                  one="member"
+                  other="members"
+                />
+              </Trans>
+            </Text>
+          </View>
+          <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+            <Text
+              emoji
+              style={[
+                a.flex_shrink,
+                a.text_sm,
+                a.font_medium,
+                a.leading_tight,
+                t.atoms.text,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              <Trans comment="The group chat creator, in the format 'By {displayName}'.">
+                By{' '}
+                <Text style={[a.font_medium, t.atoms.text]}>
+                  {ownerDisplayName}
+                </Text>
+              </Trans>
+            </Text>
+            <ProfileBadges profile={preview.owner} size="sm" />
+            <Text
+              style={[
+                a.flex_shrink,
+                a.text_sm,
+                a.font_medium,
+                a.leading_tight,
+                t.atoms.text_contrast_medium,
+              ]}
+              allowFontScaling
+              numberOfLines={1}>
+              {ownerHandle}
+            </Text>
+          </View>
+        </View>
+      </View>
+      {convoId ? (
+        <Button
+          testID="openButton"
+          onPress={() => {
+            onOpen?.()
+            navigation.navigate('MessagesConversation', {conversation: convoId})
+          }}
+          label={l`Open group chat`}
+          accessibilityHint={l`Tap to open this group chat`}
+          size="large"
+          color="primary"
+          style={[a.w_full]}>
+          <ButtonText>
+            <Trans>Open chat</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ArrowRightIcon} />
+        </Button>
+      ) : (
+        <Button
+          testID="joinButton"
+          onPress={() => {
+            onOpen?.()
+            setGroupChatJoinState({code: preview.code})
+            groupChatJoinDialogControl.open()
+          }}
+          label={
+            preview.requireApproval
+              ? l`Request access to group chat`
+              : l`Join group chat`
+          }
+          accessibilityHint={
+            preview.requireApproval
+              ? l`Tap to request access to join this group chat`
+              : l`Tap to join this group chat immediately`
+          }
+          size="large"
+          color={buttonColor}
+          disabled={!canJoin}
+          style={[a.w_full]}>
+          <ButtonIcon icon={ButtonIconImage} />
+          <ButtonText>{buttonText}</ButtonText>
+        </Button>
+      )}
+    </View>
+  )
+}

src/components/Post/Embed/StandardSiteEmbed/index.tsx

@@ -166,6 +166,7 @@ export const StandardSiteEmbed = ({
             source={{uri: imageUri}}
             accessibilityIgnoresInvertColors
             loading="lazy"
+            useAppleWebpCodec
           />
         ) : undefined}
 

src/components/Post/Embed/index.tsx

@@ -12,6 +12,7 @@ import {Trans} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {makeProfileLink} from '#/lib/routes/links'
+import {getChatInviteCodeFromUrl} from '#/lib/strings/url-helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {unstableCacheProfileView} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -33,6 +34,7 @@ import {
   type EmbedType,
   parseEmbed,
 } from '#/types/bsky/post'
+import {ChatInviteEmbed} from './ChatInviteEmbed'
 import {ExternalEmbed} from './ExternalEmbed'
 import {ModeratedFeedEmbed} from './FeedEmbed'
 import {ImageEmbed} from './ImageEmbed'
@@ -110,6 +112,21 @@ function MediaEmbed({
           </ContentHider>
         )
       }
+      const chatInviteCode = getChatInviteCodeFromUrl(embed.view.external.uri)
+      if (chatInviteCode) {
+        return (
+          <ContentHider
+            modui={rest.moderation?.ui('contentMedia')}
+            activeStyle={[a.mt_sm]}>
+            <ChatInviteEmbed
+              code={chatInviteCode}
+              link={embed.view.external}
+              onOpen={rest.onOpen}
+              style={rest.style}
+            />
+          </ContentHider>
+        )
+      }
       return (
         <ContentHider
           modui={rest.moderation?.ui('contentMedia')}

src/components/Prompt.tsx

@@ -224,6 +224,7 @@ export function Basic({
   cancelButtonCta,
   confirmButtonCta,
   onConfirm,
+  onClose,
   confirmButtonColor,
   showCancel = true,
 }: React.PropsWithChildren<{
@@ -240,11 +241,12 @@ export function Basic({
    * should NOT close the dialog as a side effect of this method.
    */
   onConfirm: (e: GestureResponderEvent) => void
+  onClose?: () => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
 }>) {
   return (
-    <Outer control={control} testID="confirmModal">
+    <Outer control={control} testID="confirmModal" onClose={onClose}>
       <Content>
         <TitleText>{title}</TitleText>
         {description && <DescriptionText>{description}</DescriptionText>}

src/components/RichText.tsx

@@ -66,7 +66,7 @@ export function RichText({
     }
   }, [value])
 
-  const plainStyles = [a.leading_snug, style]
+  const plainStyles = style
   const interactiveStyles = [plainStyles, interactiveStyle]
 
   const {text, facets} = richText

src/components/Toast/Toast.tsx

@@ -8,8 +8,10 @@ import {
   type UninheritableButtonProps,
 } from '#/components/Button'
 import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
-import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
+import {
+  CircleInfo_Stroke2_Corner0_Rounded as CircleInfo,
+  CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon,
+} from '#/components/icons/CircleInfo'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {dismiss} from '#/components/Toast/sonner'

src/components/Typography.tsx

@@ -31,6 +31,7 @@ export function Text({
     [
       a.text_sm,
       t.atoms.text,
+      a.leading_snug,
       web(numberOfLines === 1 && numberOfLinesClippingFix),
       style,
     ],

src/components/contacts/FindContactsBannerNUX.tsx

@@ -60,6 +60,7 @@ export function FindContactsBannerNUX() {
                 a.self_end,
                 a.mt_sm,
               ]}
+              useAppleWebpCodec
             />
             <View style={[a.flex_1, a.justify_center, a.py_xl, a.pr_5xl]}>
               <Text

src/components/contacts/components/HeroImage.tsx

@@ -27,6 +27,7 @@ export function ContactsHeroImage() {
         alt={_(
           msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
         )}
+        useAppleWebpCodec
       />
     </View>
   )

src/components/dialogs/nuxs/ActivitySubscriptions.tsx

@@ -113,6 +113,7 @@ export function ActivitySubscriptionsNUX() {
                 alt={_(
                   msg`A screenshot of a profile page with a bell icon next to the follow button, indicating the new activity notifications feature.`,
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>

src/components/dialogs/nuxs/BookmarksAnnouncement.tsx

@@ -124,6 +124,7 @@ export function BookmarksAnnouncement() {
                       'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
                   }),
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>

src/components/dialogs/nuxs/DraftsAnnouncement.tsx

@@ -101,6 +101,7 @@ export function DraftsAnnouncement() {
                   'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
               }),
             )}
+            useAppleWebpCodec
           />
         </View>
         <View style={[a.align_center, a.px_xl, a.pt_xl, a.gap_2xl, a.pb_sm]}>

src/components/dialogs/nuxs/FindContactsAnnouncement.tsx

@@ -78,6 +78,7 @@ export function FindContactsAnnouncement() {
               alt={_(
                 msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
               )}
+              useAppleWebpCodec
             />
           </View>
         </View>

src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx

@@ -85,6 +85,7 @@ export function InitialVerificationAnnouncement() {
               alt={_(
                 msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
               )}
+              useAppleWebpCodec
             />
           </View>
 
@@ -119,6 +120,7 @@ export function InitialVerificationAnnouncement() {
               alt={_(
                 msg`An mockup of a iPhone showing the Bluesky app open to the profile of a verified user with a blue checkmark next to their display name.`,
               )}
+              useAppleWebpCodec
             />
           </View>
 

src/components/dialogs/nuxs/LiveNowBetaDialog.tsx

@@ -150,6 +150,7 @@ export function LiveNowBetaDialog() {
                       'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
                   }),
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>

src/components/dms/AddMembersFlow.tsx

@@ -219,7 +219,7 @@ export function AddMembersFlow({
       }
     }
 
-    if (searchText === '') {
+    if (searchText === '' && _items.length > 0) {
       _items.unshift({
         type: 'label',
         key: 'suggested',

src/components/dms/AfterReportDialog.tsx

@@ -33,14 +33,19 @@ export const AfterReportDialog = memo(function BlockOrDeleteDialogInner({
   control,
   params,
   currentScreen,
+  onClose,
 }: {
   control: Dialog.DialogControlProps
   params: ReportDialogParams
   currentScreen: 'list' | 'conversation'
+  onClose?: () => void
 }): React.ReactNode {
   const {t: l} = useLingui()
   return (
-    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+    <Dialog.Outer
+      control={control}
+      onClose={onClose}
+      nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={l`Would you like to block this user and/or delete this conversation?`}

src/components/dms/InitiateChatFlow.tsx

@@ -316,6 +316,7 @@ export function InitiateChatFlow({
 
     if (
       searchText === '' &&
+      _items.length > 0 &&
       (chatState === ChatState.NEW_CHAT ||
         chatState === ChatState.NEW_GROUP_CHAT)
     ) {

src/components/dms/MessageContextMenu.tsx

@@ -1,5 +1,5 @@
 import {memo, useCallback} from 'react'
-import {LayoutAnimation, Platform} from 'react-native'
+import {Platform} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import {
   type ChatBskyConvoDefs,
@@ -7,26 +7,21 @@ import {
   RichText,
 } from '@atproto/api'
 import {useLingui} from '@lingui/react/macro'
-import {useQueryClient} from '@tanstack/react-query'
 
 import {useGoogleTranslate} from '#/lib/hooks/useGoogleTranslate'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
 import {useConvoActive} from '#/state/messages/convo'
 import {useLanguagePrefs} from '#/state/preferences'
-import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
 import {useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
 import * as ContextMenu from '#/components/ContextMenu'
 import {type TriggerProps} from '#/components/ContextMenu/types'
-import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
+import {useMessageDialogs} from '#/components/dms/MessageOverlays'
 import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {Flag_Stroke2_Corner0_Rounded as FlagIcon} from '#/components/icons/Flag'
 import {Language_Stroke2_Corner2_Rounded as LanguageIcon} from '#/components/icons/Language'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
-import {ReportDialog} from '#/components/moderation/ReportDialog'
-import * as Prompt from '#/components/Prompt'
-import {usePromptControl} from '#/components/Prompt'
 import * as Toast from '#/components/Toast'
 import {useAnalytics} from '#/analytics'
 import {IS_NATIVE} from '#/env'
@@ -48,11 +43,8 @@ export let MessageContextMenu = ({
   const {t: l, i18n} = useLingui()
   const ax = useAnalytics()
   const {currentAccount} = useSession()
-  const queryClient = useQueryClient()
   const convo = useConvoActive()
-  const deleteControl = usePromptControl()
-  const reportControl = usePromptControl()
-  const blockOrDeleteControl = usePromptControl()
+  const {openDeleteMessage, openReportMessage} = useMessageDialogs()
   const langPrefs = useLanguagePrefs()
   const translate = useGoogleTranslate()
 
@@ -93,14 +85,6 @@ export let MessageContextMenu = ({
     })
   }, [ax, langPrefs.primaryLanguage, message.text, translate])
 
-  const onDelete = useCallback(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    convo
-      .deleteMessage(message.id)
-      .then(() => Toast.show(l({message: 'Message deleted', context: 'toast'})))
-      .catch(() => Toast.show(l`Failed to delete message`))
-  }, [l, convo, message.id])
-
   const onEmojiSelect = useCallback(
     (emoji: string) => {
       if (
@@ -128,104 +112,72 @@ export let MessageContextMenu = ({
   const sender = senderProfile
 
   return (
-    <>
-      <ContextMenu.Root>
-        {IS_NATIVE && reactionsAvailable && (
-          <ContextMenu.AuxiliaryView
-            align={isFromSelf ? 'right' : 'left'}
-            style={[isFromSelf && isGroupChatEnabled ? null : a.ml_sm]}>
-            <EmojiReactionPicker
-              message={message}
-              onEmojiSelect={onEmojiSelect}
-            />
-          </ContextMenu.AuxiliaryView>
-        )}
-
-        <ContextMenu.Trigger
-          label={l`Message options`}
-          contentLabel={l`Message from @${
-            sender?.handle ?? 'unknown' // should always be defined
-          }: ${message.text}`}>
-          {children}
-        </ContextMenu.Trigger>
-
-        <ContextMenu.Outer
+    <ContextMenu.Root>
+      {IS_NATIVE && reactionsAvailable && (
+        <ContextMenu.AuxiliaryView
           align={isFromSelf ? 'right' : 'left'}
-          label={l`Sent at ${i18n.date(new Date(message.sentAt), {
-            timeStyle: 'short',
-          })}`}
           style={[isFromSelf && isGroupChatEnabled ? null : a.ml_sm]}>
-          {message.text.length > 0 && (
-            <>
-              <ContextMenu.Item
-                testID="messageDropdownTranslateBtn"
-                label={l`Translate`}
-                onPress={onPressTranslateMessage}>
-                <ContextMenu.ItemIcon icon={LanguageIcon} position="left" />
-                <ContextMenu.ItemText>{l`Translate`}</ContextMenu.ItemText>
-              </ContextMenu.Item>
-              <ContextMenu.Item
-                testID="messageDropdownCopyBtn"
-                label={l`Copy message text`}
-                onPress={onCopyMessage}>
-                <ContextMenu.ItemIcon icon={ClipboardIcon} position="left" />
-                <ContextMenu.ItemText>
-                  {l`Copy message text`}
-                </ContextMenu.ItemText>
-              </ContextMenu.Item>
-            </>
-          )}
+          <EmojiReactionPicker
+            message={message}
+            onEmojiSelect={onEmojiSelect}
+          />
+        </ContextMenu.AuxiliaryView>
+      )}
+
+      <ContextMenu.Trigger
+        label={l`Message options`}
+        contentLabel={l`Message from @${
+          sender?.handle ?? 'unknown' // should always be defined
+        }: ${message.text}`}>
+        {children}
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Outer
+        align={isFromSelf ? 'right' : 'left'}
+        label={l`Sent at ${i18n.date(new Date(message.sentAt), {
+          timeStyle: 'short',
+        })}`}
+        style={[isFromSelf && isGroupChatEnabled ? null : a.ml_sm]}>
+        {message.text.length > 0 && (
+          <>
+            <ContextMenu.Item
+              testID="messageDropdownTranslateBtn"
+              label={l`Translate`}
+              onPress={onPressTranslateMessage}>
+              <ContextMenu.ItemIcon icon={LanguageIcon} position="left" />
+              <ContextMenu.ItemText>{l`Translate`}</ContextMenu.ItemText>
+            </ContextMenu.Item>
+            <ContextMenu.Item
+              testID="messageDropdownCopyBtn"
+              label={l`Copy message text`}
+              onPress={onCopyMessage}>
+              <ContextMenu.ItemIcon icon={ClipboardIcon} position="left" />
+              <ContextMenu.ItemText>
+                {l`Copy message text`}
+              </ContextMenu.ItemText>
+            </ContextMenu.Item>
+          </>
+        )}
+        <ContextMenu.Item
+          destructive
+          testID="messageDropdownDeleteBtn"
+          label={l`Delete message for me`}
+          onPress={() => openDeleteMessage(message)}>
+          <ContextMenu.ItemIcon icon={TrashIcon} position="left" />
+          <ContextMenu.ItemText>{l`Delete for me`}</ContextMenu.ItemText>
+        </ContextMenu.Item>
+        {!isFromSelf && (
           <ContextMenu.Item
             destructive
-            testID="messageDropdownDeleteBtn"
-            label={l`Delete message for me`}
-            onPress={() => deleteControl.open()}>
-            <ContextMenu.ItemIcon icon={TrashIcon} position="left" />
-            <ContextMenu.ItemText>{l`Delete for me`}</ContextMenu.ItemText>
+            testID="messageDropdownReportBtn"
+            label={l`Report message`}
+            onPress={() => openReportMessage(message, senderProfile)}>
+            <ContextMenu.ItemIcon icon={FlagIcon} position="left" />
+            <ContextMenu.ItemText>{l`Report`}</ContextMenu.ItemText>
           </ContextMenu.Item>
-          {!isFromSelf && (
-            <ContextMenu.Item
-              destructive
-              testID="messageDropdownReportBtn"
-              label={l`Report message`}
-              onPress={() => reportControl.open()}>
-              <ContextMenu.ItemIcon icon={FlagIcon} position="left" />
-              <ContextMenu.ItemText>{l`Report`}</ContextMenu.ItemText>
-            </ContextMenu.Item>
-          )}
-        </ContextMenu.Outer>
-      </ContextMenu.Root>
-      <ReportDialog
-        control={reportControl}
-        subject={{
-          view: 'message',
-          convoId: convo.convo.view.id,
-          message,
-        }}
-        onAfterSubmit={() => {
-          if (sender) {
-            unstableCacheProfileView(queryClient, sender)
-          }
-          blockOrDeleteControl.open()
-        }}
-      />
-      <AfterReportDialog
-        control={blockOrDeleteControl}
-        currentScreen="conversation"
-        params={{
-          convoId: convo.convo.view.id,
-          did: message.sender.did,
-        }}
-      />
-      <Prompt.Basic
-        control={deleteControl}
-        title={l`Delete message`}
-        description={l`Are you sure you want to delete this message? The message will be deleted for you, but not for the other participants.`}
-        confirmButtonCta={l`Delete`}
-        confirmButtonColor="negative"
-        onConfirm={onDelete}
-      />
-    </>
+        )}
+      </ContextMenu.Outer>
+    </ContextMenu.Root>
   )
 }
 MessageContextMenu = memo(MessageContextMenu)

src/components/dms/MessageItem.tsx

@@ -40,8 +40,8 @@ import {useSession} from '#/state/session'
 import {atoms as a, native, platform, useTheme} from '#/alf'
 import {isOnlyEmoji} from '#/alf/typography'
 import {Button} from '#/components/Button'
-import {useDialogControl} from '#/components/Dialog'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
+import {useMessageDialogs} from '#/components/dms/MessageOverlays'
 import {InlineLinkText, Link} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import * as Prompt from '#/components/Prompt'
@@ -49,7 +49,7 @@ import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 import {DateDivider} from './DateDivider'
 import {MessageItemEmbed} from './MessageItemEmbed'
-import {ReactionsDialog} from './ReactionsDialog'
+import {groupReactions} from './ReactionsDialog'
 import {CLUSTERED_MESSAGE_THRESHOLD_MS, MESSAGE_GAP_THRESHOLD_MS} from './util'
 
 const AVATAR_SIZE = 28
@@ -118,7 +118,7 @@ let MessageItem = ({
   const {message} = item
   const profile = useMaybeProfileShadow(relatedProfiles.get(message.sender.did))
 
-  const reactionsControl = useDialogControl()
+  const {openReactions} = useMessageDialogs()
 
   const isPending = item.type === 'pending-message'
 
@@ -243,34 +243,10 @@ let MessageItem = ({
       <ProfileCard.AvatarPlaceholder size={AVATAR_SIZE} />
     )
 
-  const groupedReactions = useMemo(() => {
-    const reactions = message.reactions ?? []
-    const grouped = new Map<
-      string,
-      {
-        key: string
-        value: string
-        senders: ChatBskyConvoDefs.ReactionViewSender[]
-        count: number
-      }
-    >()
-    for (const reaction of reactions) {
-      if (!reaction) continue
-      const existing = grouped.get(reaction.value)
-      if (existing) {
-        existing.senders.push(reaction.sender)
-        existing.count++
-      } else {
-        grouped.set(reaction.value, {
-          key: reaction.value,
-          value: reaction.value,
-          senders: [reaction.sender],
-          count: 1,
-        })
-      }
-    }
-    return Array.from(grouped.values())
-  }, [message.reactions])
+  const groupedReactions = useMemo(
+    () => groupReactions(message.reactions),
+    [message.reactions],
+  )
 
   const reactions = useMemo(() => message.reactions ?? [], [message.reactions])
 
@@ -336,7 +312,7 @@ let MessageItem = ({
                 transform: [{translateY: -8}],
               },
             ]}
-            onPress={isGroupChat ? reactionsControl.open : undefined}>
+            onPress={isGroupChat ? () => openReactions(message) : undefined}>
             {groupedReactions.map(group => (
               <Animated.View
                 entering={native(ZoomIn.springify(200).delay(400))}
@@ -377,13 +353,6 @@ let MessageItem = ({
           </Pressable>
         </View>
       ) : null}
-      <ReactionsDialog
-        control={reactionsControl}
-        relatedProfiles={relatedProfiles}
-        message={message}
-        reactions={message.reactions}
-        groupedReactions={groupedReactions}
-      />
     </LayoutAnimationConfig>
   )
 

src/components/dms/MessageOverlays.tsx

@@ -0,0 +1,175 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {LayoutAnimation} from 'react-native'
+import {type ChatBskyConvoDefs} from '@atproto/api'
+import {useLingui} from '@lingui/react/macro'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {useConvoActive} from '#/state/messages/convo'
+import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
+import {useDialogControl} from '#/components/Dialog'
+import {AfterReportDialog} from '#/components/dms/AfterReportDialog'
+import {ReactionsDialog} from '#/components/dms/ReactionsDialog'
+import {ReportDialog} from '#/components/moderation/ReportDialog'
+import * as Prompt from '#/components/Prompt'
+import {usePromptControl} from '#/components/Prompt'
+import * as Toast from '#/components/Toast'
+import type * as bsky from '#/types/bsky'
+
+type MessageDialogsContextType = {
+  openDeleteMessage: (message: ChatBskyConvoDefs.MessageView) => void
+  openReportMessage: (
+    message: ChatBskyConvoDefs.MessageView,
+    senderProfile: bsky.profile.AnyProfileView | undefined,
+  ) => void
+  openReactions: (message: ChatBskyConvoDefs.MessageView) => void
+}
+
+const Context = createContext<MessageDialogsContextType | null>(null)
+
+export function useMessageDialogs() {
+  const ctx = useContext(Context)
+  if (!ctx) {
+    throw new Error('useMessageDialogs must be used within a MessageOverlays')
+  }
+  return ctx
+}
+
+export function MessageOverlays({children}: {children: React.ReactNode}) {
+  const {t: l} = useLingui()
+  const queryClient = useQueryClient()
+  const convo = useConvoActive()
+
+  const deleteControl = usePromptControl()
+  const reportControl = usePromptControl()
+  const afterReportControl = usePromptControl()
+  const reactionsControl = useDialogControl()
+
+  const [deleteTarget, setDeleteTarget] =
+    useState<ChatBskyConvoDefs.MessageView | null>(null)
+  const [reportTarget, setReportTarget] = useState<{
+    message: ChatBskyConvoDefs.MessageView
+    senderProfile: bsky.profile.AnyProfileView | undefined
+  } | null>(null)
+  const [afterReportTarget, setAfterReportTarget] =
+    useState<ChatBskyConvoDefs.MessageView | null>(null)
+  const [reactionsTarget, setReactionsTarget] =
+    useState<ChatBskyConvoDefs.MessageView | null>(null)
+
+  const openDeleteMessage = useCallback(
+    (message: ChatBskyConvoDefs.MessageView) => {
+      setDeleteTarget(message)
+      deleteControl.open()
+    },
+    [deleteControl],
+  )
+
+  const openReportMessage = useCallback(
+    (
+      message: ChatBskyConvoDefs.MessageView,
+      senderProfile: bsky.profile.AnyProfileView | undefined,
+    ) => {
+      setReportTarget({message, senderProfile})
+      reportControl.open()
+    },
+    [reportControl],
+  )
+
+  const openReactions = useCallback(
+    (message: ChatBskyConvoDefs.MessageView) => {
+      setReactionsTarget(message)
+    },
+    [],
+  )
+
+  // These dialogs are conditionally mounted, so we can't open them in the same
+  // tick that we set their targets - the control refs aren't attached yet. Open
+  // in an effect after the dialog has mounted.
+  useEffect(() => {
+    if (reactionsTarget) {
+      reactionsControl.open()
+    }
+  }, [reactionsTarget, reactionsControl])
+
+  useEffect(() => {
+    if (afterReportTarget) {
+      afterReportControl.open()
+    }
+  }, [afterReportTarget, afterReportControl])
+
+  const onConfirmDelete = useCallback(() => {
+    if (!deleteTarget) return
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    convo
+      .deleteMessage(deleteTarget.id)
+      .then(() => Toast.show(l({message: 'Message deleted', context: 'toast'})))
+      .catch(() => Toast.show(l`Failed to delete message`))
+  }, [l, convo, deleteTarget])
+
+  const onAfterReportSubmit = useCallback(() => {
+    if (!reportTarget) return
+    if (reportTarget.senderProfile) {
+      unstableCacheProfileView(queryClient, reportTarget.senderProfile)
+    }
+    setAfterReportTarget(reportTarget.message)
+  }, [queryClient, reportTarget])
+
+  const ctx = useMemo<MessageDialogsContextType>(
+    () => ({openDeleteMessage, openReportMessage, openReactions}),
+    [openDeleteMessage, openReportMessage, openReactions],
+  )
+
+  const reportSubject = reportTarget
+    ? ({
+        view: 'message',
+        convoId: convo.convo.view.id,
+        message: reportTarget.message,
+      } as const)
+    : undefined
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ReportDialog
+        control={reportControl}
+        subject={reportSubject}
+        onAfterSubmit={onAfterReportSubmit}
+        onClose={() => setReportTarget(null)}
+      />
+      {afterReportTarget && (
+        <AfterReportDialog
+          control={afterReportControl}
+          currentScreen="conversation"
+          params={{
+            convoId: convo.convo.view.id,
+            did: afterReportTarget.sender.did,
+          }}
+          onClose={() => setAfterReportTarget(null)}
+        />
+      )}
+      {reactionsTarget && (
+        <ReactionsDialog
+          control={reactionsControl}
+          relatedProfiles={convo.relatedProfiles}
+          message={reactionsTarget}
+          onClose={() => setReactionsTarget(null)}
+        />
+      )}
+      <Prompt.Basic
+        control={deleteControl}
+        title={l`Delete message`}
+        description={l`Are you sure you want to delete this message? The message will be deleted for you, but not for the other participants.`}
+        confirmButtonCta={l`Delete`}
+        confirmButtonColor="negative"
+        onConfirm={onConfirmDelete}
+        onClose={() => setDeleteTarget(null)}
+      />
+    </Context.Provider>
+  )
+}

src/components/dms/ReactionsDialog.tsx

@@ -1,4 +1,4 @@
-import {useRef, useState} from 'react'
+import {useMemo, useRef, useState} from 'react'
 import {
   LayoutAnimation,
   Pressable,
@@ -37,14 +37,12 @@ export function ReactionsDialog({
   control,
   relatedProfiles,
   message,
-  reactions,
-  groupedReactions,
+  onClose,
 }: {
   control: Dialog.DialogControlProps
   relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
   message: ChatBskyConvoDefs.MessageView
-  reactions?: ChatBskyConvoDefs.ReactionView[]
-  groupedReactions?: Reaction[]
+  onClose?: () => void
 }) {
   const {t: l} = useLingui()
 
@@ -54,6 +52,9 @@ export function ReactionsDialog({
 
   const [selected, setSelected] = useState('all')
 
+  const reactions = message.reactions
+  const groupedReactions = useMemo(() => groupReactions(reactions), [reactions])
+
   const filteredReactions = reactions?.filter(
     r => selected === 'all' || r.value === selected,
   )
@@ -78,7 +79,10 @@ export function ReactionsDialog({
   return (
     <Dialog.Outer
       control={control}
-      onClose={() => setSelected('all')}
+      onClose={() => {
+        setSelected('all')
+        onClose?.()
+      }}
       nativeOptions={{
         preventExpansion: true,
         minHeight: screenHeight / 2,
@@ -388,3 +392,25 @@ function ReactionTab({
     </Pressable>
   )
 }
+
+export function groupReactions(
+  reactions: ChatBskyConvoDefs.ReactionView[] | undefined,
+): Reaction[] {
+  const grouped = new Map<string, Reaction>()
+  for (const reaction of reactions ?? []) {
+    if (!reaction) continue
+    const existing = grouped.get(reaction.value)
+    if (existing) {
+      existing.senders.push(reaction.sender)
+      existing.count++
+    } else {
+      grouped.set(reaction.value, {
+        key: reaction.value,
+        value: reaction.value,
+        senders: [reaction.sender],
+        count: 1,
+      })
+    }
+  }
+  return Array.from(grouped.values())
+}

src/components/hooks/useLandingEntry.native.ts

@@ -1,22 +1,45 @@
 import {useEffect, useState} from 'react'
+import * as Linking from 'expo-linking'
 
+import {parseLinkingUrl} from '#/lib/parseLinkingUrl'
 import {
   createStarterPackLinkFromAndroidReferrer,
   httpStarterPackUriToAtUri,
 } from '#/lib/strings/starter-pack'
+import {CHAT_INVITE_CODE_REGEX} from '#/lib/strings/url-helpers'
 import {useHasCheckedForStarterPack} from '#/state/preferences/used-starter-packs'
-import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
+import {
+  useSetActiveLanding,
+  useSetActiveStarterPack,
+} from '#/state/shell/landing'
 import {IS_ANDROID} from '#/env'
 import {Referrer, SharedPrefs} from '../../../modules/expo-bluesky-swiss-army'
 
-export function useStarterPackEntry() {
+export function useLandingEntry() {
   const [ready, setReady] = useState(false)
   const setActiveStarterPack = useSetActiveStarterPack()
+  const setActiveLanding = useSetActiveLanding()
   const hasCheckedForStarterPack = useHasCheckedForStarterPack()
 
   useEffect(() => {
     if (ready) return
 
+    // Check for group chat invite link from the initial deep link URL
+    const linkingUrl = Linking.getLinkingURL()
+    if (linkingUrl) {
+      const urlp = parseLinkingUrl(linkingUrl)
+      const chatInviteMatch = urlp.pathname.match(CHAT_INVITE_CODE_REGEX)
+      if (chatInviteMatch) {
+        setActiveLanding({
+          type: 'groupchat',
+          uri: linkingUrl,
+          code: chatInviteMatch[1],
+        })
+        setReady(true)
+        return
+      }
+    }
+
     // On Android, we cannot clear the referral link. It gets stored for 90 days and all we can do is query for it. So,
     // let's just ensure we never check again after the first time.
     if (hasCheckedForStarterPack) {
@@ -29,7 +52,8 @@ export function useStarterPackEntry() {
       setReady(true)
     }, 500)
 
-    ;(async () => {
+    void (async () => {
+      // Check for starter pack
       let uri: string | null | undefined
 
       if (IS_ANDROID) {
@@ -58,7 +82,7 @@ export function useStarterPackEntry() {
     return () => {
       clearTimeout(timeout)
     }
-  }, [ready, setActiveStarterPack, hasCheckedForStarterPack])
+  }, [ready, setActiveStarterPack, setActiveLanding, hasCheckedForStarterPack])
 
   return ready
 }

src/components/hooks/useLandingEntry.ts

@@ -1,25 +1,27 @@
 import {useEffect, useState} from 'react'
 
 import {httpStarterPackUriToAtUri} from '#/lib/strings/starter-pack'
-import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
+import {useSetActiveStarterPack} from '#/state/shell/landing'
 
-export function useStarterPackEntry() {
+export function useLandingEntry() {
   const [ready, setReady] = useState(false)
-
   const setActiveStarterPack = useSetActiveStarterPack()
 
   useEffect(() => {
     const href = window.location.href
-    const atUri = httpStarterPackUriToAtUri(href)
+    const url = new URL(href)
 
+    // Check for starter pack
+    const atUri = httpStarterPackUriToAtUri(href)
     if (atUri) {
-      const url = new URL(href)
       // Determines if an App Clip is loading this landing page
       const isClip = url.searchParams.get('clip') === 'true'
       setActiveStarterPack({
         uri: atUri,
         isClip,
       })
+      setReady(true)
+      return
     }
 
     setReady(true)

src/components/icons/TEMPLATE.tsx

@@ -1,8 +1,20 @@
-import {forwardRef} from 'react'
+import {
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from 'react'
 import Svg, {Path} from 'react-native-svg'
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
+export type IconWithSvgMeta = ForwardRefExoticComponent<
+  Props & RefAttributes<Svg>
+> & {
+  svgPaths: string[]
+  svgViewBox: string
+  svgStrokeWidth: number
+}
+
 export const IconTemplate_Stroke2_Corner0_Rounded = forwardRef(
   function LogoImpl(props: Props, ref) {
     const {fill, size, style, ...rest} = useCommonSVGProps(props)
@@ -41,7 +53,7 @@ export function createSinglePathSVG({
   strokeLinecap?: 'butt' | 'round' | 'square'
   strokeLinejoin?: 'miter' | 'round' | 'bevel'
 }) {
-  return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+  const Icon = forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     const hasStroke = strokeWidth > 0
@@ -68,7 +80,11 @@ export function createSinglePathSVG({
         />
       </Svg>
     )
-  })
+  }) as IconWithSvgMeta
+  Icon.svgPaths = [path]
+  Icon.svgViewBox = viewBox || '0 0 24 24'
+  Icon.svgStrokeWidth = strokeWidth
+  return Icon
 }
 
 export function createMultiPathSVG({
@@ -78,7 +94,7 @@ export function createMultiPathSVG({
   paths: string[]
   viewBox?: string
 }) {
-  return forwardRef<Svg, Props>(function LogoImpl(props, ref) {
+  const Icon = forwardRef<Svg, Props>(function LogoImpl(props, ref) {
     const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
@@ -102,5 +118,9 @@ export function createMultiPathSVG({
         ))}
       </Svg>
     )
-  })
+  }) as IconWithSvgMeta
+  Icon.svgPaths = paths
+  Icon.svgViewBox = viewBox || '0 0 24 24'
+  Icon.svgStrokeWidth = 0
+  return Icon
 }

src/components/images/AutoSizedImage.tsx

@@ -1,4 +1,4 @@
-import {useMemo, useRef} from 'react'
+import {useEffect, useMemo, useRef} from 'react'
 import {type DimensionValue, Pressable, View} from 'react-native'
 import Animated, {
   type AnimatedRef,
@@ -69,6 +69,8 @@ export function AutoSizedImage({
   onPress,
   onLongPress,
   onPressIn,
+  onContainerRef,
+  onDimsChange,
 }: {
   image: AppBskyEmbedImages.ViewImage
   crop?: 'none' | 'square' | 'constrained'
@@ -79,6 +81,11 @@ export function AutoSizedImage({
   ) => void
   onLongPress?: () => void
   onPressIn?: () => void
+  /** Fires once with the internal container ref so a parent can drive its
+   *  own lightbox-return animation without waiting for an `onPress`. */
+  onContainerRef?: (ref: AnimatedRef<any>) => void
+  /** Fires when the underlying image reports its natural dimensions. */
+  onDimsChange?: (dims: Dimensions) => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -86,6 +93,10 @@ export function AutoSizedImage({
   const containerRef = useAnimatedRef()
   const fetchedDimsRef = useRef<{width: number; height: number} | null>(null)
 
+  useEffect(() => {
+    onContainerRef?.(containerRef)
+  }, [containerRef, onContainerRef])
+
   let aspectRatio: number | undefined
   const dims = image.aspectRatio
   if (dims) {
@@ -122,13 +133,16 @@ export function AutoSizedImage({
         accessibilityHint=""
         onLoad={e => {
           if (!isContain) {
-            fetchedDimsRef.current = {
+            const dims = {
               width: e.source.width,
               height: e.source.height,
             }
+            fetchedDimsRef.current = dims
+            onDimsChange?.(dims)
           }
         }}
         loading="lazy"
+        useAppleWebpCodec
       />
       <MediaInsetBorder />
 

src/components/images/Gallery/index.tsx

@@ -24,7 +24,7 @@ import {mergeRefs} from '#/lib/merge-refs'
 import {useA11y} from '#/state/a11y'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf'
 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
 import {AutoSizedImage} from '#/components/images/AutoSizedImage'
 import {
@@ -36,10 +36,11 @@ import {useKeyboardHandlers} from '#/components/images/Gallery/useKeyboardHandle
 import {usePointerHandlers} from '#/components/images/Gallery/usePointerHandlers'
 import {getAspectRatio} from '#/components/images/Gallery/utils'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
-import {IS_WEB} from '#/env'
+import {IS_ANDROID, IS_WEB} from '#/env'
 
 export * from './const'
 export * from './maybeApplyGalleryOffsetStyles'
@@ -53,6 +54,7 @@ interface GalleryProps {
   ) => void
   onPressIn?: (index: number) => void
   viewContext?: PostEmbedViewContext
+  isWithinQuote?: boolean
 }
 
 const Context = createContext<{
@@ -96,6 +98,7 @@ export function Gallery({
   onPress,
   onPressIn,
   viewContext,
+  isWithinQuote,
 }: GalleryProps) {
   const {t: l} = useLingui()
   const ax = useAnalytics()
@@ -103,14 +106,21 @@ export function Gallery({
   const largeAltBadge = useLargeAltBadgeEnabled()
   const bps = useBreakpoints()
   const window = useWindowDimensions()
-  const isWithinQuote =
-    viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
   const isWithinChat = viewContext === PostEmbedViewContext.ChatMessage
   const hideBadges = isWithinQuote
   const contentHeight = useMemo(() => {
     if (isWithinChat) {
       return 120
     }
+    if (isWithinQuote) {
+      if (bps.gtMobile) {
+        return 220
+      } else if (bps.gtPhone) {
+        return 190
+      } else {
+        return 150
+      }
+    }
     if (bps.gtMobile) {
       return 300
     } else if (bps.gtPhone) {
@@ -118,7 +128,7 @@ export function Gallery({
     } else {
       return 200
     }
-  }, [bps, isWithinChat])
+  }, [bps, isWithinChat, isWithinQuote])
 
   /*
    * Container overflow styles
@@ -219,7 +229,7 @@ export function Gallery({
             crop={
               viewContext === PostEmbedViewContext.ThreadHighlighted
                 ? 'none'
-                : viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+                : isWithinQuote
                   ? 'square'
                   : 'constrained'
             }
@@ -228,9 +238,7 @@ export function Gallery({
               onPress?.(index, [containerRef], [dims])
             }
             onPressIn={() => onPressIn?.(index)}
-            hideBadge={
-              viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-            }
+            hideBadge={isWithinQuote}
           />
         ))}
       </View>
@@ -256,6 +264,9 @@ export function Gallery({
           aria-label={l`Image gallery, ${images.length} images`}
           horizontal
           pagingEnabled={false}
+          // Disable Android's stretch overscroll, which can leave the carousel
+          // settled just off the left edge instead of aligned to x = 0
+          overScrollMode={IS_ANDROID ? 'never' : 'auto'}
           showsHorizontalScrollIndicator={false}
           directionalLockEnabled
           nestedScrollEnabled
@@ -264,6 +275,21 @@ export function Gallery({
           data={images}
           keyExtractor={(item, index) => item.thumb + index}
           renderItem={({item, index}) => {
+            const openLightboxAtIndex = onPress
+              ? () => {
+                  ax.metric('post:gallery:openLightbox', {
+                    fromImage: index + 1, // convert to 1-based index for easier analysis
+                    totalImages: images.length,
+                  })
+                  const refs: AnimatedRef<any>[] = []
+                  const dims: (Dimensions | null)[] = []
+                  for (let i = 0; i < images.length; i++) {
+                    refs.push(containerRefsRef.current.get(i)!)
+                    dims.push(thumbDimsRef.current.get(i) ?? null)
+                  }
+                  onPress(index, refs, dims)
+                }
+              : undefined
             return (
               <GalleryImage
                 hideBadges={hideBadges}
@@ -288,24 +314,9 @@ export function Gallery({
                 onThumbDims={(i, dims) => {
                   thumbDimsRef.current.set(i, dims)
                 }}
-                onPress={
-                  onPress
-                    ? () => {
-                        ax.metric('post:gallery:openLightbox', {
-                          fromImage: index + 1, // convert to 1-based index for easier analysis
-                          totalImages: images.length,
-                        })
-                        const refs: AnimatedRef<any>[] = []
-                        const dims: (Dimensions | null)[] = []
-                        for (let i = 0; i < images.length; i++) {
-                          refs.push(containerRefsRef.current.get(i)!)
-                          dims.push(thumbDimsRef.current.get(i) ?? null)
-                        }
-                        onPress(index, refs, dims)
-                      }
-                    : undefined
-                }
+                onPress={openLightboxAtIndex}
                 onPressIn={onPressIn ? () => onPressIn(index) : undefined}
+                onPreviewPress={openLightboxAtIndex}
               />
             )
           }}
@@ -378,6 +389,7 @@ function GalleryImage({
   onThumbDims,
   onPress,
   onPressIn,
+  onPreviewPress,
 }: {
   contentHeight: number
   image: AppBskyEmbedImages.ViewImage
@@ -391,6 +403,7 @@ function GalleryImage({
   onThumbDims: (index: number, dims: Dimensions) => void
   onPress?: () => void
   onPressIn?: () => void
+  onPreviewPress?: () => void
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
@@ -416,124 +429,132 @@ function GalleryImage({
       collapsable={false}
       aria-roledescription={l`slide`}
       aria-label={image.alt || l`Image ${index + 1} of ${imageCount}`}>
-      <Pressable
-        ref={itemRef}
-        tabIndex={index === 0 ? 0 : -1}
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        accessibilityRole="button"
-        accessibilityLabel={image.alt || l`Image ${index + 1}`}
-        accessibilityHint={l`Opens full image`}
-        android_ripple={{
-          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
-          foreground: true,
-        }}
-        style={({pressed}) => [
-          a.rounded_md,
-          a.overflow_hidden,
-          t.atoms.bg_contrast_25,
-          web([
-            {
-              cursor: 'inherit',
-              outline: 0,
-              border: 0,
-            },
-            a.transition_transform,
-            {transitionDuration: '200ms'},
-            pressed && {transform: [{scale: 0.99}]},
-          ]),
-        ]}>
-        <Image
-          source={{uri: image.thumb}}
-          contentFit="cover"
-          accessible={true}
-          accessibilityLabel={image.alt}
-          accessibilityHint=""
-          accessibilityIgnoresInvertColors
-          loading={index === 0 ? 'eager' : 'lazy'}
-          style={[dims]}
-          onLoad={e => {
-            const ar = getAspectRatio(e.source)
-            if (ar && ar !== aspectRatio) {
-              setAspectRatio(ar)
-            }
-            onThumbDims(index, {
-              width: e.source.width,
-              height: e.source.height,
-            })
+      <ImageContextMenu
+        fullsizeUri={image.fullsize}
+        thumbUri={image.thumb}
+        aspectRatio={aspectRatio}
+        borderRadius={tokens.borderRadius.md}
+        onPreviewPress={onPreviewPress}>
+        <Pressable
+          ref={itemRef}
+          tabIndex={index === 0 ? 0 : -1}
+          onPress={onPress}
+          onPressIn={onPressIn}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          accessibilityRole="button"
+          accessibilityLabel={image.alt || l`Image ${index + 1}`}
+          accessibilityHint={l`Opens full image`}
+          android_ripple={{
+            color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+            foreground: true,
           }}
-        />
-
-        {(hasAlt || isCropped) && !hideBadges ? (
-          <View
-            accessible={false}
-            style={[
-              a.absolute,
-              a.flex_row,
+          style={({pressed}) => [
+            a.rounded_md,
+            a.overflow_hidden,
+            t.atoms.bg_contrast_25,
+            web([
               {
-                bottom: a.p_xs.padding,
-                right: a.p_xs.padding,
-                gap: 3,
+                cursor: 'inherit',
+                outline: 0,
+                border: 0,
               },
-              largeAltBadge && {
-                gap: 4,
-              },
-            ]}>
-            {isCropped && (
-              <View
-                style={[
-                  a.rounded_sm,
-                  a.p_xs,
-                  t.atoms.bg_contrast_25,
-                  {
-                    opacity: 0.8,
-                  },
-                  largeAltBadge && {
-                    padding: 6,
-                  },
-                ]}>
-                <Fullscreen
-                  fill={t.atoms.text_contrast_high.color}
-                  width={largeAltBadge ? 18 : 12}
-                />
-              </View>
-            )}
-            {hasAlt && (
-              <View
-                style={[
-                  a.justify_center,
-                  a.rounded_sm,
-                  a.p_xs,
-                  t.atoms.bg_contrast_25,
-                  {
-                    opacity: 0.8,
-                  },
-                  largeAltBadge && {
-                    padding: 6,
-                  },
-                ]}>
-                <Text
-                  style={[
-                    a.font_bold,
-                    largeAltBadge ? a.text_xs : {fontSize: 8},
-                  ]}>
-                  <Trans>ALT</Trans>
-                </Text>
-              </View>
-            )}
-          </View>
-        ) : null}
+              a.transition_transform,
+              {transitionDuration: '200ms'},
+              pressed && {transform: [{scale: 0.99}]},
+            ]),
+          ]}>
+          <Image
+            source={{uri: image.thumb}}
+            contentFit="cover"
+            accessible={true}
+            accessibilityLabel={image.alt}
+            accessibilityHint=""
+            accessibilityIgnoresInvertColors
+            loading={index === 0 ? 'eager' : 'lazy'}
+            style={[dims]}
+            onLoad={e => {
+              const ar = getAspectRatio(e.source)
+              if (ar && ar !== aspectRatio) {
+                setAspectRatio(ar)
+              }
+              onThumbDims(index, {
+                width: e.source.width,
+                height: e.source.height,
+              })
+            }}
+            useAppleWebpCodec
+          />
 
-        <MediaInsetBorder
-          style={
-            focused && {
-              borderWidth: 2,
+          {(hasAlt || isCropped) && !hideBadges ? (
+            <View
+              accessible={false}
+              style={[
+                a.absolute,
+                a.flex_row,
+                {
+                  bottom: a.p_xs.padding,
+                  right: a.p_xs.padding,
+                  gap: 3,
+                },
+                largeAltBadge && {
+                  gap: 4,
+                },
+              ]}>
+              {isCropped && (
+                <View
+                  style={[
+                    a.rounded_sm,
+                    a.p_xs,
+                    t.atoms.bg_contrast_25,
+                    {
+                      opacity: 0.8,
+                    },
+                    largeAltBadge && {
+                      padding: 6,
+                    },
+                  ]}>
+                  <Fullscreen
+                    fill={t.atoms.text_contrast_high.color}
+                    width={largeAltBadge ? 18 : 12}
+                  />
+                </View>
+              )}
+              {hasAlt && (
+                <View
+                  style={[
+                    a.justify_center,
+                    a.rounded_sm,
+                    a.p_xs,
+                    t.atoms.bg_contrast_25,
+                    {
+                      opacity: 0.8,
+                    },
+                    largeAltBadge && {
+                      padding: 6,
+                    },
+                  ]}>
+                  <Text
+                    style={[
+                      a.font_bold,
+                      largeAltBadge ? a.text_xs : {fontSize: 8},
+                    ]}>
+                    <Trans>ALT</Trans>
+                  </Text>
+                </View>
+              )}
+            </View>
+          ) : null}
+
+          <MediaInsetBorder
+            style={
+              focused && {
+                borderWidth: 2,
+              }
             }
-          }
-        />
-      </Pressable>
+          />
+        </Pressable>
+      </ImageContextMenu>
     </Animated.View>
   )
 }

src/components/images/ImageLayoutGridItem.tsx

@@ -9,8 +9,9 @@ import {Trans} from '@lingui/react/macro'
 
 import {type Dimensions} from '#/lib/media/types'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, tokens, useTheme} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
+import {ImageContextMenu} from '#/components/Post/Embed/ImageContextMenu'
 import {PostEmbedViewContext} from '#/components/Post/Embed/types'
 import {Text} from '#/components/Typography'
 
@@ -52,46 +53,64 @@ export function GalleryItem({
   const hasAlt = !!image.alt
   const hideBadges =
     viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
+
+  const aspect =
+    image.aspectRatio && image.aspectRatio.height > 0
+      ? image.aspectRatio.width / image.aspectRatio.height
+      : undefined
+
+  // The tap handler and the peek-commit handler do the same thing: open the
+  // lightbox with this cell's ref + dims so the lightbox's return animation
+  // can target the original thumbnail.
+  const openLightboxAtIndex = onPress
+    ? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
+    : undefined
+
   return (
     <View style={a.flex_1} ref={containerRefs[index]} collapsable={false}>
-      <Pressable
-        onPress={
-          onPress
-            ? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
-            : undefined
-        }
-        onPressIn={onPressIn ? () => onPressIn(index) : undefined}
-        onLongPress={onLongPress ? () => onLongPress(index) : undefined}
-        android_ripple={{
-          color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
-          foreground: true,
-        }}
-        style={[
-          a.flex_1,
-          a.overflow_hidden,
-          t.atoms.bg_contrast_25,
-          imageStyle,
-        ]}
-        accessibilityRole="button"
-        accessibilityLabel={image.alt || _(msg`Image`)}
-        accessibilityHint="">
-        <Image
-          source={{uri: image.thumb}}
-          style={[a.flex_1]}
-          accessible={true}
-          accessibilityLabel={image.alt}
-          accessibilityHint=""
-          accessibilityIgnoresInvertColors
-          onLoad={e => {
-            thumbDimsRef.current[index] = {
-              width: e.source.width,
-              height: e.source.height,
-            }
+      <ImageContextMenu
+        fullsizeUri={image.fullsize}
+        thumbUri={image.thumb}
+        aspectRatio={aspect}
+        borderRadius={tokens.borderRadius.md}
+        onPreviewPress={openLightboxAtIndex}
+        style={a.flex_1}>
+        <Pressable
+          onPress={openLightboxAtIndex}
+          onPressIn={onPressIn ? () => onPressIn(index) : undefined}
+          onLongPress={onLongPress ? () => onLongPress(index) : undefined}
+          android_ripple={{
+            color: utils.alpha(t.atoms.bg.backgroundColor, 0.2),
+            foreground: true,
           }}
-          loading="lazy"
-        />
-        <MediaInsetBorder style={insetBorderStyle} />
-      </Pressable>
+          style={[
+            a.flex_1,
+            a.overflow_hidden,
+            t.atoms.bg_contrast_25,
+            imageStyle,
+          ]}
+          accessibilityRole="button"
+          accessibilityLabel={image.alt || _(msg`Image`)}
+          accessibilityHint="">
+          <Image
+            source={{uri: image.thumb}}
+            style={[a.flex_1]}
+            accessible={true}
+            accessibilityLabel={image.alt}
+            accessibilityHint=""
+            accessibilityIgnoresInvertColors
+            onLoad={e => {
+              thumbDimsRef.current[index] = {
+                width: e.source.width,
+                height: e.source.height,
+              }
+            }}
+            loading="lazy"
+            useAppleWebpCodec
+          />
+          <MediaInsetBorder style={insetBorderStyle} />
+        </Pressable>
+      </ImageContextMenu>
       {hasAlt && !hideBadges ? (
         <View
           accessible={false}

src/components/intents/GroupChatJoinDialog.tsx

@@ -0,0 +1,436 @@
+import {View} from 'react-native'
+import {
+  ChatBskyGroupRequestJoin,
+  ChatBskyGroupWithdrawJoinRequest,
+  moderateProfile,
+} from '@atproto/api'
+import {Trans, useLingui} from '@lingui/react/macro'
+import {useNavigation} from '@react-navigation/native'
+
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {makeProfileLink} from '#/lib/routes/links'
+import {type NavigationProp} from '#/lib/routes/types'
+import {isNetworkError} from '#/lib/strings/errors'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useJoinLinkPreviewsQuery} from '#/state/queries/join-links'
+import {useRequestJoinGroupChat} from '#/state/queries/messages/request-join-group-chat'
+import {useWithdrawJoinGroupChatRequest} from '#/state/queries/messages/withdraw-join-group-chat'
+import {useSession} from '#/state/session'
+import {atoms as a, useTheme, web} from '#/alf'
+import {AvatarBubbles} from '#/components/AvatarBubbles'
+import {
+  Button,
+  type ButtonColor,
+  ButtonIcon,
+  ButtonText,
+} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
+import {ArrowBoxRight_Stroke2_Corner3_Rounded as JoinIcon} from '#/components/icons/ArrowBoxRight'
+import {ChainLinkBroken_Stroke2_Corner0_Rounded as ChainLinkBrokenIcon} from '#/components/icons/ChainLink'
+import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
+import {RaisingHand4Finger_Stroke2_Corner2_Rounded as HandIcon} from '#/components/icons/RaisingHand'
+import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {useIntentDialogs} from '#/components/intents/IntentDialogs'
+import {InlineLinkText} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import * as Toast from '#/components/Toast'
+import {Text} from '#/components/Typography'
+import {ProfileBadges} from '../ProfileBadges'
+
+export function GroupChatJoinDialog() {
+  const {groupChatJoinDialogControl, groupChatJoinState} = useIntentDialogs()
+
+  return (
+    <Dialog.Outer
+      control={groupChatJoinDialogControl}
+      nativeOptions={{preventExpansion: true}}>
+      <Dialog.Handle />
+      <GroupChatJoinDialogInner code={groupChatJoinState?.code} />
+    </Dialog.Outer>
+  )
+}
+
+function GroupChatJoinDialogInner({code}: {code?: string}) {
+  const {t: l} = useLingui()
+
+  return (
+    <Dialog.ScrollableInner
+      label={l`Join group chat`}
+      style={[web({maxWidth: 400, borderRadius: 36})]}>
+      <View style={[a.gap_2xl, a.align_center]}>
+        <GroupChatJoinDialogContent code={code} />
+      </View>
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+function GroupChatJoinDialogContent({code}: {code?: string}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const {groupChatJoinDialogControl: control} = useIntentDialogs()
+  const {hasSession} = useSession()
+  const moderationOpts = useModerationOpts()
+  const navigation = useNavigation<NavigationProp>()
+
+  const {data, error, isLoading} = useJoinLinkPreviewsQuery({
+    codes: code ? [code] : undefined,
+    hasSession,
+    staleTime: 0,
+  })
+
+  const {mutate: joinGroupChat, isPending: isJoinPending} =
+    useRequestJoinGroupChat({
+      onSuccess: data => {
+        switch (data.status) {
+          case 'pending':
+            control.close(() => {
+              Toast.show(
+                l`Access requested! The group owner will review your request.`,
+              )
+            })
+            break
+          case 'joined': {
+            if (data.convo && data.convo.id) {
+              control.close(() => {
+                Toast.show(l`Successfully joined the group chat!`)
+                navigation.navigate('MessagesConversation', {
+                  conversation: data.convo!.id,
+                })
+              })
+            } else {
+              logger.warn('Request to join group chat returned no convo ID', {
+                status: data.status,
+                convoId: data.convo?.id,
+              })
+            }
+            break
+          }
+        }
+      },
+      onError: error => {
+        let errorMessage = l`Failed to join the group chat. Please try again.`
+        if (isNetworkError(error)) {
+          errorMessage = l`There was a problem with your internet connection, please try again`
+        } else if (error instanceof ChatBskyGroupRequestJoin.ConvoLockedError) {
+          errorMessage = l`This conversation is locked.`
+        } else if (
+          error instanceof ChatBskyGroupRequestJoin.FollowRequiredError
+        ) {
+          errorMessage = l`Only followers can join this group chat.`
+        } else if (error instanceof ChatBskyGroupRequestJoin.InvalidCodeError) {
+          errorMessage = l`Invalid group chat code.`
+        } else if (
+          error instanceof ChatBskyGroupRequestJoin.LinkDisabledError
+        ) {
+          errorMessage = l`This invite link has been disabled.`
+        } else if (
+          error instanceof ChatBskyGroupRequestJoin.MemberLimitReachedError
+        ) {
+          errorMessage = l`The member limit has been reached.`
+        } else if (error instanceof ChatBskyGroupRequestJoin.UserKickedError) {
+          errorMessage = l`You have been removed from this group.`
+        }
+        Toast.show(errorMessage)
+      },
+    })
+
+  const {mutate: withdrawRequest, isPending: isWithdrawPending} =
+    useWithdrawJoinGroupChatRequest({
+      onSuccess: () => {
+        control.close(() => {
+          Toast.show(l`Join request rescinded.`)
+        })
+      },
+      onError: error => {
+        let errorMessage = l`Failed to rescind your request. Please try again.`
+        if (isNetworkError(error)) {
+          errorMessage = l`There was a problem with your internet connection, please try again`
+        } else if (
+          error instanceof
+          ChatBskyGroupWithdrawJoinRequest.InvalidJoinRequestError
+        ) {
+          errorMessage = l`Invalid rescind request.`
+        }
+        Toast.show(errorMessage)
+      },
+    })
+
+  const {
+    state: interacted,
+    onIn: onInteract,
+    onOut: onInteractOut,
+  } = useInteractionState()
+
+  const handleJoin = () => {
+    if (!code) return
+    joinGroupChat({code})
+  }
+
+  const handleWithdraw = () => {
+    if (!convoId) return
+    withdrawRequest({convoId})
+  }
+
+  // Fallback if the prefetch exceeds the timeout
+  if (isLoading || !data || !moderationOpts) {
+    return (
+      <View style={[a.p_2xl]}>
+        <Loader size="xl" />
+      </View>
+    )
+  }
+
+  if (error) {
+    return (
+      <>
+        <ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
+        <Text
+          style={[a.text_center, a.text_lg, a.font_semi_bold, t.atoms.text]}>
+          <Trans>This invite link is invalid</Trans>
+        </Text>
+        <Button
+          label={l`Close this dialog`}
+          accessibilityHint={l`Close this dialog`}
+          onPress={() => control.close()}
+          color="primary"
+          size="large"
+          style={[a.w_full]}>
+          <ButtonText>
+            <Trans>Close</Trans>
+          </ButtonText>
+        </Button>
+      </>
+    )
+  }
+
+  const joinLinkPreview = data.joinLinkPreviews[0]
+
+  if (!joinLinkPreview) {
+    return (
+      <>
+        <View style={[a.py_lg, a.align_center]}>
+          <View style={[a.gap_sm, a.align_center, a.mt_lg]}>
+            <WarningIcon size="3xl" fill={t.atoms.text_contrast_high.color} />
+            <Text
+              style={[
+                a.mb_2xs,
+                a.text_center,
+                a.text_sm,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}>
+              <Trans>Chat invite link no longer available</Trans>
+            </Text>
+          </View>
+        </View>
+        <Button
+          testID="joinButton"
+          onPress={() => control.close()}
+          label={l`Close this dialog`}
+          accessibilityHint={l`Close this dialog`}
+          size="large"
+          color="secondary"
+          style={[a.w_full]}>
+          <ButtonText>{l`Close`}</ButtonText>
+        </Button>
+      </>
+    )
+  }
+
+  const convoId = joinLinkPreview.convo?.id
+  const isFollowing = joinLinkPreview.owner.viewer?.following ?? false
+  const hasRequested = !convoId && joinLinkPreview.viewer?.requestedAt != null
+
+  let canJoin = true
+  let ButtonIconImage = isJoinPending || isWithdrawPending ? Loader : JoinIcon
+  let buttonText = joinLinkPreview.requireApproval
+    ? l`Request to join`
+    : l`Join`
+  let buttonColor: ButtonColor = 'primary'
+  if (joinLinkPreview.enabledStatus !== 'enabled') {
+    canJoin = false
+    ButtonIconImage = WarningIcon
+    buttonText = l`Chat invite link no longer available`
+    buttonColor = 'secondary'
+  } else if (joinLinkPreview.memberCount >= joinLinkPreview.memberLimit) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`This chat is full`
+    buttonColor = 'secondary'
+  } else if (joinLinkPreview.joinRule === 'followedByOwner' && !isFollowing) {
+    canJoin = false
+    ButtonIconImage = HandIcon
+    buttonText = l`Only people the chat owner follows can join`
+    buttonColor = 'secondary'
+  } else if (hasRequested) {
+    ButtonIconImage = XIcon
+    buttonText = l`Rescind request`
+    buttonColor = 'secondary'
+  }
+
+  return (
+    <>
+      <View style={[a.py_lg, a.align_center]}>
+        <AvatarBubbles
+          profiles={[
+            joinLinkPreview.owner,
+            ...Array(joinLinkPreview.memberCount - 1).fill(undefined),
+          ]}
+          self
+          size={135}
+        />
+        <View style={[a.gap_sm, a.align_center, a.mt_lg]}>
+          <View>
+            <Text
+              style={[
+                a.mb_2xs,
+                a.text_center,
+                a.text_sm,
+                a.font_medium,
+                t.atoms.text_contrast_high,
+              ]}>
+              <Trans>Group chat</Trans>
+            </Text>
+            <Text
+              style={[a.text_center, a.text_3xl, a.font_bold, t.atoms.text]}>
+              {joinLinkPreview.name}
+            </Text>
+          </View>
+          <View style={[a.flex_row, a.align_center]}>
+            <Text
+              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
+              <Trans comment="The number of active group chat members out of the total number allowed.">
+                {joinLinkPreview.memberCount}/{joinLinkPreview.memberLimit}{' '}
+                members
+              </Trans>
+            </Text>
+            <View style={[a.flex_row, a.ml_md]}>
+              <PersonGroupIcon
+                size="xs"
+                style={[a.mr_xs, t.atoms.text, {marginTop: -2}]}
+              />
+            </View>
+            <Text
+              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
+              {joinLinkPreview.joinRule === 'followedByOwner'
+                ? l`Followers can join`
+                : l`Anyone can join`}
+            </Text>
+          </View>
+          <View>
+            <View
+              style={[a.flex_row, a.gap_xs, a.align_center, a.justify_center]}>
+              <Text
+                emoji
+                style={[
+                  a.mb_2xs,
+                  a.text_center,
+                  a.text_sm,
+                  a.leading_snug,
+                  a.font_semi_bold,
+                  t.atoms.text,
+                ]}>
+                By{' '}
+                <InlineLinkText
+                  label={`@${joinLinkPreview.owner.handle}`}
+                  to={makeProfileLink(joinLinkPreview.owner)}
+                  style={[
+                    a.mb_2xs,
+                    a.text_sm,
+                    a.font_semi_bold,
+                    t.atoms.text,
+                    interacted && {
+                      ...web({
+                        outline: 0,
+                        textDecorationLine: 'underline',
+                        textDecorationColor: t.palette.contrast_1000,
+                      }),
+                    },
+                  ]}
+                  {...web({
+                    onMouseEnter: () => {
+                      onInteract()
+                    },
+                    onMouseLeave: () => {
+                      onInteractOut()
+                    },
+                  })}>
+                  {createSanitizedDisplayName(
+                    joinLinkPreview.owner,
+                    true,
+                    moderateProfile(joinLinkPreview.owner, moderationOpts).ui(
+                      'displayName',
+                    ),
+                  )}
+                </InlineLinkText>
+              </Text>
+              <ProfileBadges
+                profile={data.joinLinkPreviews[0].owner}
+                size="sm"
+                style={{marginTop: -3}}
+              />
+            </View>
+            <Text
+              style={[
+                a.text_center,
+                a.text_xs,
+                a.leading_snug,
+                t.atoms.text_contrast_high,
+              ]}>
+              {sanitizeHandle(joinLinkPreview.owner.handle, '@')}
+            </Text>
+          </View>
+        </View>
+      </View>
+      {convoId ? (
+        <Button
+          testID="openButton"
+          onPress={() => {
+            control.close(() => {
+              navigation.navigate('MessagesConversation', {
+                conversation: convoId,
+              })
+            })
+          }}
+          label={l`Open group chat`}
+          accessibilityHint={l`Open this group chat`}
+          size="large"
+          color="primary"
+          disabled={!code}
+          style={[a.w_full]}>
+          <ButtonText>
+            <Trans>Open chat</Trans>
+          </ButtonText>
+          <ButtonIcon icon={ArrowRightIcon} />
+        </Button>
+      ) : (
+        <Button
+          testID="joinButton"
+          onPress={hasRequested ? handleWithdraw : handleJoin}
+          label={
+            joinLinkPreview.requireApproval
+              ? l`Request access to group chat`
+              : l`Join group chat`
+          }
+          accessibilityHint={
+            joinLinkPreview.requireApproval
+              ? l`Tap to request access to join this group chat`
+              : l`Tap to join this group chat immediately`
+          }
+          size="large"
+          color={buttonColor}
+          disabled={isJoinPending || isWithdrawPending || !code || !canJoin}
+          style={[a.w_full]}>
+          <ButtonIcon icon={ButtonIconImage} />
+          <ButtonText>{buttonText}</ButtonText>
+        </Button>
+      )}
+    </>
+  )
+}

src/components/intents/IntentDialogs.tsx

@@ -1,13 +1,30 @@
-import {createContext, useContext, useMemo, useState} from 'react'
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
+import {usePrefetchJoinLinkPreviews} from '#/state/queries/join-links'
+import {useSession} from '#/state/session'
+import {
+  useActiveGroupChatJoinRequest,
+  useSetActiveLanding,
+} from '#/state/shell/landing'
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
+import {GroupChatJoinDialog} from '#/components/intents/GroupChatJoinDialog'
 import {VerifyEmailIntentDialog} from '#/components/intents/VerifyEmailIntentDialog'
 
 interface Context {
   verifyEmailDialogControl: DialogControlProps
   verifyEmailState: {code: string} | undefined
   setVerifyEmailState: (state: {code: string} | undefined) => void
+  groupChatJoinDialogControl: DialogControlProps
+  groupChatJoinState: {code: string} | undefined
+  setGroupChatJoinState: (state: {code: string} | undefined) => void
 }
 
 const Context = createContext({} as Context)
@@ -19,20 +36,70 @@ export function Provider({children}: {children: React.ReactNode}) {
   const [verifyEmailState, setVerifyEmailState] = useState<
     {code: string} | undefined
   >()
+  const groupChatJoinDialogControl = Dialog.useDialogControl()
+  const [groupChatJoinState, setGroupChatJoinState] = useState<
+    {code: string} | undefined
+  >()
+
+  const {hasSession} = useSession()
+  const groupChatLanding = useActiveGroupChatJoinRequest()
+  const setActiveLanding = useSetActiveLanding()
+  const prefetchJoinLinkPreviews = usePrefetchJoinLinkPreviews()
+  const landingHandledRef = useRef(false)
+
+  useEffect(() => {
+    if (hasSession && groupChatLanding && !landingHandledRef.current) {
+      landingHandledRef.current = true
+      const code = groupChatLanding.code
+      setActiveLanding(undefined)
+      const prefetch = prefetchJoinLinkPreviews({
+        codes: [code],
+        hasSession: true,
+      })
+      void Promise.race([
+        prefetch,
+        new Promise(res => setTimeout(res, 200)),
+      ]).finally(() => {
+        setGroupChatJoinState({code})
+        groupChatJoinDialogControl.open()
+      })
+    }
+    if (!groupChatLanding) {
+      landingHandledRef.current = false
+    }
+  }, [
+    hasSession,
+    groupChatLanding,
+    setActiveLanding,
+    setGroupChatJoinState,
+    prefetchJoinLinkPreviews,
+    groupChatJoinDialogControl,
+  ])
 
   const value = useMemo(
     () => ({
       verifyEmailDialogControl,
       verifyEmailState,
       setVerifyEmailState,
+      groupChatJoinDialogControl,
+      groupChatJoinState,
+      setGroupChatJoinState,
     }),
-    [verifyEmailDialogControl, verifyEmailState, setVerifyEmailState],
+    [
+      verifyEmailDialogControl,
+      verifyEmailState,
+      setVerifyEmailState,
+      groupChatJoinDialogControl,
+      groupChatJoinState,
+      setGroupChatJoinState,
+    ],
   )
 
   return (
     <Context.Provider value={value}>
       {children}
       <VerifyEmailIntentDialog />
+      <GroupChatJoinDialog />
     </Context.Provider>
   )
 }

src/components/moderation/ReportDialog/index.tsx

@@ -75,9 +75,11 @@ export function ReportDialog(
     () => (props.subject ? parseReportSubject(props.subject) : undefined),
     [props.subject],
   )
+  const propsOnClose = props.onClose
   const onClose = useCallback(() => {
     ax.metric('reportDialog:close', {})
-  }, [ax])
+    propsOnClose?.()
+  }, [ax, propsOnClose])
   return (
     <Dialog.Outer control={props.control} onClose={onClose}>
       <Dialog.Handle />

src/components/moderation/ReportDialog/types.ts

@@ -88,4 +88,8 @@ export type ReportDialogProps = {
    * Called if the report was successfully submitted.
    */
   onAfterSubmit?: () => void
+  /**
+   * Called after the dialog finishes closing.
+   */
+  onClose?: () => void
 }

src/components/verification/VerifierDialog.tsx

@@ -87,6 +87,7 @@ function Inner({
             alt={_(
               msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
             )}
+            useAppleWebpCodec
           />
         </View>
 

src/features/liveEvents/components/LiveEventFeedCardCompact.tsx

@@ -69,6 +69,7 @@ export function LiveEventFeedCardCompact({
               style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
               contentFit="cover"
               placeholderContentFit="cover"
+              useAppleWebpCodec
             />
 
             <LinearGradient

src/features/liveEvents/components/LiveEventFeedCardWide.tsx

@@ -77,6 +77,7 @@ export function LiveEventFeedCardWide({
               style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
               contentFit="cover"
               placeholderContentFit="cover"
+              useAppleWebpCodec
             />
 
             <LinearGradient

src/features/liveNow/components/LinkPreview.tsx

@@ -54,6 +54,7 @@ export function LinkPreview({
             contentFit="cover"
             onLoad={() => setImageLoadError(false)}
             onError={() => setImageLoadError(true)}
+            useAppleWebpCodec
           />
         )}
         {linkMeta && (!linkMeta.image || imageLoadError) && (

src/features/liveNow/components/LiveStatusDialog.tsx

@@ -147,6 +147,7 @@ export function LiveStatus({
                 contentFit="cover"
                 style={[a.absolute, a.inset_0]}
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <LiveIndicator
                 size="large"

src/lib/api/index.ts

@@ -178,7 +178,8 @@ export async function post(
       writes: writes,
       validate: true,
     })
-  } catch (e: any) {
+  } catch (err) {
+    const e = err as Error
     logger.error(`Failed to create post`, {
       safeMessage: e.message,
     })
@@ -431,6 +432,16 @@ async function resolveMedia(
         },
       }
     }
+    if (resolvedLink.type === 'chat-invite' && resolvedLink.view) {
+      return {
+        $type: 'app.bsky.embed.external',
+        external: {
+          uri: resolvedLink.uri,
+          title: resolvedLink.view.name,
+          description: `${resolvedLink.view.memberCount}/${resolvedLink.view.memberLimit}`,
+        },
+      }
+    }
   }
   return undefined
 }
@@ -474,6 +485,7 @@ async function computeCid(record: AppBskyFeedPost.Record): Promise<string> {
 }
 
 // Returns a transformed version of the object for use in DAG-CBOR.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function prepareForHashing(v: any): any {
   // IMPORTANT: BlobRef#ipld() returns the correct object we need for hashing,
   // the API client will convert this for you but we're hashing in the client,
@@ -496,9 +508,10 @@ function prepareForHashing(v: any): any {
 
   // Walk through plain objects
   if (isPlainObject(v)) {
-    const obj: any = {}
+    const obj: Record<string, unknown> = {}
     let pure = true
     for (const key in v) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       let value = v[key]
       // `value` is undefined
       if (value === undefined) {
@@ -517,6 +530,7 @@ function prepareForHashing(v: any): any {
   return v
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isPlainObject(v: any): boolean {
   if (typeof v !== 'object' || v === null) {
     return false

src/lib/api/resolve.ts

@@ -2,11 +2,12 @@ import {
   type AppBskyFeedDefs,
   type AppBskyGraphDefs,
   type BskyAgent,
+  type ChatBskyGroupDefs,
   type ComAtprotoRepoStrongRef,
 } from '@atproto/api'
 import {AtUri} from '@atproto/api'
 
-import {IMAGE_SIZE_CONFIG_2K_1MB} from '#/lib/constants'
+import {DM_SERVICE_HEADERS, IMAGE_SIZE_CONFIG_2K_1MB} from '#/lib/constants'
 import {getLinkMeta, type LinkMeta} from '#/lib/link-meta/link-meta'
 import {resolveShortLink} from '#/lib/link-meta/resolve-short-link'
 import {downloadAndResize} from '#/lib/media/manip'
@@ -16,6 +17,7 @@ import {
 } from '#/lib/strings/starter-pack'
 import {
   convertBskyAppUrlIfNeeded,
+  getChatInviteCodeFromUrl,
   isBskyCustomFeedUrl,
   isBskyListUrl,
   isBskyPostUrl,
@@ -71,12 +73,20 @@ type ResolvedStarterPackRecord = {
   view: AppBskyGraphDefs.StarterPackView
 }
 
+type ResolvedChatInvite = {
+  type: 'chat-invite'
+  uri: string
+  code: string
+  view?: ChatBskyGroupDefs.JoinLinkPreviewView
+}
+
 export type ResolvedLink =
   | ResolvedExternalLink
   | ResolvedPostRecord
   | ResolvedFeedRecord
   | ResolvedListRecord
   | ResolvedStarterPackRecord
+  | ResolvedChatInvite
 
 export class EmbeddingDisabledError extends Error {
   constructor() {
@@ -141,6 +151,19 @@ export async function resolveLink(
       view: res.data.list,
     }
   }
+  const chatInviteCode = getChatInviteCodeFromUrl(uri)
+  if (chatInviteCode) {
+    const res = await agent.chat.bsky.group.getJoinLinkPreviews(
+      {codes: [chatInviteCode]},
+      {headers: DM_SERVICE_HEADERS},
+    )
+    return {
+      type: 'chat-invite',
+      uri,
+      code: chatInviteCode,
+      view: res.data.joinLinkPreviews[0],
+    }
+  }
   if (isBskyStartUrl(uri) || isBskyStarterPackUrl(uri)) {
     const parsed = parseStarterPackUri(uri)
     if (!parsed) {
@@ -246,6 +269,10 @@ async function resolveExternal(
     title: result.title ?? '',
     description: result.description ?? '',
     thumb: result.image ? await imageToThumb(result.image) : undefined,
+    /*
+     * New fields from Standard Site integration. Other fields are derived from
+     * opengraph/oembed as before.
+     */
     associatedRefs: result.associatedRefs,
     view: result.view,
   }

src/lib/constants.ts

@@ -13,6 +13,7 @@ export const PUBLIC_BSKY_SERVICE = 'https://public.api.bsky.app'
 export const DEFAULT_SERVICE = BSKY_SERVICE
 const HELP_DESK_LANG = 'en-us'
 export const HELP_DESK_URL = `https://blueskyweb.zendesk.com/hc/${HELP_DESK_LANG}`
+export const CHAT_SERVICE = 'https://api.bsky.chat'
 export const EMBED_SERVICE = 'https://embed.bsky.app'
 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'

src/lib/hooks/useIntentHandler.ts

@@ -5,7 +5,11 @@ import * as WebBrowser from 'expo-web-browser'
 
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {parseLinkingUrl} from '#/lib/parseLinkingUrl'
+import {CHAT_INVITE_CODE_REGEX} from '#/lib/strings/url-helpers'
+import {usePrefetchJoinLinkPreviews} from '#/state/queries/join-links'
 import {useSession} from '#/state/session'
+import {useSetActiveLanding} from '#/state/shell/landing'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
 import {useAnalytics} from '#/analytics'
@@ -25,6 +29,7 @@ export function useIntentHandler() {
   const ax = useAnalytics()
   const composeIntent = useComposeIntent()
   const verifyEmailIntent = useVerifyEmailIntent()
+  const groupChatJoinIntent = useGroupChatJoinIntent()
   const {currentAccount} = useSession()
   const {tryApplyUpdate} = useApplyPullRequestOTAUpdate()
 
@@ -44,6 +49,11 @@ export function useIntentHandler() {
         })
       }
       const urlp = parseLinkingUrl(url)
+      const chatInviteMatch = urlp.pathname.match(CHAT_INVITE_CODE_REGEX)
+      if (chatInviteMatch) {
+        groupChatJoinIntent(chatInviteMatch[1], url)
+        return
+      }
       const [, intent, intentType] = urlp.pathname.split('/')
 
       // On native, our links look like bluesky://intent/SomeIntent, so we have to check the hostname for the
@@ -99,6 +109,7 @@ export function useIntentHandler() {
     ax,
     composeIntent,
     verifyEmailIntent,
+    groupChatJoinIntent,
     currentAccount,
     tryApplyUpdate,
   ])
@@ -162,6 +173,46 @@ export function useComposeIntent() {
   )
 }
 
+export function useGroupChatJoinIntent() {
+  const closeAllActiveElements = useCloseAllActiveElements()
+  const {hasSession} = useSession()
+  const {groupChatJoinDialogControl: control, setGroupChatJoinState: setState} =
+    useIntentDialogs()
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
+  const setActiveLanding = useSetActiveLanding()
+  const prefetchJoinLinkPreviews = usePrefetchJoinLinkPreviews()
+  return useCallback(
+    (code: string, uri?: string) => {
+      closeAllActiveElements()
+      if (hasSession) {
+        setState({code})
+        const prefetch = prefetchJoinLinkPreviews({
+          codes: [code],
+          hasSession: true,
+        })
+        void Promise.race([
+          prefetch,
+          new Promise(res => setTimeout(res, 200)),
+        ]).finally(() => {
+          control.open()
+        })
+      } else {
+        setActiveLanding({type: 'groupchat', uri: uri ?? '', code})
+        requestSwitchToAccount({requestedAccount: 'groupchat'})
+      }
+    },
+    [
+      closeAllActiveElements,
+      hasSession,
+      control,
+      setState,
+      prefetchJoinLinkPreviews,
+      requestSwitchToAccount,
+      setActiveLanding,
+    ],
+  )
+}
+
 function useVerifyEmailIntent() {
   const closeAllActiveElements = useCloseAllActiveElements()
   const {verifyEmailDialogControl: control, setVerifyEmailState: setState} =

src/lib/hooks/useTimeAgo.ts

@@ -58,12 +58,12 @@ export function dateDiff(
   if (diffSeconds < NOW) {
     diff = {
       value: 0,
-      unit: 'now' as DateDiff['unit'],
+      unit: 'now',
     }
   } else if (diffSeconds < MINUTE) {
     diff = {
       value: diffSeconds,
-      unit: 'second' as DateDiff['unit'],
+      unit: 'second',
     }
   } else if (diffSeconds < HOUR) {
     const value =
@@ -72,7 +72,7 @@ export function dateDiff(
         : Math.floor(diffSeconds / MINUTE)
     diff = {
       value,
-      unit: 'minute' as DateDiff['unit'],
+      unit: 'minute',
     }
   } else if (diffSeconds < DAY) {
     const value =
@@ -81,7 +81,7 @@ export function dateDiff(
         : Math.floor(diffSeconds / HOUR)
     diff = {
       value,
-      unit: 'hour' as DateDiff['unit'],
+      unit: 'hour',
     }
   } else if (diffSeconds < MONTH_30) {
     const value =
@@ -90,7 +90,7 @@ export function dateDiff(
         : Math.floor(diffSeconds / DAY)
     diff = {
       value,
-      unit: 'day' as DateDiff['unit'],
+      unit: 'day',
     }
   } else {
     const value =
@@ -99,7 +99,7 @@ export function dateDiff(
         : Math.floor(diffSeconds / MONTH_30)
     diff = {
       value,
-      unit: 'month' as DateDiff['unit'],
+      unit: 'month',
     }
   }
 

src/lib/routes/links.ts

@@ -19,8 +19,8 @@ export function makeProfileLink(
 export function makeCustomFeedLink(
   did: string,
   rkey: string,
-  segment?: string | undefined,
-  feedCacheKey?: 'discover' | 'explore' | undefined,
+  segment?: string,
+  feedCacheKey?: 'discover' | 'explore',
 ) {
   return (
     [`/profile`, did, 'feed', rkey, ...(segment ? [segment] : [])].join('/') +

src/lib/routes/types.ts

@@ -64,6 +64,7 @@ export type CommonNavigatorParams = {
   Topic: {topic: string}
   MessagesConversation: {conversation: string; embed?: string; accept?: true}
   MessagesConversationSettings: {conversation: string}
+  MessagesJoinRequests: {conversation: string}
   MessagesSettings: undefined
   MessagesInbox: undefined
   NotificationsActivityList: {posts: string}

src/lib/strings/url-helpers.ts

@@ -1,5 +1,5 @@
 import {AtUri} from '@atproto/api'
-import psl from 'psl'
+import {parse} from 'psl'
 import TLDs from 'tlds'
 
 import {BSKY_SERVICE} from '#/lib/constants'
@@ -178,6 +178,29 @@ export function isBskyStarterPackUrl(url: string): boolean {
   return false
 }
 
+// Invite codes are 7 alphanumeric characters long, supporting up to 10 here to future-proof.
+export const CHAT_INVITE_CODE_REGEX = /^\/c\/([a-zA-Z0-9]{7,10})$/
+
+export function getChatInviteCodeFromUrl(url: string): string | undefined {
+  let pathname: string
+  if (isBskyAppUrl(url)) {
+    try {
+      pathname = new URL(url).pathname
+    } catch {
+      return undefined
+    }
+  } else if (url.startsWith('/')) {
+    pathname = url.split('?')[0].split('#')[0]
+  } else {
+    return undefined
+  }
+  return pathname.match(CHAT_INVITE_CODE_REGEX)?.[1]
+}
+
+export function isBskyChatInviteUrl(url: string): boolean {
+  return getChatInviteCodeFromUrl(url) !== undefined
+}
+
 export function isBskyDownloadUrl(url: string): boolean {
   if (isExternalUrl(url)) {
     return false
@@ -306,7 +329,7 @@ export function isPossiblyAUrl(str: string): boolean {
 }
 
 export function splitApexDomain(hostname: string): [string, string] {
-  const hostnamep = psl.parse(hostname)
+  const hostnamep = parse(hostname)
   if (hostnamep.error || !hostnamep.listed || !hostnamep.domain) {
     return ['', hostname]
   }

src/routes.ts

@@ -74,6 +74,7 @@ export const router = new Router<AllNavigatableRoutes>({
   MessagesInbox: '/messages/inbox',
   MessagesConversation: '/messages/:conversation',
   MessagesConversationSettings: '/messages/:conversation/settings',
+  MessagesJoinRequests: '/messages/:conversation/requests',
   // starter packs
   Start: '/start/:name/:rkey',
   StarterPackEdit: '/starter-pack/edit/:rkey',

src/screens/Messages/ConversationSettings/MembersAndRequests.tsx

@@ -1,26 +1,31 @@
 import {View} from 'react-native'
 import {plural} from '@lingui/core/macro'
 import {Trans, useLingui} from '@lingui/react/macro'
+import {useNavigation} from '@react-navigation/native'
 
+import {type NavigationProp} from '#/lib/routes/types'
 import {atoms as a, useTheme} from '#/alf'
-import {InlineLinkText} from '#/components/Link'
+import {type ConvoWithDetails} from '#/components/dms/util'
+import {createStaticClick, InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function MembersAndRequests({
-  memberCount,
-  memberLimit,
+  convo,
   requestCount,
   hasMoreRequests,
   isOwner,
 }: {
-  memberCount: number
-  memberLimit: number
+  convo: Extract<ConvoWithDetails, {kind: 'group'}>
   requestCount: number
   hasMoreRequests: boolean
   isOwner: boolean
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+
+  const memberCount = convo.details.memberCount
+  const memberLimit = convo.details.memberLimit
 
   return (
     <View style={[a.flex_row, a.justify_between, a.px_xl, a.pt_xl, a.pb_sm]}>
@@ -42,8 +47,11 @@ export function MembersAndRequests({
         <InlineLinkText
           label={l`View incoming group chat requests`}
           style={[a.text_sm, a.text_right, a.font_semi_bold]}
-          // TODO Need to implement this. -dsb
-          to="#">
+          {...createStaticClick(() => {
+            navigation.navigate('MessagesJoinRequests', {
+              conversation: convo.view.id,
+            })
+          })}>
           {hasMoreRequests
             ? l({
                 message: `${requestCount}+ requests`,

src/screens/Messages/ConversationSettings/index.tsx

@@ -247,8 +247,7 @@ function GroupSettings({
       case 'MEMBERS_AND_REQUESTS':
         return (
           <MembersAndRequests
-            memberCount={convo.details.memberCount}
-            memberLimit={convo.details.memberLimit}
+            convo={convo}
             requestCount={requestCount}
             hasMoreRequests={!!hasMoreRequests}
             isOwner={isOwner}

src/screens/Messages/JoinRequest.tsx

@@ -0,0 +1,305 @@
+import {View} from 'react-native'
+import {ImageBackground} from 'expo-image'
+import {moderateProfile} from '@atproto/api'
+import {Trans, useLingui} from '@lingui/react/macro'
+
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useJoinLinkPreviewsQuery} from '#/state/queries/join-links'
+import {useActiveGroupChatJoinRequest} from '#/state/shell/landing'
+import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut'
+import {LogomarkWithType} from '#/view/icons/LogomarkWithType'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {AvatarBubbles} from '#/components/AvatarBubbles'
+import {Button, ButtonText} from '#/components/Button'
+import {ChainLinkBroken_Stroke2_Corner0_Rounded as ChainLinkBrokenIcon} from '#/components/icons/ChainLink'
+import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
+import {ProfileBadges} from '#/components/ProfileBadges'
+import {Text} from '#/components/Typography'
+
+const desktopDarkBg = require('../../../assets/images/chat-desktop-bg-dark.webp')
+const desktopLightBg = require('../../../assets/images/chat-desktop-bg-light.webp')
+const mobileDarkBg = require('../../../assets/images/chat-mobile-bg-dark.webp')
+const mobileLightBg = require('../../../assets/images/chat-mobile-bg-light.webp')
+
+type Props = {
+  setScreenState: (state: LoggedOutScreenState) => void
+}
+
+export function JoinRequest({setScreenState}: Props) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+
+  const {gtMobile, gtTablet} = useBreakpoints()
+  const moderationOpts = useModerationOpts()
+
+  // Get code from context (logged-out only)
+  const contextJoinRequest = useActiveGroupChatJoinRequest()
+  const code = contextJoinRequest?.code
+
+  const {data, error} = useJoinLinkPreviewsQuery({
+    codes: code ? [code] : undefined,
+    hasSession: false,
+  })
+
+  const isDarkMode = t.name !== 'light'
+  const background = gtMobile
+    ? isDarkMode
+      ? desktopDarkBg
+      : desktopLightBg
+    : isDarkMode
+      ? mobileDarkBg
+      : mobileLightBg
+
+  const requiresApproval = data?.joinLinkPreviews[0]?.requireApproval
+  const requiresFollow =
+    data?.joinLinkPreviews[0]?.joinRule === 'followedByOwner'
+
+  return (
+    <View style={[a.util_screen_outer, a.w_full, t.atoms.bg_contrast_25]}>
+      <ImageBackground
+        source={background}
+        style={[a.util_screen_outer, a.w_full, a.flex_1, a.justify_center]}
+        contentFit={gtTablet ? 'contain' : 'cover'}>
+        <View
+          style={[
+            a.util_screen_outer,
+            a.w_full,
+            a.justify_center,
+            a.align_center,
+          ]}>
+          {error ? (
+            <Wrapper>
+              <ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
+              <Text
+                style={[
+                  a.mb_sm,
+                  a.text_center,
+                  a.text_lg,
+                  a.font_semi_bold,
+                  t.atoms.text,
+                ]}>
+                {l`This invite link has expired`}
+              </Text>
+              <ActionButtons setScreenState={setScreenState} />
+            </Wrapper>
+          ) : data && moderationOpts ? (
+            <Wrapper>
+              <AvatarBubbles
+                profiles={[
+                  data.joinLinkPreviews[0].owner,
+                  ...Array(
+                    Math.min(
+                      3,
+                      Math.max(0, data.joinLinkPreviews[0].memberCount - 1),
+                    ),
+                  ).fill(undefined),
+                ]}
+                size={135}
+              />
+              <View style={[a.gap_2xs]}>
+                <View
+                  style={[
+                    a.flex_row,
+                    a.align_center,
+                    a.justify_center,
+                    a.gap_sm,
+                  ]}>
+                  <Text
+                    style={[
+                      a.text_center,
+                      a.text_xs,
+                      a.leading_snug,
+                      t.atoms.text_contrast_medium,
+                    ]}>
+                    <Trans>Group chat</Trans>
+                  </Text>
+                  <View style={[a.flex_row, a.align_center]}>
+                    <PersonGroupIcon
+                      size="xs"
+                      style={[a.mr_2xs, t.atoms.text_contrast_medium]}
+                    />
+                    <Text
+                      style={[
+                        a.text_center,
+                        a.text_xs,
+                        a.leading_snug,
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans comment="The number of active group chat members out of the total number allowed.">
+                        {data.joinLinkPreviews[0].memberCount}/
+                        {data.joinLinkPreviews[0].memberLimit}
+                      </Trans>
+                    </Text>
+                  </View>
+                </View>
+                <Text
+                  style={[
+                    a.text_center,
+                    a.text_4xl,
+                    a.leading_tight,
+                    a.font_bold,
+                    t.atoms.text,
+                  ]}>
+                  {data.joinLinkPreviews[0].name}
+                </Text>
+              </View>
+              <View style={[a.w_full]}>
+                <View
+                  style={[
+                    a.flex_row,
+                    a.gap_xs,
+                    a.align_center,
+                    a.justify_center,
+                  ]}>
+                  <Text
+                    style={[
+                      a.mb_xs,
+                      a.text_center,
+                      a.text_sm,
+                      a.leading_snug,
+                      a.font_semi_bold,
+                      t.atoms.text,
+                      a.max_w_full,
+                    ]}>
+                    <Trans comment="The owner (creator) of a group chat.">
+                      By{' '}
+                      {createSanitizedDisplayName(
+                        data.joinLinkPreviews[0].owner,
+                        true,
+                        moderateProfile(
+                          data.joinLinkPreviews[0].owner,
+                          moderationOpts,
+                        ).ui('displayName'),
+                      )}
+                    </Trans>
+                  </Text>
+                  <ProfileBadges
+                    profile={data.joinLinkPreviews[0].owner}
+                    size="sm"
+                    style={{marginTop: -4}}
+                  />
+                </View>
+                <Text
+                  style={[
+                    a.text_center,
+                    a.text_xs,
+                    a.leading_snug,
+                    a.font_medium,
+                    t.atoms.text_contrast_medium,
+                    a.max_w_full,
+                  ]}>
+                  {sanitizeHandle(data.joinLinkPreviews[0].owner.handle, '@')}
+                </Text>
+              </View>
+              <Text
+                style={[
+                  a.text_center,
+                  a.text_sm,
+                  a.leading_snug,
+                  t.atoms.text_contrast_high,
+                ]}>
+                {requiresApproval
+                  ? l`Sign in to request access to this group chat.`
+                  : l`Sign in to accept invite.`}{' '}
+                {requiresFollow &&
+                  l`Only people ${createSanitizedDisplayName(
+                    data.joinLinkPreviews[0].owner,
+                    true,
+                    moderateProfile(
+                      data.joinLinkPreviews[0].owner,
+                      moderationOpts,
+                    ).ui('displayName'),
+                  )} follows can join.`}
+              </Text>
+              <ActionButtons setScreenState={setScreenState} />
+            </Wrapper>
+          ) : null}
+        </View>
+      </ImageBackground>
+    </View>
+  )
+}
+
+function Wrapper({children}: React.PropsWithChildren<unknown>) {
+  const t = useTheme()
+
+  const isDarkMode = t.name !== 'light'
+
+  return (
+    <>
+      <LogomarkWithType
+        width={136}
+        fill={t.palette.primary_500}
+        style={[
+          a.absolute,
+          {
+            top: 40,
+          },
+        ]}
+      />
+      <View
+        style={[
+          a.zoom_fade_in,
+          a.align_center,
+          a.gap_lg,
+          a.p_2xl,
+          a.pt_4xl,
+          t.atoms.bg,
+          t.atoms.shadow_xl,
+          isDarkMode ? [a.border, t.atoms.border_contrast_low] : null,
+          {
+            borderRadius: 48,
+            maxWidth: 320,
+            width: '90%',
+          },
+        ]}>
+        {children}
+      </View>
+    </>
+  )
+}
+
+function ActionButtons({
+  setScreenState,
+}: {
+  setScreenState: (state: LoggedOutScreenState) => void
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const isDarkMode = t.name !== 'light'
+
+  return (
+    <View style={[a.w_full, a.gap_md]}>
+      <Button
+        testID="signInButton"
+        onPress={() => {
+          setScreenState(LoggedOutScreenState.S_Login)
+        }}
+        label={l`Sign in`}
+        accessibilityHint={l`Opens flow to sign in to your existing Bluesky account`}
+        size="large"
+        color="primary"
+        style={[a.w_full]}>
+        <ButtonText>
+          <Trans>Sign in</Trans>
+        </ButtonText>
+      </Button>
+      <Button
+        testID="createAccountButton"
+        onPress={() => {
+          setScreenState(LoggedOutScreenState.S_CreateAccount)
+        }}
+        label={l`Create new account`}
+        accessibilityHint={l`Opens flow to create a new Bluesky account`}
+        size="large"
+        color={isDarkMode ? 'secondary_inverted' : 'secondary'}
+        style={[a.w_full]}>
+        <ButtonText>
+          <Trans>Create account</Trans>
+        </ButtonText>
+      </Button>
+    </View>
+  )
+}

src/screens/Messages/JoinRequests.tsx

@@ -0,0 +1,490 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+import {
+  ChatBskyGroupApproveJoinRequest,
+  type ChatBskyGroupListJoinRequests,
+  ChatBskyGroupRejectJoinRequest,
+} from '@atproto/api'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
+import {useNavigation} from '@react-navigation/native'
+import {type InfiniteData, useQueryClient} from '@tanstack/react-query'
+
+import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
+import {isNetworkError} from '#/lib/hooks/useCleanError'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+  type NavigationProp,
+} from '#/lib/routes/types'
+import {logger} from '#/logger'
+import {ConvoProvider, useConvo} from '#/state/messages/convo'
+import {ConvoStatus} from '#/state/messages/convo/types'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useJoinRequestMutation} from '#/state/queries/messages/join-requests'
+import {
+  createListJoinRequestsQueryKey,
+  useListJoinRequestsQuery,
+} from '#/state/queries/messages/list-join-requests'
+import {useSession} from '#/state/session'
+import {List} from '#/view/com/util/List'
+import {atoms as a, useTheme} from '#/alf'
+import {AgeRestrictedScreen} from '#/components/ageAssurance/AgeRestrictedScreen'
+import {useAgeAssuranceCopy} from '#/components/ageAssurance/useAgeAssuranceCopy'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {type ConvoWithDetails} from '#/components/dms/util'
+import {Error} from '#/components/Error'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as RetryIcon} from '#/components/icons/ArrowRotate'
+import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
+import {KnownFollowers} from '#/components/KnownFollowers'
+import * as Layout from '#/components/Layout'
+import {Loader} from '#/components/Loader'
+import * as ProfileCard from '#/components/ProfileCard'
+import * as Toast from '#/components/Toast'
+import {Text} from '#/components/Typography'
+import type * as bsky from '#/types/bsky'
+import {InviteLinkDialog} from './components/InviteLinkDialog'
+
+type Props = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'MessagesJoinRequests'
+>
+
+export function MessagesJoinRequestsScreen(props: Props) {
+  const {t: l} = useLingui()
+  const aaCopy = useAgeAssuranceCopy()
+  return (
+    <AgeRestrictedScreen
+      screenTitle={l`Requests to join`}
+      infoText={aaCopy.chatsInfoText}>
+      <MessagesJoinRequestsScreenInner {...props} />
+    </AgeRestrictedScreen>
+  )
+}
+
+function MessagesJoinRequestsScreenInner({route}: Props) {
+  const convoId = route.params.conversation
+
+  return (
+    <Layout.Screen>
+      <ConvoProvider key={convoId} convoId={convoId}>
+        <JoinRequestsInner />
+      </ConvoProvider>
+    </Layout.Screen>
+  )
+}
+
+function JoinRequestsInner() {
+  const {t: l} = useLingui()
+  const convoState = useConvo()
+  const navigation = useNavigation<NavigationProp>()
+
+  if (convoState.status === ConvoStatus.Error) {
+    return (
+      <>
+        <Header />
+        <Error
+          title={l`Something went wrong`}
+          message={l`We couldn’t load this conversation’s join requests`}
+          onRetry={() => convoState.error.retry()}
+          sideBorders={false}
+        />
+      </>
+    )
+  }
+
+  if (!convoState.convo) {
+    return (
+      <>
+        <Header />
+        <View style={[a.flex_1, a.align_center, a.justify_center]}>
+          <Loader size="xl" />
+        </View>
+      </>
+    )
+  }
+
+  if (convoState.convo.kind !== 'group') {
+    return (
+      <Error
+        title={l`Wrong kind of conversation`}
+        message={l`This screen is only available for group conversations.`}
+        onGoBack={() => {
+          if (navigation.canGoBack()) {
+            navigation.goBack()
+          } else {
+            navigation.replace('Messages', {animation: 'pop'})
+          }
+        }}
+      />
+    )
+  }
+
+  return <JoinRequestsList convo={convoState.convo} />
+}
+
+function JoinRequestsList({
+  convo,
+}: {
+  convo: Extract<ConvoWithDetails, {kind: 'group'}>
+}) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const moderationOpts = useModerationOpts()
+  const bottomBarOffset = useBottomBarOffset()
+  const {currentAccount} = useSession()
+  const navigation = useNavigation<NavigationProp>()
+  const queryClient = useQueryClient()
+  const inviteLinkControl = Dialog.useDialogControl()
+
+  const getRemainingRequestCount = () => {
+    const data = queryClient.getQueryData<
+      InfiniteData<ChatBskyGroupListJoinRequests.OutputSchema>
+    >(createListJoinRequestsQueryKey({convoId: convo.view.id}))
+    return data?.pages.reduce((sum, page) => sum + page.requests.length, 0) ?? 0
+  }
+
+  const [isPTRing, setIsPTRing] = useState(false)
+  const [footerHeight, setFooterHeight] = useState(0)
+
+  const owner = convo.primaryMember
+  const isOwner = !!owner && owner.did === currentAccount?.did
+
+  const {
+    data: joinRequestsData,
+    isPending,
+    isError,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useListJoinRequestsQuery({
+    convoId: convo.view.id,
+  })
+
+  const items =
+    joinRequestsData?.pages.flatMap(page =>
+      page.requests.map(request => request.requestedBy),
+    ) ?? []
+  const requestCount =
+    joinRequestsData?.pages.reduce(
+      (sum, page) => sum + page.requests.length,
+      0,
+    ) ?? 0
+
+  const {mutate: approveJoinRequest, isPending: isApprovePending} =
+    useJoinRequestMutation('approve', convo.view.id, {
+      onSuccess: () => {
+        Toast.show(l`Request approved.`)
+        if (getRemainingRequestCount() < 1) {
+          navigation.replace('MessagesConversationSettings', {
+            conversation: convo.view.id,
+          })
+        }
+      },
+      onError: error => {
+        let errorMessage = l`Failed to accept join request`
+        if (isNetworkError(error)) {
+          errorMessage = l`A network error occurred. Please check your internet connection.`
+        } else if (
+          error instanceof ChatBskyGroupApproveJoinRequest.InvalidConvoError
+        ) {
+          errorMessage = l`Conversation not found.`
+        } else if (
+          error instanceof ChatBskyGroupApproveJoinRequest.InsufficientRoleError
+        ) {
+          errorMessage = l`Only admins can accept join requests.`
+        } else if (
+          error instanceof
+          ChatBskyGroupApproveJoinRequest.MemberLimitReachedError
+        ) {
+          errorMessage = l`The member limit has been reached.`
+        }
+        Toast.show(errorMessage, {type: 'error'})
+      },
+    })
+
+  const {mutate: rejectJoinRequest, isPending: isRejectPending} =
+    useJoinRequestMutation('reject', convo.view.id, {
+      onSuccess: () => {
+        Toast.show(l`Request ignored.`)
+        if (getRemainingRequestCount() < 1) {
+          navigation.replace('MessagesConversationSettings', {
+            conversation: convo.view.id,
+          })
+        }
+      },
+      onError: error => {
+        let errorMessage = l`Failed to ignore join request`
+        if (isNetworkError(error)) {
+          errorMessage = l`A network error occurred. Please check your internet connection.`
+        } else if (
+          error instanceof ChatBskyGroupRejectJoinRequest.InvalidConvoError
+        ) {
+          errorMessage = l`Conversation not found.`
+        } else if (
+          error instanceof ChatBskyGroupRejectJoinRequest.InsufficientRoleError
+        ) {
+          errorMessage = l`Only admins can ignore join requests.`
+        }
+        Toast.show(errorMessage, {type: 'error'})
+      },
+    })
+
+  const isMutating = isApprovePending || isRejectPending
+
+  const renderItem = ({item}: {item: bsky.profile.AnyProfileView}) => {
+    if (!moderationOpts) return null
+    return (
+      <View style={[a.relative, a.flex_1, a.p_lg]}>
+        <View style={[a.flex_row, a.align_start, a.gap_md]}>
+          <ProfileCard.Link profile={item}>
+            <ProfileCard.Avatar
+              profile={item}
+              moderationOpts={moderationOpts}
+              size={44}
+              disabledPreview
+            />
+          </ProfileCard.Link>
+          <View>
+            <ProfileCard.Name profile={item} moderationOpts={moderationOpts} />
+            <ProfileCard.Handle profile={item} />
+            <View style={[a.mt_xs]}>
+              <KnownFollowers
+                profile={item}
+                moderationOpts={moderationOpts}
+                minimal
+                showIfEmpty
+              />
+            </View>
+            <View style={[a.flex_row, a.align_center, a.gap_sm, a.mt_md]}>
+              <AcceptButton
+                disabled={isMutating}
+                onPress={() => approveJoinRequest({member: item.did})}
+              />
+              <RejectButton
+                disabled={isMutating}
+                onPress={() => rejectJoinRequest({member: item.did})}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  const footer = (
+    <View
+      onLayout={evt => setFooterHeight(evt.nativeEvent.layout.height)}
+      style={[
+        a.absolute,
+        a.left_0,
+        a.right_0,
+        {bottom: 0},
+        a.px_xl,
+        a.border_t,
+        t.atoms.bg,
+        t.atoms.border_contrast_low,
+        {
+          paddingTop: a.py_lg.paddingTop,
+          paddingBottom: a.py_lg.paddingBottom + bottomBarOffset,
+        },
+      ]}>
+      <Button
+        label={l`Edit invite link`}
+        size="large"
+        color="primary"
+        onPress={() => inviteLinkControl.open()}
+        style={[a.w_full]}>
+        <ButtonText>
+          <Trans context="button">Edit invite link</Trans>
+        </ButtonText>
+      </Button>
+    </View>
+  )
+
+  const onEndReached = async () => {
+    if (isFetchingNextPage || !hasNextPage || isError) return
+    try {
+      await fetchNextPage()
+    } catch (err) {
+      logger.error('Failed to load more join requests', {message: err})
+    }
+  }
+
+  const onRefresh = async () => {
+    setIsPTRing(true)
+    try {
+      await refetch()
+    } catch (err) {
+      logger.error('Failed to refresh group chat requests', {message: err})
+    }
+    setIsPTRing(false)
+  }
+
+  if (isError) {
+    return (
+      <>
+        <Header count={requestCount} hasMoreRequests={hasNextPage} />
+        <View
+          style={[
+            a.flex_1,
+            a.align_center,
+            a.justify_center,
+            a.gap_sm,
+            a.p_lg,
+          ]}>
+          <ErrorIcon size="3xl" fill={t.atoms.text_contrast_high.color} />
+          <Text
+            style={[
+              a.leading_snug,
+              a.text_center,
+              a.px_lg,
+              a.text_md,
+              t.atoms.text_contrast_high,
+            ]}>
+            <Trans>Unable to fetch join requests.</Trans>
+          </Text>
+          <Button
+            color="primary"
+            label={l`Press to retry`}
+            onPress={() => void onRefresh()}
+            disabled={isPTRing}
+            size="large"
+            style={[a.mt_md]}>
+            <ButtonText>
+              <Trans>Retry</Trans>
+            </ButtonText>
+            <ButtonIcon icon={isPTRing ? Loader : RetryIcon} />
+          </Button>
+        </View>
+      </>
+    )
+  }
+
+  const showFooter = isOwner
+
+  return (
+    <>
+      <Header count={requestCount} hasMoreRequests={hasNextPage} />
+      <List
+        data={items}
+        keyExtractor={(item: bsky.profile.AnyProfileView) => item.did}
+        renderItem={renderItem}
+        ListEmptyComponent={
+          isPending ? (
+            <View
+              style={[a.flex_1, a.align_center, a.justify_center, a.py_4xl]}>
+              <Loader size="xl" />
+            </View>
+          ) : null
+        }
+        contentContainerStyle={
+          showFooter ? {paddingBottom: footerHeight} : undefined
+        }
+        scrollIndicatorInsets={showFooter ? {bottom: footerHeight} : undefined}
+        refreshing={isPTRing}
+        onEndReached={() => void onEndReached()}
+        onRefresh={() => void onRefresh()}
+        keyboardDismissMode="on-drag"
+        sideBorders={false}
+        desktopFixedHeight
+      />
+      {showFooter ? footer : null}
+      {owner && moderationOpts && (
+        <InviteLinkDialog
+          convo={convo}
+          control={inviteLinkControl}
+          owner={owner}
+          isOwner={isOwner}
+          moderationOpts={moderationOpts}
+        />
+      )}
+    </>
+  )
+}
+
+function Header({
+  count,
+  hasMoreRequests,
+}: {
+  count?: number
+  hasMoreRequests?: boolean
+}) {
+  return (
+    <Layout.Header.Outer>
+      <Layout.Header.BackButton />
+      <Layout.Header.Content>
+        <Layout.Header.TitleText>
+          {count === undefined ? (
+            <Trans>Requests to join</Trans>
+          ) : hasMoreRequests ? (
+            <Plural
+              value={count}
+              other="#+ requests to join"
+              comment="Displayed when there are more requests to join a group chat than have been loaded"
+            />
+          ) : (
+            <Plural
+              value={count}
+              _0="No requests to join"
+              one="# request to join"
+              other="# requests to join"
+            />
+          )}
+        </Layout.Header.TitleText>
+      </Layout.Header.Content>
+      <Layout.Header.Slot />
+    </Layout.Header.Outer>
+  )
+}
+
+function AcceptButton({
+  disabled,
+  onPress,
+}: {
+  disabled?: boolean
+  onPress: () => void
+}) {
+  const {t: l} = useLingui()
+
+  return (
+    <Button
+      label={l`Accept join request`}
+      size="small"
+      color="primary"
+      disabled={disabled}
+      onPress={onPress}>
+      <ButtonText>
+        <Trans comment="Accept a request to join a chat" context="button">
+          Accept
+        </Trans>
+      </ButtonText>
+    </Button>
+  )
+}
+
+function RejectButton({
+  disabled,
+  onPress,
+}: {
+  disabled?: boolean
+  onPress: () => void
+}) {
+  const {t: l} = useLingui()
+
+  return (
+    <Button
+      label={l`Ignore join request`}
+      size="small"
+      color="secondary"
+      disabled={disabled}
+      onPress={onPress}>
+      <ButtonText>
+        <Trans comment="Ignore a request to join a chat" context="button">
+          Ignore
+        </Trans>
+      </ButtonText>
+    </Button>
+  )
+}

src/screens/Messages/components/InviteLinkDialog.tsx

@@ -5,8 +5,7 @@ import {
   moderateProfile,
   type ModerationOpts,
 } from '@atproto/api'
-import {plural} from '@lingui/core/macro'
-import {Trans, useLingui} from '@lingui/react/macro'
+import {Plural, Trans, useLingui} from '@lingui/react/macro'
 
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
@@ -178,11 +177,7 @@ export function InviteLinkDialog({
             <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
                 Group chats can only have a maximum of{' '}
-                {plural(convo.details.memberLimit, {
-                  one: '# person',
-                  other: '# people',
-                })}
-                .
+                <Plural value={convo.details.memberLimit} other="# people" />.
               </Trans>
             </Text>
             <Text style={[a.text_md, a.leading_snug]}>
@@ -297,8 +292,8 @@ export function InviteLinkDialog({
       const linkEnabled = joinLink?.enabledStatus === 'enabled'
       const linkDisabled = joinLink?.enabledStatus === 'disabled'
       const joinLinkURI = joinLink?.code
-        ? `https://bsky.app/chat/${joinLink.code}`
-        : 'https://bsky.app/chat'
+        ? `https://bsky.app/c/${joinLink.code}`
+        : 'https://bsky.app/'
       const createdAt = joinLink ? new Date(joinLink.createdAt) : null
       const currentOption =
         whoCanJoinOptions.find(

src/screens/Messages/components/MessagesList.tsx

@@ -56,6 +56,7 @@ import {MessageListError} from '#/screens/Messages/components/MessageListError'
 import {atoms as a, platform, tokens, useTheme, web} from '#/alf'
 import {DateDivider} from '#/components/dms/DateDivider'
 import {MessageItem} from '#/components/dms/MessageItem'
+import {MessageOverlays} from '#/components/dms/MessageOverlays'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'
 import {SystemMessageGroup} from '#/components/dms/SystemMessageGroup'
 import {SystemMessageItem} from '#/components/dms/SystemMessageItem'
@@ -498,127 +499,133 @@ export function MessagesList({
 
   return (
     <InviteLinkDialogProvider convo={convoState.convo}>
-      <KeyboardGestureArea
-        interpolator="ios"
-        // HACKFIX: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1419
-        offset={Math.round(inputHeightJS)}
-        // slightly too buggy unfortunately, enable when possible
-        // textInputNativeID={textInputId}
-        style={[a.flex_1]}>
-        {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
-        <Animated.View style={[a.flex_1, animatedListStyle]}>
-          <ScrollProvider onScroll={onScroll}>
-            <List
-              ref={flatListRef}
-              data={renderItems}
-              renderItem={renderItem}
-              keyExtractor={keyExtractor}
-              disableFullWindowScroll={true}
-              disableVirtualization={true}
-              // The extra two items account for the header and the footer components
-              initialNumToRender={IS_NATIVE ? 32 : 62}
-              maxToRenderPerBatch={IS_WEB ? 32 : 62}
-              keyboardDismissMode="interactive"
-              keyboardShouldPersistTaps="handled"
-              maintainVisibleContentPosition={{minIndexForVisible: 0}}
-              removeClippedSubviews={false}
-              sideBorders={false}
-              onContentSizeChange={onContentSizeChange}
-              onStartReached={onStartReached}
-              onScrollToIndexFailed={onScrollToIndexFailed}
-              showsVerticalScrollIndicator={!IS_ANDROID}
-              scrollEventThrottle={100}
-              ListHeaderComponent={
-                <>
-                  <MaybeLoader isLoading={convoState.isFetchingHistory} />
-                  {convoState.hasAllHistory ? (
-                    convoState.convo?.kind === 'group' ? (
-                      <MessagesListGroupInfoPanel convo={convoState.convo} />
-                    ) : (
-                      <MessagesListInfoPanel convo={convoState.convo} />
-                    )
-                  ) : null}
-                </>
-              }
-              // native only (prop is not supported on web)
-              renderScrollComponent={renderScrollComponent}
-              contentContainerStyle={{
-                paddingBottom: platform({
-                  // ios is slightly larger as the input has no top padding
-                  ios: tokens.space.lg,
-                  android: tokens.space.md,
-                  web: 0, // web uses ListFooterComponent instead for scroll reasons
-                }),
-              }}
-              ListFooterComponent={
-                <View
-                  style={web({height: tokens.space.md + inputHeightJS})}
-                  onLayout={onFooterLayout}
-                />
-              }
-              style={[
-                web({
-                  scrollbarWidth: 'thin',
-                  scrollbarColor: `${t.palette.contrast_100} transparent`,
-                  scrollbarGutter: 'stable',
-                }),
-              ]}
-              pointerEvents={!hasScrolled ? 'none' : 'auto'}
-              contentInset={{top: transparentHeaderHeight}}
-              scrollIndicatorInsets={{top: transparentHeaderHeight}}
-            />
-          </ScrollProvider>
-        </Animated.View>
-        <KeyboardStickyView
-          style={[a.absolute, a.bottom_0, a.left_0, a.right_0]}
-          onLayout={onInputLayout}
-          minimumOffset={bottomInset}
-          offset={{
-            closed: platform({
-              ios: tokens.space.lg, // hide bottom padding when closed
-              default: 0,
-            }),
-            opened: 0,
-          }}>
-          {footer ?? (
-            <ConversationFooter
-              convoState={convoState}
-              hasAcceptOverride={hasAcceptOverride}>
-              {({loading}) =>
-                ax.features.enabled(ax.features.DmsNewMessageComposerEnable) ? (
-                  <MessageComposer
-                    textInputId={textInputId}
-                    onSendMessage={(message: string) =>
-                      void onSendMessage(message)
-                    }
-                    hasEmbed={!!embedUri}
-                    setEmbed={setEmbed}
-                    loading={loading}>
-                    <MessageInputEmbed
-                      embedUri={embedUri}
+      <MessageOverlays>
+        <KeyboardGestureArea
+          interpolator="ios"
+          // HACKFIX: https://github.com/kirillzyusko/react-native-keyboard-controller/issues/1419
+          offset={Math.round(inputHeightJS)}
+          // slightly too buggy unfortunately, enable when possible
+          // textInputNativeID={textInputId}
+          style={[a.flex_1]}>
+          {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
+          <Animated.View style={[a.flex_1, animatedListStyle]}>
+            <ScrollProvider onScroll={onScroll}>
+              <List
+                ref={flatListRef}
+                data={renderItems}
+                renderItem={renderItem}
+                keyExtractor={keyExtractor}
+                disableFullWindowScroll={true}
+                disableVirtualization={true}
+                // The extra two items account for the header and the footer components
+                initialNumToRender={IS_NATIVE ? 32 : 62}
+                maxToRenderPerBatch={IS_WEB ? 32 : 62}
+                keyboardDismissMode="interactive"
+                keyboardShouldPersistTaps="handled"
+                maintainVisibleContentPosition={{minIndexForVisible: 0}}
+                removeClippedSubviews={false}
+                sideBorders={false}
+                onContentSizeChange={onContentSizeChange}
+                onStartReached={onStartReached}
+                onScrollToIndexFailed={onScrollToIndexFailed}
+                showsVerticalScrollIndicator={!IS_ANDROID}
+                scrollEventThrottle={100}
+                ListHeaderComponent={
+                  <>
+                    <MaybeLoader isLoading={convoState.isFetchingHistory} />
+                    {convoState.hasAllHistory ? (
+                      convoState.convo?.kind === 'group' ? (
+                        <MessagesListGroupInfoPanel convo={convoState.convo} />
+                      ) : (
+                        <MessagesListInfoPanel convo={convoState.convo} />
+                      )
+                    ) : null}
+                  </>
+                }
+                // native only (prop is not supported on web)
+                renderScrollComponent={renderScrollComponent}
+                contentContainerStyle={{
+                  paddingBottom: platform({
+                    // ios is slightly larger as the input has no top padding
+                    ios: tokens.space.lg,
+                    android: tokens.space.md,
+                    web: 0, // web uses ListFooterComponent instead for scroll reasons
+                  }),
+                }}
+                ListFooterComponent={
+                  <View
+                    style={web({height: tokens.space.md + inputHeightJS})}
+                    onLayout={onFooterLayout}
+                  />
+                }
+                style={[
+                  web({
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: `${t.palette.contrast_100} transparent`,
+                    scrollbarGutter: 'stable',
+                  }),
+                ]}
+                pointerEvents={!hasScrolled ? 'none' : 'auto'}
+                contentInset={{top: transparentHeaderHeight}}
+                scrollIndicatorInsets={{top: transparentHeaderHeight}}
+              />
+            </ScrollProvider>
+          </Animated.View>
+          <KeyboardStickyView
+            style={[a.absolute, a.bottom_0, a.left_0, a.right_0]}
+            onLayout={onInputLayout}
+            minimumOffset={bottomInset}
+            offset={{
+              closed: platform({
+                ios: tokens.space.lg, // hide bottom padding when closed
+                default: 0,
+              }),
+              opened: 0,
+            }}>
+            {footer ?? (
+              <ConversationFooter
+                convoState={convoState}
+                hasAcceptOverride={hasAcceptOverride}>
+                {({loading}) =>
+                  ax.features.enabled(
+                    ax.features.DmsNewMessageComposerEnable,
+                  ) ? (
+                    <MessageComposer
+                      textInputId={textInputId}
+                      onSendMessage={(message: string) =>
+                        void onSendMessage(message)
+                      }
+                      hasEmbed={!!embedUri}
                       setEmbed={setEmbed}
-                    />
-                  </MessageComposer>
-                ) : (
-                  <MessageInput
-                    textInputId={textInputId}
-                    onSendMessage={onSendMessage}
-                    hasEmbed={!!embedUri}
-                    setEmbed={setEmbed}
-                    loading={loading}>
-                    <MessageInputEmbed
-                      embedUri={embedUri}
+                      loading={loading}>
+                      <MessageInputEmbed
+                        embedUri={embedUri}
+                        setEmbed={setEmbed}
+                      />
+                    </MessageComposer>
+                  ) : (
+                    <MessageInput
+                      textInputId={textInputId}
+                      onSendMessage={onSendMessage}
+                      hasEmbed={!!embedUri}
                       setEmbed={setEmbed}
-                    />
-                  </MessageInput>
-                )
-              }
-            </ConversationFooter>
-          )}
-        </KeyboardStickyView>
-      </KeyboardGestureArea>
+                      loading={loading}>
+                      <MessageInputEmbed
+                        embedUri={embedUri}
+                        setEmbed={setEmbed}
+                      />
+                    </MessageInput>
+                  )
+                }
+              </ConversationFooter>
+            )}
+          </KeyboardStickyView>
+        </KeyboardGestureArea>
 
-      {newMessagesPill.show && <NewMessagesPill onPress={scrollToEndOnPress} />}
+        {newMessagesPill.show && (
+          <NewMessagesPill onPress={scrollToEndOnPress} />
+        )}
+      </MessageOverlays>
     </InviteLinkDialogProvider>
   )
 }

src/screens/Messages/components/MessagesListGroupInfoPanel.tsx

@@ -43,14 +43,11 @@ export function MessagesListGroupInfoPanel({
     },
   })
 
-  // TODO Enable this once the feature is working end-to-end. -dsb
-  // const joinLink = groupConvo?.details.joinLink
-  const isJoinLinkEnabled = false
-  //   (isOwner && groupConvo) ||
-  //   (!isOwner && groupConvo && joinLink?.enabledStatus === 'enabled')
-
   const isOwner = convo.primaryMember?.did === currentAccount?.did
 
+  const isJoinLinkEnabled =
+    isOwner || convo.details.joinLink?.enabledStatus === 'enabled'
+
   const members = (convo.members ?? []).filter(
     profile => profile.did !== currentAccount?.did,
   )

src/screens/Messages/components/RequestListItem.tsx

@@ -28,6 +28,9 @@ export function RequestListItem({
   const isDeletedAccount =
     !convo.primaryMember || convo.primaryMember.handle === 'missing.invalid'
 
+  const canAcceptRequest =
+    convo.kind === 'direct' || convo.details.lockStatus === 'unlocked'
+
   return (
     <View style={[a.relative, a.flex_1]}>
       <ChatListItem convo={convo.view} showMenu={false}>
@@ -65,7 +68,9 @@ export function RequestListItem({
             ]}>
             {convo.primaryMember && !isDeletedAccount ? (
               <>
-                <AcceptChatButton convo={convo.view} currentScreen="list" />
+                {canAcceptRequest ? (
+                  <AcceptChatButton convo={convo.view} currentScreen="list" />
+                ) : null}
                 <RejectMenu
                   convo={convo.view}
                   profile={convo.primaryMember}

src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx

@@ -83,6 +83,7 @@ function Page({
           style={[a.w_full, a.aspect_square]}
           alt={alt}
           accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
+          useAppleWebpCodec
         />
         {page === 1 && (
           <Image
@@ -97,6 +98,7 @@ function Page({
               },
             ]}
             accessibilityIgnoresInvertColors
+            useAppleWebpCodec
             alt={_(msg`Your profile picture`)}
           />
         )}

src/screens/Onboarding/StepFinished/index.tsx

@@ -28,11 +28,11 @@ import {preferencesQueryKey} from '#/state/queries/preferences'
 import {RQKEY as profileRQKey} from '#/state/queries/profile'
 import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
-import {useProgressGuideControls} from '#/state/shell/progress-guide'
 import {
   useActiveStarterPack,
   useSetActiveStarterPack,
-} from '#/state/shell/starter-pack'
+} from '#/state/shell/landing'
+import {useProgressGuideControls} from '#/state/shell/progress-guide'
 import {
   OnboardingControls,
   OnboardingHeaderSlot,

src/screens/Onboarding/StepSuggestedAccounts/index.tsx

@@ -1,16 +1,18 @@
-import {useCallback, useEffect, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {View} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
 import {useMutation, useQueryClient} from '@tanstack/react-query'
+import * as bcp47Match from 'bcp-47-match'
 
 import {wait} from '#/lib/async/wait'
 import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
 import {isBlockedOrBlocking, isMuted} from '#/lib/moderation/blocked-and-muted'
 import {logger} from '#/logger'
 import {updateProfileShadow} from '#/state/cache/profile-shadow'
+import {useLanguagePrefs} from '#/state/preferences'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useAgent, useSession} from '#/state/session'
 import {
@@ -51,6 +53,19 @@ export function StepSuggestedAccounts() {
   // so we can enable/disable the button without having to dig through the shadow cache
   const [followedUsers, setFollowedUsers] = useState<string[]>([])
 
+  /*
+   * Special language handling copied wholesale from the Explore screen
+   */
+  const {contentLanguages} = useLanguagePrefs()
+  const useFullExperience = useMemo(() => {
+    if (contentLanguages.length === 0) return true
+    return bcp47Match.basicFilter('en', contentLanguages).length > 0
+  }, [contentLanguages])
+  const interestsDisplayNames = useInterestsDisplayNames()
+  const interests = Object.keys(interestsDisplayNames)
+    .sort(boostInterests(popularInterests))
+    .sort(boostInterests(state.interestsStepResults.selectedInterests))
+
   const {
     data: suggestedUsers,
     isLoading,
@@ -58,8 +73,8 @@ export function StepSuggestedAccounts() {
     isRefetching,
     refetch,
   } = useSuggestedOnboardingUsers({
-    category: selectedInterest,
-    search: false,
+    category: selectedInterest || (useFullExperience ? null : interests[0]),
+    search: !useFullExperience,
     overrideInterests: state.interestsStepResults.selectedInterests,
   })
 
@@ -90,6 +105,7 @@ export function StepSuggestedAccounts() {
         ax.metric('suggestedUser:follow', {
           logContext: 'Onboarding',
           location: 'FollowAll',
+          recSource: !useFullExperience ? 'Search' : undefined,
           recId: suggestedUsers?.recId,
           position: i,
           suggestedDid: did,
@@ -140,6 +156,7 @@ export function StepSuggestedAccounts() {
         seenProfilesRef.current.add(did)
         ax.metric('suggestedUser:seen', {
           logContext: 'Onboarding',
+          recSource: !useFullExperience ? 'Search' : undefined,
           recId: suggestedUsers?.recId,
           position,
           suggestedDid: did,
@@ -147,7 +164,7 @@ export function StepSuggestedAccounts() {
         })
       }
     },
-    [ax, selectedInterest, suggestedUsers?.recId],
+    [ax, selectedInterest, suggestedUsers?.recId, useFullExperience],
   )
 
   useEffect(() => {
@@ -233,6 +250,7 @@ export function StepSuggestedAccounts() {
                 position={index}
                 category={selectedInterest}
                 onSeen={onProfileSeen}
+                recSource={!useFullExperience ? 'Search' : undefined}
                 recId={suggestedUsers.recId}
               />
             ))}

src/screens/Profile/components/GermButton.tsx

@@ -105,6 +105,7 @@ function GermLogo({size}: {size: 'small' | 'large'}) {
       source={require('../../../../assets/images/germ_logo.webp')}
       accessibilityIgnoresInvertColors={false}
       contentFit="cover"
+      useAppleWebpCodec
       style={[
         a.rounded_full,
         size === 'large' ? {width: 32, height: 32} : {width: 16, height: 16},

src/screens/Settings/AutomationLabelSettings.tsx

@@ -123,7 +123,11 @@ export function AutomationLabelSettingsScreen({}: Props) {
                   paddingRight: 20, // helps visually center
                 },
               ]}>
-              <UserAvatar size={42} avatar={profile.avatar} type="user" />
+              <UserAvatar
+                size={42}
+                avatar={profile.avatar}
+                type={profile.associated?.labeler ? 'labeler' : 'user'}
+              />
               <View>
                 <View style={[a.flex_row, a.align_baseline]}>
                   <View style={[a.flex_row, a.align_center, a.gap_xs]}>

src/screens/Signup/index.tsx

@@ -9,7 +9,7 @@ import {FEEDBACK_FORM_URL} from '#/lib/constants'
 import {logger} from '#/logger'
 import {useServiceQuery} from '#/state/queries/service'
 import {useStarterPackQuery} from '#/state/queries/starter-packs'
-import {useActiveStarterPack} from '#/state/shell/starter-pack'
+import {useActiveStarterPack} from '#/state/shell/landing'
 import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {
   initialState,

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -19,7 +19,7 @@ import {useStarterPackQuery} from '#/state/queries/starter-packs'
 import {
   useActiveStarterPack,
   useSetActiveStarterPack,
-} from '#/state/shell/starter-pack'
+} from '#/state/shell/landing'
 import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {Logo} from '#/view/icons/Logo'

src/screens/StarterPack/StarterPackScreen.tsx

@@ -37,12 +37,12 @@ import {
   useStarterPackQuery,
 } from '#/state/queries/starter-packs'
 import {useAgent, useSession} from '#/state/session'
+import {useSetActiveStarterPack} from '#/state/shell/landing'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {
   ProgressGuideAction,
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
-import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
 import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'

src/screens/VideoFeed/components/Scrubber.tsx

@@ -23,8 +23,7 @@ import {
 import {useEventListener} from 'expo'
 import {type VideoPlayer} from 'expo-video'
 
-import {tokens} from '#/alf'
-import {atoms as a} from '#/alf'
+import {atoms as a, tokens} from '#/alf'
 import {formatTime} from '#/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/utils'
 import {Text} from '#/components/Typography'
 

src/state/preferences/moderation-opts.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useMemo} from 'react'
-import {BskyAgent, type ModerationOpts} from '@atproto/api'
+import {AtpAgent, type ModerationOpts} from '@atproto/api'
 
 import {useHiddenPosts, useLabelDefinitions} from '#/state/preferences'
 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation'
@@ -43,7 +43,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         ...moderationPrefs,
         labelers: moderationPrefs.labelers.length
           ? moderationPrefs.labelers
-          : BskyAgent.appLabelers.map(did => ({
+          : AtpAgent.appLabelers.map(did => ({
               did,
               labels: DEFAULT_LOGGED_OUT_LABEL_PREFERENCES,
             })),

src/state/queries/join-links.ts

@@ -0,0 +1,74 @@
+import {AtpAgent} from '@atproto/api'
+import {useQuery, useQueryClient} from '@tanstack/react-query'
+
+import {CHAT_SERVICE, DM_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {STALE} from '#/state/queries/index'
+import {createQueryKey} from '#/state/queries/util'
+import {useAgent} from '#/state/session'
+
+const joinLinkPreviewQueryKeyRoot = 'join-link-preview'
+
+export const createJoinLinkPreviewQueryKey = (args: {
+  codes: string[]
+  hasSession: boolean
+}) =>
+  createQueryKey(joinLinkPreviewQueryKeyRoot, args, {
+    persistedVersion: 1,
+  })
+
+export function useJoinLinkPreviewsQuery({
+  codes,
+  hasSession,
+  staleTime = STALE.MINUTES.ONE,
+}: {
+  codes?: string[]
+  hasSession: boolean
+  staleTime?: number
+}) {
+  const agent = useAgent()
+
+  return useQuery({
+    queryKey: createJoinLinkPreviewQueryKey({codes: codes ?? [], hasSession}),
+    queryFn: async () => {
+      if (!codes) throw new Error('No invite code')
+      try {
+        const previewAgent = new AtpAgent({service: CHAT_SERVICE})
+        const res = hasSession
+          ? await agent.chat.bsky.group.getJoinLinkPreviews(
+              {codes},
+              {headers: DM_SERVICE_HEADERS},
+            )
+          : await previewAgent.chat.bsky.group.getJoinLinkPreviews({codes})
+        return res.data
+      } catch (error) {
+        logger.error('Failed to fetch join link preview', {safeMessage: error})
+        throw error
+      }
+    },
+    enabled: codes != null && codes.length > 0,
+    staleTime,
+  })
+}
+
+export function usePrefetchJoinLinkPreviews() {
+  const agent = useAgent()
+  const queryClient = useQueryClient()
+
+  return ({codes, hasSession}: {codes: string[]; hasSession: boolean}) => {
+    return queryClient.prefetchQuery({
+      queryKey: createJoinLinkPreviewQueryKey({codes, hasSession}),
+      queryFn: async () => {
+        const previewAgent = new AtpAgent({service: CHAT_SERVICE})
+        const res = hasSession
+          ? await agent.chat.bsky.group.getJoinLinkPreviews(
+              {codes},
+              {headers: DM_SERVICE_HEADERS},
+            )
+          : await previewAgent.chat.bsky.group.getJoinLinkPreviews({codes})
+        return res.data
+      },
+      staleTime: STALE.MINUTES.ONE,
+    })
+  }
+}

src/state/queries/messages/join-requests.ts

@@ -0,0 +1,129 @@
+import {
+  type ChatBskyActorDefs,
+  type ChatBskyGroupApproveJoinRequest,
+  type ChatBskyGroupListJoinRequests,
+  type ChatBskyGroupRejectJoinRequest,
+} from '@atproto/api'
+import {
+  type InfiniteData,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query'
+
+import {DM_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {useAgent} from '#/state/session'
+import {listConvoMembersQueryKey} from './list-convo-members'
+import {createListJoinRequestsQueryKey} from './list-join-requests'
+
+type JoinRequestAction = 'approve' | 'reject'
+
+type JoinRequestOutput<A extends JoinRequestAction> = A extends 'approve'
+  ? ChatBskyGroupApproveJoinRequest.OutputSchema
+  : ChatBskyGroupRejectJoinRequest.OutputSchema
+
+export function useJoinRequestMutation<A extends JoinRequestAction>(
+  action: A,
+  convoId: string | undefined,
+  {
+    onSuccess,
+    onError,
+  }: {
+    onSuccess?: (data: JoinRequestOutput<A>) => void
+    onError?: (error: Error) => void
+  },
+) {
+  const queryClient = useQueryClient()
+  const agent = useAgent()
+
+  return useMutation({
+    mutationFn: async ({member}: {member: string}) => {
+      if (!convoId) throw new Error('No convoId provided')
+      const endpoint =
+        action === 'approve'
+          ? agent.chat.bsky.group.approveJoinRequest
+          : agent.chat.bsky.group.rejectJoinRequest
+      const {data} = await endpoint(
+        {convoId, member},
+        {headers: DM_SERVICE_HEADERS, encoding: 'application/json'},
+      )
+      return data as JoinRequestOutput<A>
+    },
+    onMutate: ({member}) => {
+      if (!convoId) return
+
+      const requestsKey = createListJoinRequestsQueryKey({convoId})
+      const prevRequests =
+        queryClient.getQueryData<
+          InfiniteData<ChatBskyGroupListJoinRequests.OutputSchema>
+        >(requestsKey)
+
+      const requestedByProfile = prevRequests?.pages
+        .flatMap(page => page.requests)
+        .find(request => request.requestedBy.did === member)?.requestedBy
+
+      queryClient.setQueryData<
+        InfiniteData<ChatBskyGroupListJoinRequests.OutputSchema>
+      >(requestsKey, prev => {
+        if (!prev?.pages) return prev
+        return {
+          ...prev,
+          pages: prev.pages.map(page => ({
+            ...page,
+            requests: page.requests.filter(
+              request => request.requestedBy.did !== member,
+            ),
+          })),
+        }
+      })
+
+      let prevMembers: ChatBskyActorDefs.ProfileViewBasic[] | undefined
+      if (action === 'approve' && requestedByProfile) {
+        const membersKey = listConvoMembersQueryKey(convoId)
+        prevMembers =
+          queryClient.getQueryData<ChatBskyActorDefs.ProfileViewBasic[]>(
+            membersKey,
+          )
+        queryClient.setQueryData<ChatBskyActorDefs.ProfileViewBasic[]>(
+          membersKey,
+          prev => {
+            if (!prev) return prev
+            if (prev.some(m => m.did === member)) return prev
+            return [...prev, requestedByProfile]
+          },
+        )
+      }
+
+      return {prevRequests, prevMembers}
+    },
+    onSuccess: data => {
+      if (convoId) {
+        void queryClient.invalidateQueries({
+          queryKey: createListJoinRequestsQueryKey({convoId}),
+        })
+        if (action === 'approve') {
+          void queryClient.invalidateQueries({
+            queryKey: listConvoMembersQueryKey(convoId),
+          })
+        }
+      }
+      onSuccess?.(data)
+    },
+    onError: (error, _variables, context) => {
+      logger.error(error)
+      if (convoId && context?.prevRequests) {
+        queryClient.setQueryData(
+          createListJoinRequestsQueryKey({convoId}),
+          context.prevRequests,
+        )
+      }
+      if (convoId && action === 'approve' && context?.prevMembers) {
+        queryClient.setQueryData(
+          listConvoMembersQueryKey(convoId),
+          context.prevMembers,
+        )
+      }
+      onError?.(error)
+    },
+  })
+}

src/state/queries/messages/request-join-group-chat.ts

@@ -0,0 +1,37 @@
+import {type ChatBskyGroupRequestJoin} from '@atproto/api'
+import {useMutation} from '@tanstack/react-query'
+
+import {DM_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {useAgent, useSession} from '#/state/session'
+
+export function useRequestJoinGroupChat({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: (data: ChatBskyGroupRequestJoin.OutputSchema) => void
+  onError?: (error: Error) => void
+} = {}) {
+  const agent = useAgent()
+  const {hasSession} = useSession()
+
+  return useMutation({
+    mutationFn: async ({code}: {code: string}) => {
+      if (!hasSession) throw new Error('Must be logged in to join')
+      if (!code) throw new Error('No invite code')
+
+      const res = await agent.chat.bsky.group.requestJoin(
+        {code},
+        {headers: DM_SERVICE_HEADERS},
+      )
+      return res.data
+    },
+    onSuccess: data => {
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error('Failed to join group chat', {safeMessage: error})
+      onError?.(error)
+    },
+  })
+}

src/state/queries/messages/withdraw-join-group-chat.ts

@@ -0,0 +1,38 @@
+import {type ChatBskyGroupWithdrawJoinRequest} from '@atproto/api'
+import {useMutation} from '@tanstack/react-query'
+
+import {DM_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {useAgent, useSession} from '#/state/session'
+
+export function useWithdrawJoinGroupChatRequest({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: (data: ChatBskyGroupWithdrawJoinRequest.OutputSchema) => void
+  onError?: (error: Error) => void
+} = {}) {
+  const agent = useAgent()
+  const {hasSession} = useSession()
+
+  return useMutation({
+    mutationFn: async ({convoId}: {convoId: string}) => {
+      if (!hasSession)
+        throw new Error('Must be logged in to withdraw a join request')
+      if (!convoId) throw new Error('No convoId provided')
+
+      const res = await agent.chat.bsky.group.withdrawJoinRequest(
+        {convoId},
+        {headers: DM_SERVICE_HEADERS},
+      )
+      return res.data
+    },
+    onSuccess: data => {
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error('Failed to withdraw join request', {safeMessage: error})
+      onError?.(error)
+    },
+  })
+}

src/state/queries/notifications/feed.ts

@@ -298,7 +298,7 @@ export function* findAllPostsInQueryData(
         if (AppBskyFeedDefs.isPostView(item.subject)) {
           const quotedPost = getEmbeddedPost(item.subject?.embed)
           if (quotedPost && didOrHandleUriMatches(atUri, quotedPost)) {
-            yield embedViewRecordToPostView(quotedPost!)
+            yield embedViewRecordToPostView(quotedPost)
           }
         }
       }

src/state/queries/nuxs/util.ts

@@ -34,7 +34,7 @@ export function parseAppNux(nux: AppBskyActorDefs.Nux): AppNux | undefined {
 
 export function serializeAppNux(nux: AppNux): AppBskyActorDefs.Nux {
   const {data, ...rest} = nux
-  const schema = NuxSchemas[nux.id as Nux]
+  const schema = NuxSchemas[nux.id]
 
   const result: AppBskyActorDefs.Nux = {
     ...rest,

src/state/queries/suggested-follows.ts

@@ -85,7 +85,7 @@ export function useSuggestedFollowsByActorWithDismiss({
 
   const profiles = useMemo(() => {
     return (data?.suggestions ?? []).map(profile => ({
-      actor: profile as bsky.profile.AnyProfileView,
+      actor: profile,
       recId: data?.recId,
     }))
   }, [data?.suggestions, data?.recId])

src/state/queries/usePostThread/traversal.ts

@@ -196,7 +196,7 @@ export function sortAndAnnotateThreadItems(
                    * `repliesSeenCounter` later on, since `repliesSeenCounter`
                    * is 1-indexed and `replyIndex` is 0-indexed.
                    */
-                  childMetadata!.replyIndex =
+                  childMetadata.replyIndex =
                     childParentMetadata.repliesSeenCounter
                 }
 

src/state/shell/landing.tsx

@@ -0,0 +1,66 @@
+import {createContext, useContext, useState} from 'react'
+
+import {logger} from '#/logger'
+
+type StarterPackLanding = {
+  type: 'starterpack'
+  uri: string
+  isClip?: boolean
+}
+
+type GroupChatJoinRequestLanding = {
+  type: 'groupchat'
+  uri: string
+  code: string
+}
+
+type LandingType = StarterPackLanding | GroupChatJoinRequestLanding | undefined
+
+type SetContext = (v: LandingType) => void
+
+const stateContext = createContext<LandingType>(undefined)
+stateContext.displayName = 'ActiveLandingStateContext'
+const setContext = createContext<SetContext>((_: LandingType) => {})
+setContext.displayName = 'ActiveLandingSetContext'
+
+export function Provider({children}: {children: React.ReactNode}) {
+  const [state, setState] = useState<LandingType>()
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+// Core hooks
+export const useActiveLanding = () => useContext(stateContext)
+export const useSetActiveLanding = () => useContext(setContext)
+
+// Filtered hooks for convenience
+export const useActiveStarterPack = () => {
+  const landing = useActiveLanding()
+  return landing?.type === 'starterpack' ? landing : undefined
+}
+
+export const useSetActiveStarterPack = () => {
+  const setLanding = useSetActiveLanding()
+  const currentLanding = useActiveLanding()
+  return (pack: {uri: string; isClip?: boolean} | undefined) => {
+    if (!pack) {
+      setLanding(undefined)
+    } else {
+      if (currentLanding && currentLanding.type !== 'starterpack') {
+        logger.debug(
+          `[landing] Replacing ${currentLanding.type} landing with starterpack`,
+        )
+      }
+      setLanding({type: 'starterpack', ...pack})
+    }
+  }
+}
+
+export const useActiveGroupChatJoinRequest = () => {
+  const landing = useActiveLanding()
+  return landing?.type === 'groupchat' ? landing : undefined
+}

src/state/shell/logged-out.tsx

@@ -1,7 +1,7 @@
 import {createContext, useContext, useMemo, useState} from 'react'
 
 import {useSession} from '#/state/session'
-import {useActiveStarterPack} from '#/state/shell/starter-pack'
+import {useActiveLanding} from '#/state/shell/landing'
 import {IS_WEB} from '#/env'
 
 type State = {
@@ -26,7 +26,12 @@ type Controls = {
     /**
      * The did of the account to populate the login form with.
      */
-    requestedAccount?: (string & {}) | 'none' | 'new' | 'starterpack'
+    requestedAccount?:
+      | (string & {})
+      | 'none'
+      | 'new'
+      | 'starterpack'
+      | 'groupchat'
   }) => void
   /**
    * Clears the requested account so that next time the logged out view is
@@ -48,17 +53,34 @@ const ControlsContext = createContext<Controls>({
 })
 ControlsContext.displayName = 'LoggedOutControlsContext'
 
+function getRequestedAccountFromLanding(
+  landing: ReturnType<typeof useActiveLanding>,
+  hasSession: boolean,
+): string | undefined {
+  if (hasSession || !landing) return undefined
+
+  switch (landing.type) {
+    case 'starterpack':
+      return IS_WEB ? 'starterpack' : 'new'
+    case 'groupchat':
+      return 'groupchat'
+    default:
+      return undefined
+  }
+}
+
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const activeStarterPack = useActiveStarterPack()
+  const activeLanding = useActiveLanding()
   const {hasSession} = useSession()
-  const shouldShowStarterPack = Boolean(activeStarterPack?.uri) && !hasSession
+
+  const requestedAccount = getRequestedAccountFromLanding(
+    activeLanding,
+    hasSession,
+  )
+
   const [state, setState] = useState<State>({
-    showLoggedOut: shouldShowStarterPack,
-    requestedAccountSwitchTo: shouldShowStarterPack
-      ? IS_WEB
-        ? 'starterpack'
-        : 'new'
-      : undefined,
+    showLoggedOut: Boolean(requestedAccount),
+    requestedAccountSwitchTo: requestedAccount,
   })
 
   const controls = useMemo<Controls>(

src/view/com/auth/LoggedOut.tsx

@@ -9,6 +9,7 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {STALE} from '#/state/queries'
 import {profilesQueryKey} from '#/state/queries/profile'
 import {useAgent, useSession} from '#/state/session'
+import {useSetActiveLanding} from '#/state/shell/landing'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
@@ -16,6 +17,7 @@ import {
 import {useEnableMinimalShellMode} from '#/state/shell/minimal-mode'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {Login} from '#/screens/Login'
+import {JoinRequest} from '#/screens/Messages/JoinRequest'
 import {Signup} from '#/screens/Signup'
 import {LandingScreen} from '#/screens/StarterPack/StarterPackLandingScreen'
 import {atoms as a, native, tokens, useTheme} from '#/alf'
@@ -29,9 +31,26 @@ enum ScreenState {
   S_Login,
   S_CreateAccount,
   S_StarterPack,
+  S_GroupChatJoinRequest,
 }
 export {ScreenState as LoggedOutScreenState}
 
+function getInitialScreenState(requestedAccountSwitchTo?: string): ScreenState {
+  switch (requestedAccountSwitchTo) {
+    case 'new':
+      return ScreenState.S_CreateAccount
+    case 'starterpack':
+      return ScreenState.S_StarterPack
+    case 'groupchat':
+      return ScreenState.S_GroupChatJoinRequest
+    case undefined:
+      return ScreenState.S_LoginOrCreateAccount
+    default:
+      // DID or other string = login with that account
+      return ScreenState.S_Login
+  }
+}
+
 export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const {_} = useLingui()
   const ax = useAnalytics()
@@ -39,18 +58,11 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const insets = useSafeAreaInsets()
   useEnableMinimalShellMode()
   const {requestedAccountSwitchTo} = useLoggedOutView()
-  const [screenState, setScreenState] = useState<ScreenState>(() => {
-    if (requestedAccountSwitchTo === 'new') {
-      return ScreenState.S_CreateAccount
-    } else if (requestedAccountSwitchTo === 'starterpack') {
-      return ScreenState.S_StarterPack
-    } else if (requestedAccountSwitchTo != null) {
-      return ScreenState.S_Login
-    } else {
-      return ScreenState.S_LoginOrCreateAccount
-    }
-  })
+  const initialScreenState = getInitialScreenState(requestedAccountSwitchTo)
+  const [screenState, setScreenState] =
+    useState<ScreenState>(initialScreenState)
   const {clearRequestedAccount} = useLoggedOutViewControls()
+  const setActiveLanding = useSetActiveLanding()
 
   const queryClient = useQueryClient()
   const {accounts} = useSession()
@@ -73,7 +85,9 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
       onDismiss()
     }
     clearRequestedAccount()
-  }, [clearRequestedAccount, onDismiss])
+    // Clear landing context when user dismisses the modal
+    setActiveLanding(undefined)
+  }, [clearRequestedAccount, onDismiss, setActiveLanding])
 
   return (
     <View
@@ -107,6 +121,8 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
 
         {screenState === ScreenState.S_StarterPack ? (
           <LandingScreen setScreenState={setScreenState} />
+        ) : screenState === ScreenState.S_GroupChatJoinRequest ? (
+          <JoinRequest setScreenState={setScreenState} />
         ) : screenState === ScreenState.S_LoginOrCreateAccount ? (
           <SplashScreen
             onPressSignin={() => {
@@ -122,17 +138,12 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
         {screenState === ScreenState.S_Login ? (
           <Login
             onPressBack={() => {
-              setScreenState(ScreenState.S_LoginOrCreateAccount)
-              clearRequestedAccount()
+              setScreenState(initialScreenState)
             }}
           />
         ) : undefined}
         {screenState === ScreenState.S_CreateAccount ? (
-          <Signup
-            onPressBack={() =>
-              setScreenState(ScreenState.S_LoginOrCreateAccount)
-            }
-          />
+          <Signup onPressBack={() => setScreenState(initialScreenState)} />
         ) : undefined}
       </ErrorBoundary>
     </View>

src/view/com/composer/ComposerReplyTo.tsx

@@ -151,8 +151,8 @@ function ComposerReplyToImages({
         <Image
           source={{uri: images[0].thumb}}
           style={[a.flex_1]}
-          cachePolicy="memory-disk"
           accessibilityIgnoresInvertColors
+          useAppleWebpCodec
         />
       )) ||
         (images.length === 2 && (
@@ -160,14 +160,14 @@ function ComposerReplyToImages({
             <Image
               source={{uri: images[0].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
             <Image
               source={{uri: images[1].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
           </View>
         )) ||
@@ -176,21 +176,21 @@ function ComposerReplyToImages({
             <Image
               source={{uri: images[0].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
             <View style={[a.flex_1, a.gap_2xs]}>
               <Image
                 source={{uri: images[1].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[2].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
           </View>
@@ -201,28 +201,28 @@ function ComposerReplyToImages({
               <Image
                 source={{uri: images[0].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[1].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
             <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
               <Image
                 source={{uri: images[2].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[3].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
           </View>

src/view/com/composer/ExternalEmbed.tsx

@@ -11,6 +11,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
 import {ExternalEmbed} from '#/components/Post/Embed/ExternalEmbed'
 import {ModeratedFeedEmbed} from '#/components/Post/Embed/FeedEmbed'
+import {JoinRequestEmbed} from '#/components/Post/Embed/JoinRequestEmbed'
 import {ModeratedListEmbed} from '#/components/Post/Embed/ListEmbed'
 import {StandardSiteEmbed} from '#/components/Post/Embed/StandardSiteEmbed'
 import {isStandardSiteEmbed} from '#/components/Post/Embed/StandardSiteEmbed/utils'
@@ -98,7 +99,8 @@ export const ExternalEmbedLink = ({
                 uri,
                 description:
                   data.view?.external?.description || data.description,
-                thumb: data.view?.external?.thumb || data.thumb?.source.path,
+                // prefer opengraph data to atproto record-derived image
+                thumb: data.thumb?.source.path || data.view?.external?.thumb,
               }}
             />
           )
@@ -114,6 +116,8 @@ export const ExternalEmbedLink = ({
             hideAlt
           />
         )
+      } else if (data.type === 'chat-invite') {
+        return <JoinRequestEmbed preview={data.view} />
       } else if (data.kind === 'feed') {
         return (
           <ModeratedFeedEmbed

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -1,6 +1,5 @@
 import {View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {useLingui} from '@lingui/react/macro'
 
 import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -11,12 +10,12 @@ export function ExternalEmbedRemoveBtn({
   style,
 }: {onRemove: () => void} & ViewStyleProp) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   return (
     <View style={[a.absolute, {top: 8, right: 8}, a.z_50, style]}>
       <Button
-        label={_(msg`Remove attachment`)}
+        label={l`Remove attachment`}
         onPress={onRemove}
         size="small"
         variant="solid"

src/view/com/composer/drafts/state/api.ts

@@ -470,11 +470,11 @@ export async function draftToComposerPosts(
               height,
               mime: 'image/jpeg',
             },
-          } as ComposerImage
+          } satisfies ComposerImage
         })
 
         const images = (await Promise.all(imagePromises)).filter(
-          (img): img is ComposerImage => img !== null,
+          (img): img is NonNullable<typeof img> => img !== null,
         )
         if (images.length > 0) {
           embed.media = {type: 'images', images}
@@ -511,7 +511,7 @@ export async function draftToComposerPosts(
                   tinygif: mediaObject,
                   preview: mediaObject,
                 },
-              } as Gif,
+              },
               alt: gifData.alt,
             }
             break

src/view/com/composer/photos/Gallery.tsx

@@ -245,6 +245,7 @@ const GalleryItem = ({
         }}
         accessible={true}
         accessibilityIgnoresInvertColors
+        enforceEarlyResizing
         cachePolicy="none"
         autoplay={false}
         contentFit="cover"

src/view/com/notifications/NotificationFeedItem.tsx

@@ -1093,6 +1093,7 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
         <MediaPreview.Embed
           embed={post.embed}
           style={styles.additionalPostImages}
+          peekable
         />
       </>
     )

src/view/com/testing/TestCtrls.e2e.tsx

@@ -55,7 +55,7 @@ export function TestCtrls() {
         accessibilityLabel="Text input field"
         accessibilityHint="Enter proxy header"
         testID="e2eProxyHeaderInput"
-        onChangeText={val => setProxyHeader(val as any)}
+        onChangeText={val => setProxyHeader(val)}
         autoComplete="off"
         autoCorrect={false}
         autoCapitalize="none"