From 290deb22329045c904a92ee33f39592115e8dcd0 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 31 Oct 2026 20:35:16 +0200
Subject: [PATCH 01/10] use inline menus for list, chat, avatar and account
 menus

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/dms/ConvoMenu.tsx              | 141 ++++++++++++------
 .../ConversationSettings/MemberMenu.tsx       |  23 ++-
 .../Messages/components/RequestButtons.tsx    |   6 +-
 .../components/MoreOptionsMenu.tsx            |   2 +-
 .../ProfileList/components/SubscribeMenu.tsx  |   2 +-
 src/screens/Settings/Settings.tsx             |   2 +-
 src/view/com/util/UserAvatar.tsx              |   2 +-
 7 files changed, 121 insertions(+), 57 deletions(-)

diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx
index e3414fd070e..e7b93bedfe0 100644
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@@ -43,6 +43,7 @@ import * as Menu from '#/components/Menu'
 import {ReportDialog} from '#/components/moderation/ReportDialog'
 import * as Prompt from '#/components/Prompt'
 import * as Toast from '#/components/Toast'
+import {IS_NATIVE} from '#/env'
 import type * as bsky from '#/types/bsky'
 
 let ConvoMenu = ({
@@ -80,45 +81,59 @@ let ConvoMenu = ({
 
   const reportSubject = getConvoReportSubject(convo, currentAccount?.did)
 
+  const trigger = hideTrigger ? null : (
+    <Menu.Trigger label={l`Chat settings`}>
+      {({props}) => (
+        <View style={[style]}>
+          <Button
+            label={props.accessibilityLabel}
+            {...props}
+            onPress={() => {
+              Keyboard.dismiss()
+              props.onPress()
+            }}
+            size="small"
+            color="secondary"
+            shape="round"
+            variant="ghost"
+            style={[a.bg_transparent]}>
+            <ButtonIcon icon={DotsHorizontalIcon} size="md" />
+          </Button>
+        </View>
+      )}
+    </Menu.Trigger>
+  )
+  const contentProps = {
+    profile,
+    showMarkAsRead,
+    blockInfo,
+    convo,
+    canReport: !!reportSubject,
+    leaveConvoControl,
+    reportControl,
+    blockedByListControl,
+  }
+
   return (
     <>
-      <Menu.Root control={control}>
-        {!hideTrigger && (
-          <View style={[style]}>
-            <Menu.Trigger label={l`Chat settings`}>
-              {({props}) => (
-                <Button
-                  label={props.accessibilityLabel}
-                  {...props}
-                  onPress={() => {
-                    Keyboard.dismiss()
-                    props.onPress()
-                  }}
-                  size="small"
-                  color="secondary"
-                  shape="round"
-                  variant="ghost"
-                  style={[a.bg_transparent]}>
-                  <ButtonIcon icon={DotsHorizontalIcon} size="md" />
-                </Button>
-              )}
-            </Menu.Trigger>
-          </View>
-        )}
-
-        <Menu.Outer>
-          <MenuContent
-            profile={profile}
-            showMarkAsRead={showMarkAsRead}
-            blockInfo={blockInfo}
-            convo={convo}
-            canReport={!!reportSubject}
-            leaveConvoControl={leaveConvoControl}
-            reportControl={reportControl}
-            blockedByListControl={blockedByListControl}
-          />
-        </Menu.Outer>
-      </Menu.Root>
+      {/*
+       * Native menus can only open from their trigger, so the chat list's
+       * long-press menu, which has none, stays a sheet.
+       */}
+      {IS_NATIVE && trigger ? (
+        <InlineConvoMenu
+          control={control}
+          trigger={trigger}
+          {...contentProps}
+        />
+      ) : (
+        <Menu.Root control={control}>
+          {trigger}
+          <Menu.Outer>
+            <MenuContent {...contentProps} />
+          </Menu.Outer>
+        </Menu.Root>
+      )}
       <LeaveConvoPrompt
         control={leaveConvoControl}
         convoId={convo.view.id}
@@ -162,16 +177,7 @@ let ConvoMenu = ({
 }
 ConvoMenu = memo(ConvoMenu)
 
-function MenuContent({
-  convo: initialConvo,
-  profile,
-  canReport,
-  showMarkAsRead,
-  blockInfo,
-  leaveConvoControl,
-  reportControl,
-  blockedByListControl,
-}: {
+type MenuContentProps = {
   convo: ConvoWithDetails
   profile: Shadow<bsky.profile.AnyProfileView>
   canReport: boolean
@@ -183,7 +189,48 @@ function MenuContent({
   leaveConvoControl: Prompt.PromptControlProps
   reportControl: Prompt.PromptControlProps
   blockedByListControl: Prompt.PromptControlProps
+}
+
+/**
+ * An inline menu needs its groups as direct children of `Menu.Outer`, so its
+ * items' hooks run as soon as it mounts. That's fine for the one in the
+ * conversation header.
+ */
+function InlineConvoMenu({
+  control,
+  trigger,
+  ...props
+}: MenuContentProps & {
+  control?: Menu.MenuControlProps
+  trigger: React.ReactElement
 }) {
+  const items = useConvoMenuItems(props)
+  return (
+    <Menu.Root inline control={control}>
+      {trigger}
+      <Menu.Outer>{items}</Menu.Outer>
+    </Menu.Root>
+  )
+}
+
+/**
+ * Sheet menus only mount their content while open, so a chat list row doesn't
+ * fetch its convo until its menu opens.
+ */
+function MenuContent(props: MenuContentProps) {
+  return useConvoMenuItems(props)
+}
+
+function useConvoMenuItems({
+  convo: initialConvo,
+  profile,
+  canReport,
+  showMarkAsRead,
+  blockInfo,
+  leaveConvoControl,
+  reportControl,
+  blockedByListControl,
+}: MenuContentProps) {
   const navigation = useNavigation<NavigationProp>()
   const {t: l} = useLingui()
   const {mutate: markAsRead} = useMarkAsReadMutation()
diff --git a/src/screens/Messages/ConversationSettings/MemberMenu.tsx b/src/screens/Messages/ConversationSettings/MemberMenu.tsx
index f128951f8fe..c6c74d53ece 100644
--- a/src/screens/Messages/ConversationSettings/MemberMenu.tsx
+++ b/src/screens/Messages/ConversationSettings/MemberMenu.tsx
@@ -54,9 +54,10 @@ export function MemberMenu({
   const removeMemberPrompt = Prompt.usePromptControl()
 
   const [menuDidOpen, setMenuDidOpen] = useState(false)
-  const {data: convoAvailability} = useGetConvoAvailabilityQuery(profile.did, {
-    enabled: menuDidOpen,
-  })
+  const {data: prefetchedAvailability, refetch: fetchAvailability} =
+    useGetConvoAvailabilityQuery(profile.did, {
+      enabled: menuDidOpen,
+    })
   const {mutate: initiateConvo} = useGetConvoForMembers({
     onSuccess: ({convo}) => {
       ax.metric('chat:open', {logContext: 'ConvoSettings'})
@@ -78,7 +79,7 @@ export function MemberMenu({
   })
   const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
 
-  const messageMember = () => {
+  const openChat = (convoAvailability: typeof prefetchedAvailability) => {
     if (!convoAvailability?.canChat) {
       return
     }
@@ -94,6 +95,18 @@ export function MemberMenu({
     }
   }
 
+  const messageMember = () => {
+    if (prefetchedAvailability) {
+      openChat(prefetchedAvailability)
+    } else {
+      /*
+       * The trigger prefetches this, but on iOS the native menu takes the
+       * tap, so the trigger's onPress never runs.
+       */
+      void fetchAvailability().then(({data}) => openChat(data))
+    }
+  }
+
   const handleMessageMember = requireEmailVerification(messageMember, {
     instructions: [
       <Trans key="message">
@@ -138,7 +151,7 @@ export function MemberMenu({
 
   return (
     <>
-      <Menu.Root>
+      <Menu.Root inline>
         <Menu.Trigger label={l`Open chat member options for ${displayName}`}>
           {({props, state, control: menuControl}) => {
             const isActive =
diff --git a/src/screens/Messages/components/RequestButtons.tsx b/src/screens/Messages/components/RequestButtons.tsx
index d0a5cb486fa..3618ea58df0 100644
--- a/src/screens/Messages/components/RequestButtons.tsx
+++ b/src/screens/Messages/components/RequestButtons.tsx
@@ -121,7 +121,11 @@ export function RejectMenu({
 
   return (
     <>
-      <Menu.Root>
+      {/*
+       * In the conversation, the button stretches across the row, and an
+       * inline menu's trigger is only as wide as its content.
+       */}
+      <Menu.Root inline={currentScreen === 'list'}>
         <Menu.Trigger label={l`Reject chat request`}>
           {({props: triggerProps}) => (
             <Button
diff --git a/src/screens/ProfileList/components/MoreOptionsMenu.tsx b/src/screens/ProfileList/components/MoreOptionsMenu.tsx
index bb8d426cd12..45a5cc6b84b 100644
--- a/src/screens/ProfileList/components/MoreOptionsMenu.tsx
+++ b/src/screens/ProfileList/components/MoreOptionsMenu.tsx
@@ -167,7 +167,7 @@ export function MoreOptionsMenu({
 
   return (
     <>
-      <Menu.Root>
+      <Menu.Root inline>
         <Menu.Trigger label={l`More options`}>
           {({props}) => (
             <Button
diff --git a/src/screens/ProfileList/components/SubscribeMenu.tsx b/src/screens/ProfileList/components/SubscribeMenu.tsx
index 1553e2bc1e8..db606b33c99 100644
--- a/src/screens/ProfileList/components/SubscribeMenu.tsx
+++ b/src/screens/ProfileList/components/SubscribeMenu.tsx
@@ -59,7 +59,7 @@ export function SubscribeMenu({list}: {list: app.bsky.graph.defs.ListView}) {
 
   return (
     <>
-      <Menu.Root>
+      <Menu.Root inline>
         <Menu.Trigger label={_(msg`Subscribe to this list`)}>
           {({props}) => (
             <Button
diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx
index bf87814c2c3..4bc5cead6c7 100644
--- a/src/screens/Settings/Settings.tsx
+++ b/src/screens/Settings/Settings.tsx
@@ -672,7 +672,7 @@ function AccountRow({
         {pendingDid === account.did && <SettingsList.ItemIcon icon={Loader} />}
       </SettingsList.PressableItem>
       {!pendingDid && (
-        <Menu.Root>
+        <Menu.Root inline>
           <Menu.Trigger label={l`Account options`}>
             {({props, state}) => (
               <Pressable
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index c7512f033ef..fb362f8fad9 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -461,7 +461,7 @@ let EditableUserAvatar = ({
 
   return (
     <>
-      <Menu.Root>
+      <Menu.Root inline>
         <Menu.Trigger label={_(msg`Edit avatar`)}>
           {({props}) => (
             <Pressable {...props} testID="changeAvatarBtn">

From 81abb1fee119ab5c89f469c0b723853246076499 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 31 Oct 2026 21:26:45 +0200
Subject: [PATCH 02/10] keep the edit profile avatar menu as a sheet

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/view/com/util/UserAvatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index fb362f8fad9..c7512f033ef 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -461,7 +461,7 @@ let EditableUserAvatar = ({
 
   return (
     <>
-      <Menu.Root inline>
+      <Menu.Root>
         <Menu.Trigger label={_(msg`Edit avatar`)}>
           {({props}) => (
             <Pressable {...props} testID="changeAvatarBtn">

From 192e7a5e985edd4697d05e2124221c8984af0424 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 31 Oct 2026 21:55:53 +0200
Subject: [PATCH 03/10] explain when the member menu's prefetch runs on ios

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/screens/Messages/ConversationSettings/MemberMenu.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/screens/Messages/ConversationSettings/MemberMenu.tsx b/src/screens/Messages/ConversationSettings/MemberMenu.tsx
index c6c74d53ece..2ba3d851844 100644
--- a/src/screens/Messages/ConversationSettings/MemberMenu.tsx
+++ b/src/screens/Messages/ConversationSettings/MemberMenu.tsx
@@ -100,8 +100,9 @@ export function MemberMenu({
       openChat(prefetchedAvailability)
     } else {
       /*
-       * The trigger prefetches this, but on iOS the native menu takes the
-       * tap, so the trigger's onPress never runs.
+       * The trigger prefetches this, but on iOS its onPress only runs when
+       * the menu first opens, and the badge trigger's never does, since its
+       * onPress is nested in `pressableProps`.
        */
       void fetchAvailability().then(({data}) => openChat(data))
     }

From 6ebb6e3d9edb3df616ec047d3075ebca9ea1fdec Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 31 Oct 2026 21:55:56 +0200
Subject: [PATCH 04/10] use an inline menu for the ipad repost button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/PostControls/RepostButtonMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PostControls/RepostButtonMenu.tsx b/src/components/PostControls/RepostButtonMenu.tsx
index 15413f9a85b..0c18c24ba5b 100644
--- a/src/components/PostControls/RepostButtonMenu.tsx
+++ b/src/components/PostControls/RepostButtonMenu.tsx
@@ -40,7 +40,7 @@ export function RepostButtonMenu({
 
   return hasSession ? (
     <EventStopper onKeyDown={false}>
-      <Menu.Root>
+      <Menu.Root inline>
         <Menu.Trigger label={l`Repost or quote post`}>
           {({props}) => (
             <PostControlButton

From 63ad753eb216c8fcd03190d76c60d9ba1776cb4a Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sat, 31 Oct 2026 23:18:52 +0200
Subject: [PATCH 05/10] keep the chat request reject menu as a sheet

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/screens/Messages/components/RequestButtons.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/screens/Messages/components/RequestButtons.tsx b/src/screens/Messages/components/RequestButtons.tsx
index 3618ea58df0..d0a5cb486fa 100644
--- a/src/screens/Messages/components/RequestButtons.tsx
+++ b/src/screens/Messages/components/RequestButtons.tsx
@@ -121,11 +121,7 @@ export function RejectMenu({
 
   return (
     <>
-      {/*
-       * In the conversation, the button stretches across the row, and an
-       * inline menu's trigger is only as wide as its content.
-       */}
-      <Menu.Root inline={currentScreen === 'list'}>
+      <Menu.Root>
         <Menu.Trigger label={l`Reject chat request`}>
           {({props: triggerProps}) => (
             <Button

From e4aea5992173acde10ce8dbacfa31408958caba8 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sun, 1 Nov 2026 10:18:48 +0200
Subject: [PATCH 06/10] drop long-press-to-quote now the ipad repost menu is
 native

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../PostControls/RepostButton.test.tsx        |  6 +--
 src/components/PostControls/RepostButton.tsx  |  6 +--
 .../PostControls/RepostButtonMenu.test.tsx    | 52 +------------------
 .../PostControls/RepostButtonMenu.tsx         | 16 +-----
 4 files changed, 5 insertions(+), 75 deletions(-)

diff --git a/src/components/PostControls/RepostButton.test.tsx b/src/components/PostControls/RepostButton.test.tsx
index 346cebd995d..3466411b18a 100644
--- a/src/components/PostControls/RepostButton.test.tsx
+++ b/src/components/PostControls/RepostButton.test.tsx
@@ -11,11 +11,7 @@ jest.mock('#/components/PostControls/RepostButtonMenu', () => {
   const {View} = require('react-native')
 
   return {
-    RepostButtonMenu: ({longPressToQuote}: {longPressToQuote?: boolean}) => (
-      <View
-        testID={longPressToQuote ? 'ipad-repost-menu' : 'web-repost-menu'}
-      />
-    ),
+    RepostButtonMenu: () => <View testID="ipad-repost-menu" />,
   }
 })
 jest.mock('#/components/Dialog', () => {
diff --git a/src/components/PostControls/RepostButton.tsx b/src/components/PostControls/RepostButton.tsx
index ad7f24c92cb..8b686d19ef5 100644
--- a/src/components/PostControls/RepostButton.tsx
+++ b/src/components/PostControls/RepostButton.tsx
@@ -22,11 +22,7 @@ import {
 import {RepostButtonMenu, type RepostButtonProps} from './RepostButtonMenu'
 
 let RepostButton = (props: RepostButtonProps): React.ReactNode =>
-  IS_IPAD ? (
-    <RepostButtonMenu {...props} longPressToQuote />
-  ) : (
-    <RepostButtonDialog {...props} />
-  )
+  IS_IPAD ? <RepostButtonMenu {...props} /> : <RepostButtonDialog {...props} />
 
 RepostButton = memo(RepostButton)
 export {RepostButton}
diff --git a/src/components/PostControls/RepostButtonMenu.test.tsx b/src/components/PostControls/RepostButtonMenu.test.tsx
index b6c066cc6e7..3872d55bc88 100644
--- a/src/components/PostControls/RepostButtonMenu.test.tsx
+++ b/src/components/PostControls/RepostButtonMenu.test.tsx
@@ -1,6 +1,5 @@
 import {fireEvent, render, within} from '@testing-library/react-native'
 
-import * as Menu from '#/components/Menu'
 import {RepostButtonMenu} from './RepostButtonMenu'
 
 jest.mock('#/state/session', () => ({
@@ -12,12 +11,8 @@ jest.mock('#/alf', () => ({
 }))
 jest.mock('#/components/Menu', () => {
   const {Pressable, Text, View} = require('react-native')
-  const open = jest.fn()
-  const unanchoredOpen = jest.fn()
 
   return {
-    __testOpen: open,
-    __testUnanchoredOpen: unanchoredOpen,
     Root: ({children}: React.PropsWithChildren) => <View>{children}</View>,
     Trigger: ({
       children,
@@ -30,8 +25,8 @@ jest.mock('#/components/Menu', () => {
       label: string
     }) =>
       children({
-        control: {open: unanchoredOpen},
-        props: {accessibilityLabel: label, onPress: open},
+        control: {open: jest.fn()},
+        props: {accessibilityLabel: label, onPress: jest.fn()},
       }),
     Outer: ({children}: React.PropsWithChildren) => <View>{children}</View>,
     Group: ({children}: React.PropsWithChildren) => (
@@ -73,19 +68,16 @@ jest.mock('./PostControlButton', () => {
     PostControlButton: ({
       children,
       label,
-      onLongPress,
       onPress,
       testID,
     }: React.PropsWithChildren<{
       label?: string
-      onLongPress?: () => void
       onPress?: () => void
       testID?: string
     }>) => (
       <Pressable
         accessibilityHint=""
         accessibilityLabel={label}
-        onLongPress={onLongPress}
         onPress={onPress}
         testID={testID}>
         {children}
@@ -110,11 +102,6 @@ jest.mock('@lingui/react', () => ({
   }),
 }))
 
-const mockMenuOpen = (Menu as unknown as {__testOpen: jest.Mock}).__testOpen
-const mockUnanchoredOpen = (
-  Menu as unknown as {__testUnanchoredOpen: jest.Mock}
-).__testUnanchoredOpen
-
 afterEach(() => {
   jest.clearAllMocks()
 })
@@ -158,39 +145,4 @@ describe('RepostButtonMenu', () => {
     fireEvent.press(quoteButton)
     expect(onQuote).not.toHaveBeenCalled()
   })
-
-  it('opens the menu on long press when quote is disabled', () => {
-    const screen = render(
-      <RepostButtonMenu
-        isReposted={false}
-        onRepost={jest.fn()}
-        onQuote={jest.fn()}
-        embeddingDisabled
-        longPressToQuote
-      />,
-    )
-
-    fireEvent(screen.getByTestId('repostBtn'), 'longPress')
-
-    expect(mockMenuOpen).toHaveBeenCalledTimes(1)
-    expect(mockUnanchoredOpen).not.toHaveBeenCalled()
-  })
-
-  it('keeps long press-to-quote when quote is enabled', () => {
-    const onQuote = jest.fn()
-    const screen = render(
-      <RepostButtonMenu
-        isReposted={false}
-        onRepost={jest.fn()}
-        onQuote={onQuote}
-        embeddingDisabled={false}
-        longPressToQuote
-      />,
-    )
-
-    fireEvent(screen.getByTestId('repostBtn'), 'longPress')
-
-    expect(onQuote).toHaveBeenCalledTimes(1)
-    expect(mockMenuOpen).not.toHaveBeenCalled()
-  })
 })
diff --git a/src/components/PostControls/RepostButtonMenu.tsx b/src/components/PostControls/RepostButtonMenu.tsx
index 0c18c24ba5b..376a6a83323 100644
--- a/src/components/PostControls/RepostButtonMenu.tsx
+++ b/src/components/PostControls/RepostButtonMenu.tsx
@@ -20,7 +20,6 @@ export interface RepostButtonProps {
   onQuote: () => void
   big?: boolean
   embeddingDisabled: boolean
-  longPressToQuote?: boolean
 }
 
 export function RepostButtonMenu({
@@ -30,7 +29,6 @@ export function RepostButtonMenu({
   onQuote,
   big,
   embeddingDisabled,
-  longPressToQuote = false,
 }: RepostButtonProps): React.ReactNode {
   const t = useTheme()
   const {t: l} = useLingui()
@@ -49,19 +47,7 @@ export function RepostButtonMenu({
               activeColor={t.palette.positive_500}
               label={props.accessibilityLabel}
               big={big}
-              {...props}
-              onLongPress={
-                longPressToQuote
-                  ? () =>
-                      requireAuth(() => {
-                        if (embeddingDisabled) {
-                          props.onPress()
-                        } else {
-                          onQuote()
-                        }
-                      })
-                  : undefined
-              }>
+              {...props}>
               <PostControlButtonIcon icon={RepostIcon} />
               {typeof repostCount !== 'undefined' && repostCount > 0 && (
                 <PostControlButtonText testID="repostCount">

From 9caeebf06adc7511a46590df6d84a03eaf9200f4 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 2 Nov 2026 09:28:56 +0200
Subject: [PATCH 07/10] use an inline menu for the native lightbox's image
 options

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/Lightbox/chrome/ImageMenu.tsx | 224 +++----------------
 1 file changed, 26 insertions(+), 198 deletions(-)

diff --git a/src/components/Lightbox/chrome/ImageMenu.tsx b/src/components/Lightbox/chrome/ImageMenu.tsx
index 0d34e8be341..27471a12701 100644
--- a/src/components/Lightbox/chrome/ImageMenu.tsx
+++ b/src/components/Lightbox/chrome/ImageMenu.tsx
@@ -1,28 +1,10 @@
-import {useEffect, useRef, useState} from 'react'
-import {
-  Modal,
-  Pressable,
-  StyleSheet,
-  useWindowDimensions,
-  View,
-} from 'react-native'
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated'
-import {scheduleOnRN} from 'react-native-worklets'
 import {useLingui} from '@lingui/react/macro'
 
-import {atoms as a} from '#/alf'
+import {ThemeProvider} from '#/alf'
 import {ArrowShareRight_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowShareRight'
-import {type Props as IconProps} from '#/components/icons/common'
 import {DotGrid3x1_Stroke2_Corner0_Rounded as DotsIcon} from '#/components/icons/DotGrid'
 import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
-import {Text} from '#/components/Typography'
-import {IS_IPAD} from '#/env'
+import * as Menu from '#/components/Menu'
 import {CircleChromeButton} from './CircleChromeButton'
 
 type Props = {
@@ -30,188 +12,34 @@ type Props = {
   onPressSave: () => void
 }
 
-type Anchor = {x: number; y: number; width: number; height: number}
-
-const GAP = 6
-const CARD_BG = '#000000'
-const CARD_BORDER = '#232e3e'
-const ITEM_TEXT = '#f9fafb'
-
-const SPRING_IN = {damping: 18, mass: 0.6, stiffness: 240}
-const TIMING_OUT = {duration: 150}
-
 export function ImageMenu({onPressShare, onPressSave}: Props) {
   const {t: l} = useLingui()
-  const triggerRef = useRef<React.ComponentRef<typeof View>>(null)
-  const [isMounted, setIsMounted] = useState(false)
-  const [anchor, setAnchor] = useState<Anchor | null>(null)
-  const {width: windowWidth, height: windowHeight} = useWindowDimensions()
-  const progress = useSharedValue(0)
-
-  useEffect(() => {
-    if (!isMounted) return
-    triggerRef.current?.measureInWindow((x, y, width, height) => {
-      setAnchor({x, y, width, height})
-    })
-  }, [isMounted, windowWidth, windowHeight])
-
-  const open = () => {
-    triggerRef.current?.measureInWindow((x, y, width, height) => {
-      setAnchor({x, y, width, height})
-      setIsMounted(true)
-      progress.set(withSpring(1, SPRING_IN))
-    })
-  }
-
-  const close = () => {
-    progress.set(
-      withTiming(0, TIMING_OUT, finished => {
-        if (finished) {
-          scheduleOnRN(setIsMounted, false)
-        }
-      }),
-    )
-  }
-
-  const runAction = (action: () => void) => {
-    close()
-    action()
-  }
 
   return (
-    <>
-      <View ref={triggerRef} collapsable={false}>
-        <CircleChromeButton
-          icon={DotsIcon}
-          iconStyle={{transform: [{rotate: '90deg'}]}}
-          label={l`Image options`}
-          onPress={open}
-        />
-      </View>
-      <Modal
-        transparent
-        visible={isMounted}
-        animationType="none"
-        onRequestClose={close}
-        supportedOrientations={
-          IS_IPAD
-            ? [
-                'portrait',
-                'portrait-upside-down',
-                'landscape-left',
-                'landscape-right',
-              ]
-            : ['portrait', 'landscape']
-        }
-        statusBarTranslucent>
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={l`Close menu`}
-          accessibilityHint=""
-          style={[a.absolute, a.inset_0]}
-          onPress={close}
-        />
-        {anchor && (
-          <MenuCard anchor={anchor} progress={progress}>
-            <MenuItem
-              icon={ShareIcon}
-              label={l`Share image`}
-              onPress={() => runAction(onPressShare)}
+    // The lightbox is always dark, so its menu is too.
+    <ThemeProvider theme="dark">
+      <Menu.Root inline>
+        <Menu.Trigger label={l`Image options`}>
+          {({props}) => (
+            <CircleChromeButton
+              icon={DotsIcon}
+              iconStyle={{transform: [{rotate: '90deg'}]}}
+              label={props.accessibilityLabel}
+              onPress={props.onPress}
             />
-            <MenuItem
-              icon={DownloadIcon}
-              label={l`Save image`}
-              onPress={() => runAction(onPressSave)}
-            />
-          </MenuCard>
-        )}
-      </Modal>
-    </>
-  )
-}
-
-function MenuCard({
-  anchor,
-  progress,
-  children,
-}: {
-  anchor: Anchor
-  progress: ReturnType<typeof useSharedValue<number>>
-  children: React.ReactNode
-}) {
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: progress.get(),
-    transform: [{scale: interpolate(progress.get(), [0, 1], [0.9, 1])}],
-  }))
-
-  return (
-    <Animated.View
-      style={[
-        a.absolute,
-        a.self_start,
-        styles.card,
-        {
-          top: anchor.y + anchor.height + GAP,
-          left: anchor.x,
-          transformOrigin: 'top left',
-        },
-        animatedStyle,
-      ]}>
-      {children}
-    </Animated.View>
+          )}
+        </Menu.Trigger>
+        <Menu.Outer>
+          <Menu.Item label={l`Share image`} onPress={onPressShare}>
+            <Menu.ItemText>{l`Share image`}</Menu.ItemText>
+            <Menu.ItemIcon icon={ShareIcon} />
+          </Menu.Item>
+          <Menu.Item label={l`Save image`} onPress={onPressSave}>
+            <Menu.ItemText>{l`Save image`}</Menu.ItemText>
+            <Menu.ItemIcon icon={DownloadIcon} />
+          </Menu.Item>
+        </Menu.Outer>
+      </Menu.Root>
+    </ThemeProvider>
   )
 }
-
-function MenuItem({
-  icon: Icon,
-  label,
-  onPress,
-}: {
-  icon: React.ComponentType<IconProps>
-  label: string
-  onPress: () => void
-}) {
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      accessibilityHint=""
-      onPress={onPress}
-      style={({pressed}) => [styles.item, pressed && styles.itemPressed]}>
-      <Icon width={18} fill={ITEM_TEXT} />
-      <Text style={styles.itemText}>{label}</Text>
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  card: {
-    padding: 8,
-    borderRadius: 16,
-    borderWidth: 0.5,
-    borderColor: CARD_BORDER,
-    backgroundColor: CARD_BG,
-    shadowColor: '#000',
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.16,
-    shadowRadius: 20,
-    elevation: 8,
-  },
-  item: {
-    height: 44,
-    paddingHorizontal: 12,
-    borderRadius: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  itemPressed: {
-    backgroundColor: 'rgba(255, 255, 255, 0.08)',
-  },
-  itemText: {
-    fontSize: 15,
-    fontWeight: '500',
-    lineHeight: 19.5,
-    color: ITEM_TEXT,
-  },
-})

From dc54dfd6a28b5d22c539791d26e32d4195599d5d Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 2 Nov 2026 09:33:47 +0200
Subject: [PATCH 08/10] grow the native lightbox's header buttons to 44pt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/Lightbox/chrome/CircleChromeButton.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Lightbox/chrome/CircleChromeButton.tsx b/src/components/Lightbox/chrome/CircleChromeButton.tsx
index 9b31266bd35..64187af274c 100644
--- a/src/components/Lightbox/chrome/CircleChromeButton.tsx
+++ b/src/components/Lightbox/chrome/CircleChromeButton.tsx
@@ -27,9 +27,13 @@ type Props = {
   | 'accessibilityHint'
 >
 
-const SIZE = 32
+/**
+ * Apple's minimum tap size. The image options button is a native menu trigger
+ * on iOS, where `hitSlop` doesn't apply, so the circle itself is the target.
+ */
+const SIZE = 44
 const RADIUS = SIZE / 2
-const ICON = 18
+const ICON = 24
 
 export function CircleChromeButton({
   icon: Icon,

From ad4bf5b371217350bc582e90bf642ca29f37628e Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Tue, 3 Nov 2026 12:01:02 +0200
Subject: [PATCH 09/10] position the settings account menu, not its trigger,
 over the row

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/screens/Settings/Settings.tsx | 60 ++++++++++++++++---------------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx
index 4bc5cead6c7..f0c65d2b649 100644
--- a/src/screens/Settings/Settings.tsx
+++ b/src/screens/Settings/Settings.tsx
@@ -671,35 +671,39 @@ function AccountRow({
         </SettingsList.ItemText>
         {pendingDid === account.did && <SettingsList.ItemIcon icon={Loader} />}
       </SettingsList.PressableItem>
+      {/*
+       * An inline menu hosts its trigger in a native view, so position the
+       * whole menu over the row rather than the trigger inside it.
+       */}
       {!pendingDid && (
-        <Menu.Root inline>
-          <Menu.Trigger label={l`Account options`}>
-            {({props, state}) => (
-              <Pressable
-                {...props}
-                hitSlop={HITSLOP_10}
-                style={[
-                  a.absolute,
-                  {top: 10, right: tokens.space.lg},
-                  a.p_xs,
-                  a.rounded_full,
-                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
-                ]}>
-                <DotsHorizontal size="md" style={t.atoms.text} />
-              </Pressable>
-            )}
-          </Menu.Trigger>
-          <Menu.Outer showCancel>
-            <Menu.Item
-              label={l`Remove account`}
-              onPress={() => removePromptControl.open()}>
-              <Menu.ItemText>
-                <Trans>Remove account</Trans>
-              </Menu.ItemText>
-              <Menu.ItemIcon icon={PersonXIcon} />
-            </Menu.Item>
-          </Menu.Outer>
-        </Menu.Root>
+        <View style={[a.absolute, {top: 10, right: tokens.space.lg}]}>
+          <Menu.Root inline>
+            <Menu.Trigger label={l`Account options`}>
+              {({props, state}) => (
+                <Pressable
+                  {...props}
+                  hitSlop={HITSLOP_10}
+                  style={[
+                    a.p_xs,
+                    a.rounded_full,
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                  ]}>
+                  <DotsHorizontal size="md" style={t.atoms.text} />
+                </Pressable>
+              )}
+            </Menu.Trigger>
+            <Menu.Outer showCancel>
+              <Menu.Item
+                label={l`Remove account`}
+                onPress={() => removePromptControl.open()}>
+                <Menu.ItemText>
+                  <Trans>Remove account</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={PersonXIcon} />
+              </Menu.Item>
+            </Menu.Outer>
+          </Menu.Root>
+        </View>
       )}
 
       <Prompt.Basic

From bee66dece4f477f0964fc9d1f66ee97803eab9df Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 5 Nov 2026 13:41:56 +0200
Subject: [PATCH 10/10] use an inline menu for the starter pack menu, give
 opt-out an icon

Also fixes the trigger's label, which was copied from the repost menu.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/screens/StarterPack/StarterPackScreen.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
index c611fb73645..89c62ab4ffc 100644
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/src/screens/StarterPack/StarterPackScreen.tsx
@@ -47,6 +47,10 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {CreateListFromStarterPackDialog} from '#/components/dialogs/lists/CreateListFromStarterPackDialog'
+import {
+  ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeftIcon,
+  ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwiseIcon,
+} from '#/components/icons/Arrow'
 import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ArrowOutOfBoxIcon} from '#/components/icons/ArrowOutOfBox'
 import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
@@ -590,8 +594,8 @@ function OverflowMenu({
 
   return (
     <>
-      <Menu.Root>
-        <Menu.Trigger label={l`Repost or quote post`}>
+      <Menu.Root inline>
+        <Menu.Trigger label={l`Open Starter Pack menu`}>
           {({props}) => (
             <Button
               {...props}
@@ -692,6 +696,14 @@ function OverflowMenu({
                       <Trans>Opt out of Starter Pack</Trans>
                     )}
                   </Menu.ItemText>
+                  <Menu.ItemIcon
+                    icon={
+                      referenceListOptOut
+                        ? ArrowRotateCounterClockwiseIcon
+                        : ArrowBoxLeftIcon
+                    }
+                    position="right"
+                  />
                 </Menu.Item>
               ) : null}
             </>