From a2e8f3cbc472dc34ac86d34bf8fba13f619d6994 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 14:43:27 -0700
Subject: [PATCH 01/14] [Sheets] [Pt. 2] Remove a bunch of now-unnecessary
 things (#5560)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/components/Dialog/index.tsx               | 198 +++++-------------
 src/components/Dialog/index.web.tsx           |   4 -
 src/components/LikesDialog.tsx                |  17 +-
 src/components/Menu/index.tsx                 |   4 +-
 src/components/NewskieDialog.tsx              |   7 +-
 src/components/Prompt.tsx                     |   2 -
 src/components/ReportDialog/index.tsx         |   2 -
 src/components/StarterPack/QrCodeDialog.tsx   |   1 -
 src/components/StarterPack/ShareDialog.tsx    |  15 +-
 .../Wizard/WizardEditListDialog.tsx           |   7 +-
 src/components/TagMenu/index.tsx              |   2 -
 src/components/WhoCanReply.tsx                |   1 -
 src/components/dialogs/BirthDateSettings.tsx  |   2 -
 src/components/dialogs/Embed.tsx              |   1 -
 src/components/dialogs/EmbedConsent.tsx       |   2 -
 src/components/dialogs/GifSelect.ios.tsx      |   2 -
 src/components/dialogs/GifSelect.tsx          |   1 -
 src/components/dialogs/MutedWords.tsx         |   1 -
 .../dialogs/PostInteractionSettingsDialog.tsx |   2 -
 src/components/dialogs/Signin.tsx             |   1 -
 src/components/dialogs/SwitchAccount.tsx      |   2 -
 .../dialogs/nuxs/NeueTypography.tsx           |   2 -
 src/components/dms/MessagesNUX.tsx            |   1 -
 src/components/dms/ReportDialog.tsx           |   1 -
 src/components/forms/DateField/index.tsx      |   1 -
 .../intents/VerifyEmailIntentDialog.tsx       |   3 +-
 .../moderation/LabelsOnMeDialog.tsx           |   2 -
 .../moderation/ModerationDetailsDialog.tsx    |   1 -
 .../Messages/Conversation/ChatDisabled.tsx    |   1 -
 src/screens/Onboarding/StepProfile/index.tsx  |   1 -
 src/state/dialogs/index.tsx                   |  18 +-
 src/view/com/auth/server-input/index.tsx      |   2 -
 src/view/com/composer/GifAltText.tsx          |   1 -
 .../composer/photos/ImageAltTextDialog.tsx    |   2 -
 .../com/composer/videos/SubtitleDialog.tsx    |   1 -
 src/view/com/util/post-ctrls/RepostButton.tsx |   1 -
 .../Settings/DisableEmail2FADialog.tsx        |   2 -
 src/view/screens/Settings/ExportCarDialog.tsx |   2 -
 src/view/screens/Storybook/Dialogs.tsx        |  10 +-
 yarn.lock                                     |   5 +
 40 files changed, 89 insertions(+), 242 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 67603ed2d8..2a59ac7f67 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,24 +1,13 @@
 import React, {useImperativeHandle} from 'react'
-import {
-  Dimensions,
-  Keyboard,
-  Pressable,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native'
-import Animated, {useAnimatedStyle} from 'react-native-reanimated'
+import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import BottomSheet, {
-  BottomSheetBackdropProps,
   BottomSheetFlatList,
   BottomSheetFlatListMethods,
   BottomSheetScrollView,
   BottomSheetScrollViewMethods,
   BottomSheetTextInput,
   BottomSheetView,
-  useBottomSheet,
-  WINDOW_HEIGHT,
 } from '@discord/bottom-sheet/src'
 import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
 
@@ -32,7 +21,6 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Portal} from '#/components/Portal'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
@@ -41,71 +29,20 @@ export * from '#/components/Dialog/utils'
 // @ts-ignore
 export const Input = createInput(BottomSheetTextInput)
 
-function Backdrop(props: BottomSheetBackdropProps) {
-  const t = useTheme()
-  const bottomSheet = useBottomSheet()
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const opacity =
-      (Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000
-
-    return {
-      opacity: Math.min(Math.max(opacity, 0), 0.55),
-    }
-  })
-
-  const onPress = React.useCallback(() => {
-    bottomSheet.close()
-  }, [bottomSheet])
-
-  return (
-    <Animated.View
-      style={[
-        t.atoms.bg_contrast_300,
-        {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          position: 'absolute',
-        },
-        animatedStyle,
-      ]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel="Dialog backdrop"
-        accessibilityHint="Press the backdrop to close the dialog"
-        style={{flex: 1}}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}
-
 export function Outer({
   children,
   control,
   onClose,
-  nativeOptions,
+  nativeOptions: _nativeOptions, // @TODO DIALOG REFACTOR
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
-  const sheetOptions = nativeOptions?.sheet || {}
-  const hasSnapPoints = !!sheetOptions.snapPoints
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
-
-  /*
-   * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
-   */
-  const [openIndex, setOpenIndex] = React.useState(-1)
-
-  /*
-   * `openIndex` is the index of the snap point to open the bottom sheet to. If >0, the bottom sheet is open.
-   */
-  const isOpen = openIndex > -1
+  // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
+  const [isOpen, setIsOpen] = React.useState(false)
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -119,25 +56,21 @@ export function Outer({
     closeCallbacks.current = []
   }, [])
 
-  const open = React.useCallback<DialogControlProps['open']>(
-    ({index} = {}) => {
-      // Run any leftover callbacks that might have been queued up before calling `.open()`
-      callQueuedCallbacks()
-
-      setDialogIsOpen(control.id, true)
-      // can be set to any index of `snapPoints`, but `0` is the first i.e. "open"
-      setOpenIndex(index || 0)
-      sheet.current?.snapToIndex(index || 0)
-    },
-    [setDialogIsOpen, control.id, callQueuedCallbacks],
-  )
+  const open = React.useCallback<DialogControlProps['open']>(() => {
+    // Run any leftover callbacks that might have been queued up before calling `.open()`
+    callQueuedCallbacks()
+    setIsOpen(true)
+    setDialogIsOpen(control.id, true)
+    // sheet.current?.open() // @TODO DIALOG REFACTOR
+  }, [setDialogIsOpen, control.id, callQueuedCallbacks])
 
   // This is the function that we call when we want to dismiss the dialog.
   const close = React.useCallback<DialogControlProps['close']>(cb => {
+    setIsOpen(false)
     if (typeof cb === 'function') {
       closeCallbacks.current.push(cb)
     }
-    sheet.current?.close()
+    // sheet.current?.close() // @TODO DIALOG REFACTOR
   }, [])
 
   // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -146,8 +79,6 @@ export function Outer({
     // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this
     // tells us that we need to toggle the accessibility overlay setting
     setDialogIsOpen(control.id, false)
-    setOpenIndex(-1)
-
     callQueuedCallbacks()
     onClose?.()
   }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
@@ -161,58 +92,47 @@ export function Outer({
     [open, close],
   )
 
-  React.useEffect(() => {
-    return () => {
-      setDialogIsOpen(control.id, false)
-    }
-  }, [control.id, setDialogIsOpen])
+  // @TODO DIALOG REFACTOR - what is this? rm i think?
+  // React.useEffect(() => {
+  //   return () => {
+  //     setDialogIsOpen(control.id, false)
+  //   }
+  // }, [control.id, setDialogIsOpen])
 
   const context = React.useMemo(() => ({close}), [close])
 
   return (
     isOpen && (
       <Portal>
-        <FullWindowOverlay>
-          <View
-            // iOS
-            accessibilityViewIsModal
-            style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
-            <BottomSheet
-              enableDynamicSizing={!hasSnapPoints}
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              {...sheetOptions}
-              snapPoints={sheetOptions.snapPoints || ['100%']}
-              ref={sheet}
-              index={openIndex}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              backdropComponent={Backdrop}
-              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-              handleStyle={{display: 'none'}}
-              onClose={onCloseAnimationComplete}>
-              <Context.Provider value={context}>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    t.atoms.bg,
-                    {
-                      borderTopLeftRadius: 40,
-                      borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
-                    },
-                  ]}
-                />
-                {children}
-              </Context.Provider>
-            </BottomSheet>
-          </View>
-        </FullWindowOverlay>
+        <View
+          // iOS
+          accessibilityViewIsModal
+          style={[a.absolute, a.inset_0]}
+          testID={testID}
+          onTouchMove={() => Keyboard.dismiss()}>
+          <BottomSheet
+            topInset={insets.top}
+            bottomInset={insets.bottom}
+            ref={sheet}
+            // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
+            onClose={onCloseAnimationComplete}>
+            <Context.Provider value={context}>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  t.atoms.bg,
+                  {
+                    borderTopLeftRadius: 40,
+                    borderTopRightRadius: 40,
+                    height: Dimensions.get('window').height * 2,
+                  },
+                ]}
+              />
+              {children}
+            </Context.Provider>
+          </BottomSheet>
+        </View>
       </Portal>
     )
   )
@@ -294,28 +214,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 40}]}>
-      <View
-        style={[
-          a.rounded_sm,
-          {
-            top: a.pt_lg.paddingTop,
-            width: 35,
-            height: 4,
-            alignSelf: 'center',
-            backgroundColor: t.palette.contrast_900,
-            opacity: 0.5,
-          },
-        ]}
-      />
-    </View>
-  )
-}
-
 export function Close() {
   return null
 }
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index bf20bd2956..f8ecbd5d94 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -229,10 +229,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  return null
-}
-
 export function Close() {
   const {_} = useLingui()
   const {close} = React.useContext(Context)
diff --git a/src/components/LikesDialog.tsx b/src/components/LikesDialog.tsx
index 94a3f27e26..249c68f3c1 100644
--- a/src/components/LikesDialog.tsx
+++ b/src/components/LikesDialog.tsx
@@ -1,20 +1,19 @@
-import React, {useMemo, useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 interface LikesDialogProps {
   control: Dialog.DialogOuterProps['control']
@@ -24,8 +23,6 @@ interface LikesDialogProps {
 export function LikesDialog(props: LikesDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LikesDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index a0a21a50f9..b80fc918e0 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
-import {isNative} from 'platform/detection'
+import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -85,8 +85,6 @@ export function Outer({
 
   return (
     <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
         <Dialog.ScrollableInner label="Menu TODO">
diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index 1a523a839d..e25f48edf5 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -5,12 +5,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,6 @@ export function NewskieDialog({
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <Dialog.ScrollableInner
           label={_(msg`New user info dialog`)}
           style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 8765cdee31..8aa111bf3d 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -41,8 +41,6 @@ export function Outer({
   return (
     <Dialog.Outer control={control} testID={testID}>
       <Context.Provider value={context}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index c87d32f9ec..a9f4a63b07 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -24,8 +24,6 @@ import {ReportDialogProps} from './types'
 export function ReportDialog(props: ReportDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ReportDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index b2af8ff73a..2feea0973a 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -149,7 +149,6 @@ export function QrCodeDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 9851b08567..494aceae1f 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -6,14 +6,14 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {shareUrl} from '#/lib/sharing'
+import {logEvent} from '#/lib/statsig/statsig'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {shareUrl} from 'lib/sharing'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isNative, isWeb} from 'platform/detection'
-import * as Toast from 'view/com/util/Toast'
+import {isNative, isWeb} from '#/platform/detection'
+import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
@@ -84,7 +84,6 @@ function ShareDialogInner({
 
   return (
     <>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
           <View style={[a.p_xl, a.align_center]}>
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index f7b0aba344..1d69e4f4a0 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -7,9 +7,9 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -80,7 +80,6 @@ export function WizardEditListDialog({
       control={control}
       testID="newChatDialog"
       nativeOptions={{sheet: {snapPoints: ['95%']}}}>
-      <Dialog.Handle />
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}
diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx
index 2c6a0b674c..2e4249609a 100644
--- a/src/components/TagMenu/index.tsx
+++ b/src/components/TagMenu/index.tsx
@@ -84,8 +84,6 @@ export function TagMenu({
       {children}
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
         <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
           {isPreferencesLoading ? (
             <View style={[a.w_full, a.align_center]}>
diff --git a/src/components/WhoCanReply.tsx b/src/components/WhoCanReply.tsx
index ab6ef8293c..2839943c97 100644
--- a/src/components/WhoCanReply.tsx
+++ b/src/components/WhoCanReply.tsx
@@ -170,7 +170,6 @@ function WhoCanReplyDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
         style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index 08608f9d88..72ce9690e9 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -30,8 +30,6 @@ export function BirthDateSettingsDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
         <View style={[a.gap_sm, a.pb_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>
diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index ca75b01390..7aa2a4fc1e 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -27,7 +27,6 @@ type EmbedDialogProps = {
 let EmbedDialog = ({control, ...rest}: EmbedDialogProps): React.ReactNode => {
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <EmbedDialogInner {...rest} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index 765b8adc7e..3aa0f0b404 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -49,8 +49,6 @@ export function EmbedConsentDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}
         style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
diff --git a/src/components/dialogs/GifSelect.ios.tsx b/src/components/dialogs/GifSelect.ios.tsx
index 2f867e8657..abe5aa3cc3 100644
--- a/src/components/dialogs/GifSelect.ios.tsx
+++ b/src/components/dialogs/GifSelect.ios.tsx
@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonText} from '../Button'
-import {Handle} from '../Dialog'
 import {useThrottledValue} from '../hooks/useThrottledValue'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
@@ -70,7 +69,6 @@ export function GifSelectDialog({
       aria-modal
       accessibilityViewIsModal>
       <View style={[a.flex_1, t.atoms.bg]}>
-        <Handle />
         <ErrorBoundary renderError={renderErrorBoundary}>
           <GifList onSelectGif={onSelectGif} close={close} />
         </ErrorBoundary>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 1afc588dad..a06491c15f 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -61,7 +61,6 @@ export function GifSelectDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 81a6141038..daa18f94e7 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -39,7 +39,6 @@ export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <MutedWordsInner />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 47eefae6f9..93be838542 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -61,7 +61,6 @@ export function PostInteractionSettingsControlledDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -96,7 +95,6 @@ export function PostInteractionSettingsDialog(
 ) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <PostInteractionSettingsDialogControlledInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
index b9c939e94b..d24f6af644 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -18,7 +18,6 @@ export function SigninDialog() {
   const {signinDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <SigninDialogInner control={control} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/SwitchAccount.tsx b/src/components/dialogs/SwitchAccount.tsx
index 0bd4bcb8cb..809ed1e3f6 100644
--- a/src/components/dialogs/SwitchAccount.tsx
+++ b/src/components/dialogs/SwitchAccount.tsx
@@ -42,8 +42,6 @@ export function SwitchAccountDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
         <View style={[a.gap_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>
diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx
index f160c87743..97028b6e54 100644
--- a/src/components/dialogs/nuxs/NeueTypography.tsx
+++ b/src/components/dialogs/nuxs/NeueTypography.tsx
@@ -43,8 +43,6 @@ export function NeueTypography() {
 
   return (
     <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
index 5c21ee05be..723696a04d 100644
--- a/src/components/dms/MessagesNUX.tsx
+++ b/src/components/dms/MessagesNUX.tsx
@@ -39,7 +39,6 @@ export function MessagesNUX() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <DialogInner chatDeclation={profile.associated?.chat} />
     </Dialog.Outer>
   )
diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 5493a1c87f..28b5e86202 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -44,7 +44,6 @@ let ReportDialog = ({
     <Dialog.Outer
       control={control}
       nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 1c78d2abbb..7546aec484 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -57,7 +57,6 @@ export function DateField({
         accessibilityHint={accessibilityHint}
       />
       <Dialog.Outer control={control} testID={testID}>
-        <Dialog.Handle />
         <Dialog.Inner label={label}>
           <View style={a.gap_lg}>
             <View style={[a.relative, a.w_full, a.align_center]}>
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index e8c63af82f..9f3808020a 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent, useSession} from 'state/session'
+import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -17,7 +17,6 @@ export function VerifyEmailIntentDialog() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Inner control={control} />
     </Dialog.Outer>
   )
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index e63cea93b2..389c722c87 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -31,8 +31,6 @@ export interface LabelsOnMeDialogProps {
 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LabelsOnMeDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx
index 2259178538..1198e8b921 100644
--- a/src/components/moderation/ModerationDetailsDialog.tsx
+++ b/src/components/moderation/ModerationDetailsDialog.tsx
@@ -26,7 +26,6 @@ export interface ModerationDetailsDialogProps {
 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <ModerationDetailsDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/screens/Messages/Conversation/ChatDisabled.tsx b/src/screens/Messages/Conversation/ChatDisabled.tsx
index c768d2504b..efe8545bf1 100644
--- a/src/screens/Messages/Conversation/ChatDisabled.tsx
+++ b/src/screens/Messages/Conversation/ChatDisabled.tsx
@@ -54,7 +54,6 @@ function AppealDialog() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <DialogInner />
       </Dialog.Outer>
     </>
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 663418f220..c6a39ab45e 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -286,7 +286,6 @@ export function StepProfile() {
       </View>
 
       <Dialog.Outer control={creatorControl}>
-        <Dialog.Handle />
         <Dialog.Inner
           label="Avatar creator"
           style={[
diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index c674175a20..db933b98c8 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import {isWeb} from '#/platform/detection'
 import {DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
 
@@ -42,11 +43,18 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const openDialogs = React.useRef<Set<string>>(new Set())
 
   const closeAllDialogs = React.useCallback(() => {
-    openDialogs.current.forEach(id => {
-      const dialog = activeDialogs.current.get(id)
-      if (dialog) dialog.current.close()
-    })
-    return openDialogs.current.size > 0
+    if (isWeb) {
+      openDialogs.current.forEach(id => {
+        const dialog = activeDialogs.current.get(id)
+        if (dialog) dialog.current.close()
+      })
+
+      return openDialogs.current.size > 0
+    } else {
+      // @TODO DIALOGS REFACTOR
+      console.error('HAILEY FIX THIS 🥺📋')
+      return false
+    }
   }, [])
 
   const setDialogIsOpen = React.useCallback((id: string, isOpen: boolean) => {
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index fb69e1d9c7..4e36688aec 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -70,8 +70,6 @@ export function ServerInputDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index a05607c76c..53db2da941 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -99,7 +99,6 @@ export function GifAltText({
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-        <Dialog.Handle />
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 123e1066a5..fc9c6c4931 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -22,8 +22,6 @@ type Props = {
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ImageAltTextInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index c07fdfc562..5926244908 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -59,7 +59,6 @@ export function SubtitleDialogBtn(props: Props) {
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
-        <Dialog.Handle />
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 0ecdf25b93..8a41ec88ac 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -87,7 +87,6 @@ let RepostButton = ({
         ) : undefined}
       </Button>
       <Dialog.Outer control={dialogControl}>
-        <Dialog.Handle />
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
diff --git a/src/view/screens/Settings/DisableEmail2FADialog.tsx b/src/view/screens/Settings/DisableEmail2FADialog.tsx
index a27cff9a3e..bbc6902543 100644
--- a/src/view/screens/Settings/DisableEmail2FADialog.tsx
+++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx
@@ -78,8 +78,6 @@ export function DisableEmail2FADialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx
index a6ddb38204..3d21d7cb5e 100644
--- a/src/view/screens/Settings/ExportCarDialog.tsx
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -52,8 +52,6 @@ export function ExportCarDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index 3a9f67de81..bb13831046 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {NavigationProp} from 'lib/routes/types'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -179,8 +179,6 @@ export function Dialogs() {
       </Prompt.Outer>
 
       <Dialog.Outer control={basic}>
-        <Dialog.Handle />
-
         <Dialog.Inner label="test">
           <H3 nativeID="dialog-title">Dialog</H3>
           <P nativeID="dialog-description">A basic dialog</P>
@@ -190,8 +188,6 @@ export function Dialogs() {
       <Dialog.Outer
         control={scrollable}
         nativeOptions={{sheet: {snapPoints: ['100%']}}}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -230,8 +226,6 @@ export function Dialogs() {
       </Dialog.Outer>
 
       <Dialog.Outer control={testDialog}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -356,8 +350,6 @@ export function Dialogs() {
 
       {shouldRenderUnmountTest && (
         <Dialog.Outer control={unmountTestDialog}>
-          <Dialog.Handle />
-
           <Dialog.Inner label="test">
             <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
             <P nativeID="dialog-description">Will unmount in about 5 seconds</P>
diff --git a/yarn.lock b/yarn.lock
index 8f68ea4f3f..e3dc084342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4120,6 +4120,11 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4":
+  version "0.1.1-alpha.4"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc"
+  integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg==
+
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.10.tgz#2756e8c83a78caeb6b120a175578eac1eb6889a9"

From 5b08aad014aa8b4b42df15765f82c7e7a78c1d7a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 14:58:12 -0700
Subject: [PATCH 02/14] [Sheets] [Pt. 3] Get new sheet working with
 `ScrollableInner` (#5561)

---
 package.json                    |   1 +
 src/components/Dialog/index.tsx | 106 +++++++++++---------------------
 yarn.lock                       |   8 +--
 3 files changed, 42 insertions(+), 73 deletions(-)

diff --git a/package.json b/package.json
index 4ab196b6aa..7b972e662f 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.7",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 2a59ac7f67..4cb431462b 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,18 +1,18 @@
 import React, {useImperativeHandle} from 'react'
-import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import BottomSheet, {
+import {
   BottomSheetFlatList,
   BottomSheetFlatListMethods,
-  BottomSheetScrollView,
-  BottomSheetScrollViewMethods,
   BottomSheetTextInput,
   BottomSheetView,
 } from '@discord/bottom-sheet/src'
 import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
+import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
 
 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -37,12 +37,11 @@ export function Outer({
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
-  const sheet = React.useRef<BottomSheet>(null)
+  const ref = React.useRef<BlueskyBottomSheetView>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
   // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
-  const [isOpen, setIsOpen] = React.useState(false)
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -59,18 +58,16 @@ export function Outer({
   const open = React.useCallback<DialogControlProps['open']>(() => {
     // Run any leftover callbacks that might have been queued up before calling `.open()`
     callQueuedCallbacks()
-    setIsOpen(true)
     setDialogIsOpen(control.id, true)
-    // sheet.current?.open() // @TODO DIALOG REFACTOR
+    ref.current?.present()
   }, [setDialogIsOpen, control.id, callQueuedCallbacks])
 
   // This is the function that we call when we want to dismiss the dialog.
   const close = React.useCallback<DialogControlProps['close']>(cb => {
-    setIsOpen(false)
     if (typeof cb === 'function') {
       closeCallbacks.current.push(cb)
     }
-    // sheet.current?.close() // @TODO DIALOG REFACTOR
+    ref.current?.dismiss()
   }, [])
 
   // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -102,39 +99,25 @@ export function Outer({
   const context = React.useMemo(() => ({close}), [close])
 
   return (
-    isOpen && (
-      <Portal>
-        <View
-          // iOS
-          accessibilityViewIsModal
-          style={[a.absolute, a.inset_0]}
-          testID={testID}
-          onTouchMove={() => Keyboard.dismiss()}>
-          <BottomSheet
-            topInset={insets.top}
-            bottomInset={insets.bottom}
-            ref={sheet}
-            // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
-            onClose={onCloseAnimationComplete}>
-            <Context.Provider value={context}>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  t.atoms.bg,
-                  {
-                    borderTopLeftRadius: 40,
-                    borderTopRightRadius: 40,
-                    height: Dimensions.get('window').height * 2,
-                  },
-                ]}
-              />
-              {children}
-            </Context.Provider>
-          </BottomSheet>
-        </View>
-      </Portal>
-    )
+    <Portal>
+      <Context.Provider value={context}>
+        <BlueskyBottomSheetView
+          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
+          ref={ref}
+          topInset={30}
+          bottomInset={insets.bottom}
+          onStateChange={e => {
+            if (e.nativeEvent.state === 'closed') {
+              onCloseAnimationComplete()
+            }
+          }}
+          cornerRadius={20}>
+          <View testID={testID} style={[t.atoms.bg]}>
+            {children}
+          </View>
+        </BlueskyBottomSheetView>
+      </Context.Provider>
+    </Portal>
   )
 }
 
@@ -158,32 +141,17 @@ export function Inner({children, style}: DialogInnerProps) {
   )
 }
 
-export const ScrollableInner = React.forwardRef<
-  BottomSheetScrollViewMethods,
-  DialogInnerProps
->(function ScrollableInner({children, style}, ref) {
-  const insets = useSafeAreaInsets()
-  return (
-    <BottomSheetScrollView
-      keyboardShouldPersistTaps="handled"
-      style={[
-        a.flex_1, // main diff is this
-        a.p_xl,
-        a.h_full,
-        {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        },
-        style,
-      ]}
-      contentContainerStyle={a.pb_4xl}
-      ref={ref}>
-      {children}
-      <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-    </BottomSheetScrollView>
-  )
-})
+export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
+  function ScrollableInner({children, style}, ref) {
+    const insets = useSafeAreaInsets()
+    return (
+      <ScrollView style={[a.px_xl, style]} ref={ref}>
+        {children}
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      </ScrollView>
+    )
+  },
+)
 
 export const InnerFlatList = React.forwardRef<
   BottomSheetFlatListMethods,
diff --git a/yarn.lock b/yarn.lock
index e3dc084342..2512608e7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4120,10 +4120,10 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
-"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4":
-  version "0.1.1-alpha.4"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc"
-  integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg==
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7":
+  version "0.1.1-alpha.7"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
+  integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
 
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"

From 0037353528003a66a0c9dc17a4b24ea79c021810 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 15:49:36 -0700
Subject: [PATCH 03/14] [Sheets] [Pt. 4] Convert Pressable in Menu (WIP)
 (#5562)

---
 package.json                    |  4 ++--
 src/components/Dialog/index.tsx |  8 --------
 src/components/Menu/index.tsx   | 18 ++++++++++--------
 src/components/Menu/types.ts    |  6 ++++--
 yarn.lock                       | 17 ++++++++---------
 5 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 7b972e662f..e32100ece8 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.7",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.8",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
@@ -172,7 +172,7 @@
     "react-native-compressor": "^1.8.24",
     "react-native-date-picker": "^4.4.2",
     "react-native-drawer-layout": "^4.0.0-alpha.3",
-    "react-native-gesture-handler": "~2.16.2",
+    "react-native-gesture-handler": "2.20.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "0.41.2",
     "react-native-ios-context-menu": "^1.15.3",
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 4cb431462b..716ad154cf 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -89,20 +89,12 @@ export function Outer({
     [open, close],
   )
 
-  // @TODO DIALOG REFACTOR - what is this? rm i think?
-  // React.useEffect(() => {
-  //   return () => {
-  //     setDialogIsOpen(control.id, false)
-  //   }
-  // }, [control.id, setDialogIsOpen])
-
   const context = React.useMemo(() => ({close}), [close])
 
   return (
     <Portal>
       <Context.Provider value={context}>
         <BlueskyBottomSheetView
-          // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
           ref={ref}
           topInset={30}
           bottomInset={insets.bottom}
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index b80fc918e0..88b4167842 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -102,7 +103,11 @@ export function Outer({
 export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   const t = useTheme()
   const {control} = React.useContext(Context)
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const {
+    state: focused,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -115,14 +120,9 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       accessibilityHint=""
       accessibilityLabel={label}
       onPress={e => {
+        control?.close()
         onPress(e)
-
-        if (!e.defaultPrevented) {
-          control?.close()
-        }
       }}
-      onFocus={onFocus}
-      onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
@@ -131,6 +131,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         onPressOut()
         rest.onPressOut?.(e)
       }}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
       style={[
         a.flex_row,
         a.align_center,
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index 2f7aea5de5..e5d1d16a8d 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -4,6 +4,8 @@ import {
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -87,10 +89,10 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<PressableProps, 'style'> &
+  Omit<BueskyBottomSheetPressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: GestureResponderEvent) => void
+      onPress: (e: PressableEvent | GestureResponderEvent) => void
     }
 >
 
diff --git a/yarn.lock b/yarn.lock
index 2512608e7e..d20d4a4cdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4120,10 +4120,10 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
-"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.7":
-  version "0.1.1-alpha.7"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.7.tgz#a5845cd2ac386b78716db5940b65b3e78b392042"
-  integrity sha512-Ps2nsNmfjqUmP/LPAM94/2dWZerwZEjnvSUfi/ipFNHlNp/McIYIObxDaPJaZ0ZLxUcRXxdhmC3UonK25sJKSw==
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.8":
+  version "0.1.1-alpha.8"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.8.tgz#c5fd503cdd5556a686a1f5c0974b1527fceda900"
+  integrity sha512-305MSNscniLZpxd80QO4OCuMXkm+U/v/YW/x0fVQtBilVTikOOPIkiYge+kCUdryFPD3LU/GdrsQZL+y8qAiMQ==
 
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"
@@ -18068,15 +18068,14 @@ react-native-drawer-layout@^4.0.0-alpha.3:
   dependencies:
     use-latest-callback "^0.1.9"
 
-react-native-gesture-handler@~2.16.2:
-  version "2.16.2"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz#032bd2a07334292d7f6cff1dc9d1ec928f72e26d"
-  integrity sha512-vGFlrDKlmyI+BT+FemqVxmvO7nqxU33cgXVsn6IKAFishvlG3oV2Ds67D5nPkHMea8T+s1IcuMm0bF8ntZtAyg==
+react-native-gesture-handler@2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.0.tgz#2d9ec4e9bd22619ebe36269dda3ecb1173928276"
+  integrity sha512-rFKqgHRfxQ7uSAivk8vxCiW4SB3G0U7jnv7kZD4Y90K5kp6YrU8Q3tWhxe3Rx55BIvSd3mBe9ZWbWVJ0FsSHPA==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
-    lodash "^4.17.21"
     prop-types "^15.7.2"
 
 react-native-get-random-values@^1.6.0:

From ede5d0155b6604d1f8cc39d55246cf0235826333 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 16:03:49 -0700
Subject: [PATCH 04/14] [Sheets] [Pt. 5] Update types and props (#5563)

---
 src/components/Dialog/index.tsx               |  6 +--
 src/components/Dialog/types.ts                |  6 +--
 src/components/Menu/index.tsx                 |  4 +-
 src/components/ReportDialog/index.tsx         |  5 +--
 .../Wizard/WizardEditListDialog.tsx           |  5 +--
 src/components/dialogs/GifSelect.tsx          |  5 +--
 src/components/dms/ConvoMenu.tsx              |  6 +--
 src/components/dms/MessageMenu.tsx            | 10 ++---
 src/components/dms/ReportDialog.tsx           |  5 +--
 src/components/dms/dialogs/NewChatDialog.tsx  |  7 +--
 .../dms/dialogs/ShareViaChatDialog.tsx        |  7 +--
 src/screens/StarterPack/StarterPackScreen.tsx | 44 +++++++++----------
 src/view/com/auth/server-input/index.tsx      |  5 +--
 src/view/com/composer/GifAltText.tsx          |  5 +--
 .../com/composer/videos/SubtitleDialog.tsx    |  6 +--
 src/view/com/util/forms/PostDropdownBtn.tsx   | 12 ++---
 src/view/screens/Storybook/Dialogs.tsx        |  4 +-
 17 files changed, 59 insertions(+), 83 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 716ad154cf..6799c35afb 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -33,7 +33,7 @@ export function Outer({
   children,
   control,
   onClose,
-  nativeOptions: _nativeOptions, // @TODO DIALOG REFACTOR
+  nativeOptions,
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
@@ -41,7 +41,6 @@ export function Outer({
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
-  // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -103,7 +102,8 @@ export function Outer({
               onCloseAnimationComplete()
             }
           }}
-          cornerRadius={20}>
+          cornerRadius={20}
+          {...nativeOptions}>
           <View testID={testID} style={[t.atoms.bg]}>
             {children}
           </View>
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 1ddab02eea..ed83bd02b1 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -4,7 +4,7 @@ import type {
   GestureResponderEvent,
   ScrollViewProps,
 } from 'react-native'
-import {BottomSheetProps} from '@discord/bottom-sheet/src'
+import {BlueskyBottomSheetViewProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
 
@@ -52,9 +52,7 @@ export type DialogControlOpenOptions = {
 export type DialogOuterProps = {
   control: DialogControlProps
   onClose?: () => void
-  nativeOptions?: {
-    sheet?: Omit<BottomSheetProps, 'children'>
-  }
+  nativeOptions?: Omit<BlueskyBottomSheetViewProps, 'children'>
   webOptions?: {}
   testID?: string
 }
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 88b4167842..c48d6f9bd0 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -85,7 +85,9 @@ export function Outer({
   const context = React.useContext(Context)
 
   return (
-    <Dialog.Outer control={context.control}>
+    <Dialog.Outer
+      control={context.control}
+      nativeOptions={{preventExpansion: true}}>
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
         <Dialog.ScrollableInner label="Menu TODO">
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index a9f4a63b07..b942659380 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, View} from 'react-native'
+import {Pressable, ScrollView, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -8,7 +8,6 @@ import {useMyLabelersQuery} from '#/state/queries/preferences'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {AppBskyLabelerDefs} from '@atproto/api'
-import {BottomSheetScrollViewMethods} from '@discord/bottom-sheet/src'
 
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -38,7 +37,7 @@ function ReportDialogInner(props: ReportDialogProps) {
   } = useMyLabelersQuery()
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
-  const ref = React.useRef<BottomSheetScrollViewMethods>(null)
+  const ref = React.useRef<ScrollView>(null)
   useOnKeyboardDidShow(() => {
     ref.current?.scrollToEnd({animated: true})
   })
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index 1d69e4f4a0..fab60fc6aa 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -76,10 +76,7 @@ export function WizardEditListDialog({
     )
 
   return (
-    <Dialog.Outer
-      control={control}
-      testID="newChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['95%']}}}>
+    <Dialog.Outer control={control} testID="newChatDialog">
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index a06491c15f..903722562c 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -57,10 +57,7 @@ export function GifSelectDialog({
   )
 
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}
-      onClose={onClose}>
+    <Dialog.Outer control={control} onClose={onClose}>
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>
diff --git a/src/components/dms/ConvoMenu.tsx b/src/components/dms/ConvoMenu.tsx
index a4fa625fae..affc292c18 100644
--- a/src/components/dms/ConvoMenu.tsx
+++ b/src/components/dms/ConvoMenu.tsx
@@ -136,7 +136,7 @@ let ConvoMenu = ({
           <Menu.Outer>
             <Menu.Item
               label={_(msg`Leave conversation`)}
-              onPress={leaveConvoControl.open}>
+              onPress={() => leaveConvoControl.open()}>
               <Menu.ItemText>
                 <Trans>Leave conversation</Trans>
               </Menu.ItemText>
@@ -195,7 +195,7 @@ let ConvoMenu = ({
               </Menu.Item>
               <Menu.Item
                 label={_(msg`Report conversation`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                 <Menu.ItemText>
                   <Trans>Report conversation</Trans>
                 </Menu.ItemText>
@@ -206,7 +206,7 @@ let ConvoMenu = ({
             <Menu.Group>
               <Menu.Item
                 label={_(msg`Leave conversation`)}
-                onPress={leaveConvoControl.open}>
+                onPress={() => leaveConvoControl.open()}>
                 <Menu.ItemText>
                   <Trans>Leave conversation</Trans>
                 </Menu.ItemText>
diff --git a/src/components/dms/MessageMenu.tsx b/src/components/dms/MessageMenu.tsx
index 2978d2b220..8680a68bfb 100644
--- a/src/components/dms/MessageMenu.tsx
+++ b/src/components/dms/MessageMenu.tsx
@@ -7,11 +7,11 @@ import {useLingui} from '@lingui/react'
 
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
+import {isWeb} from '#/platform/detection'
+import {useConvoActive} from '#/state/messages/convo'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {isWeb} from 'platform/detection'
-import {useConvoActive} from 'state/messages/convo'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ReportDialog} from '#/components/dms/ReportDialog'
@@ -120,7 +120,7 @@ export let MessageMenu = ({
             <Menu.Item
               testID="messageDropdownDeleteBtn"
               label={_(msg`Delete message for me`)}
-              onPress={deleteControl.open}>
+              onPress={() => deleteControl.open()}>
               <Menu.ItemText>{_(msg`Delete for me`)}</Menu.ItemText>
               <Menu.ItemIcon icon={Trash} position="right" />
             </Menu.Item>
@@ -128,7 +128,7 @@ export let MessageMenu = ({
               <Menu.Item
                 testID="messageDropdownReportBtn"
                 label={_(msg`Report message`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                 <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={Warning} position="right" />
               </Menu.Item>
diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 28b5e86202..60a18723b0 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'
 
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {isAndroid} from '#/platform/detection'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
@@ -41,9 +40,7 @@ let ReportDialog = ({
 }): React.ReactNode => {
   const {_} = useLingui()
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
+    <Dialog.Outer control={control}>
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
diff --git a/src/components/dms/dialogs/NewChatDialog.tsx b/src/components/dms/dialogs/NewChatDialog.tsx
index 19f6eb6dfc..e838236e1e 100644
--- a/src/components/dms/dialogs/NewChatDialog.tsx
+++ b/src/components/dms/dialogs/NewChatDialog.tsx
@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import {FAB} from '#/view/com/util/fab/FAB'
 import * as Toast from '#/view/com/util/Toast'
 import {useTheme} from '#/alf'
@@ -55,10 +55,7 @@ export function NewChat({
         accessibilityHint=""
       />
 
-      <Dialog.Outer
-        control={control}
-        testID="newChatDialog"
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+      <Dialog.Outer control={control} testID="newChatDialog">
         <SearchablePeopleList
           title={_(msg`Start a new chat`)}
           onSelectChat={onCreateChat}
diff --git a/src/components/dms/dialogs/ShareViaChatDialog.tsx b/src/components/dms/dialogs/ShareViaChatDialog.tsx
index 01906a430c..ed0aa05ea3 100644
--- a/src/components/dms/dialogs/ShareViaChatDialog.tsx
+++ b/src/components/dms/dialogs/ShareViaChatDialog.tsx
@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import * as Toast from '#/view/com/util/Toast'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from './SearchablePeopleList'
@@ -17,10 +17,7 @@ export function SendViaChatDialog({
   onSelectChat: (chatId: string) => void
 }) {
   return (
-    <Dialog.Outer
-      control={control}
-      testID="sendViaChatChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+    <Dialog.Outer control={control} testID="sendViaChatChatDialog">
       <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
     </Dialog.Outer>
   )
diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx
index 0aa863f7b2..68803ac005 100644
--- a/src/screens/StarterPack/StarterPackScreen.tsx
+++ b/src/screens/StarterPack/StarterPackScreen.tsx
@@ -15,35 +15,35 @@ import {useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {batchedUpdates} from '#/lib/batchedUpdates'
+import {HITSLOP_20} from '#/lib/constants'
+import {isBlockedOrBlocking, isMuted} from '#/lib/moderation/blocked-and-muted'
+import {makeProfileLink, makeStarterPackLink} from '#/lib/routes/links'
+import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
+import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {updateProfileShadow} from '#/state/cache/profile-shadow'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {getAllListMembers} from '#/state/queries/list-members'
+import {useResolvedStarterPackShortLink} from '#/state/queries/resolve-short-link'
+import {useResolveDidQuery} from '#/state/queries/resolve-uri'
+import {useShortenLink} from '#/state/queries/shorten-link'
 import {useDeleteStarterPackMutation} from '#/state/queries/starter-packs'
+import {useStarterPackQuery} from '#/state/queries/starter-packs'
+import {useAgent, useSession} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {
   ProgressGuideAction,
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
-import {batchedUpdates} from 'lib/batchedUpdates'
-import {HITSLOP_20} from 'lib/constants'
-import {isBlockedOrBlocking, isMuted} from 'lib/moderation/blocked-and-muted'
-import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
-import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isWeb} from 'platform/detection'
-import {updateProfileShadow} from 'state/cache/profile-shadow'
-import {useModerationOpts} from 'state/preferences/moderation-opts'
-import {getAllListMembers} from 'state/queries/list-members'
-import {useResolvedStarterPackShortLink} from 'state/queries/resolve-short-link'
-import {useResolveDidQuery} from 'state/queries/resolve-uri'
-import {useShortenLink} from 'state/queries/shorten-link'
-import {useStarterPackQuery} from 'state/queries/starter-packs'
-import {useAgent, useSession} from 'state/session'
-import {useLoggedOutViewControls} from 'state/shell/logged-out'
-import {useSetActiveStarterPack} from 'state/shell/starter-pack'
+import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
+import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
+import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
 import * as Toast from '#/view/com/util/Toast'
-import {PagerWithHeader} from 'view/com/pager/PagerWithHeader'
-import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader'
-import {CenteredView} from 'view/com/util/Views'
+import {CenteredView} from '#/view/com/util/Views'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -591,7 +591,7 @@ function OverflowMenu({
 
               <Menu.Item
                 label={_(msg`Report starter pack`)}
-                onPress={reportDialogControl.open}>
+                onPress={() => reportDialogControl.open()}>
                 <Menu.ItemText>
                   <Trans>Report starter pack</Trans>
                 </Menu.ItemText>
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index 4e36688aec..de7ed6d15b 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -66,10 +66,7 @@ export function ServerInputDialog({
   ])
 
   return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}
-      onClose={onClose}>
+    <Dialog.Outer control={control} onClose={onClose}>
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 53db2da941..1737fc29ca 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -12,7 +12,6 @@ import {
   parseEmbedPlayerFromUrl,
 } from '#/lib/strings/embed-player'
 import {enforceLen} from '#/lib/strings/helpers'
-import {isAndroid} from '#/platform/detection'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -96,9 +95,7 @@ export function GifAltText({
 
       <AltTextReminder />
 
-      <Dialog.Outer
-        control={control}
-        nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
+      <Dialog.Outer control={control}>
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index 5926244908..d57c6740cf 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {useEnforceMaxGraphemeCount} from '#/lib/strings/helpers'
 import {LANGUAGES} from '#/locale/languages'
-import {isAndroid, isWeb} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -56,9 +56,7 @@ export function SubtitleDialogBtn(props: Props) {
           {isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>}
         </ButtonText>
       </Button>
-      <Dialog.Outer
-        control={control}
-        nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
+      <Dialog.Outer control={control}>
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>
diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index fe6efc02fa..ef87c24533 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -437,7 +437,7 @@ let PostDropdownBtn = ({
               <Menu.Item
                 testID="postDropdownSendViaDMBtn"
                 label={_(msg`Send via direct message`)}
-                onPress={sendViaChatControl.open}>
+                onPress={() => sendViaChatControl.open()}>
                 <Menu.ItemText>
                   <Trans>Send via direct message</Trans>
                 </Menu.ItemText>
@@ -465,7 +465,7 @@ let PostDropdownBtn = ({
               <Menu.Item
                 testID="postDropdownEmbedBtn"
                 label={_(msg`Embed post`)}
-                onPress={embedPostControl.open}>
+                onPress={() => embedPostControl.open()}>
                 <Menu.ItemText>{_(msg`Embed post`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={CodeBrackets} position="right" />
               </Menu.Item>
@@ -540,7 +540,7 @@ let PostDropdownBtn = ({
                           ? _(msg`Hide reply for me`)
                           : _(msg`Hide post for me`)
                       }
-                      onPress={hidePromptControl.open}>
+                      onPress={() => hidePromptControl.open()}>
                       <Menu.ItemText>
                         {isReply
                           ? _(msg`Hide reply for me`)
@@ -628,7 +628,9 @@ let PostDropdownBtn = ({
                     <Menu.Item
                       testID="postDropdownEditPostInteractions"
                       label={_(msg`Edit interaction settings`)}
-                      onPress={postInteractionSettingsDialogControl.open}
+                      onPress={() =>
+                        postInteractionSettingsDialogControl.open()
+                      }
                       {...(isAuthor
                         ? Platform.select({
                             web: {
@@ -647,7 +649,7 @@ let PostDropdownBtn = ({
                     <Menu.Item
                       testID="postDropdownDeleteBtn"
                       label={_(msg`Delete post`)}
-                      onPress={deletePromptControl.open}>
+                      onPress={() => deletePromptControl.open()}>
                       <Menu.ItemText>{_(msg`Delete post`)}</Menu.ItemText>
                       <Menu.ItemIcon icon={Trash} position="right" />
                     </Menu.Item>
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index bb13831046..a0a2a27551 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -185,9 +185,7 @@ export function Dialogs() {
         </Dialog.Inner>
       </Dialog.Outer>
 
-      <Dialog.Outer
-        control={scrollable}
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+      <Dialog.Outer control={scrollable}>
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">

From b0c0aee9042b3dd893bfa22e55d69276f4930a03 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 20:26:10 -0700
Subject: [PATCH 05/14] custom bottom sheet link

---
 src/components/BottomSheetLink.tsx            | 92 +++++++++++++++++++
 src/components/BottomSheetLink.web.tsx        |  3 +
 src/components/Link.tsx                       | 46 +++++++++-
 .../ReportDialog/SelectLabelerView.tsx        |  8 +-
 .../ReportDialog/SelectReportOptionView.tsx   |  6 +-
 .../moderation/LabelsOnMeDialog.tsx           | 50 +++++-----
 6 files changed, 172 insertions(+), 33 deletions(-)
 create mode 100644 src/components/BottomSheetLink.tsx
 create mode 100644 src/components/BottomSheetLink.web.tsx

diff --git a/src/components/BottomSheetLink.tsx b/src/components/BottomSheetLink.tsx
new file mode 100644
index 0000000000..6b9f4ebd96
--- /dev/null
+++ b/src/components/BottomSheetLink.tsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import {BlueskyBottomSheetPressable} from '@haileyok/bluesky-bottom-sheet'
+import {StackActions, useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {flatten, useTheme} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {InlineLinkProps, useLink} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {router} from '#/routes'
+
+export function BottomSheetInlineLinkText({
+  children,
+  to,
+  action = 'push',
+  disableMismatchWarning,
+  style,
+  onPress: outerOnPress,
+  label,
+  shareOnLongPress,
+  disableUnderline,
+  ...rest
+}: InlineLinkProps) {
+  const t = useTheme()
+  const stringChildren = typeof children === 'string'
+  const navigation = useNavigation<NavigationProp>()
+  const dialog = useDialogContext()
+
+  const {href, isExternal, onLongPress} = useLink({
+    to,
+    displayText: stringChildren ? children : '',
+    action,
+    disableMismatchWarning,
+    onPress: outerOnPress,
+    shareOnLongPress,
+  })
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+
+  const onPress = () => {
+    if (isExternal) {
+      return
+    }
+
+    dialog.close()
+
+    if (action === 'push') {
+      navigation.dispatch(StackActions.push(...router.matchPath(href)))
+    } else if (action === 'replace') {
+      navigation.dispatch(StackActions.replace(...router.matchPath(href)))
+    } else if (action === 'navigate') {
+      // @ts-ignore
+      navigation.navigate(...router.matchPath(href))
+    } else {
+      throw Error('Unsupported navigator action.')
+    }
+  }
+
+  const flattenedStyle = flatten(style) || {}
+
+  // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
+  return (
+    <BlueskyBottomSheetPressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      role="link"
+      accessibilityLabel={label}
+      accessibilityHint=""
+      style={{flexDirection: 'row'}}>
+      <Text
+        {...rest}
+        style={[
+          {color: t.palette.primary_500},
+          pressed &&
+            !disableUnderline && {
+              textDecorationLine: 'underline',
+              textDecorationColor:
+                flattenedStyle.color ?? t.palette.primary_500,
+            },
+          flattenedStyle,
+        ]}>
+        {children}
+      </Text>
+    </BlueskyBottomSheetPressable>
+  )
+}
diff --git a/src/components/BottomSheetLink.web.tsx b/src/components/BottomSheetLink.web.tsx
new file mode 100644
index 0000000000..6bfb275c25
--- /dev/null
+++ b/src/components/BottomSheetLink.web.tsx
@@ -0,0 +1,3 @@
+import {Link as BottomSheetLink} from './Link'
+
+export {BottomSheetLink}
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index c80b9f3707..56d030b5df 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -23,6 +23,7 @@ import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, TextProps} from '#/components/Typography'
@@ -103,17 +104,17 @@ export function useLink({
           linkRequiresWarning(href, displayText),
       )
 
-      if (requiresWarning) {
+      if (isWeb) {
         e.preventDefault()
+      }
 
+      if (requiresWarning) {
         openModal({
           name: 'link-warning',
           text: displayText,
           href: href,
         })
       } else {
-        e.preventDefault()
-
         if (isExternal) {
           openLink(href)
         } else {
@@ -241,6 +242,45 @@ export function Link({
   )
 }
 
+export function BottomSheetLink({
+  children,
+  to,
+  action = 'push',
+  onPress: outerOnPress,
+  download,
+  ...rest
+}: LinkProps) {
+  const {href, isExternal, onPress} = useLink({
+    to,
+    displayText: typeof children === 'string' ? children : '',
+    action,
+    onPress: outerOnPress,
+  })
+
+  return (
+    <BottomSheetButton
+      {...rest}
+      style={[a.justify_start, flatten(rest.style)]}
+      role="link"
+      accessibilityRole="link"
+      href={href}
+      onPress={download ? undefined : onPress}
+      {...web({
+        hrefAttrs: {
+          target: download ? undefined : isExternal ? 'blank' : undefined,
+          rel: isExternal ? 'noopener noreferrer' : undefined,
+          download,
+        },
+        dataSet: {
+          // no underline, only `InlineLink` has underlines
+          noUnderline: '1',
+        },
+      })}>
+      {children}
+    </BottomSheetButton>
+  )
+}
+
 export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
 > &
diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx
index f7a8139ea5..e62dc9910b 100644
--- a/src/components/ReportDialog/SelectLabelerView.tsx
+++ b/src/components/ReportDialog/SelectLabelerView.tsx
@@ -4,10 +4,10 @@ import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, useButtonContext} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {useButtonContext} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as LabelingServiceCard from '#/components/LabelingServiceCard'
 import {Text} from '#/components/Typography'
@@ -39,12 +39,12 @@ export function SelectLabelerView({
       <View style={[a.gap_sm]}>
         {props.labelers.map(labeler => {
           return (
-            <Button
+            <BottomSheetButton
               key={labeler.creator.did}
               label={_(msg`Send report to ${labeler.creator.displayName}`)}
               onPress={() => props.onSelectLabeler(labeler.creator.did)}>
               <LabelerButton labeler={labeler} />
-            </Button>
+            </BottomSheetButton>
           )
         })}
       </View>
diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx
index 169c07d732..7e27cacf0c 100644
--- a/src/components/ReportDialog/SelectReportOptionView.tsx
+++ b/src/components/ReportDialog/SelectReportOptionView.tsx
@@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions'
-import {Link} from '#/components/Link'
+import {BottomSheetLink} from '#/components/Link'
 import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
@@ -129,7 +129,7 @@ export function SelectReportOptionView({
               ]}>
               <Trans>Need to report a copyright violation?</Trans>
             </Text>
-            <Link
+            <BottomSheetLink
               to={DMCA_LINK}
               label={_(msg`View details for reporting a copyright violation`)}
               size="small"
@@ -139,7 +139,7 @@ export function SelectReportOptionView({
                 <Trans>View details</Trans>
               </ButtonText>
               <ButtonIcon position="right" icon={SquareArrowTopRight} />
-            </Link>
+            </BottomSheetLink>
           </View>
         )}
       </View>
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index 389c722c87..22eb406a00 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -13,7 +13,9 @@ import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -139,7 +141,7 @@ function Label({
         </View>
         {!isSelfLabel && (
           <View>
-            <Button
+            <BottomSheetButton
               variant="solid"
               color="secondary"
               size="small"
@@ -148,7 +150,7 @@ function Label({
               <ButtonText>
                 <Trans>Appeal</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         )}
       </View>
@@ -156,23 +158,25 @@ function Label({
       <Divider />
 
       <View style={[a.px_md, a.py_sm, t.atoms.bg_contrast_25]}>
-        <Text style={[t.atoms.text_contrast_medium]}>
-          {isSelfLabel ? (
+        {isSelfLabel ? (
+          <Text style={[t.atoms.text_contrast_medium]}>
             <Trans>This label was applied by you.</Trans>
-          ) : (
-            <Trans>
-              Source:{' '}
-              <InlineLinkText
-                label={sourceName}
-                to={makeProfileLink(
-                  labeler ? labeler.creator : {did: label.src, handle: ''},
-                )}
-                onPress={() => control.close()}>
-                {sourceName}
-              </InlineLinkText>
-            </Trans>
-          )}
-        </Text>
+          </Text>
+        ) : (
+          <View style={{flexDirection: 'row'}}>
+            <Text style={[t.atoms.text_contrast_medium]}>
+              <Trans>Source: </Trans>{' '}
+            </Text>
+            <BottomSheetInlineLinkText
+              label={sourceName}
+              to={makeProfileLink(
+                labeler ? labeler.creator : {did: label.src, handle: ''},
+              )}
+              onPress={() => control.close()}>
+              {sourceName}
+            </BottomSheetInlineLinkText>
+          </View>
+        )}
       </View>
     </View>
   )
@@ -275,7 +279,7 @@ function AppealForm({
             ? [a.flex_row, a.justify_between]
             : [{flexDirection: 'column-reverse'}, a.gap_sm]
         }>
-        <Button
+        <BottomSheetButton
           testID="backBtn"
           variant="solid"
           color="secondary"
@@ -283,8 +287,8 @@ function AppealForm({
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
-        </Button>
-        <Button
+        </BottomSheetButton>
+        <BottomSheetButton
           testID="submitBtn"
           variant="solid"
           color="primary"
@@ -293,7 +297,7 @@ function AppealForm({
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </>
   )

From 84d32e3a950cddc8e26048fb15a56d35d493d519 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 10:56:19 -0700
Subject: [PATCH 06/14] simplify pressable changes

---
 src/components/BottomSheetButton.tsx       |  12 +++
 src/components/Button.tsx                  |   6 +-
 src/components/Menu/index.tsx              |   6 +-
 src/components/Menu/types.ts               |   6 +-
 src/components/NormalizedPressable.tsx     | 120 +++++++++++++++++++++
 src/components/NormalizedPressable.web.tsx |   3 +
 6 files changed, 144 insertions(+), 9 deletions(-)
 create mode 100644 src/components/BottomSheetButton.tsx
 create mode 100644 src/components/NormalizedPressable.tsx
 create mode 100644 src/components/NormalizedPressable.web.tsx

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
new file mode 100644
index 0000000000..38fdf598ba
--- /dev/null
+++ b/src/components/BottomSheetButton.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+import {Button, ButtonProps} from '#/components/Button'
+import {NormalizedPressable} from '#/components/NormalizedPressable'
+
+export function BottomSheetButton({children, ...rest}: ButtonProps) {
+  return (
+    <Button {...rest} Component={NormalizedPressable}>
+      {children}
+    </Button>
+  )
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 17179994a9..4057f0a3c1 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -87,6 +87,7 @@ export type ButtonProps = Pick<
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
+    Component?: React.ComponentType<PressableProps>
   }
 
 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
@@ -114,6 +115,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
+      Component = Pressable,
       ...rest
     },
     ref,
@@ -449,7 +451,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Pressable
+      <Component
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
@@ -500,7 +502,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         <Context.Provider value={context}>
           {typeof children === 'function' ? children(context) : children}
         </Context.Provider>
-      </Pressable>
+      </Component>
     )
   },
 )
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index c48d6f9bd0..298e0d91f7 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {BlueskyBottomSheetPressable as Pressable} from '@haileyok/bluesky-bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -19,6 +18,7 @@ import {
   ItemTextProps,
   TriggerProps,
 } from '#/components/Menu/types'
+import {NormalizedPressable} from '#/components/NormalizedPressable'
 import {Text} from '#/components/Typography'
 
 export {
@@ -117,7 +117,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   } = useInteractionState()
 
   return (
-    <Pressable
+    <NormalizedPressable
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
@@ -151,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
         {children}
       </ItemContext.Provider>
-    </Pressable>
+    </NormalizedPressable>
   )
 }
 
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index e5d1d16a8d..2f7aea5de5 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -4,8 +4,6 @@ import {
   GestureResponderEvent,
   PressableProps,
 } from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
-import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -89,10 +87,10 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<BueskyBottomSheetPressableProps, 'style'> &
+  Omit<PressableProps, 'style'> &
     ViewStyleProp & {
       label: string
-      onPress: (e: PressableEvent | GestureResponderEvent) => void
+      onPress: (e: GestureResponderEvent) => void
     }
 >
 
diff --git a/src/components/NormalizedPressable.tsx b/src/components/NormalizedPressable.tsx
new file mode 100644
index 0000000000..75d6a197e2
--- /dev/null
+++ b/src/components/NormalizedPressable.tsx
@@ -0,0 +1,120 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  NativeMouseEvent,
+  NativeSyntheticEvent,
+  PressableProps,
+  View,
+} from 'react-native'
+import {Pressable as BSPressable} from 'react-native-gesture-handler'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+
+function pressableEventToGestureResponderEvent(
+  event: PressableEvent,
+): GestureResponderEvent {
+  return {
+    nativeEvent: {
+      ...event.nativeEvent,
+      touches: [],
+      changedTouches: [],
+      identifier: event.nativeEvent.identifier.toString(),
+      target: event.nativeEvent.target.toString(),
+    },
+    target: null,
+    currentTarget: null,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+    isDefaultPrevented(): boolean {
+      return false
+    },
+    isPropagationStopped(): boolean {
+      return false
+    },
+    persist() {},
+    type: 'press',
+  }
+}
+
+function pressableEventToMouseEvent(
+  event: PressableEvent,
+): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
+  return {
+    ...event.nativeEvent,
+    target: null,
+    currentTarget: null,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+  }
+}
+
+export const NormalizedPressable = React.forwardRef<View, PressableProps>(
+  function NormalizedPressable(
+    {
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus: _onFocus,
+      ...rest
+    },
+    ref,
+  ) {
+    const onNormalizedPress = (event: PressableEvent) => {
+      if (!onPress) return
+      onPress(pressableEventToGestureResponderEvent(event))
+    }
+
+    const onNormalizedLongPress = (event: PressableEvent) => {
+      if (!onLongPress) return
+      onLongPress(pressableEventToGestureResponderEvent(event))
+    }
+
+    const onNormalizedPressIn = (event: PressableEvent) => {
+      if (!onPressIn) return
+      onPressIn(pressableEventToGestureResponderEvent(event))
+    }
+
+    const onNormalizedPressOut = (event: PressableEvent) => {
+      if (!onPressOut) return
+      onPressOut(pressableEventToGestureResponderEvent(event))
+    }
+
+    const onNormalizedHoverIn = (event: PressableEvent) => {
+      if (!onHoverIn) return
+      onHoverIn(pressableEventToMouseEvent(event))
+    }
+
+    const onNormalizedHoverOut = (event: PressableEvent) => {
+      if (!onHoverOut) return
+      onHoverOut(pressableEventToMouseEvent(event))
+    }
+
+    return (
+      <View ref={ref}>
+        <BSPressable
+          onPress={onNormalizedPress}
+          onLongPress={onNormalizedLongPress}
+          onPressIn={onNormalizedPressIn}
+          onPressOut={onNormalizedPressOut}
+          onHoverIn={onNormalizedHoverIn}
+          onHoverOut={onNormalizedHoverOut}
+          {...rest}
+        />
+      </View>
+    )
+  },
+)
diff --git a/src/components/NormalizedPressable.web.tsx b/src/components/NormalizedPressable.web.tsx
new file mode 100644
index 0000000000..fa786a6070
--- /dev/null
+++ b/src/components/NormalizedPressable.web.tsx
@@ -0,0 +1,3 @@
+import {Pressable as NormalizedPressable} from 'react-native'
+
+export {NormalizedPressable}

From 5fe4ee9247d2a0549571748e910fff861f7b2870 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 10:58:16 -0700
Subject: [PATCH 07/14] rm

---
 src/components/BottomSheetLink.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/BottomSheetLink.tsx b/src/components/BottomSheetLink.tsx
index 6b9f4ebd96..518d6994e2 100644
--- a/src/components/BottomSheetLink.tsx
+++ b/src/components/BottomSheetLink.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import {BlueskyBottomSheetPressable} from '@haileyok/bluesky-bottom-sheet'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from '#/lib/routes/types'
@@ -7,6 +6,7 @@ import {flatten, useTheme} from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {InlineLinkProps, useLink} from '#/components/Link'
+import {NormalizedPressable} from '#/components/NormalizedPressable'
 import {Text} from '#/components/Typography'
 import {router} from '#/routes'
 
@@ -64,7 +64,7 @@ export function BottomSheetInlineLinkText({
 
   // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
   return (
-    <BlueskyBottomSheetPressable
+    <NormalizedPressable
       onPress={onPress}
       onLongPress={onLongPress}
       onPressIn={onPressIn}
@@ -87,6 +87,6 @@ export function BottomSheetInlineLinkText({
         ]}>
         {children}
       </Text>
-    </BlueskyBottomSheetPressable>
+    </NormalizedPressable>
   )
 }

From 839d6dc5ce7c2c96f699ff245b6313c84984499d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 10:59:20 -0700
Subject: [PATCH 08/14] rename for clairity

---
 src/components/BottomSheetButton.tsx                        | 4 ++--
 src/components/BottomSheetLink.tsx                          | 6 +++---
 src/components/Menu/index.tsx                               | 6 +++---
 ...{NormalizedPressable.tsx => NormalizedRNGHPressable.tsx} | 2 +-
 ...zedPressable.web.tsx => NormalizedRNGHPressable.web.tsx} | 0
 5 files changed, 9 insertions(+), 9 deletions(-)
 rename src/components/{NormalizedPressable.tsx => NormalizedRNGHPressable.tsx} (97%)
 rename src/components/{NormalizedPressable.web.tsx => NormalizedRNGHPressable.web.tsx} (100%)

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
index 38fdf598ba..9eaee55deb 100644
--- a/src/components/BottomSheetButton.tsx
+++ b/src/components/BottomSheetButton.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 
 import {Button, ButtonProps} from '#/components/Button'
-import {NormalizedPressable} from '#/components/NormalizedPressable'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 
 export function BottomSheetButton({children, ...rest}: ButtonProps) {
   return (
-    <Button {...rest} Component={NormalizedPressable}>
+    <Button {...rest} Component={NormalizedRNGHPressable}>
       {children}
     </Button>
   )
diff --git a/src/components/BottomSheetLink.tsx b/src/components/BottomSheetLink.tsx
index 518d6994e2..36d52c90c1 100644
--- a/src/components/BottomSheetLink.tsx
+++ b/src/components/BottomSheetLink.tsx
@@ -6,7 +6,7 @@ import {flatten, useTheme} from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {InlineLinkProps, useLink} from '#/components/Link'
-import {NormalizedPressable} from '#/components/NormalizedPressable'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 import {router} from '#/routes'
 
@@ -64,7 +64,7 @@ export function BottomSheetInlineLinkText({
 
   // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
   return (
-    <NormalizedPressable
+    <NormalizedRNGHPressable
       onPress={onPress}
       onLongPress={onLongPress}
       onPressIn={onPressIn}
@@ -87,6 +87,6 @@ export function BottomSheetInlineLinkText({
         ]}>
         {children}
       </Text>
-    </NormalizedPressable>
+    </NormalizedRNGHPressable>
   )
 }
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 298e0d91f7..809df96908 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -18,7 +18,7 @@ import {
   ItemTextProps,
   TriggerProps,
 } from '#/components/Menu/types'
-import {NormalizedPressable} from '#/components/NormalizedPressable'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export {
@@ -117,7 +117,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   } = useInteractionState()
 
   return (
-    <NormalizedPressable
+    <NormalizedRNGHPressable
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
@@ -151,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
         {children}
       </ItemContext.Provider>
-    </NormalizedPressable>
+    </NormalizedRNGHPressable>
   )
 }
 
diff --git a/src/components/NormalizedPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
similarity index 97%
rename from src/components/NormalizedPressable.tsx
rename to src/components/NormalizedRNGHPressable.tsx
index 75d6a197e2..8cf4fe60c0 100644
--- a/src/components/NormalizedPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -59,7 +59,7 @@ function pressableEventToMouseEvent(
   }
 }
 
-export const NormalizedPressable = React.forwardRef<View, PressableProps>(
+export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
   function NormalizedPressable(
     {
       onPress,
diff --git a/src/components/NormalizedPressable.web.tsx b/src/components/NormalizedRNGHPressable.web.tsx
similarity index 100%
rename from src/components/NormalizedPressable.web.tsx
rename to src/components/NormalizedRNGHPressable.web.tsx

From 1d5a3efe3402c171761b5f815fc2f91cd9c5db19 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 11:45:58 -0700
Subject: [PATCH 09/14] tweak

---
 src/components/Button.tsx                  |  15 ++-
 src/components/NormalizedRNGHPressable.tsx | 130 +++++++++++----------
 2 files changed, 83 insertions(+), 62 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 4057f0a3c1..26b0f89f66 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -115,11 +117,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      Component = Pressable,
+      Component,
       ...rest
     },
     ref,
   ) => {
+    // This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
+    // pressable so that it is usable inside the dialog.
+    const dialogContext = useDialogContext()
+    if (!Component) {
+      if (dialogContext) {
+        Component = NormalizedRNGHPressable
+      } else {
+        Component = Pressable
+      }
+    }
+
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 8cf4fe60c0..351005619d 100644
--- a/src/components/NormalizedRNGHPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
 import {
   GestureResponderEvent,
+  MeasureOnSuccessCallback,
   NativeMouseEvent,
   NativeSyntheticEvent,
   PressableProps,
-  View,
 } from 'react-native'
 import {Pressable as BSPressable} from 'react-native-gesture-handler'
 import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 
 function pressableEventToGestureResponderEvent(
   event: PressableEvent,
+  target: NormalizedRNGHPressable,
 ): GestureResponderEvent {
   return {
     nativeEvent: {
@@ -20,8 +21,10 @@ function pressableEventToGestureResponderEvent(
       identifier: event.nativeEvent.identifier.toString(),
       target: event.nativeEvent.target.toString(),
     },
-    target: null,
-    currentTarget: null,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
     preventDefault() {},
     stopPropagation() {},
     cancelable: false,
@@ -43,11 +46,14 @@ function pressableEventToGestureResponderEvent(
 
 function pressableEventToMouseEvent(
   event: PressableEvent,
+  target: NormalizedRNGHPressable,
 ): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
   return {
     ...event.nativeEvent,
-    target: null,
-    currentTarget: null,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
     preventDefault() {},
     stopPropagation() {},
     cancelable: false,
@@ -59,62 +65,64 @@ function pressableEventToMouseEvent(
   }
 }
 
-export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
-  function NormalizedPressable(
-    {
-      onPress,
-      onLongPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      onFocus: _onFocus,
-      ...rest
-    },
-    ref,
-  ) {
-    const onNormalizedPress = (event: PressableEvent) => {
-      if (!onPress) return
-      onPress(pressableEventToGestureResponderEvent(event))
-    }
-
-    const onNormalizedLongPress = (event: PressableEvent) => {
-      if (!onLongPress) return
-      onLongPress(pressableEventToGestureResponderEvent(event))
-    }
-
-    const onNormalizedPressIn = (event: PressableEvent) => {
-      if (!onPressIn) return
-      onPressIn(pressableEventToGestureResponderEvent(event))
-    }
-
-    const onNormalizedPressOut = (event: PressableEvent) => {
-      if (!onPressOut) return
-      onPressOut(pressableEventToGestureResponderEvent(event))
-    }
-
-    const onNormalizedHoverIn = (event: PressableEvent) => {
-      if (!onHoverIn) return
-      onHoverIn(pressableEventToMouseEvent(event))
-    }
-
-    const onNormalizedHoverOut = (event: PressableEvent) => {
-      if (!onHoverOut) return
-      onHoverOut(pressableEventToMouseEvent(event))
-    }
+export class NormalizedRNGHPressable extends React.Component<PressableProps> {
+  static displayName = 'Pressable'
+
+  measure = (_: MeasureOnSuccessCallback) => {}
+
+  measureLayout = (_: number) => {}
+
+  measureInWindow = (
+    _: (x: number, y: number, width: number, height: number) => void,
+  ) => {}
+
+  setNativeProps = (_: PressableProps) => {}
+
+  focus = () => {}
+
+  blur = () => {}
+
+  onPress = (event: PressableEvent) => {
+    if (!this.props.onPress) return
+    this.props.onPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onLongPress = (event: PressableEvent) => {
+    if (!this.props.onLongPress) return
+    this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
+  }
 
+  onPressIn = (event: PressableEvent) => {
+    if (!this.props.onPressIn) return
+    this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressOut = (event: PressableEvent) => {
+    if (!this.props.onPressOut) return
+    this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onHoverIn = (event: PressableEvent) => {
+    if (!this.props.onHoverIn) return
+    this.props.onHoverIn(pressableEventToMouseEvent(event, this))
+  }
+
+  onHoverOut = (event: PressableEvent) => {
+    if (!this.props.onHoverOut) return
+    this.props.onHoverOut(pressableEventToMouseEvent(event, this))
+  }
+
+  render() {
     return (
-      <View ref={ref}>
-        <BSPressable
-          onPress={onNormalizedPress}
-          onLongPress={onNormalizedLongPress}
-          onPressIn={onNormalizedPressIn}
-          onPressOut={onNormalizedPressOut}
-          onHoverIn={onNormalizedHoverIn}
-          onHoverOut={onNormalizedHoverOut}
-          {...rest}
-        />
-      </View>
+      <BSPressable
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
+      />
     )
-  },
-)
+  }
+}

From 6d7b54cdf7d45eda16299c50014bd856e0fda3c8 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 16:30:38 -0700
Subject: [PATCH 10/14] fix namE

---
 src/components/NormalizedRNGHPressable.web.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NormalizedRNGHPressable.web.tsx b/src/components/NormalizedRNGHPressable.web.tsx
index fa786a6070..86f5730495 100644
--- a/src/components/NormalizedRNGHPressable.web.tsx
+++ b/src/components/NormalizedRNGHPressable.web.tsx
@@ -1,3 +1,3 @@
-import {Pressable as NormalizedPressable} from 'react-native'
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
 
-export {NormalizedPressable}
+export {NormalizedRNGHPressable}

From 10cb87b6958c566aa2f78896fe3cef8c828918b0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 16:34:16 -0700
Subject: [PATCH 11/14] use context to pick default pressable component

---
 src/components/Button.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 26b0f89f66..06de6890bc 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -468,6 +468,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
+        // @ts-expect-error ref type
         ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}

From 431f1ffe8dc9f5ee1e5b44eb829f052a4c8ddfa6 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 16:49:36 -0700
Subject: [PATCH 12/14] adjust

---
 src/components/Button.tsx        | 4 ++--
 src/components/Dialog/context.ts | 1 +
 src/components/Dialog/index.tsx  | 2 +-
 src/components/Dialog/types.ts   | 1 +
 4 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 06de6890bc..98ad1709c4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -124,9 +124,9 @@ export const Button = React.forwardRef<View, ButtonProps>(
   ) => {
     // This will pick the correct default pressable to use. If we are inside a dialog, we need to use the RNGH
     // pressable so that it is usable inside the dialog.
-    const dialogContext = useDialogContext()
+    const {insideDialog} = useDialogContext()
     if (!Component) {
-      if (dialogContext) {
+      if (insideDialog) {
         Component = NormalizedRNGHPressable
       } else {
         Component = Pressable
diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
index 859f8edd77..27b8a56375 100644
--- a/src/components/Dialog/context.ts
+++ b/src/components/Dialog/context.ts
@@ -9,6 +9,7 @@ import {
 
 export const Context = React.createContext<DialogContextProps>({
   close: () => {},
+  insideDialog: false,
 })
 
 export function useDialogContext() {
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 303da0d009..6fbc8d87a0 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -82,7 +82,7 @@ export function Outer({
     [open, close],
   )
 
-  const context = React.useMemo(() => ({close}), [close])
+  const context = React.useMemo(() => ({close, insideDialog: true}), [close])
 
   return (
     <Portal>
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index ed83bd02b1..a8568e5748 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -37,6 +37,7 @@ export type DialogControlProps = DialogControlRefProps & {
 
 export type DialogContextProps = {
   close: DialogControlProps['close']
+  insideDialog: boolean
 }
 
 export type DialogControlOpenOptions = {

From bb33aa0106fbda4d8f69feb4c4fd48bc397801e3 Mon Sep 17 00:00:00 2001
From: Hailey <hailey@blueskyweb.xyz>
Date: Wed, 2 Oct 2024 17:00:08 -0700
Subject: [PATCH 13/14] revert all the button import changes

---
 src/components/AccountList.tsx                | 18 +++++++++---------
 src/components/FeedCard.tsx                   | 12 +++---------
 src/components/NewskieDialog.tsx              |  5 ++---
 .../ReportDialog/SelectReportOptionView.tsx   | 16 ++++++++++------
 src/components/ReportDialog/SubmitView.tsx    | 11 +++++------
 src/components/StarterPack/QrCodeDialog.tsx   | 11 +++++------
 src/components/StarterPack/ShareDialog.tsx    | 15 +++++++--------
 .../Wizard/WizardEditListDialog.tsx           |  7 +++----
 .../StarterPack/Wizard/WizardListCard.tsx     |  7 +++----
 src/components/TagMenu/index.tsx              | 11 +++++------
 src/components/WhoCanReply.tsx                | 11 +++++------
 src/components/dialogs/BirthDateSettings.tsx  |  7 +++----
 src/components/dialogs/Embed.tsx              |  7 +++----
 src/components/dialogs/EmbedConsent.tsx       | 18 ++++++++++--------
 src/components/dialogs/GifSelect.tsx          | 11 +++++------
 src/components/dialogs/MutedWords.tsx         | 11 +++++------
 .../dialogs/PostInteractionSettingsDialog.tsx | 18 +++++++++---------
 src/components/dialogs/Signin.tsx             | 11 +++++------
 src/components/dms/MessagesNUX.tsx            |  7 +++----
 .../dms/dialogs/SearchablePeopleList.tsx      | 18 +++++++++---------
 src/components/forms/DateField/index.tsx      |  7 +++----
 .../intents/VerifyEmailIntentDialog.tsx       | 11 +++++------
 src/screens/Onboarding/StepProfile/index.tsx  |  5 ++---
 src/view/com/auth/server-input/index.tsx      | 11 +++++------
 src/view/com/composer/GifAltText.tsx          |  7 +++----
 .../composer/photos/EditImageDialog.web.tsx   |  7 +++----
 .../composer/photos/ImageAltTextDialog.tsx    |  7 +++----
 .../com/composer/videos/SubtitleDialog.tsx    |  9 ++++-----
 src/view/com/util/post-ctrls/RepostButton.tsx | 13 ++++++-------
 .../Settings/DisableEmail2FADialog.tsx        | 19 +++++++++----------
 src/view/screens/Settings/ExportCarDialog.tsx |  7 +++----
 31 files changed, 155 insertions(+), 180 deletions(-)

diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index 2a261ddf85..68bb482af2 100644
--- a/src/components/AccountList.tsx
+++ b/src/components/AccountList.tsx
@@ -7,9 +7,9 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Button} from './Button'
 import {Text} from './Typography'
 
 export function AccountList({
@@ -51,19 +51,19 @@ export function AccountList({
           <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
-      <BottomSheetButton
+      <Button
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
         onPress={pendingDid ? undefined : onPressAddAccount}
         label={_(msg`Login to account that is not listed`)}>
-        {({pressed}) => (
+        {({hovered, pressed}) => (
           <View
             style={[
               a.flex_1,
               a.flex_row,
               a.align_center,
               {height: 48},
-              pressed && t.atoms.bg_contrast_25,
+              (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
             <Text
               style={[
@@ -78,7 +78,7 @@ export function AccountList({
             <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
           </View>
         )}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -103,7 +103,7 @@ function AccountItem({
   }, [account, onSelect])
 
   return (
-    <BottomSheetButton
+    <Button
       testID={`chooseAccountBtn-${account.handle}`}
       key={account.did}
       style={[a.flex_1]}
@@ -113,14 +113,14 @@ function AccountItem({
           ? _(msg`Continue as ${account.handle} (currently signed in)`)
           : _(msg`Sign in as ${account.handle}`)
       }>
-      {({pressed}) => (
+      {({hovered, pressed}) => (
         <View
           style={[
             a.flex_1,
             a.flex_row,
             a.align_center,
             {height: 48},
-            (pressed || isPendingAccount) && t.atoms.bg_contrast_25,
+            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <View style={a.p_md}>
             <UserAvatar avatar={profile?.avatar} size={24} />
@@ -143,6 +143,6 @@ function AccountItem({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
diff --git a/src/components/FeedCard.tsx b/src/components/FeedCard.tsx
index 03a57d0389..b28f66f839 100644
--- a/src/components/FeedCard.tsx
+++ b/src/components/FeedCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {GestureResponderEvent, View} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {
   AppBskyActorDefs,
   AppBskyFeedDefs,
@@ -14,7 +13,6 @@ import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {precacheFeedFromGeneratorView} from '#/state/queries/feed'
 import {
   useAddSavedFeedsMutation,
@@ -256,13 +254,9 @@ function SaveButtonInner({
   const isPending = isAddSavedFeedPending || isRemovePending
 
   const toggleSave = React.useCallback(
-    async (e: GestureResponderEvent | PressableEvent) => {
-      // WEB ONLY - this is okay. See `BottomSheetPressable.web.tsx`
-      if (isWeb) {
-        e = e as GestureResponderEvent
-        e.preventDefault()
-        e.stopPropagation()
-      }
+    async (e: GestureResponderEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
 
       try {
         if (savedFeedConfig) {
diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index 0ed29babb1..e25f48edf5 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -12,7 +12,6 @@ import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
@@ -142,7 +141,7 @@ export function NewskieDialog({
             ) : null}
 
             {isNative && (
-              <BottomSheetButton
+              <Button
                 label={_(msg`Close`)}
                 variant="solid"
                 color="secondary"
@@ -152,7 +151,7 @@ export function NewskieDialog({
                 <ButtonText>
                   <Trans>Close</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             )}
           </View>
 
diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx
index 9d97441915..7e27cacf0c 100644
--- a/src/components/ReportDialog/SelectReportOptionView.tsx
+++ b/src/components/ReportDialog/SelectReportOptionView.tsx
@@ -10,8 +10,12 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
+import {
+  Button,
+  ButtonIcon,
+  ButtonText,
+  useButtonContext,
+} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
   ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
@@ -68,7 +72,7 @@ export function SelectReportOptionView({
   return (
     <View style={[a.gap_lg]}>
       {props.labelers?.length > 1 ? (
-        <BottomSheetButton
+        <Button
           size="small"
           variant="solid"
           color="secondary"
@@ -76,7 +80,7 @@ export function SelectReportOptionView({
           label={_(msg`Go back to previous step`)}
           onPress={props.goBack}>
           <ButtonIcon icon={ChevronLeft} />
-        </BottomSheetButton>
+        </Button>
       ) : null}
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
@@ -91,7 +95,7 @@ export function SelectReportOptionView({
       <View style={[a.gap_sm]}>
         {reportOptions.map(reportOption => {
           return (
-            <BottomSheetButton
+            <Button
               key={reportOption.reason}
               testID={reportOption.reason}
               label={_(msg`Create report for ${reportOption.title}`)}
@@ -100,7 +104,7 @@ export function SelectReportOptionView({
                 title={reportOption.title}
                 description={reportOption.description}
               />
-            </BottomSheetButton>
+            </Button>
           )
         })}
 
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index 590945c267..e323d15042 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -10,8 +10,7 @@ import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -101,7 +100,7 @@ export function SubmitView({
 
   return (
     <View style={[a.gap_2xl]}>
-      <BottomSheetButton
+      <Button
         size="small"
         variant="solid"
         color="secondary"
@@ -109,7 +108,7 @@ export function SubmitView({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={ChevronLeft} />
-      </BottomSheetButton>
+      </Button>
 
       <View
         style={[
@@ -212,7 +211,7 @@ export function SubmitView({
             </Text>
           ))}
 
-        <BottomSheetButton
+        <Button
           testID="sendReportBtn"
           size="large"
           variant="solid"
@@ -224,7 +223,7 @@ export function SubmitView({
             <Trans>Send report</Trans>
           </ButtonText>
           {submitting && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index b7dbd66cd0..2feea0973a 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -13,8 +13,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -166,7 +165,7 @@ export function QrCodeDialog({
                 ) : (
                   <View
                     style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <BottomSheetButton
+                    <Button
                       label={_(msg`Copy QR code`)}
                       variant="solid"
                       color="secondary"
@@ -175,8 +174,8 @@ export function QrCodeDialog({
                       <ButtonText>
                         {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
                       </ButtonText>
-                    </BottomSheetButton>
-                    <BottomSheetButton
+                    </Button>
+                    <Button
                       label={_(msg`Save QR code`)}
                       variant="solid"
                       color="secondary"
@@ -185,7 +184,7 @@ export function QrCodeDialog({
                       <ButtonText>
                         <Trans>Save</Trans>
                       </ButtonText>
-                    </BottomSheetButton>
+                    </Button>
                   </View>
                 )}
               </>
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index ec12907cb0..494aceae1f 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -15,8 +15,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -120,7 +119,7 @@ function ShareDialogInner({
                 a.gap_md,
                 isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
               ]}>
-              <BottomSheetButton
+              <Button
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
                 variant="solid"
                 color="secondary"
@@ -130,8 +129,8 @@ function ShareDialogInner({
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
-              </BottomSheetButton>
-              <BottomSheetButton
+              </Button>
+              <Button
                 label={_(msg`Share QR code`)}
                 variant="solid"
                 color="secondary"
@@ -145,9 +144,9 @@ function ShareDialogInner({
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
               {isNative && (
-                <BottomSheetButton
+                <Button
                   label={_(msg`Save image`)}
                   variant="ghost"
                   color="secondary"
@@ -157,7 +156,7 @@ function ShareDialogInner({
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
               )}
             </View>
           </View>
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index 3400bed4b6..d1ecdc8821 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -12,8 +12,7 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {
   WizardFeedCard,
@@ -112,7 +111,7 @@ export function WizardEditListDialog({
             </Text>
             <View style={{width: 60}}>
               {isWeb && (
-                <BottomSheetButton
+                <Button
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
@@ -121,7 +120,7 @@ export function WizardEditListDialog({
                   <ButtonText>
                     <Trans>Close</Trans>
                   </ButtonText>
-                </BottomSheetButton>
+                </Button>
               )}
             </View>
           </View>
diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index 879d95f1cd..44f01a1545 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -19,8 +19,7 @@ import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
@@ -99,7 +98,7 @@ function WizardListCard({
       {btnType === 'checkbox' ? (
         <Checkbox />
       ) : !disabled ? (
-        <BottomSheetButton
+        <Button
           label={_(msg`Remove`)}
           variant="solid"
           color="secondary"
@@ -109,7 +108,7 @@ function WizardListCard({
           <ButtonText>
             <Trans>Remove</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       ) : null}
     </Toggle.Item>
   )
diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx
index 8b6a62e440..2e4249609a 100644
--- a/src/components/TagMenu/index.tsx
+++ b/src/components/TagMenu/index.tsx
@@ -13,8 +13,7 @@ import {
   useUpsertMutedWordsMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
@@ -212,7 +211,7 @@ export function TagMenu({
                   <>
                     <Divider />
 
-                    <BottomSheetButton
+                    <Button
                       label={
                         isMuted
                           ? _(msg`Unmute all ${displayTag} posts`)
@@ -266,12 +265,12 @@ export function TagMenu({
                           <Trans>posts</Trans>
                         </Text>
                       </View>
-                    </BottomSheetButton>
+                    </Button>
                   </>
                 ) : null}
               </View>
 
-              <BottomSheetButton
+              <Button
                 label={_(msg`Close this dialog`)}
                 size="small"
                 variant="ghost"
@@ -280,7 +279,7 @@ export function TagMenu({
                 <ButtonText>
                   <Trans>Cancel</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             </>
           )}
         </Dialog.Inner>
diff --git a/src/components/WhoCanReply.tsx b/src/components/WhoCanReply.tsx
index ba9970af42..2839943c97 100644
--- a/src/components/WhoCanReply.tsx
+++ b/src/components/WhoCanReply.tsx
@@ -17,7 +17,7 @@ import {
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
@@ -82,7 +82,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
 
   return (
     <>
-      <BottomSheetButton
+      <Button
         label={
           isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
         }
@@ -98,8 +98,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {/* @TODO DIALOG REFACTOR hovered */}
-        {({pressed}) => (
+        {({hovered}) => (
           <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
             <Icon
               color={t.palette.contrast_400}
@@ -111,7 +110,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
                 a.text_sm,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
-                pressed && a.underline,
+                hovered && a.underline,
               ]}>
               {description}
             </Text>
@@ -121,7 +120,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             )}
           </View>
         )}
-      </BottomSheetButton>
+      </Button>
 
       {isThreadAuthor ? (
         <PostInteractionSettingsDialog
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index 6dceebdb44..72ce9690e9 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -14,10 +14,9 @@ import {
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {DateInput} from '#/view/com/util/forms/DateInput'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
@@ -114,7 +113,7 @@ function BirthdayInner({
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>
-        <BottomSheetButton
+        <Button
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
           size="large"
           onPress={onSave}
@@ -124,7 +123,7 @@ function BirthdayInner({
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </View>
   )
diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index 525010230e..7aa2a4fc1e 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -8,13 +8,12 @@ import {EMBED_SCRIPT} from '#/lib/constants'
 import {niceDate} from '#/lib/strings/time'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CodeBrackets_Stroke2_Corner0_Rounded as CodeBrackets} from '#/components/icons/CodeBrackets'
 import {Text} from '#/components/Typography'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 
 type EmbedDialogProps = {
   control: Dialog.DialogControlProps
@@ -118,7 +117,7 @@ function EmbedDialogInner({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
@@ -141,7 +140,7 @@ function EmbedDialogInner({
               <Trans>Copy code</Trans>
             </ButtonText>
           )}
-        </BottomSheetButton>
+        </Button>
       </View>
       <Dialog.Close />
     </Dialog.Inner>
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index c6d8f8f86a..3aa0f0b404 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -10,9 +10,8 @@ import {
 } from '#/lib/strings/embed-player'
 import {useSetExternalEmbedPref} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
-import {ButtonText} from '../Button'
+import {Button, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function EmbedConsentDialog({
@@ -76,30 +75,33 @@ export function EmbedConsentDialog({
           </View>
         </View>
         <View style={a.gap_md}>
-          <BottomSheetButton
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
+            onAccessibilityEscape={control.close}
             color="primary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable external media</Trans>
             </ButtonText>
-          </BottomSheetButton>
-          <BottomSheetButton
+          </Button>
+          <Button
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
+            onAccessibilityEscape={control.close}
             color="secondary"
             size="large"
             variant="solid">
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
             </ButtonText>
-          </BottomSheetButton>
-          <BottomSheetButton
+          </Button>
+          <Button
             label={_(msg`No thanks`)}
+            onAccessibilityEscape={control.close}
             onPress={onHidePress}
             color="secondary"
             size="large"
@@ -107,7 +109,7 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>No thanks</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index e270b2e1d6..887cc30378 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -20,13 +20,12 @@ import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ListMethods} from '#/view/com/util/List'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {ButtonIcon, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
 
@@ -149,7 +148,7 @@ function GifList({
         />
 
         {!gtMobile && isWeb && (
-          <BottomSheetButton
+          <Button
             size="small"
             variant="ghost"
             color="secondary"
@@ -157,7 +156,7 @@ function GifList({
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
-          </BottomSheetButton>
+          </Button>
         )}
 
         <TextField.Root>
@@ -257,7 +256,7 @@ function DialogError({details}: {details?: string}) {
         )}
         details={details}
       />
-      <BottomSheetButton
+      <Button
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
@@ -266,7 +265,7 @@ function DialogError({details}: {details?: string}) {
         <ButtonText>
           <Trans>Close</Trans>
         </ButtonText>
-      </BottomSheetButton>
+      </Button>
     </Dialog.ScrollableInner>
   )
 }
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index bd9edab3d4..daa18f94e7 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -19,8 +19,7 @@ import {
   ViewStyleProp,
   web,
 } from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Divider} from '#/components/Divider'
@@ -316,7 +315,7 @@ function MutedWordsInner() {
           </View>
 
           <View style={[a.pt_xs]}>
-            <BottomSheetButton
+            <Button
               disabled={isPending || !field}
               label={_(msg`Add mute word for configured settings`)}
               size="large"
@@ -328,7 +327,7 @@ function MutedWordsInner() {
                 <Trans>Add</Trans>
               </ButtonText>
               <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </BottomSheetButton>
+            </Button>
           </View>
 
           {error && (
@@ -519,7 +518,7 @@ function MutedWordRow({
           )}
         </View>
 
-        <BottomSheetButton
+        <Button
           label={_(msg`Remove mute word from your list`)}
           size="tiny"
           shape="round"
@@ -528,7 +527,7 @@ function MutedWordRow({
           onPress={() => control.open()}
           style={[a.ml_sm]}>
           <ButtonIcon icon={isPending ? Loader : X} />
-        </BottomSheetButton>
+        </Button>
       </View>
     </>
   )
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index a9f4ff6708..93be838542 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -30,8 +30,7 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -230,6 +229,7 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
+  const control = Dialog.useDialogContext()
   const {data: lists} = useMyListsQuery('curate')
   const [quotesEnabled, setQuotesEnabled] = React.useState(
     !(
@@ -432,16 +432,17 @@ export function PostInteractionSettingsForm({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Save`)}
         onPress={onSave}
+        onAccessibilityEscape={control.close}
         color="primary"
         size="large"
         variant="solid"
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
         {isSaving && <ButtonIcon icon={Loader} position="right" />}
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
@@ -461,7 +462,7 @@ function Selectable({
 }) {
   const t = useTheme()
   return (
-    <BottomSheetButton
+    <Button
       disabled={disabled}
       onPress={onPress}
       label={label}
@@ -471,8 +472,7 @@ function Selectable({
         checked: isSelected,
       }}
       style={a.flex_1}>
-      {/* @TODO DIALOG REFACTOR hovered focused */}
-      {({pressed}) => (
+      {({hovered, focused}) => (
         <View
           style={[
             a.flex_1,
@@ -483,7 +483,7 @@ function Selectable({
             a.p_md,
             {height: 40}, // for consistency with checkmark icon visible or not
             t.atoms.bg_contrast_50,
-            pressed && t.atoms.bg_contrast_100,
+            (hovered || focused) && t.atoms.bg_contrast_100,
             isSelected && {
               backgroundColor: t.palette.primary_100,
             },
@@ -497,7 +497,7 @@ function Selectable({
           )}
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
index f348f08621..d24f6af644 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -9,8 +9,7 @@ import {useCloseAllActiveElements} from '#/state/util'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Text} from '#/components/Typography'
@@ -78,7 +77,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
         </Text>
 
         <View style={[a.flex_col, a.gap_md]}>
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="primary"
             size="large"
@@ -87,9 +86,9 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Create an account</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
 
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="secondary"
             size="large"
@@ -98,7 +97,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Sign in</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
 
         {isNative && <View style={{height: 10}} />}
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
index 8ebd244e40..723696a04d 100644
--- a/src/components/dms/MessagesNUX.tsx
+++ b/src/components/dms/MessagesNUX.tsx
@@ -9,8 +9,7 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
@@ -157,7 +156,7 @@ function DialogInner({
             </Toggle.Group>
           </View>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
           size="large"
@@ -167,7 +166,7 @@ function DialogInner({
           <ButtonText>
             <Trans>Get started</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
       <Dialog.Close />
     </Dialog.ScrollableInner>
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index 5a4f64f88f..17a7f43e57 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -21,7 +21,7 @@ import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -254,7 +254,7 @@ export function SearchablePeopleList({
             a.justify_center,
             {height: 32},
           ]}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Close`)}
             size="small"
             shape="round"
@@ -264,7 +264,6 @@ export function SearchablePeopleList({
               a.absolute,
               a.z_20,
               native({
-                top: 2,
                 left: -7,
               }),
               web({
@@ -277,7 +276,7 @@ export function SearchablePeopleList({
             ) : (
               <ChevronLeft size="md" fill={t.palette.contrast_500} />
             )}
-          </BottomSheetButton>
+          </Button>
           <Text
             style={[
               a.z_10,
@@ -364,11 +363,11 @@ function ProfileCard({
   }, [onPress, profile.did])
 
   return (
-    <BottomSheetButton
+    <Button
       disabled={!enabled}
       label={_(msg`Start chat with ${displayName}`)}
       onPress={handleOnPress}>
-      {({pressed}) => (
+      {({hovered, pressed, focused}) => (
         <View
           style={[
             a.flex_1,
@@ -377,11 +376,12 @@ function ProfileCard({
             a.gap_md,
             a.align_center,
             a.flex_row,
-            // @TODO DIALOG REFACTOR focused hovered
             !enabled
               ? {opacity: 0.5}
-              : pressed
+              : pressed || focused
               ? t.atoms.bg_contrast_25
+              : hovered
+              ? t.atoms.bg_contrast_50
               : t.atoms.bg,
           ]}>
           <UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
           </View>
         </View>
       )}
-    </BottomSheetButton>
+    </Button>
   )
 }
 
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 7e3d2a18f2..7546aec484 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -5,8 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
@@ -73,7 +72,7 @@ export function DateField({
                 accessibilityHint={accessibilityHint}
               />
             </View>
-            <BottomSheetButton
+            <Button
               label={_(msg`Done`)}
               onPress={() => control.close()}
               size="large"
@@ -82,7 +81,7 @@ export function DateField({
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 6576a5ecb8..9f3808020a 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -5,8 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
@@ -107,7 +106,7 @@ function Inner({control}: {control: DialogControlProps}) {
         )}
         {status !== 'loading' ? (
           <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
-            <BottomSheetButton
+            <Button
               label={_(msg`Close`)}
               onPress={() => control.close()}
               variant="solid"
@@ -117,9 +116,9 @@ function Inner({control}: {control: DialogControlProps}) {
               <ButtonText>
                 <Trans>Close</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
             {status === 'failure' ? (
-              <BottomSheetButton
+              <Button
                 label={_(msg`Resend Verification Email`)}
                 onPress={onPressResendEmail}
                 variant="solid"
@@ -130,7 +129,7 @@ function Inner({control}: {control: DialogControlProps}) {
                   <Trans>Resend Email</Trans>
                 </ButtonText>
                 {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </BottomSheetButton>
+              </Button>
             ) : null}
           </View>
         ) : null}
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 0672d4fd37..c6a39ab45e 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -30,7 +30,6 @@ import {
   PlaceholderCanvasRef,
 } from '#/screens/Onboarding/StepProfile/PlaceholderCanvas'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {IconCircle} from '#/components/IconCircle'
@@ -312,7 +311,7 @@ export function StepProfile() {
             />
           </View>
           <View style={[a.pt_4xl]}>
-            <BottomSheetButton
+            <Button
               variant="solid"
               color="primary"
               size="large"
@@ -321,7 +320,7 @@ export function StepProfile() {
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index 0e9eb0d199..de7ed6d15b 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -6,8 +6,7 @@ import {useLingui} from '@lingui/react'
 import {BSKY_SERVICE} from '#/lib/constants'
 import * as persisted from '#/state/persisted'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -125,7 +124,7 @@ export function ServerInputDialog({
               {pdsAddressHistory.length > 0 && (
                 <View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
                   {pdsAddressHistory.map(uri => (
-                    <BottomSheetButton
+                    <Button
                       key={uri}
                       variant="ghost"
                       color="primary"
@@ -133,7 +132,7 @@ export function ServerInputDialog({
                       style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
                       onPress={() => setCustomAddress(uri)}>
                       <ButtonText>{uri}</ButtonText>
-                    </BottomSheetButton>
+                    </Button>
                   ))}
                 </View>
               )}
@@ -161,7 +160,7 @@ export function ServerInputDialog({
           </View>
 
           <View style={gtMobile && [a.flex_row, a.justify_end]}>
-            <BottomSheetButton
+            <Button
               testID="doneBtn"
               variant="outline"
               color="primary"
@@ -169,7 +168,7 @@ export function ServerInputDialog({
               onPress={() => control.close()}
               label={_(msg`Done`)}>
               <ButtonText>{_(msg`Done`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </View>
       </Dialog.ScrollableInner>
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index a1b869c134..1737fc29ca 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -14,8 +14,7 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
@@ -155,7 +154,7 @@ function AltTextInner({
               />
             </TextField.Root>
           </View>
-          <BottomSheetButton
+          <Button
             label={_(msg`Save`)}
             size="large"
             color="primary"
@@ -164,7 +163,7 @@ function AltTextInner({
             <ButtonText>
               <Trans>Save</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
         {/* below the text input to force tab order */}
         <View>
diff --git a/src/view/com/composer/photos/EditImageDialog.web.tsx b/src/view/com/composer/photos/EditImageDialog.web.tsx
index daffcc6080..0afb83ed96 100644
--- a/src/view/com/composer/photos/EditImageDialog.web.tsx
+++ b/src/view/com/composer/photos/EditImageDialog.web.tsx
@@ -12,8 +12,7 @@ import {
   manipulateImage,
 } from '#/state/gallery'
 import {atoms as a} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 import {EditImageDialogProps} from './EditImageDialog'
@@ -72,7 +71,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
       </View>
 
       <View style={[a.mt_md, a.gap_md]}>
-        <BottomSheetButton
+        <Button
           disabled={!isNew}
           label={_(msg`Save`)}
           size="large"
@@ -82,7 +81,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
     </Dialog.Inner>
   )
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 9dcb877cd9..fc9c6c4931 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -8,8 +8,7 @@ import {MAX_ALT_TEXT} from '#/lib/constants'
 import {isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonText} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Text} from '#/components/Typography'
@@ -103,7 +102,7 @@ const ImageAltTextInner = ({
             />
           </TextField.Root>
         </View>
-        <BottomSheetButton
+        <Button
           label={_(msg`Save`)}
           disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
           size="large"
@@ -113,7 +112,7 @@ const ImageAltTextInner = ({
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </BottomSheetButton>
+        </Button>
       </View>
     </Dialog.ScrollableInner>
   )
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index c3d94bc0fb..d57c6740cf 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -10,7 +10,6 @@ import {LANGUAGES} from '#/locale/languages'
 import {isWeb} from '#/platform/detection'
 import {useLanguagePrefs} from '#/state/preferences'
 import {atoms as a, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -165,7 +164,7 @@ function SubtitleDialogInner({
         )}
 
         <View style={web([a.flex_row, a.justify_end])}>
-          <BottomSheetButton
+          <Button
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'large'}
             color="primary"
@@ -178,7 +177,7 @@ function SubtitleDialogInner({
             <ButtonText>
               <Trans>Done</Trans>
             </ButtonText>
-          </BottomSheetButton>
+          </Button>
         </View>
       </View>
       <Dialog.Close />
@@ -258,7 +257,7 @@ function SubtitleFileRow({
         </View>
       </View>
 
-      <BottomSheetButton
+      <Button
         label={_(msg`Remove subtitle file`)}
         size="tiny"
         shape="round"
@@ -269,7 +268,7 @@ function SubtitleFileRow({
         }
         style={[a.ml_sm]}>
         <ButtonIcon icon={X} />
-      </BottomSheetButton>
+      </Button>
     </View>
   )
 }
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index e697c02d80..14c869df8d 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -7,7 +7,6 @@ import {POST_CTRL_HITSLOP} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
 import {useRequireAuth} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {CloseQuote_Stroke2_Corner1_Rounded as Quote} from '#/components/icons/Quote'
@@ -93,7 +92,7 @@ let RepostButton = ({
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
-              <BottomSheetButton
+              <Button
                 style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
@@ -116,8 +115,8 @@ let RepostButton = ({
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
-              </BottomSheetButton>
-              <BottomSheetButton
+              </Button>
+              <Button
                 disabled={embeddingDisabled}
                 testID="quoteBtn"
                 style={[a.justify_start, a.px_md]}
@@ -153,9 +152,9 @@ let RepostButton = ({
                     ? _(msg`Quote posts disabled`)
                     : _(msg`Quote post`)}
                 </Text>
-              </BottomSheetButton>
+              </Button>
             </View>
-            <BottomSheetButton
+            <Button
               label={_(msg`Cancel quote post`)}
               onAccessibilityEscape={close}
               onPress={close}
@@ -163,7 +162,7 @@ let RepostButton = ({
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>
diff --git a/src/view/screens/Settings/DisableEmail2FADialog.tsx b/src/view/screens/Settings/DisableEmail2FADialog.tsx
index 64a3061b11..bbc6902543 100644
--- a/src/view/screens/Settings/DisableEmail2FADialog.tsx
+++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx
@@ -9,8 +9,7 @@ import {useAgent, useSession} from '#/state/session'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
@@ -109,7 +108,7 @@ export function DisableEmail2FADialog({
 
           {stage === Stages.Email ? (
             <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
-              <BottomSheetButton
+              <Button
                 testID="sendEmailButton"
                 variant="solid"
                 color="primary"
@@ -121,8 +120,8 @@ export function DisableEmail2FADialog({
                   <Trans>Send verification email</Trans>
                 </ButtonText>
                 {isProcessing && <ButtonIcon icon={Loader} />}
-              </BottomSheetButton>
-              <BottomSheetButton
+              </Button>
+              <Button
                 testID="haveCodeButton"
                 variant="ghost"
                 color="primary"
@@ -133,7 +132,7 @@ export function DisableEmail2FADialog({
                 <ButtonText>
                   <Trans>I have a code</Trans>
                 </ButtonText>
-              </BottomSheetButton>
+              </Button>
             </View>
           ) : stage === Stages.ConfirmCode ? (
             <View>
@@ -158,7 +157,7 @@ export function DisableEmail2FADialog({
                 </TextField.Root>
               </View>
               <View style={gtMobile && [a.flex_row, a.justify_end]}>
-                <BottomSheetButton
+                <Button
                   testID="resendCodeBtn"
                   variant="ghost"
                   color="primary"
@@ -169,8 +168,8 @@ export function DisableEmail2FADialog({
                   <ButtonText>
                     <Trans>Resend email</Trans>
                   </ButtonText>
-                </BottomSheetButton>
-                <BottomSheetButton
+                </Button>
+                <Button
                   testID="confirmBtn"
                   variant="solid"
                   color="primary"
@@ -182,7 +181,7 @@ export function DisableEmail2FADialog({
                     <Trans>Confirm</Trans>
                   </ButtonText>
                   {isProcessing && <ButtonIcon icon={Loader} />}
-                </BottomSheetButton>
+                </Button>
               </View>
             </View>
           ) : undefined}
diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx
index caddc1c2ad..3d21d7cb5e 100644
--- a/src/view/screens/Settings/ExportCarDialog.tsx
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -8,8 +8,7 @@ import {logger} from '#/logger'
 import {useAgent} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -69,7 +68,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
 
-          <BottomSheetButton
+          <Button
             variant="solid"
             color="primary"
             size="large"
@@ -80,7 +79,7 @@ export function ExportCarDialog({
               <Trans>Download CAR file</Trans>
             </ButtonText>
             {loading && <ButtonIcon icon={Loader} />}
-          </BottomSheetButton>
+          </Button>
 
           <Text
             style={[

From 67e4d775c9408e4fdefb190e0bb0d55584372424 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:13:42 -0700
Subject: [PATCH 14/14] revert all the changes that are not needed'

---
 src/components/BottomSheetButton.tsx          | 12 -----------
 src/components/BottomSheetButton.web.tsx      |  3 ---
 src/components/Dialog/index.web.tsx           |  1 +
 src/components/Link.tsx                       |  5 ++---
 src/components/Prompt.tsx                     | 20 +++++++++----------
 .../ReportDialog/SelectLabelerView.tsx        |  7 +++----
 src/components/ReportDialog/index.tsx         |  3 ++-
 .../moderation/LabelsOnMeDialog.tsx           | 15 +++++++-------
 8 files changed, 24 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/BottomSheetButton.tsx
 delete mode 100644 src/components/BottomSheetButton.web.tsx

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
deleted file mode 100644
index 9eaee55deb..0000000000
--- a/src/components/BottomSheetButton.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-import {Button, ButtonProps} from '#/components/Button'
-import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
-
-export function BottomSheetButton({children, ...rest}: ButtonProps) {
-  return (
-    <Button {...rest} Component={NormalizedRNGHPressable}>
-      {children}
-    </Button>
-  )
-}
diff --git a/src/components/BottomSheetButton.web.tsx b/src/components/BottomSheetButton.web.tsx
deleted file mode 100644
index c3752a03e4..0000000000
--- a/src/components/BottomSheetButton.web.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {Button as BottomSheetButton} from '#/components/Button'
-
-export {BottomSheetButton}
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index f8ecbd5d94..a50e960a8a 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -103,6 +103,7 @@ export function Outer({
   const context = React.useMemo(
     () => ({
       close,
+      insideDialog: true,
     }),
     [close],
   )
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 56d030b5df..5a66767243 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -23,7 +23,6 @@ import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {Button, ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, TextProps} from '#/components/Typography'
@@ -258,7 +257,7 @@ export function BottomSheetLink({
   })
 
   return (
-    <BottomSheetButton
+    <Button
       {...rest}
       style={[a.justify_start, flatten(rest.style)]}
       role="link"
@@ -277,7 +276,7 @@ export function BottomSheetLink({
         },
       })}>
       {children}
-    </BottomSheetButton>
+    </Button>
   )
 }
 
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 7bd284f2ae..3e877a6630 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import {View} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {ButtonColor, ButtonText} from '#/components/Button'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -123,14 +121,14 @@ export function Cancel({
   }, [close])
 
   return (
-    <BottomSheetButton
+    <Button
       variant="solid"
       color="secondary"
       size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
-    </BottomSheetButton>
+    </Button>
   )
 }
 
@@ -147,7 +145,7 @@ export function Action({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onPress: (e: PressableEvent) => void
+  onPress: (e: GestureResponderEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -159,14 +157,14 @@ export function Action({
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(
-    (e: PressableEvent) => {
+    (e: GestureResponderEvent) => {
       close(() => onPress?.(e))
     },
     [close, onPress],
   )
 
   return (
-    <BottomSheetButton
+    <Button
       variant="solid"
       color={color}
       size={gtMobile ? 'small' : 'large'}
@@ -174,7 +172,7 @@ export function Action({
       onPress={handleOnPress}
       testID={testID}>
       <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
-    </BottomSheetButton>
+    </Button>
   )
 }
 
@@ -201,7 +199,7 @@ export function Basic({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onConfirm: (e: PressableEvent) => void
+  onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
   withoutPortal?: boolean
diff --git a/src/components/ReportDialog/SelectLabelerView.tsx b/src/components/ReportDialog/SelectLabelerView.tsx
index e62dc9910b..039bbf123f 100644
--- a/src/components/ReportDialog/SelectLabelerView.tsx
+++ b/src/components/ReportDialog/SelectLabelerView.tsx
@@ -6,8 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
-import {useButtonContext} from '#/components/Button'
+import {Button, useButtonContext} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as LabelingServiceCard from '#/components/LabelingServiceCard'
 import {Text} from '#/components/Typography'
@@ -39,12 +38,12 @@ export function SelectLabelerView({
       <View style={[a.gap_sm]}>
         {props.labelers.map(labeler => {
           return (
-            <BottomSheetButton
+            <Button
               key={labeler.creator.did}
               label={_(msg`Send report to ${labeler.creator.displayName}`)}
               onPress={() => props.onSelectLabeler(labeler.creator.did)}>
               <LabelerButton labeler={labeler} />
-            </BottomSheetButton>
+            </Button>
           )
         })}
       </View>
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index b942659380..b781d9f39e 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import {Pressable, ScrollView, View} from 'react-native'
+import {Pressable, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index 22eb406a00..fc30b004ad 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -13,9 +13,8 @@ import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
-import {ButtonIcon, ButtonText} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -141,7 +140,7 @@ function Label({
         </View>
         {!isSelfLabel && (
           <View>
-            <BottomSheetButton
+            <Button
               variant="solid"
               color="secondary"
               size="small"
@@ -150,7 +149,7 @@ function Label({
               <ButtonText>
                 <Trans>Appeal</Trans>
               </ButtonText>
-            </BottomSheetButton>
+            </Button>
           </View>
         )}
       </View>
@@ -279,7 +278,7 @@ function AppealForm({
             ? [a.flex_row, a.justify_between]
             : [{flexDirection: 'column-reverse'}, a.gap_sm]
         }>
-        <BottomSheetButton
+        <Button
           testID="backBtn"
           variant="solid"
           color="secondary"
@@ -287,8 +286,8 @@ function AppealForm({
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
-        </BottomSheetButton>
-        <BottomSheetButton
+        </Button>
+        <Button
           testID="submitBtn"
           variant="solid"
           color="primary"
@@ -297,7 +296,7 @@ function AppealForm({
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </BottomSheetButton>
+        </Button>
       </View>
     </>
   )