Make sheet zoom transition opt-in, enable for composer dialogs

Switch `disableTransition` (opt-out) to `enableTransition` (opt-in) on
Menu.Outer so the zoom transition is only used where explicitly wanted.
Enable the zoom transition on three composer controls: the language
menu, the labels dialog, and the who-can-reply dialog.

https://claude.ai/code/session_011cNDhEb2cDgg5QbVuzEyH1

src/components/Menu/index.tsx

@@ -98,17 +98,17 @@ export function Trigger({
 export function Outer({
   children,
   showCancel,
-  disableTransition,
+  enableTransition,
 }: React.PropsWithChildren<{
   showCancel?: boolean
   style?: StyleProp<ViewStyle>
-  disableTransition?: boolean
+  enableTransition?: boolean
 }>) {
   const context = useMenuContext()
   const {_} = useLingui()
-  const sourceViewTag = disableTransition
+  const sourceViewTag = enableTransition
-    ? undefined
+    ? (findNodeHandle(context.triggerRef.current) ?? undefined)
-    : (findNodeHandle(context.triggerRef.current) ?? undefined)
+    : undefined
 
   return (
     <Dialog.Outer

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -77,9 +77,11 @@ export type PostInteractionSettingsFormProps = {
  */
 export function PostInteractionSettingsControlledDialog({
   control,
+  sourceViewTag,
   ...rest
 }: PostInteractionSettingsFormProps & {
   control: Dialog.DialogControlProps
+  sourceViewTag?: number
 }) {
   const ax = useAnalytics()
   const onClose = useNonReactiveCallback(() => {
@@ -100,6 +102,7 @@ export function PostInteractionSettingsControlledDialog({
       nativeOptions={{
         preventExpansion: true,
         preventDismiss: rest.isDirty && rest.persist,
+        sourceViewTag,
       }}
       onClose={onClose}>
       <Dialog.Handle />

src/screens/PostThread/components/HeaderDropdown.tsx

@@ -40,7 +40,7 @@ export function HeaderDropdown({
           </Button>
         )}
       </Menu.Trigger>
-      <Menu.Outer disableTransition>
+      <Menu.Outer>
         <Menu.LabelText>
           <Trans>Show replies as</Trans>
         </Menu.LabelText>

src/view/com/composer/labels/LabelsBtn.tsx

@@ -1,4 +1,5 @@
-import {Keyboard, View} from 'react-native'
+import {useRef} from 'react'
+import {findNodeHandle, Keyboard, View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
@@ -29,6 +30,7 @@ export function LabelsBtn({
 }) {
   const control = Dialog.useDialogControl()
   const {_} = useLingui()
+  const btnRef = useRef<View>(null)
 
   const hasLabel = labels.length > 0
 
@@ -51,6 +53,7 @@ export function LabelsBtn({
   return (
     <>
       <Button
+        ref={btnRef}
         color="secondary"
         size="small"
         testID="labelsBtn"
@@ -73,7 +76,12 @@ export function LabelsBtn({
         <ButtonIcon icon={TinyChevronIcon} size="2xs" />
       </Button>
 
-      <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+      <Dialog.Outer
+        control={control}
+        nativeOptions={{
+          preventExpansion: true,
+          sourceViewTag: findNodeHandle(btnRef.current) ?? undefined,
+        }}>
         <Dialog.Handle />
         <DialogInner
           labels={labels}

src/view/com/composer/select-language/PostLanguageSelect.tsx

@@ -75,7 +75,7 @@ export function PostLanguageSelect({
             <LanguageBtn currentLanguages={currentLanguages} {...props} />
           )}
         </Menu.Trigger>
-        <Menu.Outer>
+        <Menu.Outer enableTransition>
           <Menu.Group>
             {dedupedHistory.map(historyItem => {
               const langCodes = historyItem.split(',')

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -1,5 +1,11 @@
-import {useEffect, useMemo, useState} from 'react'
+import {useEffect, useMemo, useRef, useState} from 'react'
-import {Keyboard, type StyleProp, type ViewStyle} from 'react-native'
+import {
+  findNodeHandle,
+  Keyboard,
+  type StyleProp,
+  type View,
+  type ViewStyle,
+} from 'react-native'
 import {type AnimatedStyle} from 'react-native-reanimated'
 import {type AppBskyFeedPostgate} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
@@ -46,6 +52,7 @@ export function ThreadgateBtn({
   const {_} = useLingui()
   const ax = useAnalytics()
   const control = Dialog.useDialogControl()
+  const btnRef = useRef<View>(null)
   const [threadgateNudged, setThreadgateNudged] = useThreadgateNudged()
   const [showTooltip, setShowTooltip] = useState(false)
   const [tooltipWasShown] = useState(!threadgateNudged)
@@ -145,6 +152,7 @@ export function ThreadgateBtn({
         position="top">
         <Tooltip.Target>
           <Button
+            ref={btnRef}
             color={showTooltip ? 'primary_subtle' : 'secondary'}
             size="small"
             testID="openReplyGateButton"
@@ -167,6 +175,7 @@ export function ThreadgateBtn({
 
       <PostInteractionSettingsControlledDialog
         control={control}
+        sourceViewTag={findNodeHandle(btnRef.current) ?? undefined}
         onSave={() => {
           if (persist) {
             persistChanges({

src/view/com/profile/ProfileMenu.tsx

@@ -262,7 +262,7 @@ let ProfileMenu = ({
           }}
         </Menu.Trigger>
 
-        <Menu.Outer style={{minWidth: 170}} disableTransition>
+        <Menu.Outer style={{minWidth: 170}}>
           <Menu.Group>
             <Menu.Item
               testID="profileHeaderDropdownShareBtn"