From 5a98ea684d90526e80b8b3ef7554452c4f8db53b Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 1 Oct 2024 15:57:49 -0500
Subject: [PATCH 01/66] Include ghost hook to statically export fonts (#5553)

---
 src/alf/fonts.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts
index ae2aaa97a0..54fe7a34e0 100644
--- a/src/alf/fonts.ts
+++ b/src/alf/fonts.ts
@@ -1,3 +1,5 @@
+import {useFonts} from 'expo-font'
+
 import {isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'
 
@@ -63,3 +65,15 @@ export function applyFonts(
    */
   style.fontVariant = ['no-contextual']
 }
+
+/*
+ * IMPORTANT: This is unused. Expo statically extracts these fonts.
+ *
+ * All used fonts MUST be configured here. Unused fonts can be commented out.
+ */
+export function DO_NOT_USE() {
+  return useFonts({
+    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
+    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
+  })
+}

From 801cb6255b1c61a083d8211a43ec9a701bcc087f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 14:30:45 -0700
Subject: [PATCH 02/66] close all dialogs

---
 src/state/dialogs/index.tsx | 18 +++++++++++++-----
 yarn.lock                   |  5 +++++
 2 files changed, 18 insertions(+), 5 deletions(-)

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/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 a17892d1b9e604b895ef7dd90816e3ba6ad8fc88 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 14:41:30 -0700
Subject: [PATCH 03/66] remove a bunch of to-be-useless stuff

---
 src/components/Dialog/index.tsx | 99 +++++----------------------------
 1 file changed, 13 insertions(+), 86 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 67603ed2d8..8762fcb25d 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'
 
@@ -41,71 +30,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 +57,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 +80,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])
@@ -180,18 +112,13 @@ export function Outer({
             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}>

From 3971254e9f59b199a486f4b9867f78f45f13bee4 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 15:06:42 -0700
Subject: [PATCH 04/66] remove `Dialog.Handle` uses

---
 src/components/Dialog/index.tsx               | 77 +++++++++----------
 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.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/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 +--
 36 files changed, 58 insertions(+), 123 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 8762fcb25d..23fef5794d 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -21,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'
@@ -93,53 +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
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              ref={sheet}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              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>
     )
   )
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.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/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>

From 64f849bac405eac01dce8942155c1207139a48af Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 15:07:03 -0700
Subject: [PATCH 05/66] rm handle component

---
 src/components/Dialog/index.tsx | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 23fef5794d..2a59ac7f67 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -214,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
 }

From 6dec099b58c446511b7130f247a19b2a09469003 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 15:07:42 -0700
Subject: [PATCH 06/66] type

---
 src/components/dialogs/GifSelect.ios.tsx | 2 --
 1 file changed, 2 deletions(-)

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>

From d0149a96bc07f4dfad6e778511f0ace91a27eead Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 15:10:43 -0700
Subject: [PATCH 07/66] get scrollview working

---
 package.json                    |   1 +
 src/components/Dialog/index.tsx | 125 +++++++++++++++-----------------
 yarn.lock                       |   8 +-
 3 files changed, 64 insertions(+), 70 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..1180997352 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,15 +1,14 @@
 import React, {useImperativeHandle} from 'react'
-import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
+import {ScrollView, 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'
@@ -37,7 +36,7 @@ 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()
@@ -61,7 +60,7 @@ export function Outer({
     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.
@@ -70,7 +69,7 @@ export function Outer({
     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 +101,36 @@ 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={insets.top}
+          bottomInset={insets.bottom}
+          onStateChange={e => {
+            if (e.nativeEvent.state === 'closed') {
+              onCloseAnimationComplete()
+            }
+          }}>
+          <View testID={testID} style={[t.atoms.bg]}>
+            {/*<View*/}
+            {/*  style={[*/}
+            {/*    a.absolute,*/}
+            {/*    a.inset_0,*/}
+            {/*    t.atoms.bg,*/}
+            {/*    {*/}
+            {/*      borderTopLeftRadius: 40,*/}
+            {/*      borderTopRightRadius: 40,*/}
+            {/*      height: Dimensions.get('window').height * 2,*/}
+            {/*    },*/}
+            {/*  ]}*/}
+            {/*/>*/}
+            {children}
+          </View>
+        </BlueskyBottomSheetView>
+      </Context.Provider>
+    </Portal>
   )
 }
 
@@ -158,32 +154,29 @@ 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 (
+      <View
+      // style={[
+      //   a.p_xl,
+      //   a.h_full,
+      //   {
+      //     paddingTop: 40,
+      //     borderTopLeftRadius: 40,
+      //     borderTopRightRadius: 40,
+      //   },
+      //   style,
+      // ]}
+      // ref={ref}
+      >
+        {children}
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      </View>
+    )
+  },
+)
 
 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 40030ba0dac9348b6d25c8f4321b498d5a357da4 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 15:57:19 -0700
Subject: [PATCH 08/66] tidy

---
 src/components/Dialog/index.tsx | 39 ++++++---------------------------
 1 file changed, 7 insertions(+), 32 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 1180997352..4cb431462b 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,5 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {ScrollView, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
   BottomSheetFlatList,
@@ -12,6 +12,7 @@ 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 {
@@ -41,7 +42,6 @@ export function Outer({
   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) {
@@ -58,14 +58,12 @@ 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)
     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)
     }
@@ -106,26 +104,15 @@ export function Outer({
         <BlueskyBottomSheetView
           // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!*/
           ref={ref}
-          topInset={insets.top}
+          topInset={30}
           bottomInset={insets.bottom}
           onStateChange={e => {
             if (e.nativeEvent.state === 'closed') {
               onCloseAnimationComplete()
             }
-          }}>
+          }}
+          cornerRadius={20}>
           <View testID={testID} style={[t.atoms.bg]}>
-            {/*<View*/}
-            {/*  style={[*/}
-            {/*    a.absolute,*/}
-            {/*    a.inset_0,*/}
-            {/*    t.atoms.bg,*/}
-            {/*    {*/}
-            {/*      borderTopLeftRadius: 40,*/}
-            {/*      borderTopRightRadius: 40,*/}
-            {/*      height: Dimensions.get('window').height * 2,*/}
-            {/*    },*/}
-            {/*  ]}*/}
-            {/*/>*/}
             {children}
           </View>
         </BlueskyBottomSheetView>
@@ -158,22 +145,10 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style}, ref) {
     const insets = useSafeAreaInsets()
     return (
-      <View
-      // style={[
-      //   a.p_xl,
-      //   a.h_full,
-      //   {
-      //     paddingTop: 40,
-      //     borderTopLeftRadius: 40,
-      //     borderTopRightRadius: 40,
-      //   },
-      //   style,
-      // ]}
-      // ref={ref}
-      >
+      <ScrollView style={[a.px_xl, style]} ref={ref}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      </View>
+      </ScrollView>
     )
   },
 )

From 0b55acdc3872ee1d45aa77d9ffb3b495eb8d81ad Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 16:04:52 -0700
Subject: [PATCH 09/66] bump

---
 package.json                  | 2 +-
 src/components/Menu/index.tsx | 3 ++-
 yarn.lock                     | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 7b972e662f..45be7f2009 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",
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index b80fc918e0..52e2f9c6d4 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 {Pressable} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
diff --git a/yarn.lock b/yarn.lock
index 2512608e7e..2e239bb843 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"

From 368a9df8a21eb479ef365010452f467761c8e7f0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 16:06:39 -0700
Subject: [PATCH 10/66] bump gesture handler

---
 package.json                  | 2 +-
 src/components/Menu/index.tsx | 2 +-
 yarn.lock                     | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 45be7f2009..1709d495e1 100644
--- a/package.json
+++ b/package.json
@@ -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/Menu/index.tsx b/src/components/Menu/index.tsx
index 52e2f9c6d4..052b56af89 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {Pressable} from 'react-native-gesture-handler'
+import {} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
diff --git a/yarn.lock b/yarn.lock
index 2e239bb843..e1594a4cdb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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 a4c7e2f393b54bb67b7824f00af7b6fbb8da835e Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 16:20:42 -0700
Subject: [PATCH 11/66] tweak types

---
 package.json                  |  2 +-
 src/components/Menu/index.tsx | 13 +++++--------
 src/components/Menu/types.ts  |  6 ++++--
 yarn.lock                     |  2 +-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 1709d495e1..e32100ece8 100644
--- a/package.json
+++ b/package.json
@@ -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.20.0",
+    "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/Menu/index.tsx b/src/components/Menu/index.tsx
index 052b56af89..16b1690c88 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
-import {} from 'react-native-gesture-handler'
+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'
@@ -103,7 +103,7 @@ 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} = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -116,14 +116,11 @@ 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}
+      // onFocus={onFocus}
+      // onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
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 e1594a4cdb..d20d4a4cdc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18068,7 +18068,7 @@ react-native-drawer-layout@^4.0.0-alpha.3:
   dependencies:
     use-latest-callback "^0.1.9"
 
-react-native-gesture-handler@^2.20.0:
+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==

From e1ccaccd90be022bdd4b9f9d7e59826b88f54394 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 16:24:55 -0700
Subject: [PATCH 12/66] add props back

---
 src/components/Menu/index.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 16b1690c88..88b4167842 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -103,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} = useInteractionState()
+  const {
+    state: focused,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -119,8 +123,6 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         control?.close()
         onPress(e)
       }}
-      // onFocus={onFocus}
-      // onBlur={onBlur}
       onPressIn={e => {
         onPressIn()
         rest.onPressIn?.(e)
@@ -129,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,

From b900ac6582f5d1cff9b67d46bbd833084ad5a1c2 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 17:02:31 -0700
Subject: [PATCH 13/66] update types

---
 src/components/Dialog/index.tsx               |  5 ++-
 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(+), 82 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 4cb431462b..b22e2903c9 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()
@@ -111,7 +111,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 baf1923ac613d3a39dc7c611e292483fda05283c Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 17:21:29 -0700
Subject: [PATCH 14/66] update other dialog views

---
 src/components/Dialog/index.tsx               | 40 +++++--------------
 .../Wizard/WizardEditListDialog.tsx           | 14 ++-----
 src/components/dialogs/GifSelect.tsx          |  4 +-
 .../dms/dialogs/SearchablePeopleList.tsx      | 17 ++++----
 src/view/com/util/post-ctrls/RepostButton.tsx |  4 +-
 5 files changed, 25 insertions(+), 54 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index b22e2903c9..40bd8f5cf0 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,17 +1,11 @@
 import React, {useImperativeHandle} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {
-  BottomSheetFlatList,
-  BottomSheetFlatListMethods,
-  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 {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context} from '#/components/Dialog/context'
@@ -27,7 +21,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(BottomSheetTextInput)
+export const Input = createInput(TextInput)
 
 export function Outer({
   children,
@@ -125,20 +119,16 @@ export function Outer({
 export function Inner({children, style}: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
-    <BottomSheetView
+    <View
       style={[
-        a.py_xl,
         a.px_xl,
         {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
           paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
         },
-        flatten(style),
+        style,
       ]}>
       {children}
-    </BottomSheetView>
+    </View>
   )
 }
 
@@ -155,13 +145,12 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
 )
 
 export const InnerFlatList = React.forwardRef<
-  BottomSheetFlatListMethods,
-  BottomSheetFlatListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
+  ListMethods,
+  ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
   const insets = useSafeAreaInsets()
-
   return (
-    <BottomSheetFlatList
+    <List
       keyboardShouldPersistTaps="handled"
       contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
       ListFooterComponent={
@@ -169,16 +158,7 @@ export const InnerFlatList = React.forwardRef<
       }
       ref={ref}
       {...props}
-      style={[
-        a.flex_1,
-        a.p_xl,
-        a.pt_0,
-        a.h_full,
-        {
-          marginTop: 40,
-        },
-        flatten(style),
-      ]}
+      style={style}
     />
   )
 })
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index fab60fc6aa..d1ecdc8821 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -3,13 +3,13 @@ import type {ListRenderItemInfo} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-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 {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -45,7 +45,7 @@ export function WizardEditListDialog({
   const {currentAccount} = useSession()
   const initialNumToRender = useInitialNumToRender()
 
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
 
   const getData = () => {
     if (state.currentStep === 'Feeds') return state.feeds
@@ -99,13 +99,7 @@ export function WizardEditListDialog({
                       height: 48,
                     },
                   ]
-                : [
-                    a.pb_sm,
-                    a.align_end,
-                    {
-                      height: 68,
-                    },
-                  ],
+                : [a.pb_sm, a.align_end],
             ]}>
             <View style={{width: 60}} />
             <Text style={[a.font_bold, a.text_xl]}>
@@ -139,8 +133,6 @@ export function WizardEditListDialog({
             paddingHorizontal: 0,
             marginTop: 0,
             paddingTop: 0,
-            borderTopLeftRadius: 40,
-            borderTopRightRadius: 40,
           }),
         ]}
         webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 903722562c..887cc30378 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -6,7 +6,6 @@ import React, {
   useState,
 } from 'react'
 import {TextInput, View} from 'react-native'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -19,6 +18,7 @@ import {
 } from '#/state/queries/tenor'
 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 * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -76,7 +76,7 @@ function GifList({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const textInputRef = useRef<TextInput>(null)
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
   const [undeferredSearch, setSearch] = useState('')
   const search = useThrottledValue(undeferredSearch, 500)
 
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index a13dfe509f..17a7f43e57 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -5,10 +5,8 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import type {TextInput as TextInputType} from 'react-native'
-import {View} from 'react-native'
+import {TextInput, View} from 'react-native'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -16,15 +14,15 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {useListConvosQuery} from '#/state/queries/messages/list-converations'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
-import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
+import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {TextInput} from '#/components/dms/dialogs/TextInput'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
@@ -66,9 +64,9 @@ export function SearchablePeopleList({
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
   const control = Dialog.useDialogContext()
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
   const {currentAccount} = useSession()
-  const inputRef = useRef<TextInputType>(null)
+  const inputRef = useRef<TextInput>(null)
 
   const [searchText, setSearchText] = useState('')
 
@@ -242,13 +240,12 @@ export function SearchablePeopleList({
       <View
         style={[
           a.relative,
-          a.pt_md,
+          web(a.pt_md),
           a.pb_xs,
           a.px_lg,
           a.border_b,
           t.atoms.border_contrast_low,
           t.atoms.bg,
-          native([a.pt_lg]),
         ]}>
         <View
           style={[
@@ -474,7 +471,7 @@ function SearchInput({
   value: string
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInputType>
+  inputRef: React.RefObject<TextInput>
 }) {
   const t = useTheme()
   const {_} = useLingui()
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 8a41ec88ac..14c869df8d 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -86,7 +86,9 @@ let RepostButton = ({
           </Text>
         ) : undefined}
       </Button>
-      <Dialog.Outer control={dialogControl}>
+      <Dialog.Outer
+        control={dialogControl}
+        nativeOptions={{preventExpansion: true}}>
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>

From a3737f00156e8032cc18e0761599afb04cc6ef55 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:14:12 -0700
Subject: [PATCH 15/66] replace all buttons with `BottomSheetButton`

---
 src/components/BottomSheetButton.tsx          | 110 +++++
 src/components/BottomSheetButton.web.tsx      |   3 +
 src/components/Button.tsx                     | 465 +++++++++---------
 src/components/NewskieDialog.tsx              |   5 +-
 src/components/Prompt.tsx                     |  20 +-
 .../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 +-
 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       |  15 +-
 src/components/dialogs/GifSelect.tsx          |  11 +-
 src/components/dialogs/MutedWords.tsx         |  11 +-
 .../dialogs/PostInteractionSettingsDialog.tsx |  16 +-
 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 +-
 .../moderation/LabelsOnMeDialog.tsx           |  15 +-
 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 +-
 33 files changed, 533 insertions(+), 373 deletions(-)
 create mode 100644 src/components/BottomSheetButton.tsx
 create mode 100644 src/components/BottomSheetButton.web.tsx

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
new file mode 100644
index 0000000000..50577a8c48
--- /dev/null
+++ b/src/components/BottomSheetButton.tsx
@@ -0,0 +1,110 @@
+import React from 'react'
+import {AccessibilityProps, ViewStyle} from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {
+  BlueskyBottomSheetPressable,
+  BueskyBottomSheetPressableProps,
+} from '@haileyok/bluesky-bottom-sheet'
+
+import {atoms as a} from '#/alf'
+import {
+  ButtonContext,
+  useSharedButtonStyles,
+  VariantProps,
+} from '#/components/Button'
+
+export function BottomSheetButton({
+  children,
+  label,
+  color,
+  variant,
+  shape = 'default',
+  size,
+  disabled,
+  style,
+  ...rest
+}: BueskyBottomSheetPressableProps &
+  AccessibilityProps &
+  VariantProps & {
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
+    label: string
+  }) {
+  const [state, setState] = React.useState({
+    pressed: false,
+    hovered: false,
+    focused: false,
+  })
+
+  const onPressInOuter = rest.onPressIn
+  const onPressIn = React.useCallback(
+    (e: PressableEvent) => {
+      setState(s => ({
+        ...s,
+        pressed: true,
+      }))
+      onPressInOuter?.(e)
+    },
+    [setState, onPressInOuter],
+  )
+  const onPressOutOuter = rest.onPressOut
+  const onPressOut = React.useCallback(
+    (e: PressableEvent) => {
+      setState(s => ({
+        ...s,
+        pressed: false,
+      }))
+      onPressOutOuter?.(e)
+    },
+    [setState, onPressOutOuter],
+  )
+
+  const {baseStyles, hoverStyles} = useSharedButtonStyles({
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
+    color,
+    variant,
+    shape,
+    size,
+    disabled,
+  })
+
+  const context = React.useMemo<ButtonContext>(
+    () => ({
+      ...state,
+      variant,
+      color,
+      size,
+      disabled: disabled || false,
+    }),
+    [state, variant, color, size, disabled],
+  )
+
+  return (
+    <BlueskyBottomSheetPressable
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.justify_center,
+        baseStyles,
+        style as ViewStyle,
+        ...(state.hovered || state.pressed ? [hoverStyles] : []),
+      ]}
+      aria-label={label}
+      aria-pressed={state.pressed}
+      accessibilityLabel={label}
+      accessibilityHint={undefined}
+      accessibilityState={{
+        disabled: disabled || false,
+      }}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      {...rest}>
+      <ButtonContext.Provider value={context}>
+        {typeof children === 'function' ? children(context) : children}
+      </ButtonContext.Provider>
+    </BlueskyBottomSheetPressable>
+  )
+}
diff --git a/src/components/BottomSheetButton.web.tsx b/src/components/BottomSheetButton.web.tsx
new file mode 100644
index 0000000000..c3752a03e4
--- /dev/null
+++ b/src/components/BottomSheetButton.web.tsx
@@ -0,0 +1,3 @@
+import {Button as BottomSheetButton} from '#/components/Button'
+
+export {BottomSheetButton}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 17179994a9..17db0332e0 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -89,7 +89,8 @@ export type ButtonProps = Pick<
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
 
-export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
+export type ButtonTextProps = TextProps &
+  VariantProps & {disabled?: boolean | null}
 
 const Context = React.createContext<VariantProps & ButtonState>({
   hovered: false,
@@ -97,6 +98,7 @@ const Context = React.createContext<VariantProps & ButtonState>({
   pressed: false,
   disabled: false,
 })
+export const ButtonContext = Context
 
 export function useButtonContext() {
   return React.useContext(Context)
@@ -118,7 +120,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
     },
     ref,
   ) => {
-    const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
       hovered: false,
@@ -182,226 +183,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
       }))
     }, [setState])
 
-    const {baseStyles, hoverStyles} = React.useMemo(() => {
-      const baseStyles: ViewStyle[] = []
-      const hoverStyles: ViewStyle[] = []
-
-      if (color === 'primary') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.primary_500,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.primary_600,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.primary_700,
-                dim: t.palette.primary_300,
-                dark: t.palette.primary_300,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.primary_500,
-            })
-            hoverStyles.push(a.border, {
-              backgroundColor: t.palette.primary_50,
-            })
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.primary_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.primary_100,
-            })
-          }
-        }
-      } else if (color === 'secondary') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg_contrast_25)
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(t.atoms.bg_contrast_100)
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_300,
-            })
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_25,
-            })
-          }
-        }
-      } else if (color === 'secondary_inverted') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_900,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_950,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: t.palette.contrast_600,
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_300,
-            })
-            hoverStyles.push(t.atoms.bg_contrast_50)
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.contrast_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.contrast_25,
-            })
-          }
-        }
-      } else if (color === 'negative') {
-        if (variant === 'solid') {
-          if (!disabled) {
-            baseStyles.push({
-              backgroundColor: t.palette.negative_500,
-            })
-            hoverStyles.push({
-              backgroundColor: t.palette.negative_600,
-            })
-          } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.negative_700,
-                dim: t.palette.negative_300,
-                dark: t.palette.negative_300,
-              }),
-            })
-          }
-        } else if (variant === 'outline') {
-          baseStyles.push(a.border, t.atoms.bg, {
-            borderWidth: 1,
-          })
-
-          if (!disabled) {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.negative_500,
-            })
-            hoverStyles.push(a.border, {
-              backgroundColor: t.palette.negative_50,
-            })
-          } else {
-            baseStyles.push(a.border, {
-              borderColor: t.palette.negative_200,
-            })
-          }
-        } else if (variant === 'ghost') {
-          if (!disabled) {
-            baseStyles.push(t.atoms.bg)
-            hoverStyles.push({
-              backgroundColor: t.palette.negative_100,
-            })
-          }
-        }
-      }
-
-      if (shape === 'default') {
-        if (size === 'large') {
-          baseStyles.push({
-            paddingVertical: 13,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-            gap: 8,
-          })
-        } else if (size === 'small') {
-          baseStyles.push({
-            paddingVertical: 8,
-            paddingHorizontal: 12,
-            borderRadius: 6,
-            gap: 6,
-          })
-        } else if (size === 'tiny') {
-          baseStyles.push({
-            paddingVertical: 4,
-            paddingHorizontal: 8,
-            borderRadius: 4,
-            gap: 4,
-          })
-        }
-      } else if (shape === 'round' || shape === 'square') {
-        if (size === 'large') {
-          if (shape === 'round') {
-            baseStyles.push({height: 46, width: 46})
-          } else {
-            baseStyles.push({height: 44, width: 44})
-          }
-        } else if (size === 'small') {
-          if (shape === 'round') {
-            baseStyles.push({height: 36, width: 36})
-          } else {
-            baseStyles.push({height: 34, width: 34})
-          }
-        } else if (size === 'tiny') {
-          if (shape === 'round') {
-            baseStyles.push({height: 22, width: 22})
-          } else {
-            baseStyles.push({height: 21, width: 21})
-          }
-        }
-
-        if (shape === 'round') {
-          baseStyles.push(a.rounded_full)
-        } else if (shape === 'square') {
-          if (size === 'tiny') {
-            baseStyles.push(a.rounded_xs)
-          } else {
-            baseStyles.push(a.rounded_sm)
-          }
-        }
-      }
-
-      return {
-        baseStyles,
-        hoverStyles,
-      }
-    }, [t, variant, color, size, shape, disabled])
+    const {baseStyles, hoverStyles} = useSharedButtonStyles({
+      color,
+      variant,
+      disabled,
+      shape,
+      size,
+    })
 
     const {gradientColors, gradientHoverColors, gradientLocations} =
       React.useMemo(() => {
@@ -506,6 +294,239 @@ export const Button = React.forwardRef<View, ButtonProps>(
 )
 Button.displayName = 'Button'
 
+export function useSharedButtonStyles({
+  color,
+  variant,
+  disabled,
+  shape,
+  size,
+}: VariantProps & {disabled?: boolean | null}) {
+  const t = useTheme()
+
+  const {baseStyles, hoverStyles} = React.useMemo(() => {
+    const baseStyles: ViewStyle[] = []
+    const hoverStyles: ViewStyle[] = []
+
+    if (color === 'primary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.primary_500,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.primary_600,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: select(t.name, {
+              light: t.palette.primary_700,
+              dim: t.palette.primary_300,
+              dark: t.palette.primary_300,
+            }),
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.primary_500,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: t.palette.primary_50,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.primary_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.primary_100,
+          })
+        }
+      }
+    } else if (color === 'secondary') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg_contrast_25)
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(t.atoms.bg_contrast_100)
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_300,
+          })
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_25,
+          })
+        }
+      }
+    } else if (color === 'secondary_inverted') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_900,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_950,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: t.palette.contrast_600,
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_300,
+          })
+          hoverStyles.push(t.atoms.bg_contrast_50)
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.contrast_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.contrast_25,
+          })
+        }
+      }
+    } else if (color === 'negative') {
+      if (variant === 'solid') {
+        if (!disabled) {
+          baseStyles.push({
+            backgroundColor: t.palette.negative_500,
+          })
+          hoverStyles.push({
+            backgroundColor: t.palette.negative_600,
+          })
+        } else {
+          baseStyles.push({
+            backgroundColor: select(t.name, {
+              light: t.palette.negative_700,
+              dim: t.palette.negative_300,
+              dark: t.palette.negative_300,
+            }),
+          })
+        }
+      } else if (variant === 'outline') {
+        baseStyles.push(a.border, t.atoms.bg, {
+          borderWidth: 1,
+        })
+
+        if (!disabled) {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.negative_500,
+          })
+          hoverStyles.push(a.border, {
+            backgroundColor: t.palette.negative_50,
+          })
+        } else {
+          baseStyles.push(a.border, {
+            borderColor: t.palette.negative_200,
+          })
+        }
+      } else if (variant === 'ghost') {
+        if (!disabled) {
+          baseStyles.push(t.atoms.bg)
+          hoverStyles.push({
+            backgroundColor: t.palette.negative_100,
+          })
+        }
+      }
+    }
+
+    if (shape === 'default') {
+      if (size === 'large') {
+        baseStyles.push({
+          paddingVertical: 13,
+          paddingHorizontal: 20,
+          borderRadius: 8,
+          gap: 8,
+        })
+      } else if (size === 'small') {
+        baseStyles.push({
+          paddingVertical: 8,
+          paddingHorizontal: 12,
+          borderRadius: 6,
+          gap: 6,
+        })
+      } else if (size === 'tiny') {
+        baseStyles.push({
+          paddingVertical: 4,
+          paddingHorizontal: 8,
+          borderRadius: 4,
+          gap: 4,
+        })
+      }
+    } else if (shape === 'round' || shape === 'square') {
+      if (size === 'large') {
+        if (shape === 'round') {
+          baseStyles.push({height: 46, width: 46})
+        } else {
+          baseStyles.push({height: 44, width: 44})
+        }
+      } else if (size === 'small') {
+        if (shape === 'round') {
+          baseStyles.push({height: 36, width: 36})
+        } else {
+          baseStyles.push({height: 34, width: 34})
+        }
+      } else if (size === 'tiny') {
+        if (shape === 'round') {
+          baseStyles.push({height: 22, width: 22})
+        } else {
+          baseStyles.push({height: 21, width: 21})
+        }
+      }
+
+      if (shape === 'round') {
+        baseStyles.push(a.rounded_full)
+      } else if (shape === 'square') {
+        if (size === 'tiny') {
+          baseStyles.push(a.rounded_xs)
+        } else {
+          baseStyles.push(a.rounded_sm)
+        }
+      }
+    }
+
+    return {
+      baseStyles,
+      hoverStyles,
+    }
+  }, [t, variant, color, size, shape, disabled])
+
+  return {baseStyles, hoverStyles}
+}
+
 export function useSharedButtonTextStyles() {
   const t = useTheme()
   const {color, variant, disabled, size} = useButtonContext()
diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index e25f48edf5..0ed29babb1 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -12,6 +12,7 @@ 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'
@@ -141,7 +142,7 @@ export function NewskieDialog({
             ) : null}
 
             {isNative && (
-              <Button
+              <BottomSheetButton
                 label={_(msg`Close`)}
                 variant="solid"
                 color="secondary"
@@ -151,7 +152,7 @@ export function NewskieDialog({
                 <ButtonText>
                   <Trans>Close</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             )}
           </View>
 
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 8aa111bf3d..0e1442d7c8 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -1,10 +1,12 @@
 import React from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {View} from 'react-native'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -115,14 +117,14 @@ export function Cancel({
   }, [close])
 
   return (
-    <Button
+    <BottomSheetButton
       variant="solid"
       color="secondary"
       size={gtMobile ? 'small' : 'large'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
       <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
-    </Button>
+    </BottomSheetButton>
   )
 }
 
@@ -139,7 +141,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: ButtonProps['onPress']
+  onPress: (e: PressableEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -151,14 +153,14 @@ export function Action({
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(
-    (e: GestureResponderEvent) => {
+    (e: PressableEvent) => {
       close(() => onPress?.(e))
     },
     [close, onPress],
   )
 
   return (
-    <Button
+    <BottomSheetButton
       variant="solid"
       color={color}
       size={gtMobile ? 'small' : 'large'}
@@ -166,7 +168,7 @@ export function Action({
       onPress={handleOnPress}
       testID={testID}>
       <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
-    </Button>
+    </BottomSheetButton>
   )
 }
 
@@ -192,7 +194,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: ButtonProps['onPress']
+  onConfirm: (e: PressableEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
 }>) {
diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx
index 169c07d732..82ada250a6 100644
--- a/src/components/ReportDialog/SelectReportOptionView.tsx
+++ b/src/components/ReportDialog/SelectReportOptionView.tsx
@@ -10,12 +10,8 @@ import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {
-  Button,
-  ButtonIcon,
-  ButtonText,
-  useButtonContext,
-} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText, useButtonContext} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
   ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
@@ -72,7 +68,7 @@ export function SelectReportOptionView({
   return (
     <View style={[a.gap_lg]}>
       {props.labelers?.length > 1 ? (
-        <Button
+        <BottomSheetButton
           size="small"
           variant="solid"
           color="secondary"
@@ -80,7 +76,7 @@ export function SelectReportOptionView({
           label={_(msg`Go back to previous step`)}
           onPress={props.goBack}>
           <ButtonIcon icon={ChevronLeft} />
-        </Button>
+        </BottomSheetButton>
       ) : null}
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
@@ -95,7 +91,7 @@ export function SelectReportOptionView({
       <View style={[a.gap_sm]}>
         {reportOptions.map(reportOption => {
           return (
-            <Button
+            <BottomSheetButton
               key={reportOption.reason}
               testID={reportOption.reason}
               label={_(msg`Create report for ${reportOption.title}`)}
@@ -104,7 +100,7 @@ export function SelectReportOptionView({
                 title={reportOption.title}
                 description={reportOption.description}
               />
-            </Button>
+            </BottomSheetButton>
           )
         })}
 
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index e323d15042..590945c267 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -10,7 +10,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {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'
@@ -100,7 +101,7 @@ export function SubmitView({
 
   return (
     <View style={[a.gap_2xl]}>
-      <Button
+      <BottomSheetButton
         size="small"
         variant="solid"
         color="secondary"
@@ -108,7 +109,7 @@ export function SubmitView({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={ChevronLeft} />
-      </Button>
+      </BottomSheetButton>
 
       <View
         style={[
@@ -211,7 +212,7 @@ export function SubmitView({
             </Text>
           ))}
 
-        <Button
+        <BottomSheetButton
           testID="sendReportBtn"
           size="large"
           variant="solid"
@@ -223,7 +224,7 @@ export function SubmitView({
             <Trans>Send report</Trans>
           </ButtonText>
           {submitting && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </View>
   )
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index 2feea0973a..b7dbd66cd0 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -13,7 +13,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -165,7 +166,7 @@ export function QrCodeDialog({
                 ) : (
                   <View
                     style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <Button
+                    <BottomSheetButton
                       label={_(msg`Copy QR code`)}
                       variant="solid"
                       color="secondary"
@@ -174,8 +175,8 @@ export function QrCodeDialog({
                       <ButtonText>
                         {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
                       </ButtonText>
-                    </Button>
-                    <Button
+                    </BottomSheetButton>
+                    <BottomSheetButton
                       label={_(msg`Save QR code`)}
                       variant="solid"
                       color="secondary"
@@ -184,7 +185,7 @@ export function QrCodeDialog({
                       <ButtonText>
                         <Trans>Save</Trans>
                       </ButtonText>
-                    </Button>
+                    </BottomSheetButton>
                   </View>
                 )}
               </>
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 494aceae1f..ec12907cb0 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -15,7 +15,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
@@ -119,7 +120,7 @@ function ShareDialogInner({
                 a.gap_md,
                 isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
               ]}>
-              <Button
+              <BottomSheetButton
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
                 variant="solid"
                 color="secondary"
@@ -129,8 +130,8 @@ function ShareDialogInner({
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
-              </Button>
-              <Button
+              </BottomSheetButton>
+              <BottomSheetButton
                 label={_(msg`Share QR code`)}
                 variant="solid"
                 color="secondary"
@@ -144,9 +145,9 @@ function ShareDialogInner({
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
               {isNative && (
-                <Button
+                <BottomSheetButton
                   label={_(msg`Save image`)}
                   variant="ghost"
                   color="secondary"
@@ -156,7 +157,7 @@ function ShareDialogInner({
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>
-                </Button>
+                </BottomSheetButton>
               )}
             </View>
           </View>
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index d1ecdc8821..3400bed4b6 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -12,7 +12,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {
   WizardFeedCard,
@@ -111,7 +112,7 @@ export function WizardEditListDialog({
             </Text>
             <View style={{width: 60}}>
               {isWeb && (
-                <Button
+                <BottomSheetButton
                   label={_(msg`Close`)}
                   variant="ghost"
                   color="primary"
@@ -120,7 +121,7 @@ export function WizardEditListDialog({
                   <ButtonText>
                     <Trans>Close</Trans>
                   </ButtonText>
-                </Button>
+                </BottomSheetButton>
               )}
             </View>
           </View>
diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx
index 2e4249609a..8b6a62e440 100644
--- a/src/components/TagMenu/index.tsx
+++ b/src/components/TagMenu/index.tsx
@@ -13,7 +13,8 @@ import {
   useUpsertMutedWordsMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, native, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {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'
@@ -211,7 +212,7 @@ export function TagMenu({
                   <>
                     <Divider />
 
-                    <Button
+                    <BottomSheetButton
                       label={
                         isMuted
                           ? _(msg`Unmute all ${displayTag} posts`)
@@ -265,12 +266,12 @@ export function TagMenu({
                           <Trans>posts</Trans>
                         </Text>
                       </View>
-                    </Button>
+                    </BottomSheetButton>
                   </>
                 ) : null}
               </View>
 
-              <Button
+              <BottomSheetButton
                 label={_(msg`Close this dialog`)}
                 size="small"
                 variant="ghost"
@@ -279,7 +280,7 @@ export function TagMenu({
                 <ButtonText>
                   <Trans>Cancel</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             </>
           )}
         </Dialog.Inner>
diff --git a/src/components/WhoCanReply.tsx b/src/components/WhoCanReply.tsx
index 2839943c97..ba9970af42 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 {Button} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
@@ -82,7 +82,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
 
   return (
     <>
-      <Button
+      <BottomSheetButton
         label={
           isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
         }
@@ -98,7 +98,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {({hovered}) => (
+        {/* @TODO DIALOG REFACTOR hovered */}
+        {({pressed}) => (
           <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
             <Icon
               color={t.palette.contrast_400}
@@ -110,7 +111,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
                 a.text_sm,
                 a.leading_tight,
                 t.atoms.text_contrast_medium,
-                hovered && a.underline,
+                pressed && a.underline,
               ]}>
               {description}
             </Text>
@@ -120,7 +121,7 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
             )}
           </View>
         )}
-      </Button>
+      </BottomSheetButton>
 
       {isThreadAuthor ? (
         <PostInteractionSettingsDialog
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index 72ce9690e9..6dceebdb44 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -14,9 +14,10 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
@@ -113,7 +114,7 @@ function BirthdayInner({
       ) : undefined}
 
       <View style={isWeb && [a.flex_row, a.justify_end]}>
-        <Button
+        <BottomSheetButton
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
           size="large"
           onPress={onSave}
@@ -123,7 +124,7 @@ function BirthdayInner({
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </View>
   )
diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index 7aa2a4fc1e..525010230e 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -8,12 +8,13 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 
 type EmbedDialogProps = {
   control: Dialog.DialogControlProps
@@ -117,7 +118,7 @@ function EmbedDialogInner({
             />
           </TextField.Root>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Copy code`)}
           color="primary"
           variant="solid"
@@ -140,7 +141,7 @@ function EmbedDialogInner({
               <Trans>Copy code</Trans>
             </ButtonText>
           )}
-        </Button>
+        </BottomSheetButton>
       </View>
       <Dialog.Close />
     </Dialog.Inner>
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index 3aa0f0b404..aee98e6b7c 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -10,8 +10,9 @@ 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 {Button, ButtonText} from '../Button'
+import {ButtonText} from '../Button'
 import {Text} from '../Typography'
 
 export function EmbedConsentDialog({
@@ -75,7 +76,7 @@ export function EmbedConsentDialog({
           </View>
         </View>
         <View style={a.gap_md}>
-          <Button
+          <BottomSheetButton
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
@@ -86,8 +87,8 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>Enable external media</Trans>
             </ButtonText>
-          </Button>
-          <Button
+          </BottomSheetButton>
+          <BottomSheetButton
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
@@ -98,8 +99,8 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>Enable {externalEmbedLabels[source]} only</Trans>
             </ButtonText>
-          </Button>
-          <Button
+          </BottomSheetButton>
+          <BottomSheetButton
             label={_(msg`No thanks`)}
             onAccessibilityEscape={control.close}
             onPress={onHidePress}
@@ -109,7 +110,7 @@ export function EmbedConsentDialog({
             <ButtonText>
               <Trans>No thanks</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 887cc30378..e270b2e1d6 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -20,12 +20,13 @@ 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 {Button, ButtonIcon, ButtonText} from '../Button'
+import {ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
 
@@ -148,7 +149,7 @@ function GifList({
         />
 
         {!gtMobile && isWeb && (
-          <Button
+          <BottomSheetButton
             size="small"
             variant="ghost"
             color="secondary"
@@ -156,7 +157,7 @@ function GifList({
             onPress={() => control.close()}
             label={_(msg`Close GIF dialog`)}>
             <ButtonIcon icon={Arrow} size="md" />
-          </Button>
+          </BottomSheetButton>
         )}
 
         <TextField.Root>
@@ -256,7 +257,7 @@ function DialogError({details}: {details?: string}) {
         )}
         details={details}
       />
-      <Button
+      <BottomSheetButton
         label={_(msg`Close dialog`)}
         onPress={() => control.close()}
         color="primary"
@@ -265,7 +266,7 @@ function DialogError({details}: {details?: string}) {
         <ButtonText>
           <Trans>Close</Trans>
         </ButtonText>
-      </Button>
+      </BottomSheetButton>
     </Dialog.ScrollableInner>
   )
 }
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index daa18f94e7..bd9edab3d4 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -19,7 +19,8 @@ import {
   ViewStyleProp,
   web,
 } from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Divider} from '#/components/Divider'
@@ -315,7 +316,7 @@ function MutedWordsInner() {
           </View>
 
           <View style={[a.pt_xs]}>
-            <Button
+            <BottomSheetButton
               disabled={isPending || !field}
               label={_(msg`Add mute word for configured settings`)}
               size="large"
@@ -327,7 +328,7 @@ function MutedWordsInner() {
                 <Trans>Add</Trans>
               </ButtonText>
               <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </Button>
+            </BottomSheetButton>
           </View>
 
           {error && (
@@ -518,7 +519,7 @@ function MutedWordRow({
           )}
         </View>
 
-        <Button
+        <BottomSheetButton
           label={_(msg`Remove mute word from your list`)}
           size="tiny"
           shape="round"
@@ -527,7 +528,7 @@ function MutedWordRow({
           onPress={() => control.open()}
           style={[a.ml_sm]}>
           <ButtonIcon icon={isPending ? Loader : X} />
-        </Button>
+        </BottomSheetButton>
       </View>
     </>
   )
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 93be838542..6d7cbf32f8 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -30,7 +30,8 @@ import {
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import * as Toggle from '#/components/forms/Toggle'
@@ -432,7 +433,7 @@ export function PostInteractionSettingsForm({
         </View>
       </View>
 
-      <Button
+      <BottomSheetButton
         label={_(msg`Save`)}
         onPress={onSave}
         onAccessibilityEscape={control.close}
@@ -442,7 +443,7 @@ export function PostInteractionSettingsForm({
         style={a.mt_xl}>
         <ButtonText>{_(msg`Save`)}</ButtonText>
         {isSaving && <ButtonIcon icon={Loader} position="right" />}
-      </Button>
+      </BottomSheetButton>
     </View>
   )
 }
@@ -462,7 +463,7 @@ function Selectable({
 }) {
   const t = useTheme()
   return (
-    <Button
+    <BottomSheetButton
       disabled={disabled}
       onPress={onPress}
       label={label}
@@ -472,7 +473,8 @@ function Selectable({
         checked: isSelected,
       }}
       style={a.flex_1}>
-      {({hovered, focused}) => (
+      {/* @TODO DIALOG REFACTOR hovered focused */}
+      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -483,7 +485,7 @@ function Selectable({
             a.p_md,
             {height: 40}, // for consistency with checkmark icon visible or not
             t.atoms.bg_contrast_50,
-            (hovered || focused) && t.atoms.bg_contrast_100,
+            pressed && t.atoms.bg_contrast_100,
             isSelected && {
               backgroundColor: t.palette.primary_100,
             },
@@ -497,7 +499,7 @@ function Selectable({
           )}
         </View>
       )}
-    </Button>
+    </BottomSheetButton>
   )
 }
 
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
index d24f6af644..f348f08621 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -9,7 +9,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {Text} from '#/components/Typography'
@@ -77,7 +78,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
         </Text>
 
         <View style={[a.flex_col, a.gap_md]}>
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="primary"
             size="large"
@@ -86,9 +87,9 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Create an account</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
 
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="secondary"
             size="large"
@@ -97,7 +98,7 @@ function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
             <ButtonText>
               <Trans>Sign in</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
 
         {isNative && <View style={{height: 10}} />}
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
index 723696a04d..8ebd244e40 100644
--- a/src/components/dms/MessagesNUX.tsx
+++ b/src/components/dms/MessagesNUX.tsx
@@ -9,7 +9,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {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'
@@ -156,7 +157,7 @@ function DialogInner({
             </Toggle.Group>
           </View>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Start chatting`)}
           accessibilityHint={_(msg`Close modal`)}
           size="large"
@@ -166,7 +167,7 @@ function DialogInner({
           <ButtonText>
             <Trans>Get started</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
       <Dialog.Close />
     </Dialog.ScrollableInner>
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index 17a7f43e57..5a4f64f88f 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 {Button} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 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},
           ]}>
-          <Button
+          <BottomSheetButton
             label={_(msg`Close`)}
             size="small"
             shape="round"
@@ -264,6 +264,7 @@ export function SearchablePeopleList({
               a.absolute,
               a.z_20,
               native({
+                top: 2,
                 left: -7,
               }),
               web({
@@ -276,7 +277,7 @@ export function SearchablePeopleList({
             ) : (
               <ChevronLeft size="md" fill={t.palette.contrast_500} />
             )}
-          </Button>
+          </BottomSheetButton>
           <Text
             style={[
               a.z_10,
@@ -363,11 +364,11 @@ function ProfileCard({
   }, [onPress, profile.did])
 
   return (
-    <Button
+    <BottomSheetButton
       disabled={!enabled}
       label={_(msg`Start chat with ${displayName}`)}
       onPress={handleOnPress}>
-      {({hovered, pressed, focused}) => (
+      {({pressed}) => (
         <View
           style={[
             a.flex_1,
@@ -376,12 +377,11 @@ function ProfileCard({
             a.gap_md,
             a.align_center,
             a.flex_row,
+            // @TODO DIALOG REFACTOR focused hovered
             !enabled
               ? {opacity: 0.5}
-              : pressed || focused
+              : pressed
               ? t.atoms.bg_contrast_25
-              : hovered
-              ? t.atoms.bg_contrast_50
               : t.atoms.bg,
           ]}>
           <UserAvatar
@@ -404,7 +404,7 @@ function ProfileCard({
           </View>
         </View>
       )}
-    </Button>
+    </BottomSheetButton>
   )
 }
 
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 7546aec484..7e3d2a18f2 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -5,7 +5,8 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
@@ -72,7 +73,7 @@ export function DateField({
                 accessibilityHint={accessibilityHint}
               />
             </View>
-            <Button
+            <BottomSheetButton
               label={_(msg`Done`)}
               onPress={() => control.close()}
               size="large"
@@ -81,7 +82,7 @@ export function DateField({
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 9f3808020a..6576a5ecb8 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -5,7 +5,8 @@ import {useLingui} from '@lingui/react'
 
 import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
@@ -106,7 +107,7 @@ function Inner({control}: {control: DialogControlProps}) {
         )}
         {status !== 'loading' ? (
           <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
-            <Button
+            <BottomSheetButton
               label={_(msg`Close`)}
               onPress={() => control.close()}
               variant="solid"
@@ -116,9 +117,9 @@ function Inner({control}: {control: DialogControlProps}) {
               <ButtonText>
                 <Trans>Close</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
             {status === 'failure' ? (
-              <Button
+              <BottomSheetButton
                 label={_(msg`Resend Verification Email`)}
                 onPress={onPressResendEmail}
                 variant="solid"
@@ -129,7 +130,7 @@ function Inner({control}: {control: DialogControlProps}) {
                   <Trans>Resend Email</Trans>
                 </ButtonText>
                 {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </Button>
+              </BottomSheetButton>
             ) : null}
           </View>
         ) : null}
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index 389c722c87..33c0e63352 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -13,7 +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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
@@ -139,7 +140,7 @@ function Label({
         </View>
         {!isSelfLabel && (
           <View>
-            <Button
+            <BottomSheetButton
               variant="solid"
               color="secondary"
               size="small"
@@ -148,7 +149,7 @@ function Label({
               <ButtonText>
                 <Trans>Appeal</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         )}
       </View>
@@ -275,7 +276,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 +284,8 @@ function AppealForm({
           onPress={onPressBack}
           label={_(msg`Back`)}>
           <ButtonText>{_(msg`Back`)}</ButtonText>
-        </Button>
-        <Button
+        </BottomSheetButton>
+        <BottomSheetButton
           testID="submitBtn"
           variant="solid"
           color="primary"
@@ -293,7 +294,7 @@ function AppealForm({
           label={_(msg`Submit`)}>
           <ButtonText>{_(msg`Submit`)}</ButtonText>
           {isPending && <ButtonIcon icon={Loader} />}
-        </Button>
+        </BottomSheetButton>
       </View>
     </>
   )
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index c6a39ab45e..0672d4fd37 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -30,6 +30,7 @@ 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'
@@ -311,7 +312,7 @@ export function StepProfile() {
             />
           </View>
           <View style={[a.pt_4xl]}>
-            <Button
+            <BottomSheetButton
               variant="solid"
               color="primary"
               size="large"
@@ -320,7 +321,7 @@ export function StepProfile() {
               <ButtonText>
                 <Trans>Done</Trans>
               </ButtonText>
-            </Button>
+            </BottomSheetButton>
           </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 de7ed6d15b..0e9eb0d199 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -6,7 +6,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
@@ -124,7 +125,7 @@ export function ServerInputDialog({
               {pdsAddressHistory.length > 0 && (
                 <View style={[a.flex_row, a.flex_wrap, a.mt_xs]}>
                   {pdsAddressHistory.map(uri => (
-                    <Button
+                    <BottomSheetButton
                       key={uri}
                       variant="ghost"
                       color="primary"
@@ -132,7 +133,7 @@ export function ServerInputDialog({
                       style={[a.px_sm, a.py_xs, a.rounded_sm, a.gap_sm]}
                       onPress={() => setCustomAddress(uri)}>
                       <ButtonText>{uri}</ButtonText>
-                    </Button>
+                    </BottomSheetButton>
                   ))}
                 </View>
               )}
@@ -160,7 +161,7 @@ export function ServerInputDialog({
           </View>
 
           <View style={gtMobile && [a.flex_row, a.justify_end]}>
-            <Button
+            <BottomSheetButton
               testID="doneBtn"
               variant="outline"
               color="primary"
@@ -168,7 +169,7 @@ export function ServerInputDialog({
               onPress={() => control.close()}
               label={_(msg`Done`)}>
               <ButtonText>{_(msg`Done`)}</ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </View>
       </Dialog.ScrollableInner>
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 1737fc29ca..a1b869c134 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -14,7 +14,8 @@ import {
 import {enforceLen} from '#/lib/strings/helpers'
 import {Gif} from '#/state/queries/tenor'
 import {atoms as a, native, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {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'
@@ -154,7 +155,7 @@ function AltTextInner({
               />
             </TextField.Root>
           </View>
-          <Button
+          <BottomSheetButton
             label={_(msg`Save`)}
             size="large"
             color="primary"
@@ -163,7 +164,7 @@ function AltTextInner({
             <ButtonText>
               <Trans>Save</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </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 0afb83ed96..daffcc6080 100644
--- a/src/view/com/composer/photos/EditImageDialog.web.tsx
+++ b/src/view/com/composer/photos/EditImageDialog.web.tsx
@@ -12,7 +12,8 @@ import {
   manipulateImage,
 } from '#/state/gallery'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 import {EditImageDialogProps} from './EditImageDialog'
@@ -71,7 +72,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
       </View>
 
       <View style={[a.mt_md, a.gap_md]}>
-        <Button
+        <BottomSheetButton
           disabled={!isNew}
           label={_(msg`Save`)}
           size="large"
@@ -81,7 +82,7 @@ const EditImageInner = ({control, image, onChange}: EditImageDialogProps) => {
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
     </Dialog.Inner>
   )
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index fc9c6c4931..9dcb877cd9 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -8,7 +8,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Text} from '#/components/Typography'
@@ -102,7 +103,7 @@ const ImageAltTextInner = ({
             />
           </TextField.Root>
         </View>
-        <Button
+        <BottomSheetButton
           label={_(msg`Save`)}
           disabled={altText.length > MAX_ALT_TEXT || altText === image.alt}
           size="large"
@@ -112,7 +113,7 @@ const ImageAltTextInner = ({
           <ButtonText>
             <Trans>Save</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       </View>
     </Dialog.ScrollableInner>
   )
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index d57c6740cf..c3d94bc0fb 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -10,6 +10,7 @@ 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'
@@ -164,7 +165,7 @@ function SubtitleDialogInner({
         )}
 
         <View style={web([a.flex_row, a.justify_end])}>
-          <Button
+          <BottomSheetButton
             label={_(msg`Done`)}
             size={isWeb ? 'small' : 'large'}
             color="primary"
@@ -177,7 +178,7 @@ function SubtitleDialogInner({
             <ButtonText>
               <Trans>Done</Trans>
             </ButtonText>
-          </Button>
+          </BottomSheetButton>
         </View>
       </View>
       <Dialog.Close />
@@ -257,7 +258,7 @@ function SubtitleFileRow({
         </View>
       </View>
 
-      <Button
+      <BottomSheetButton
         label={_(msg`Remove subtitle file`)}
         size="tiny"
         shape="round"
@@ -268,7 +269,7 @@ function SubtitleFileRow({
         }
         style={[a.ml_sm]}>
         <ButtonIcon icon={X} />
-      </Button>
+      </BottomSheetButton>
     </View>
   )
 }
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 14c869df8d..e697c02d80 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -7,6 +7,7 @@ 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'
@@ -92,7 +93,7 @@ let RepostButton = ({
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
-              <Button
+              <BottomSheetButton
                 style={[a.justify_start, a.px_md]}
                 label={
                   isReposted
@@ -115,8 +116,8 @@ let RepostButton = ({
                     ? _(msg`Remove repost`)
                     : _(msg({message: `Repost`, context: 'action'}))}
                 </Text>
-              </Button>
-              <Button
+              </BottomSheetButton>
+              <BottomSheetButton
                 disabled={embeddingDisabled}
                 testID="quoteBtn"
                 style={[a.justify_start, a.px_md]}
@@ -152,9 +153,9 @@ let RepostButton = ({
                     ? _(msg`Quote posts disabled`)
                     : _(msg`Quote post`)}
                 </Text>
-              </Button>
+              </BottomSheetButton>
             </View>
-            <Button
+            <BottomSheetButton
               label={_(msg`Cancel quote post`)}
               onAccessibilityEscape={close}
               onPress={close}
@@ -162,7 +163,7 @@ let RepostButton = ({
               variant="solid"
               color="primary">
               <ButtonText>{_(msg`Cancel`)}</ButtonText>
-            </Button>
+            </BottomSheetButton>
           </View>
         </Dialog.Inner>
       </Dialog.Outer>
diff --git a/src/view/screens/Settings/DisableEmail2FADialog.tsx b/src/view/screens/Settings/DisableEmail2FADialog.tsx
index bbc6902543..64a3061b11 100644
--- a/src/view/screens/Settings/DisableEmail2FADialog.tsx
+++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx
@@ -9,7 +9,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {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'
@@ -108,7 +109,7 @@ export function DisableEmail2FADialog({
 
           {stage === Stages.Email ? (
             <View style={gtMobile && [a.flex_row, a.justify_end, a.gap_md]}>
-              <Button
+              <BottomSheetButton
                 testID="sendEmailButton"
                 variant="solid"
                 color="primary"
@@ -120,8 +121,8 @@ export function DisableEmail2FADialog({
                   <Trans>Send verification email</Trans>
                 </ButtonText>
                 {isProcessing && <ButtonIcon icon={Loader} />}
-              </Button>
-              <Button
+              </BottomSheetButton>
+              <BottomSheetButton
                 testID="haveCodeButton"
                 variant="ghost"
                 color="primary"
@@ -132,7 +133,7 @@ export function DisableEmail2FADialog({
                 <ButtonText>
                   <Trans>I have a code</Trans>
                 </ButtonText>
-              </Button>
+              </BottomSheetButton>
             </View>
           ) : stage === Stages.ConfirmCode ? (
             <View>
@@ -157,7 +158,7 @@ export function DisableEmail2FADialog({
                 </TextField.Root>
               </View>
               <View style={gtMobile && [a.flex_row, a.justify_end]}>
-                <Button
+                <BottomSheetButton
                   testID="resendCodeBtn"
                   variant="ghost"
                   color="primary"
@@ -168,8 +169,8 @@ export function DisableEmail2FADialog({
                   <ButtonText>
                     <Trans>Resend email</Trans>
                   </ButtonText>
-                </Button>
-                <Button
+                </BottomSheetButton>
+                <BottomSheetButton
                   testID="confirmBtn"
                   variant="solid"
                   color="primary"
@@ -181,7 +182,7 @@ export function DisableEmail2FADialog({
                     <Trans>Confirm</Trans>
                   </ButtonText>
                   {isProcessing && <ButtonIcon icon={Loader} />}
-                </Button>
+                </BottomSheetButton>
               </View>
             </View>
           ) : undefined}
diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx
index 3d21d7cb5e..caddc1c2ad 100644
--- a/src/view/screens/Settings/ExportCarDialog.tsx
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -8,7 +8,8 @@ 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 {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
@@ -68,7 +69,7 @@ export function ExportCarDialog({
             </Trans>
           </Text>
 
-          <Button
+          <BottomSheetButton
             variant="solid"
             color="primary"
             size="large"
@@ -79,7 +80,7 @@ export function ExportCarDialog({
               <Trans>Download CAR file</Trans>
             </ButtonText>
             {loading && <ButtonIcon icon={Loader} />}
-          </Button>
+          </BottomSheetButton>
 
           <Text
             style={[

From e2f8e7c350d154c69e1121efff1ebd0783cc0c75 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:17:29 -0700
Subject: [PATCH 16/66] fix type

---
 src/components/FeedCard.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/FeedCard.tsx b/src/components/FeedCard.tsx
index b28f66f839..03a57d0389 100644
--- a/src/components/FeedCard.tsx
+++ b/src/components/FeedCard.tsx
@@ -1,5 +1,6 @@
 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,
@@ -13,6 +14,7 @@ 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,
@@ -254,9 +256,13 @@ function SaveButtonInner({
   const isPending = isAddSavedFeedPending || isRemovePending
 
   const toggleSave = React.useCallback(
-    async (e: GestureResponderEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
+    async (e: GestureResponderEvent | PressableEvent) => {
+      // WEB ONLY - this is okay. See `BottomSheetPressable.web.tsx`
+      if (isWeb) {
+        e = e as GestureResponderEvent
+        e.preventDefault()
+        e.stopPropagation()
+      }
 
       try {
         if (savedFeedConfig) {

From 81906dfe6b28d837a0b51c0c34e91a50cff525ba Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:43:44 -0700
Subject: [PATCH 17/66] wizard remove buttons

---
 src/components/StarterPack/Wizard/WizardListCard.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/StarterPack/Wizard/WizardListCard.tsx b/src/components/StarterPack/Wizard/WizardListCard.tsx
index 44f01a1545..879d95f1cd 100644
--- a/src/components/StarterPack/Wizard/WizardListCard.tsx
+++ b/src/components/StarterPack/Wizard/WizardListCard.tsx
@@ -19,7 +19,8 @@ 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 {Button, ButtonText} from '#/components/Button'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
+import {ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Checkbox} from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'
@@ -98,7 +99,7 @@ function WizardListCard({
       {btnType === 'checkbox' ? (
         <Checkbox />
       ) : !disabled ? (
-        <Button
+        <BottomSheetButton
           label={_(msg`Remove`)}
           variant="solid"
           color="secondary"
@@ -108,7 +109,7 @@ function WizardListCard({
           <ButtonText>
             <Trans>Remove</Trans>
           </ButtonText>
-        </Button>
+        </BottomSheetButton>
       ) : null}
     </Toggle.Item>
   )

From cdfdf49905469999bcf15b017cbdab1a3b70cefe Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:46:15 -0700
Subject: [PATCH 18/66] fix

---
 src/components/dialogs/PostInteractionSettingsDialog.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 6d7cbf32f8..a9f4ff6708 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -230,7 +230,6 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
-  const control = Dialog.useDialogContext()
   const {data: lists} = useMyListsQuery('curate')
   const [quotesEnabled, setQuotesEnabled] = React.useState(
     !(
@@ -436,7 +435,6 @@ export function PostInteractionSettingsForm({
       <BottomSheetButton
         label={_(msg`Save`)}
         onPress={onSave}
-        onAccessibilityEscape={control.close}
         color="primary"
         size="large"
         variant="solid"

From 8bd6b2d6b5f013ed1ccee138bf30ac81d6b09f7f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:47:45 -0700
Subject: [PATCH 19/66] fix embed consent

---
 src/components/dialogs/EmbedConsent.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index aee98e6b7c..c6d8f8f86a 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -80,7 +80,6 @@ export function EmbedConsentDialog({
             style={gtMobile && a.flex_1}
             label={_(msg`Enable external media`)}
             onPress={onShowAllPress}
-            onAccessibilityEscape={control.close}
             color="primary"
             size="large"
             variant="solid">
@@ -92,7 +91,6 @@ export function EmbedConsentDialog({
             style={gtMobile && a.flex_1}
             label={_(msg`Enable this source only`)}
             onPress={onShowPress}
-            onAccessibilityEscape={control.close}
             color="secondary"
             size="large"
             variant="solid">
@@ -102,7 +100,6 @@ export function EmbedConsentDialog({
           </BottomSheetButton>
           <BottomSheetButton
             label={_(msg`No thanks`)}
-            onAccessibilityEscape={control.close}
             onPress={onHidePress}
             color="secondary"
             size="large"

From 65bfd89d887171c49744a709bd3da51a3451014d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 19:49:45 -0700
Subject: [PATCH 20/66] buttons in account switcher

---
 src/components/AccountList.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AccountList.tsx b/src/components/AccountList.tsx
index 68bb482af2..2a261ddf85 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>
       ))}
-      <Button
+      <BottomSheetButton
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
         onPress={pendingDid ? undefined : onPressAddAccount}
         label={_(msg`Login to account that is not listed`)}>
-        {({hovered, pressed}) => (
+        {({pressed}) => (
           <View
             style={[
               a.flex_1,
               a.flex_row,
               a.align_center,
               {height: 48},
-              (hovered || pressed) && t.atoms.bg_contrast_25,
+              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>
         )}
-      </Button>
+      </BottomSheetButton>
     </View>
   )
 }
@@ -103,7 +103,7 @@ function AccountItem({
   }, [account, onSelect])
 
   return (
-    <Button
+    <BottomSheetButton
       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}`)
       }>
-      {({hovered, pressed}) => (
+      {({pressed}) => (
         <View
           style={[
             a.flex_1,
             a.flex_row,
             a.align_center,
             {height: 48},
-            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
+            (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>
       )}
-    </Button>
+    </BottomSheetButton>
   )
 }

From 87c83dd00c30a225d225b2c7381f27bbf9ba2e6e Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 20:26:10 -0700
Subject: [PATCH 21/66] 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           | 35 +++----
 6 files changed, 164 insertions(+), 26 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 82ada250a6..9d97441915 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'
 
@@ -125,7 +125,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"
@@ -135,7 +135,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 33c0e63352..22eb406a00 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -14,6 +14,7 @@ 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 * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
@@ -157,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>
   )

From 5a60190796faaf19e3ebf5609ea5354945779d93 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 21:44:27 -0700
Subject: [PATCH 22/66] nesting support

---
 src/components/Dialog/index.tsx    | 58 +++++++++++++++++++-----------
 src/components/Prompt.tsx          | 17 +++++++--
 src/view/com/composer/Composer.tsx |  1 +
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 40bd8f5cf0..92fe253557 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -29,6 +29,26 @@ export function Outer({
   onClose,
   nativeOptions,
   testID,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  return (
+    <Portal>
+      <OuterWithoutPortal
+        control={control}
+        onClose={onClose}
+        nativeOptions={nativeOptions}
+        testID={testID}>
+        {children}
+      </OuterWithoutPortal>
+    </Portal>
+  )
+}
+
+export function OuterWithoutPortal({
+  children,
+  control,
+  onClose,
+  nativeOptions,
+  testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const ref = React.useRef<BlueskyBottomSheetView>(null)
@@ -93,26 +113,24 @@ export function Outer({
   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}
-          onStateChange={e => {
-            if (e.nativeEvent.state === 'closed') {
-              onCloseAnimationComplete()
-            }
-          }}
-          cornerRadius={20}
-          {...nativeOptions}>
-          <View testID={testID} style={[t.atoms.bg]}>
-            {children}
-          </View>
-        </BlueskyBottomSheetView>
-      </Context.Provider>
-    </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}
+        {...nativeOptions}>
+        <View testID={testID} style={[t.atoms.bg]}>
+          {children}
+        </View>
+      </BlueskyBottomSheetView>
+    </Context.Provider>
   )
 }
 
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 0e1442d7c8..7bd284f2ae 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -4,6 +4,7 @@ import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/compon
 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'
@@ -27,9 +28,11 @@ export function Outer({
   children,
   control,
   testID,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
+  withoutPortal?: boolean
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -40,8 +43,11 @@ export function Outer({
     [titleId, descriptionId],
   )
 
+  const Wrapper =
+    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
+
   return (
-    <Dialog.Outer control={control} testID={testID}>
+    <Wrapper control={control} testID={testID}>
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
@@ -52,7 +58,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Dialog.Outer>
+    </Wrapper>
   )
 }
 
@@ -181,6 +187,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -197,9 +204,13 @@ export function Basic({
   onConfirm: (e: PressableEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
+  withoutPortal?: boolean
 }>) {
   return (
-    <Outer control={control} testID="confirmModal">
+    <Outer
+      control={control}
+      testID="confirmModal"
+      withoutPortal={withoutPortal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index f354f0f0dc..eb15a78a4b 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -861,6 +861,7 @@ export const ComposePost = ({
         onConfirm={onClose}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
+        withoutPortal={true}
       />
     </KeyboardAvoidingView>
   )

From f251a43dd6418bbd99fbcef3d405798b5308ab89 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 2 Oct 2024 10:54:25 -0500
Subject: [PATCH 23/66] Add intent/verify-email to go server (#5554)

---
 bskyweb/cmd/bskyweb/server.go | 1 +
 1 file changed, 1 insertion(+)

diff --git a/bskyweb/cmd/bskyweb/server.go b/bskyweb/cmd/bskyweb/server.go
index 0f49ce5c3a..54c5f075ac 100644
--- a/bskyweb/cmd/bskyweb/server.go
+++ b/bskyweb/cmd/bskyweb/server.go
@@ -255,6 +255,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/intent/verify-email", server.WebGeneric)
 	e.GET("/messages", server.WebGeneric)
 	e.GET("/messages/:conversation", server.WebGeneric)
 

From 35698731232ec43571818c61e17ed76765a55ee5 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 2 Oct 2024 10:54:51 -0500
Subject: [PATCH 24/66] Tweak verify email dialog (#5555)

* Add intent/verify-email to go server

* Tweak verify intent dialog
---
 .../intents/VerifyEmailIntentDialog.tsx       | 86 +++++++++----------
 1 file changed, 43 insertions(+), 43 deletions(-)

diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index e8c63af82f..90fb2debe9 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -3,11 +3,14 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent, useSession} from 'state/session'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {isNative} from '#/platform/detection'
+import {useAgent, useSession} from '#/state/session'
+import {atoms as a, useBreakpoints,useTheme} from '#/alf'
+import {Button, ButtonIcon,ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -23,7 +26,9 @@ export function VerifyEmailIntentDialog() {
   )
 }
 
-function Inner({control}: {control: DialogControlProps}) {
+function Inner({}: {control: DialogControlProps}) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const {verifyEmailState: state} = useIntentDialogs()
   const [status, setStatus] = React.useState<
@@ -58,43 +63,47 @@ function Inner({control}: {control: DialogControlProps}) {
   }
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Verify email dialog`)}>
-      <Dialog.Close />
+    <Dialog.ScrollableInner
+      label={_(msg`Verify email dialog`)}
+      style={[
+        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      ]}>
       <View style={[a.gap_xl]}>
         {status === 'loading' ? (
           <View style={[a.py_2xl, a.align_center, a.justify_center]}>
-            <Loader size="xl" />
+            <Loader size="xl" fill={t.atoms.text_contrast_low.color} />
           </View>
         ) : status === 'success' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Email Verified</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
-                Thanks, you have successfully verified your email address.
+                Thanks, you have successfully verified your email address. You
+                can close this dialog.
               </Trans>
             </Text>
-          </>
+          </View>
         ) : status === 'failure' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Invalid Verification Code</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
                 The verification code you have provided is invalid. Please make
                 sure that you have used the correct verification link or request
                 a new one.
               </Trans>
             </Text>
-          </>
+          </View>
         ) : (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
               <Trans>Email Resent</Trans>
             </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
               <Trans>
                 We have sent another verification email to{' '}
                 <Text style={[a.text_md, a.font_bold]}>
@@ -103,38 +112,29 @@ function Inner({control}: {control: DialogControlProps}) {
                 .
               </Trans>
             </Text>
-          </>
+          </View>
         )}
-        {status !== 'loading' ? (
-          <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
+
+        {status === 'failure' && (
+          <>
+            <Divider />
             <Button
-              label={_(msg`Close`)}
-              onPress={() => control.close()}
+              label={_(msg`Resend Verification Email`)}
+              onPress={onPressResendEmail}
               variant="solid"
-              color={status === 'failure' ? 'secondary' : 'primary'}
+              color="secondary_inverted"
               size="large"
-              style={{marginLeft: 'auto'}}>
+              disabled={sending}>
+              <ButtonIcon icon={sending ? Loader : Resend} position="left" />
               <ButtonText>
-                <Trans>Close</Trans>
+                <Trans>Resend Email</Trans>
               </ButtonText>
             </Button>
-            {status === 'failure' ? (
-              <Button
-                label={_(msg`Resend Verification Email`)}
-                onPress={onPressResendEmail}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={sending}>
-                <ButtonText>
-                  <Trans>Resend Email</Trans>
-                </ButtonText>
-                {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </Button>
-            ) : null}
-          </View>
-        ) : null}
+          </>
+        )}
       </View>
+
+      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }

From 1a7885b9215ec48f064de990e9a97070206996b8 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 2 Oct 2024 10:55:06 -0500
Subject: [PATCH 25/66] Add suspense boundary in onboarding (#5556)

---
 .../StepProfile/PlaceholderCanvas.tsx         | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
index eaad2113f8..acc0893350 100644
--- a/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
+++ b/src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx
@@ -46,29 +46,31 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
 
     return (
       <View style={styles.container}>
-        <LazyViewShot
-          // @ts-ignore this library doesn't have types
-          ref={viewshotRef}
-          options={{
-            fileName: 'placeholderAvatar',
-            format: 'jpg',
-            quality: 0.8,
-            height: 150 * SIZE_MULTIPLIER,
-            width: 150 * SIZE_MULTIPLIER,
-          }}>
-          <View
-            style={[
-              styles.imageContainer,
-              {backgroundColor: avatar.backgroundColor},
-            ]}
-            collapsable={false}>
-            <Icon
-              height={85 * SIZE_MULTIPLIER}
-              width={85 * SIZE_MULTIPLIER}
-              style={{color: 'white'}}
-            />
-          </View>
-        </LazyViewShot>
+        <React.Suspense fallback={null}>
+          <LazyViewShot
+            // @ts-ignore this library doesn't have types
+            ref={viewshotRef}
+            options={{
+              fileName: 'placeholderAvatar',
+              format: 'jpg',
+              quality: 0.8,
+              height: 150 * SIZE_MULTIPLIER,
+              width: 150 * SIZE_MULTIPLIER,
+            }}>
+            <View
+              style={[
+                styles.imageContainer,
+                {backgroundColor: avatar.backgroundColor},
+              ]}
+              collapsable={false}>
+              <Icon
+                height={85 * SIZE_MULTIPLIER}
+                width={85 * SIZE_MULTIPLIER}
+                style={{color: 'white'}}
+              />
+            </View>
+          </LazyViewShot>
+        </React.Suspense>
       </View>
     )
   },

From d4b8401057bf60cab4df3d88d83902e6e505993e Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 08:56:42 -0700
Subject: [PATCH 26/66] android support

---
 package.json                                  |  2 +-
 src/components/Dialog/index.tsx               |  9 +++--
 .../moderation/ModerationDetailsDialog.tsx    | 34 ++++++++++---------
 yarn.lock                                     |  8 ++---
 4 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index e32100ece8..273d8ddb35 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.8",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.9",
     "@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 92fe253557..73b592ff27 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,12 +1,13 @@
 import React, {useImperativeHandle} from 'react'
 import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
+import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
 
 import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
-import {ScrollView} from '#/view/com/util/Views'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -112,6 +113,8 @@ export function OuterWithoutPortal({
 
   const context = React.useMemo(() => ({close}), [close])
 
+  const Wrapper = isIOS ? View : GestureHandlerRootView
+
   return (
     <Context.Provider value={context}>
       <BlueskyBottomSheetView
@@ -126,9 +129,9 @@ export function OuterWithoutPortal({
         }}
         cornerRadius={20}
         {...nativeOptions}>
-        <View testID={testID} style={[t.atoms.bg]}>
+        <Wrapper testID={testID} style={[t.atoms.bg]}>
           {children}
-        </View>
+        </Wrapper>
       </BlueskyBottomSheetView>
     </Context.Provider>
   )
diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx
index 1198e8b921..2fb190efa5 100644
--- a/src/components/moderation/ModerationDetailsDialog.tsx
+++ b/src/components/moderation/ModerationDetailsDialog.tsx
@@ -10,6 +10,7 @@ import {listUriToHref} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
+import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {InlineLinkText} from '#/components/Link'
@@ -140,23 +141,24 @@ function ModerationDetailsDialogInner({
       {modcause?.type === 'label' && (
         <View style={[a.pt_lg]}>
           <Divider />
-          <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
-            {modcause.source.type === 'user' ? (
+          {modcause.source.type === 'user' ? (
+            <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
               <Trans>This label was applied by the author.</Trans>
-            ) : (
-              <Trans>
-                This label was applied by{' '}
-                <InlineLinkText
-                  label={desc.source || _(msg`an unknown labeler`)}
-                  to={makeProfileLink({did: modcause.label.src, handle: ''})}
-                  onPress={() => control.close()}
-                  style={a.text_md}>
-                  {desc.source || _(msg`an unknown labeler`)}
-                </InlineLinkText>
-                .
-              </Trans>
-            )}
-          </Text>
+            </Text>
+          ) : (
+            <>
+              <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
+                <Trans>This label was applied by </Trans>
+              </Text>
+              <BottomSheetInlineLinkText
+                label={desc.source || _(msg`an unknown labeler`)}
+                to={makeProfileLink({did: modcause.label.src, handle: ''})}
+                onPress={() => control.close()}
+                style={a.text_md}>
+                {desc.source || _(msg`an unknown labeler`)}
+              </BottomSheetInlineLinkText>
+            </>
+          )}
         </View>
       )}
 
diff --git a/yarn.lock b/yarn.lock
index d20d4a4cdc..e9f02f5ec4 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.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-bottom-sheet@^0.1.1-alpha.9":
+  version "0.1.1-alpha.9"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.9.tgz#f23a9245d4fed5e1825222249f2ad64ec99896e6"
+  integrity sha512-duGQ/l20Mr/lmjS7lUu0T0QgARA/V47PrmpL7LZJMoK4IhSBHT4HMSjjOaBcSJhQg2I5/uSX3pShFzCfdGttVQ==
 
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"

From 1ca6d360eb1913022d5cefb8e7ffa28d796fd451 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 09:02:11 -0700
Subject: [PATCH 27/66] fix type

---
 src/components/BottomSheetButton.tsx | 4 ++--
 src/components/Menu/types.ts         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
index 50577a8c48..a2efa2c49b 100644
--- a/src/components/BottomSheetButton.tsx
+++ b/src/components/BottomSheetButton.tsx
@@ -3,7 +3,7 @@ import {AccessibilityProps, ViewStyle} from 'react-native'
 import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
 import {
   BlueskyBottomSheetPressable,
-  BueskyBottomSheetPressableProps,
+  BlueskyBottomSheetPressableProps,
 } from '@haileyok/bluesky-bottom-sheet'
 
 import {atoms as a} from '#/alf'
@@ -23,7 +23,7 @@ export function BottomSheetButton({
   disabled,
   style,
   ...rest
-}: BueskyBottomSheetPressableProps &
+}: BlueskyBottomSheetPressableProps &
   AccessibilityProps &
   VariantProps & {
     /**
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index e5d1d16a8d..75cc613679 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -5,7 +5,7 @@ import {
   PressableProps,
 } from 'react-native'
 import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
-import {BueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
+import {BlueskyBottomSheetPressableProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {TextStyleProp, ViewStyleProp} from '#/alf'
 import * as Dialog from '#/components/Dialog'
@@ -89,7 +89,7 @@ export type TriggerChildProps =
     }
 
 export type ItemProps = React.PropsWithChildren<
-  Omit<BueskyBottomSheetPressableProps, 'style'> &
+  Omit<BlueskyBottomSheetPressableProps, 'style'> &
     ViewStyleProp & {
       label: string
       onPress: (e: PressableEvent | GestureResponderEvent) => void

From a444fc53a0ec4e575987d7d689df030878a24021 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 09:09:54 -0700
Subject: [PATCH 28/66] import order (#5571)

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

diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 90fb2debe9..c78aabb6d4 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -5,8 +5,8 @@ import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {useAgent, useSession} from '#/state/session'
-import {atoms as a, useBreakpoints,useTheme} from '#/alf'
-import {Button, ButtonIcon,ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
 import {Divider} from '#/components/Divider'

From 3972d3d4c3697ab89c054a82b1d03aff96cfce07 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 2 Oct 2024 11:18:15 -0500
Subject: [PATCH 29/66] Ignore built files (#5572)

---
 .prettierignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.prettierignore b/.prettierignore
index 8ccbae2148..e107e129a4 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -15,3 +15,6 @@ android
 ios
 src/locale/locales
 lib/react-compiler-runtime
+bskyweb/static
+coverage
+web-build

From 405966830ccdbee6152037eebb76c4815ff5526c Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 2 Oct 2024 19:40:18 +0300
Subject: [PATCH 30/66] Make reply prompt more subtle on desktop (#5569)

* make reply prompt more subtle on desktop

* fix alignment

* Tweak transition timing

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/alf/atoms.ts                              | 28 +++++++++++++++++++
 .../post-thread/PostThreadComposePrompt.tsx   | 24 ++++++++++------
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 0c8eb330d7..2625beda27 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -901,4 +901,32 @@ export const atoms = {
   hidden: {
     display: 'none',
   },
+
+  /*
+   * Transition
+   */
+  transition_none: web({
+    transitionProperty: 'none',
+  }),
+  transition_all: web({
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_color: web({
+    transitionProperty:
+      'color, background-color, border-color, text-decoration-color, fill, stroke',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_opacity: web({
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_transform: web({
+    transitionProperty: 'transform',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
 } as const
diff --git a/src/view/com/post-thread/PostThreadComposePrompt.tsx b/src/view/com/post-thread/PostThreadComposePrompt.tsx
index 67981618e1..5ad4c256dd 100644
--- a/src/view/com/post-thread/PostThreadComposePrompt.tsx
+++ b/src/view/com/post-thread/PostThreadComposePrompt.tsx
@@ -5,12 +5,12 @@ import {useLingui} from '@lingui/react'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useHapticsDisabled} from '#/state/preferences'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text} from '#/components/Typography'
 
 export function PostThreadComposePrompt({
@@ -21,10 +21,15 @@ export function PostThreadComposePrompt({
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const {_} = useLingui()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
   const t = useTheme()
   const playHaptics = useHaptics()
   const isHapticsDisabled = useHapticsDisabled()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
 
   const onPress = () => {
     playHaptics('Light')
@@ -42,13 +47,15 @@ export function PostThreadComposePrompt({
       accessibilityLabel={_(msg`Compose reply`)}
       accessibilityHint={_(msg`Opens composer`)}
       style={[
-        {paddingTop: 8, paddingBottom: isTabletOrDesktop ? 8 : 11},
-        a.px_sm,
+        gtMobile ? a.py_xs : {paddingTop: 8, paddingBottom: 11},
+        gtMobile ? {paddingLeft: 6, paddingRight: 6} : a.px_sm,
         a.border_t,
         t.atoms.border_contrast_low,
         t.atoms.bg,
       ]}
-      onPress={onPress}>
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}>
       <View
         style={[
           a.flex_row,
@@ -56,10 +63,11 @@ export function PostThreadComposePrompt({
           a.p_sm,
           a.gap_sm,
           a.rounded_full,
-          t.atoms.bg_contrast_25,
+          (!gtMobile || hovered) && t.atoms.bg_contrast_25,
+          a.transition_color,
         ]}>
         <UserAvatar
-          size={22}
+          size={gtMobile ? 24 : 22}
           avatar={profile?.avatar}
           type={profile?.associated?.labeler ? 'labeler' : 'user'}
         />

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

---
 src/components/BottomSheetButton.tsx       | 110 ++-----------------
 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, 138 insertions(+), 113 deletions(-)
 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
index a2efa2c49b..38fdf598ba 100644
--- a/src/components/BottomSheetButton.tsx
+++ b/src/components/BottomSheetButton.tsx
@@ -1,110 +1,12 @@
 import React from 'react'
-import {AccessibilityProps, ViewStyle} from 'react-native'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
-import {
-  BlueskyBottomSheetPressable,
-  BlueskyBottomSheetPressableProps,
-} from '@haileyok/bluesky-bottom-sheet'
 
-import {atoms as a} from '#/alf'
-import {
-  ButtonContext,
-  useSharedButtonStyles,
-  VariantProps,
-} from '#/components/Button'
-
-export function BottomSheetButton({
-  children,
-  label,
-  color,
-  variant,
-  shape = 'default',
-  size,
-  disabled,
-  style,
-  ...rest
-}: BlueskyBottomSheetPressableProps &
-  AccessibilityProps &
-  VariantProps & {
-    /**
-     * For a11y, try to make this descriptive and clear
-     */
-    label: string
-  }) {
-  const [state, setState] = React.useState({
-    pressed: false,
-    hovered: false,
-    focused: false,
-  })
-
-  const onPressInOuter = rest.onPressIn
-  const onPressIn = React.useCallback(
-    (e: PressableEvent) => {
-      setState(s => ({
-        ...s,
-        pressed: true,
-      }))
-      onPressInOuter?.(e)
-    },
-    [setState, onPressInOuter],
-  )
-  const onPressOutOuter = rest.onPressOut
-  const onPressOut = React.useCallback(
-    (e: PressableEvent) => {
-      setState(s => ({
-        ...s,
-        pressed: false,
-      }))
-      onPressOutOuter?.(e)
-    },
-    [setState, onPressOutOuter],
-  )
-
-  const {baseStyles, hoverStyles} = useSharedButtonStyles({
-    /**
-     * For a11y, try to make this descriptive and clear
-     */
-    color,
-    variant,
-    shape,
-    size,
-    disabled,
-  })
-
-  const context = React.useMemo<ButtonContext>(
-    () => ({
-      ...state,
-      variant,
-      color,
-      size,
-      disabled: disabled || false,
-    }),
-    [state, variant, color, size, disabled],
-  )
+import {Button, ButtonProps} from '#/components/Button'
+import {NormalizedPressable} from '#/components/NormalizedPressable'
 
+export function BottomSheetButton({children, ...rest}: ButtonProps) {
   return (
-    <BlueskyBottomSheetPressable
-      style={[
-        a.flex_row,
-        a.align_center,
-        a.justify_center,
-        baseStyles,
-        style as ViewStyle,
-        ...(state.hovered || state.pressed ? [hoverStyles] : []),
-      ]}
-      aria-label={label}
-      aria-pressed={state.pressed}
-      accessibilityLabel={label}
-      accessibilityHint={undefined}
-      accessibilityState={{
-        disabled: disabled || false,
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      {...rest}>
-      <ButtonContext.Provider value={context}>
-        {typeof children === 'function' ? children(context) : children}
-      </ButtonContext.Provider>
-    </BlueskyBottomSheetPressable>
+    <Button {...rest} Component={NormalizedPressable}>
+      {children}
+    </Button>
   )
 }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 17db0332e0..ae03323cff 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 &
@@ -116,6 +117,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
+      Component = Pressable,
       ...rest
     },
     ref,
@@ -237,7 +239,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Pressable
+      <Component
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
@@ -288,7 +290,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 75cc613679..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 {BlueskyBottomSheetPressableProps} 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<BlueskyBottomSheetPressableProps, '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 349b8b7045cc0deaa046293a418afcec1a9509df Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 10:58:16 -0700
Subject: [PATCH 32/66] 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 1ea82c38ea8fda4e9e87b0c772707d4b634e1238 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 10:59:20 -0700
Subject: [PATCH 33/66] 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 f558eb67778f23615ef39d2bdddc40c54e2c0e10 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 11:35:52 -0700
Subject: [PATCH 34/66] fix other buttons in dialogs

---
 src/components/NormalizedRNGHPressable.tsx | 22 ++++++++++------------
 src/components/dialogs/MutedWords.tsx      | 22 +++++++++++++++-------
 src/components/forms/Toggle.tsx            | 10 ++++++----
 src/view/com/auth/server-input/index.tsx   |  9 +++++++--
 4 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 8cf4fe60c0..718e5005c3 100644
--- a/src/components/NormalizedRNGHPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -71,7 +71,7 @@ export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
       onFocus: _onFocus,
       ...rest
     },
-    ref,
+    _ref,
   ) {
     const onNormalizedPress = (event: PressableEvent) => {
       if (!onPress) return
@@ -104,17 +104,15 @@ export const NormalizedRNGHPressable = React.forwardRef<View, PressableProps>(
     }
 
     return (
-      <View ref={ref}>
-        <BSPressable
-          onPress={onNormalizedPress}
-          onLongPress={onNormalizedLongPress}
-          onPressIn={onNormalizedPressIn}
-          onPressOut={onNormalizedPressOut}
-          onHoverIn={onNormalizedHoverIn}
-          onHoverOut={onNormalizedHoverOut}
-          {...rest}
-        />
-      </View>
+      <BSPressable
+        onPress={onNormalizedPress}
+        onLongPress={onNormalizedLongPress}
+        onPressIn={onNormalizedPressIn}
+        onPressOut={onNormalizedPressOut}
+        onHoverIn={onNormalizedHoverIn}
+        onHoverOut={onNormalizedHoverOut}
+        {...rest}
+      />
     )
   },
 )
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index bd9edab3d4..d12bf63ca9 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -31,6 +31,7 @@ import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/P
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 
@@ -169,7 +170,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word until you unmute it`)}
                   name="forever"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -184,7 +186,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 24 hours`)}
                   name="24_hours"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -208,7 +211,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 7 days`)}
                   name="7_days"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -223,7 +227,8 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word for 30 days`)}
                   name="30_days"
-                  style={[a.flex_1]}>
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -257,7 +262,8 @@ function MutedWordsInner() {
               <Toggle.Item
                 label={_(msg`Mute this word in post text and tags`)}
                 name="content"
-                style={[a.flex_1]}>
+                style={[a.flex_1]}
+                PressableComponent={NormalizedRNGHPressable}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -273,7 +279,8 @@ function MutedWordsInner() {
               <Toggle.Item
                 label={_(msg`Mute this word in tags only`)}
                 name="tag"
-                style={[a.flex_1]}>
+                style={[a.flex_1]}
+                PressableComponent={NormalizedRNGHPressable}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -303,7 +310,8 @@ function MutedWordsInner() {
               name="exclude_following"
               style={[a.flex_row, a.justify_between]}
               value={excludeFollowing}
-              onChange={setExcludeFollowing}>
+              onChange={setExcludeFollowing}
+              PressableComponent={NormalizedRNGHPressable}>
               <TargetToggle>
                 <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
                   <Toggle.Checkbox />
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index 6dc387b239..bb5f154df0 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {isNative} from '#/platform/detection'
-import {HITSLOP_10} from 'lib/constants'
 import {
   atoms as a,
   flatten,
@@ -68,6 +68,7 @@ export type ItemProps = ViewStyleProp & {
   onChange?: (selected: boolean) => void
   isInvalid?: boolean
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
+  PressableComponent?: React.ComponentType<PressableProps>
 }
 
 export function useItemContext() {
@@ -159,6 +160,7 @@ export function Item({
   style,
   type = 'checkbox',
   label,
+  PressableComponent = Pressable,
   ...rest
 }: ItemProps) {
   const {
@@ -206,7 +208,7 @@ export function Item({
 
   return (
     <ItemContext.Provider value={state}>
-      <Pressable
+      <PressableComponent
         accessibilityHint={undefined} // optional
         hitSlop={HITSLOP_10}
         {...rest}
@@ -231,7 +233,7 @@ export function Item({
         onBlur={onBlur}
         style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
         {typeof children === 'function' ? children(state) : children}
-      </Pressable>
+      </PressableComponent>
     </ItemContext.Provider>
   )
 }
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index 0e9eb0d199..c39106f702 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -13,6 +13,7 @@ import * as TextField from '#/components/forms/TextField'
 import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {InlineLinkText} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {P, Text} from '#/components/Typography'
 
 export function ServerInputDialog({
@@ -83,7 +84,10 @@ export function ServerInputDialog({
             label="Preferences"
             values={fixedOption}
             onChange={setFixedOption}>
-            <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
+            <ToggleButton.Button
+              name={BSKY_SERVICE}
+              label={_(msg`Bluesky`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Bluesky`)}
               </ToggleButton.ButtonText>
@@ -91,7 +95,8 @@ export function ServerInputDialog({
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
-              label={_(msg`Custom`)}>
+              label={_(msg`Custom`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Custom`)}
               </ToggleButton.ButtonText>

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

---
 src/components/NormalizedRNGHPressable.tsx | 124 +++++++++++----------
 1 file changed, 67 insertions(+), 57 deletions(-)

diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 718e5005c3..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,60 +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 (
       <BSPressable
-        onPress={onNormalizedPress}
-        onLongPress={onNormalizedLongPress}
-        onPressIn={onNormalizedPressIn}
-        onPressOut={onNormalizedPressOut}
-        onHoverIn={onNormalizedHoverIn}
-        onHoverOut={onNormalizedHoverOut}
-        {...rest}
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
       />
     )
-  },
-)
+  }
+}

From ca0888c6333609d6b3f7ddd4e662205c77370164 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 11:55:00 -0700
Subject: [PATCH 36/66] more fixes

---
 src/components/BottomSheetButton.tsx                     | 2 +-
 src/components/Button.tsx                                | 8 ++++----
 src/components/ReportDialog/SubmitView.tsx               | 4 +++-
 src/components/dialogs/PostInteractionSettingsDialog.tsx | 4 +++-
 src/components/dms/ReportDialog.tsx                      | 5 +++--
 src/view/com/util/post-ctrls/RepostButton.tsx            | 1 -
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
index 9eaee55deb..3909cb3e24 100644
--- a/src/components/BottomSheetButton.tsx
+++ b/src/components/BottomSheetButton.tsx
@@ -5,7 +5,7 @@ import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 
 export function BottomSheetButton({children, ...rest}: ButtonProps) {
   return (
-    <Button {...rest} Component={NormalizedRNGHPressable}>
+    <Button {...rest} PressableComponent={NormalizedRNGHPressable}>
       {children}
     </Button>
   )
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ae03323cff..693ac109ce 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -87,7 +87,7 @@ export type ButtonProps = Pick<
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
-    Component?: React.ComponentType<PressableProps>
+    PressableComponent?: React.ComponentType<PressableProps>
   }
 
 export type ButtonTextProps = TextProps &
@@ -117,7 +117,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      Component = Pressable,
+      PressableComponent = Pressable,
       ...rest
     },
     ref,
@@ -239,7 +239,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Component
+      <PressableComponent
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
@@ -290,7 +290,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         <Context.Provider value={context}>
           {typeof children === 'function' ? children(context) : children}
         </Context.Provider>
-      </Component>
+      </PressableComponent>
     )
   },
 )
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index 590945c267..dae66e4e31 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -17,6 +17,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
@@ -154,7 +155,8 @@ export function SubmitView({
                 <Toggle.Item
                   key={labeler.creator.did}
                   name={labeler.creator.did}
-                  label={title}>
+                  label={title}
+                  PressableComponent={NormalizedRNGHPressable}>
                   <LabelerToggle title={title} />
                 </Toggle.Item>
               )
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index a9f4ff6708..94f458bde1 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -38,6 +38,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export type PostInteractionSettingsFormProps = {
@@ -303,7 +304,8 @@ export function PostInteractionSettingsForm({
               }
               value={quotesEnabled}
               onChange={onChangeQuotesEnabled}
-              style={[, a.justify_between, a.pt_xs]}>
+              style={[, a.justify_between, a.pt_xs]}
+              PressableComponent={NormalizedRNGHPressable}>
               <Text style={[t.atoms.text_contrast_medium]}>
                 {quotesEnabled ? (
                   <Trans>Quote posts enabled</Trans>
diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 60a18723b0..b2f497b7ad 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -14,6 +14,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, useBreakpoints, useTheme} from '#/alf'
+import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
@@ -142,7 +143,7 @@ function SubmitStep({
 
   return (
     <View style={a.gap_lg}>
-      <Button
+      <BottomSheetButton
         size="small"
         variant="solid"
         color="secondary"
@@ -150,7 +151,7 @@ function SubmitStep({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={Chevron} />
-      </Button>
+      </BottomSheetButton>
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
         <Text style={[a.text_2xl, a.font_bold]}>{copy.title}</Text>
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index e697c02d80..aaa8d4152f 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -157,7 +157,6 @@ let RepostButton = ({
             </View>
             <BottomSheetButton
               label={_(msg`Cancel quote post`)}
-              onAccessibilityEscape={close}
               onPress={close}
               size="large"
               variant="solid"

From 13c9c79aeec77edc33b1a926843b005c14acccc7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 2 Oct 2024 22:21:59 +0300
Subject: [PATCH 37/66] move files around (#5576)

---
 src/Navigation.tsx                                 |  2 +-
 .../Messages/{List/index.tsx => ChatList.tsx}      |  2 +-
 .../{Conversation/index.tsx => Conversation.tsx}   | 14 +++++++-------
 .../{Conversation => components}/ChatDisabled.tsx  |  0
 .../Messages/{List => components}/ChatListItem.tsx |  0
 .../{Conversation => components}/MessageInput.tsx  |  2 +-
 .../MessageInput.web.tsx                           |  4 ++--
 .../MessageInputEmbed.tsx                          |  0
 .../MessageListError.tsx                           |  0
 .../{Conversation => components}/MessagesList.tsx  | 14 +++++++-------
 10 files changed, 19 insertions(+), 19 deletions(-)
 rename src/screens/Messages/{List/index.tsx => ChatList.tsx} (99%)
 rename src/screens/Messages/{Conversation/index.tsx => Conversation.tsx} (93%)
 rename src/screens/Messages/{Conversation => components}/ChatDisabled.tsx (100%)
 rename src/screens/Messages/{List => components}/ChatListItem.tsx (100%)
 rename src/screens/Messages/{Conversation => components}/MessageInput.tsx (99%)
 rename src/screens/Messages/{Conversation => components}/MessageInput.web.tsx (98%)
 rename src/screens/Messages/{Conversation => components}/MessageInputEmbed.tsx (100%)
 rename src/screens/Messages/{Conversation => components}/MessageListError.tsx (100%)
 rename src/screens/Messages/{Conversation => components}/MessagesList.tsx (97%)

diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 53e8274d54..323f668b79 100644
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@@ -78,8 +78,8 @@ import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
 import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
-import {MessagesScreen} from '#/screens/Messages/List'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/ChatList.tsx
similarity index 99%
rename from src/screens/Messages/List/index.tsx
rename to src/screens/Messages/ChatList.tsx
index efd717f0b4..6cf561d117 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -33,7 +33,7 @@ import {Link} from '#/components/Link'
 import {ListFooter} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-import {ChatListItem} from './ChatListItem'
+import {ChatListItem} from './components/ChatListItem'
 
 type Props = NativeStackScreenProps<MessagesTabNavigatorParams, 'Messages'>
 
diff --git a/src/screens/Messages/Conversation/index.tsx b/src/screens/Messages/Conversation.tsx
similarity index 93%
rename from src/screens/Messages/Conversation/index.tsx
rename to src/screens/Messages/Conversation.tsx
index d14ed160ae..21fdfe0ea9 100644
--- a/src/screens/Messages/Conversation/index.tsx
+++ b/src/screens/Messages/Conversation.tsx
@@ -8,16 +8,16 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {CommonNavigatorParams} from '#/lib/routes/types'
+import {isWeb} from '#/platform/detection'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
+import {ConvoProvider, isConvoActive, useConvo} from '#/state/messages/convo'
+import {ConvoStatus} from '#/state/messages/convo/types'
 import {useCurrentConvoId} from '#/state/messages/current-convo-id'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfileQuery} from '#/state/queries/profile'
-import {isWeb} from 'platform/detection'
-import {useProfileShadow} from 'state/cache/profile-shadow'
-import {ConvoProvider, isConvoActive, useConvo} from 'state/messages/convo'
-import {ConvoStatus} from 'state/messages/convo/types'
-import {useSetMinimalShellMode} from 'state/shell'
-import {CenteredView} from 'view/com/util/Views'
-import {MessagesList} from '#/screens/Messages/Conversation/MessagesList'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {CenteredView} from '#/view/com/util/Views'
+import {MessagesList} from '#/screens/Messages/components/MessagesList'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter'
 import {MessagesListHeader} from '#/components/dms/MessagesListHeader'
diff --git a/src/screens/Messages/Conversation/ChatDisabled.tsx b/src/screens/Messages/components/ChatDisabled.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/ChatDisabled.tsx
rename to src/screens/Messages/components/ChatDisabled.tsx
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/components/ChatListItem.tsx
similarity index 100%
rename from src/screens/Messages/List/ChatListItem.tsx
rename to src/screens/Messages/components/ChatListItem.tsx
diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/components/MessageInput.tsx
similarity index 99%
rename from src/screens/Messages/Conversation/MessageInput.tsx
rename to src/screens/Messages/components/MessageInput.tsx
index 674edc41eb..21d6e574ea 100644
--- a/src/screens/Messages/Conversation/MessageInput.tsx
+++ b/src/screens/Messages/components/MessageInput.tsx
@@ -18,11 +18,11 @@ import Graphemer from 'graphemer'
 
 import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
 import {useHaptics} from '#/lib/haptics'
+import {isIOS} from '#/platform/detection'
 import {
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
-import {isIOS} from 'platform/detection'
 import {EmojiPickerPosition} from '#/view/com/composer/text-input/web/EmojiPicker.web'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/components/MessageInput.web.tsx
similarity index 98%
rename from src/screens/Messages/Conversation/MessageInput.web.tsx
rename to src/screens/Messages/components/MessageInput.web.tsx
index 0b7e479209..b15cd24921 100644
--- a/src/screens/Messages/Conversation/MessageInput.web.tsx
+++ b/src/screens/Messages/components/MessageInput.web.tsx
@@ -5,13 +5,13 @@ import {useLingui} from '@lingui/react'
 import Graphemer from 'graphemer'
 import TextareaAutosize from 'react-textarea-autosize'
 
+import {isSafari, isTouchDevice} from '#/lib/browser'
 import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {
   useMessageDraft,
   useSaveMessageDraft,
 } from '#/state/messages/message-drafts'
-import {isSafari, isTouchDevice} from 'lib/browser'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {textInputWebEmitter} from '#/view/com/composer/text-input/textInputWebEmitter'
 import {
   Emoji,
diff --git a/src/screens/Messages/Conversation/MessageInputEmbed.tsx b/src/screens/Messages/components/MessageInputEmbed.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/MessageInputEmbed.tsx
rename to src/screens/Messages/components/MessageInputEmbed.tsx
diff --git a/src/screens/Messages/Conversation/MessageListError.tsx b/src/screens/Messages/components/MessageListError.tsx
similarity index 100%
rename from src/screens/Messages/Conversation/MessageListError.tsx
rename to src/screens/Messages/components/MessageListError.tsx
diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/components/MessagesList.tsx
similarity index 97%
rename from src/screens/Messages/Conversation/MessagesList.tsx
rename to src/screens/Messages/components/MessagesList.tsx
index 3034f02905..b659e98d6e 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/components/MessagesList.tsx
@@ -15,6 +15,8 @@ import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/rean
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {AppBskyEmbedRecord, AppBskyRichtextFacet, RichText} from '@atproto/api'
 
+import {clamp} from '#/lib/numbers'
+import {ScrollProvider} from '#/lib/ScrollContext'
 import {shortenLinks, stripInvalidMentions} from '#/lib/strings/rich-text-manip'
 import {
   convertBskyAppUrlIfNeeded,
@@ -22,21 +24,19 @@ import {
 } from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {isWeb} from '#/platform/detection'
 import {isConvoActive, useConvoActive} from '#/state/messages/convo'
 import {ConvoItem, ConvoStatus} from '#/state/messages/convo/types'
 import {useGetPost} from '#/state/queries/post'
 import {useAgent} from '#/state/session'
-import {clamp} from 'lib/numbers'
-import {ScrollProvider} from 'lib/ScrollContext'
-import {isWeb} from 'platform/detection'
 import {
   EmojiPicker,
   EmojiPickerState,
 } from '#/view/com/composer/text-input/web/EmojiPicker.web'
-import {List} from 'view/com/util/List'
-import {ChatDisabled} from '#/screens/Messages/Conversation/ChatDisabled'
-import {MessageInput} from '#/screens/Messages/Conversation/MessageInput'
-import {MessageListError} from '#/screens/Messages/Conversation/MessageListError'
+import {List} from '#/view/com/util/List'
+import {ChatDisabled} from '#/screens/Messages/components/ChatDisabled'
+import {MessageInput} from '#/screens/Messages/components/MessageInput'
+import {MessageListError} from '#/screens/Messages/components/MessageListError'
 import {ChatEmptyPill} from '#/components/dms/ChatEmptyPill'
 import {MessageItem} from '#/components/dms/MessageItem'
 import {NewMessagesPill} from '#/components/dms/NewMessagesPill'

From c2dac855cc61e05d21b7dbb81f1fef26f1a9e1e7 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 2 Oct 2024 22:23:11 +0300
Subject: [PATCH 38/66] Delete messages NUX (#5574)

---
 src/components/dms/MessagesNUX.tsx | 175 -----------------------------
 src/screens/Messages/ChatList.tsx  |   4 -
 2 files changed, 179 deletions(-)
 delete mode 100644 src/components/dms/MessagesNUX.tsx

diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
deleted file mode 100644
index 5c21ee05be..0000000000
--- a/src/components/dms/MessagesNUX.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, {useCallback, useEffect} from 'react'
-import {View} from 'react-native'
-import {ChatBskyActorDeclaration} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
-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 {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'
-import {Text} from '#/components/Typography'
-
-export function MessagesNUX() {
-  const control = Dialog.useDialogControl()
-
-  const {currentAccount} = useSession()
-  const {data: profile} = useProfileQuery({
-    did: currentAccount!.did,
-  })
-
-  useEffect(() => {
-    if (profile && typeof profile.associated?.chat === 'undefined') {
-      const timeout = setTimeout(() => {
-        control.open()
-      }, 1000)
-
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [profile, control])
-
-  if (!profile) return null
-
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <DialogInner chatDeclation={profile.associated?.chat} />
-    </Dialog.Outer>
-  )
-}
-
-function DialogInner({
-  chatDeclation,
-}: {
-  chatDeclation?: ChatBskyActorDeclaration.Record
-}) {
-  const control = Dialog.useDialogContext()
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const [initialized, setInitialzed] = React.useState(false)
-  const {mutate: updateDeclaration} = useUpdateActorDeclaration({
-    onError: () => {
-      Toast.show(_(msg`Failed to update settings`), 'xmark')
-    },
-  })
-
-  const onSelectItem = useCallback(
-    (keys: string[]) => {
-      const key = keys[0]
-      if (!key) return
-      updateDeclaration(key as 'all' | 'none' | 'following')
-    },
-    [updateDeclaration],
-  )
-
-  useEffect(() => {
-    if (!chatDeclation && !initialized) {
-      updateDeclaration('following')
-      setInitialzed(true)
-    }
-  }, [chatDeclation, updateDeclaration, initialized])
-
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Introducing Direct Messages`)}
-      style={web({maxWidth: 440})}>
-      <View style={a.gap_xl}>
-        <View style={[a.align_center, a.pt_sm, a.pb_xs]}>
-          <Message_Stroke2_Corner0_Rounded width={64} />
-          <Text style={[a.text_2xl, a.font_bold, a.text_center, a.mt_md]}>
-            <Trans>Direct messages are here!</Trans>
-          </Text>
-          <Text style={[a.text_md, a.text_center, a.mt_sm]}>
-            <Trans>Privately chat with other users.</Trans>
-          </Text>
-        </View>
-        <View
-          style={[
-            a.gap_xs,
-            a.border,
-            a.overflow_hidden,
-            a.rounded_sm,
-            t.atoms.border_contrast_low,
-          ]}>
-          <View
-            style={[
-              a.p_md,
-              a.border_b,
-              t.atoms.bg_contrast_25,
-              t.atoms.border_contrast_low,
-            ]}>
-            <Text style={[a.text_sm, a.font_bold]}>
-              <Trans>Who can message you?</Trans>
-            </Text>
-            <Text
-              style={[
-                a.mt_xs,
-                a.text_sm,
-                a.italic,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>You can change this at any time.</Trans>
-            </Text>
-          </View>
-          <View style={[a.px_md, a.py_xs]}>
-            <Toggle.Group
-              label={_(msg`Who can message you?`)}
-              type="radio"
-              values={[chatDeclation?.allowIncoming ?? 'following']}
-              onChange={onSelectItem}>
-              <View>
-                <Toggle.Item
-                  name="all"
-                  label={_(msg`Everyone`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Everyone</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="following"
-                  label={_(msg`Users I follow`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Users I follow</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="none"
-                  label={_(msg`No one`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>No one</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-              </View>
-            </Toggle.Group>
-          </View>
-        </View>
-        <Button
-          label={_(msg`Start chatting`)}
-          accessibilityHint={_(msg`Close modal`)}
-          size="large"
-          color="primary"
-          variant="solid"
-          onPress={() => control.close()}>
-          <ButtonText>
-            <Trans>Get started</Trans>
-          </ButtonText>
-        </Button>
-      </View>
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
-  )
-}
diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx
index 6cf561d117..9912456e13 100644
--- a/src/screens/Messages/ChatList.tsx
+++ b/src/screens/Messages/ChatList.tsx
@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {DialogControlProps, useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
-import {MessagesNUX} from '#/components/dms/MessagesNUX'
 import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotateCounterClockwise'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
@@ -151,8 +150,6 @@ export function MessagesScreen({navigation, route}: Props) {
   if (conversations.length < 1) {
     return (
       <View style={a.flex_1}>
-        <MessagesNUX />
-
         <CenteredView sideBorders={gtMobile} style={[a.h_full_vh]}>
           {gtMobile ? (
             <DesktopHeader
@@ -240,7 +237,6 @@ export function MessagesScreen({navigation, route}: Props) {
 
   return (
     <View style={a.flex_1}>
-      <MessagesNUX />
       {!gtMobile && (
         <ViewHeader
           title={_(msg`Messages`)}

From 1357ac3f2dbf448b586a8e168042428799796b03 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 14:45:39 -0700
Subject: [PATCH 39/66] bump

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 273d8ddb35..e40634685f 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.9",
+    "@haileyok/bluesky-bottom-sheet": "^0.1.1-alpha.11",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
diff --git a/yarn.lock b/yarn.lock
index e9f02f5ec4..68a374eeb3 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.9":
-  version "0.1.1-alpha.9"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.9.tgz#f23a9245d4fed5e1825222249f2ad64ec99896e6"
-  integrity sha512-duGQ/l20Mr/lmjS7lUu0T0QgARA/V47PrmpL7LZJMoK4IhSBHT4HMSjjOaBcSJhQg2I5/uSX3pShFzCfdGttVQ==
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.11":
+  version "0.1.1-alpha.11"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.11.tgz#a9c0e1c1903ba066c185481958f4ea9519cd5ba3"
+  integrity sha512-RtiEpEIXtejBzCtspFO7oEw6n87LnVQuSz+FGGEQZ6ywnRUBy6HZ5bpE3IFI7mmyF2YjAPg2nLzsqR9NXRMlhQ==
 
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"

From 3fabcc20d8e157431c3fe30aaf1a84af5d03a385 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 15:21:44 -0700
Subject: [PATCH 40/66] revert some changes

---
 src/components/Menu/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 809df96908..bfdcf4099d 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -105,11 +105,7 @@ export function Outer({
 export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   const t = useTheme()
   const {control} = React.useContext(Context)
-  const {
-    state: focused,
-    onIn: onHoverIn,
-    onOut: onHoverOut,
-  } = useInteractionState()
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const {
     state: pressed,
     onIn: onPressIn,
@@ -121,9 +117,15 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
+      onFocus={onFocus}
+      onBlur={onBlur}
       onPress={e => {
         control?.close()
         onPress(e)
+
+        if (!e.defaultPrevented) {
+          control?.close()
+        }
       }}
       onPressIn={e => {
         onPressIn()
@@ -133,8 +135,6 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         onPressOut()
         rest.onPressOut?.(e)
       }}
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
       style={[
         a.flex_row,
         a.align_center,

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 41/66] 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 42/66] 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 43/66] 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 44/66] 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 45/66] 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 46/66] 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 47/66] 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 48/66] 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 49/66] 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 50/66] 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>
     </>
   )

From 5c36d8c2e1619b8fca97bf10b8f15780ac08f177 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:24:02 -0700
Subject: [PATCH 51/66] remove unused type

---
 src/components/dms/ReportDialog.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index b2f497b7ad..60a18723b0 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -14,7 +14,6 @@ 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, useBreakpoints, useTheme} from '#/alf'
-import {BottomSheetButton} from '#/components/BottomSheetButton'
 import * as Dialog from '#/components/Dialog'
 import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
@@ -143,7 +142,7 @@ function SubmitStep({
 
   return (
     <View style={a.gap_lg}>
-      <BottomSheetButton
+      <Button
         size="small"
         variant="solid"
         color="secondary"
@@ -151,7 +150,7 @@ function SubmitStep({
         label={_(msg`Go back to previous step`)}
         onPress={goBack}>
         <ButtonIcon icon={Chevron} />
-      </BottomSheetButton>
+      </Button>
 
       <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
         <Text style={[a.text_2xl, a.font_bold]}>{copy.title}</Text>

From d007151f497d4170e11f2f6282e6b93446926ca7 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:53:05 -0700
Subject: [PATCH 52/66] move into repo

---
 modules/bottom-sheet/android/build.gradle     |  56 ++++++
 .../android/src/main/AndroidManifest.xml      |   2 +
 .../bottomsheet/BlueskyBottomSheetView.kt     | 133 +++++++++++++++
 .../modules/bottomsheet/BottomSheetModule.kt  |  50 ++++++
 .../expo/modules/bottomsheet/SheetView.kt     |  68 ++++++++
 modules/bottom-sheet/ios/BottomSheet.podspec  |  21 +++
 .../bottom-sheet/ios/BottomSheetModule.swift  |  46 +++++
 modules/bottom-sheet/ios/SheetManager.swift   |  28 +++
 modules/bottom-sheet/ios/SheetView.swift      | 161 ++++++++++++++++++
 .../ios/SheetViewController.swift             |  67 ++++++++
 modules/bottom-sheet/ios/Util.swift           |  18 ++
 modules/bottom-sheet/src/BottomSheet.types.ts |  22 +++
 modules/bottom-sheet/src/BottomSheetView.tsx  | 104 +++++++++++
 .../bottom-sheet/src/BottomSheetView.web.tsx  |   5 +
 package.json                                  |   1 -
 yarn.lock                                     |   5 -
 16 files changed, 781 insertions(+), 6 deletions(-)
 create mode 100644 modules/bottom-sheet/android/build.gradle
 create mode 100644 modules/bottom-sheet/android/src/main/AndroidManifest.xml
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
 create mode 100644 modules/bottom-sheet/ios/BottomSheet.podspec
 create mode 100644 modules/bottom-sheet/ios/BottomSheetModule.swift
 create mode 100644 modules/bottom-sheet/ios/SheetManager.swift
 create mode 100644 modules/bottom-sheet/ios/SheetView.swift
 create mode 100644 modules/bottom-sheet/ios/SheetViewController.swift
 create mode 100644 modules/bottom-sheet/ios/Util.swift
 create mode 100644 modules/bottom-sheet/src/BottomSheet.types.ts
 create mode 100644 modules/bottom-sheet/src/BottomSheetView.tsx
 create mode 100644 modules/bottom-sheet/src/BottomSheetView.web.tsx

diff --git a/modules/bottom-sheet/android/build.gradle b/modules/bottom-sheet/android/build.gradle
new file mode 100644
index 0000000000..555d34ed1f
--- /dev/null
+++ b/modules/bottom-sheet/android/build.gradle
@@ -0,0 +1,56 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.bottomsheet'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.bottomsheet"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  buildFeatures {
+    compose true
+  }
+  composeOptions {
+    kotlinCompilerExtensionVersion = "1.5.8"
+  }
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "androidx.compose.material3:material3:1.3.0"
+  implementation "androidx.compose.material:material:1.7.2"
+  implementation "com.facebook.react:react-native:+"
+}
diff --git a/modules/bottom-sheet/android/src/main/AndroidManifest.xml b/modules/bottom-sheet/android/src/main/AndroidManifest.xml
new file mode 100644
index 0000000000..bdae66c8f5
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/AndroidManifest.xml
@@ -0,0 +1,2 @@
+<manifest>
+</manifest>
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
new file mode 100644
index 0000000000..13dc402a07
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
@@ -0,0 +1,133 @@
+package expo.modules.bottomsheet
+
+import android.content.Context
+import android.view.View
+import android.widget.FrameLayout
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.platform.ComposeView
+import androidx.core.view.allViews
+import com.facebook.react.ReactRootView
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  val sheetState = mutableStateOf(SheetState())
+
+  private var reactRootView: ReactRootView? = null
+  private var innerView: View? = null
+
+  private var sheetView: ComposeView? = null
+
+  private val onStateChange by EventDispatcher()
+  private val onAttemptDismiss by EventDispatcher()
+
+  // Props
+  var preventDismiss = false
+  var minHeight = 0f
+  var maxHeight = 0f
+
+  private var isOpen: Boolean = false
+    set(value) {
+      if (field == value) return
+
+      field = value
+      this.sheetState.value.isOpen = value
+      onStateChange(mapOf(
+        "state" to if (value) "open" else "closed"
+      ))
+    }
+
+  private var isOpening: Boolean = false
+    set(value) {
+      field = value
+      if (value) {
+        onStateChange(mapOf("state" to "opening"))
+      }
+    }
+
+  private var isClosing: Boolean = false
+    set(value) {
+      field = value
+      if (value) {
+        onStateChange(mapOf("state" to "closing"))
+      }
+    }
+
+  private var hasInitiallyOpened = false
+
+  // Lifecycle
+
+  override fun addView(child: View?, index: Int) {
+    this.innerView = child
+  }
+
+  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+    this.innerView?.let {
+      val height = it.allViews.last().measuredHeight.toFloat()
+      this.present(height)
+    }
+  }
+
+  private fun destroy() {
+    this.isClosing = false
+    this.isOpen = false
+
+    this.getRootLayout().removeView(this.sheetView)
+    this.sheetView = null
+
+    this.reactRootView = null
+    this.innerView = null
+  }
+
+  // Presentation
+
+  private fun present(contentHeight: Float) {
+    val innerView = this.innerView ?: return
+
+    // For GestureRootView to work, we need to create a ReactRootView for the innerView to be
+    // contained inside of
+    val reactRootView = ReactRootView(context)
+    reactRootView.addView(innerView)
+    this.reactRootView = reactRootView
+
+    this.isOpening = true
+    this.sheetView = ComposeView(context).also {
+      it.setContent {
+        SheetView(
+          state = sheetState,
+          innerView = reactRootView,
+          contentHeight = innerView.height.toFloat(),
+          onDismissRequest = {
+            onAttemptDismiss(mapOf())
+            if (!preventDismiss) {
+              dismiss()
+            }
+          },
+          onExpanded = {
+            isOpening = false
+            isOpen = true
+            hasInitiallyOpened = true
+          },
+          onHidden = {
+            if (hasInitiallyOpened) {
+              destroy()
+            }
+          }
+        )
+      }
+      getRootLayout().addView(it)
+    }
+  }
+
+  fun dismiss() {
+    this.isClosing = true
+    this.destroy()
+  }
+
+  // Utils
+
+  private fun getRootLayout(): FrameLayout {
+    return appContext.currentActivity!!.findViewById(android.R.id.content)
+  }
+}
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
new file mode 100644
index 0000000000..d087301975
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
@@ -0,0 +1,50 @@
+package expo.modules.bottomsheet
+
+import android.graphics.Color
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class BottomSheetModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("BlueskyBottomSheet")
+
+    Function("getSafeAreaInset") {
+      return@Function 10 // @TODO
+    }
+
+    View(BottomSheetView::class) {
+      Events(arrayOf(
+        "onStateChange",
+        "onAttemptDismiss",
+      ))
+
+      AsyncFunction("dismiss") { view: BottomSheetView ->
+        view.dismiss()
+      }
+
+      Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
+        view.preventDismiss = prop
+      }
+
+      Prop("minHeight") { view: BottomSheetView, prop: Float ->
+        view.minHeight = prop
+      }
+
+      Prop("maxHeight") { view: BottomSheetView, prop: Float ->
+        view.maxHeight = prop
+      }
+
+      Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
+        view.sheetState.value.cornerRadius = prop
+      }
+
+      Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
+        view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+      }
+
+      Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
+        view.sheetState.value.preventExpansion = prop
+      }
+    }
+  }
+}
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
new file mode 100644
index 0000000000..8e5a37541f
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
@@ -0,0 +1,68 @@
+package expo.modules.bottomsheet
+
+import android.view.View
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+
+data class SheetState(
+  var isOpen: Boolean = false,
+  var cornerRadius: Float? = null,
+  var containerBackgroundColor: Int ? = null,
+  var preventExpansion: Boolean = false,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SheetView(
+  state: MutableState<SheetState>,
+  innerView: View,
+  contentHeight: Float,
+  onDismissRequest: () -> Unit,
+  onExpanded: () -> Unit,
+  onHidden: () -> Unit,
+) {
+  val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
+
+  ModalBottomSheet(
+    sheetState = sheetState,
+    onDismissRequest = onDismissRequest,
+    shape = RoundedCornerShape(
+      topStart = state.value.cornerRadius ?: 0f,
+      topEnd = state.value.cornerRadius ?: 0f,
+    ),
+    containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
+  ) {
+    Column(
+      Modifier.fillMaxWidth()
+        .height(contentHeight.dp)
+        // Prevent covering up the handle
+        .padding(top = 34.dp)
+    ) {
+      AndroidView(
+        factory = { innerView }
+      )
+    }
+  }
+
+  LaunchedEffect(sheetState.currentValue) {
+    if (sheetState.currentValue == SheetValue.PartiallyExpanded || sheetState.currentValue == SheetValue.Expanded) {
+      onExpanded()
+    } else if (sheetState.currentValue == SheetValue.Hidden) {
+      onHidden()
+    }
+  }
+}
diff --git a/modules/bottom-sheet/ios/BottomSheet.podspec b/modules/bottom-sheet/ios/BottomSheet.podspec
new file mode 100644
index 0000000000..a42356f614
--- /dev/null
+++ b/modules/bottom-sheet/ios/BottomSheet.podspec
@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'BottomSheet'
+  s.version        = '1.0.0'
+  s.summary        = 'A bottom sheet for use in Bluesky'
+  s.description    = 'A bottom sheet for use in Bluesky'
+  s.author         = ''
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '15.0', :tvos => '15.0' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,swift}"
+end
diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
new file mode 100644
index 0000000000..2b4498adf7
--- /dev/null
+++ b/modules/bottom-sheet/ios/BottomSheetModule.swift
@@ -0,0 +1,46 @@
+import ExpoModulesCore
+
+public class BottomSheetModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("BottomSheet")
+
+    AsyncFunction("dismissAll") {
+      SheetManager.shared.dismissAll()
+    }
+
+    View(SheetView.self) {
+      Events([
+        "onStateChange",
+        "onAttemptDismiss"
+      ])
+
+      AsyncFunction("dismiss") { (view: SheetView) in
+        view.dismiss()
+      }
+
+      AsyncFunction("updateLayout") { (view: SheetView) in
+        view.updateLayout()
+      }
+
+      Prop("cornerRadius") { (view: SheetView, prop: Float) in
+        view.cornerRadius = CGFloat(prop)
+      }
+
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
+
+      Prop("minHeight") { (view: SheetView, prop: Double) in
+        view.minHeight = prop
+      }
+
+      Prop("maxHeight") { (view: SheetView, prop: Double) in
+        view.maxHeight = prop
+      }
+
+      Prop("preventExpansion") { (view: SheetView, prop: Bool) in
+        view.preventExpansion = prop
+      }
+    }
+  }
+}
diff --git a/modules/bottom-sheet/ios/SheetManager.swift b/modules/bottom-sheet/ios/SheetManager.swift
new file mode 100644
index 0000000000..c46954c033
--- /dev/null
+++ b/modules/bottom-sheet/ios/SheetManager.swift
@@ -0,0 +1,28 @@
+//
+//  SheetManager.swift
+//  Pods
+//
+//  Created by Hailey on 10/1/24.
+//
+
+import ExpoModulesCore
+
+class SheetManager {
+  static let shared = SheetManager()
+
+  private var sheetViews = NSHashTable<SheetView>(options: .weakMemory)
+  
+  func add(_ view: SheetView) {
+    sheetViews.add(view)
+  }
+  
+  func remove(_ view: SheetView) {
+    sheetViews.remove(view)
+  }
+  
+  func dismissAll() {
+    sheetViews.allObjects.forEach { sheetView in
+      sheetView.dismiss()
+    }
+  }
+}
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
new file mode 100644
index 0000000000..ccf7fcb23d
--- /dev/null
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -0,0 +1,161 @@
+import ExpoModulesCore
+import UIKit
+
+class SheetView: ExpoView, UISheetPresentationControllerDelegate {
+  // Views
+  private var sheetVc: SheetViewController?
+  private var innerView: UIView?
+
+  // Events
+  private let onStateChange = EventDispatcher()
+  private let onAttemptDismiss = EventDispatcher()
+
+  // Open event firing
+  private var isOpen: Bool = false {
+    didSet {
+      onStateChange([
+        "state": isOpen ? "open" : "closed"
+      ])
+    }
+  }
+
+  // React view props
+  var preventDismiss = false
+  var preventExpansion = false
+  var cornerRadius: CGFloat?
+  var minHeight = 0.0
+  var maxHeight: CGFloat! {
+    didSet {
+      let screenHeight = Util.getScreenHeight() ?? 0
+      if maxHeight > screenHeight {
+        maxHeight = screenHeight
+      }
+    }
+  }
+
+  private var isOpening = false {
+    didSet {
+      if isOpening {
+        onStateChange([
+          "state": "opening"
+        ])
+      }
+    }
+  }
+  private var isClosing = false {
+    didSet {
+      if isClosing {
+        onStateChange([
+          "state": "closing"
+        ])
+      }
+    }
+  }
+
+  // MARK: - Lifecycle
+
+  required init (appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    self.maxHeight = Util.getScreenHeight()
+    SheetManager.shared.add(self)
+  }
+
+  deinit {
+    self.destroy()
+  }
+
+  // We don't want this view to actually get added to the tree, so we'll simply store it for adding
+  // to the SheetViewController
+  override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    self.innerView = subview
+  }
+
+  // We'll grab the content height from here so we know the initial detent to set
+  override func layoutSubviews() {
+    super.layoutSubviews()
+
+    guard let innerView = self.innerView else {
+      return
+    }
+
+    if innerView.subviews.count != 1 {
+      return
+    }
+
+    self.present(contentHeight: innerView.subviews[0].frame.size.height)
+  }
+
+  private func destroy() {
+    self.isClosing = false
+    self.isOpen = false
+    self.sheetVc = nil
+    self.innerView = nil
+    SheetManager.shared.remove(self)
+  }
+
+  // MARK: - Presentation
+
+  func present(contentHeight: CGFloat) {
+    guard !self.isOpen,
+          let innerView = self.innerView,
+          let rvc = self.reactViewController() else {
+      return
+    }
+
+    let sheetVc = SheetViewController()
+    if let sheet = sheetVc.sheetPresentationController {
+      sheet.delegate = self
+      sheet.preferredCornerRadius = self.cornerRadius
+    }
+    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
+    sheetVc.view.addSubview(innerView)
+
+    self.sheetVc = sheetVc
+    self.isOpening = true
+
+    rvc.present(sheetVc, animated: true) { [weak self] in
+      self?.isOpening = false
+      self?.isOpen = true
+    }
+  }
+
+  func updateLayout() {
+    if let contentHeight = self.innerView?.subviews[0].frame.size.height {
+      self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight),
+                               preventExpansion: self.preventExpansion)
+    }
+  }
+
+  func dismiss() {
+    self.isClosing = true
+    self.sheetVc?.dismiss(animated: true) { [weak self] in
+      self?.destroy()
+    }
+  }
+
+  // MARK: - Utils
+
+  private func clampHeight(_ height: CGFloat) -> CGFloat {
+    if height < self.minHeight {
+      return self.minHeight
+    } else if height > self.maxHeight {
+      return self.maxHeight
+    }
+    return height
+  }
+
+  // MARK: - UISheetPresentationControllerDelegate
+
+  func presentationControllerShouldDismiss(_ presentationController: UIPresentationController) -> Bool {
+    self.onAttemptDismiss()
+    return !self.preventDismiss
+  }
+
+  func presentationControllerWillDismiss(_ presentationController: UIPresentationController) {
+    self.isClosing = true
+  }
+
+  func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
+    self.destroy()
+  }
+}
diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
new file mode 100644
index 0000000000..9caa5bab14
--- /dev/null
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -0,0 +1,67 @@
+//
+//  SheetViewController.swift
+//  Pods
+//
+//  Created by Hailey on 9/30/24.
+//
+
+import Foundation
+import UIKit
+
+class SheetViewController: UIViewController {
+  init() {
+    super.init(nibName: nil, bundle: nil)
+
+    self.modalPresentationStyle = .formSheet
+    self.isModalInPresentation = false
+
+    if let sheet = self.sheetPresentationController {
+      sheet.prefersGrabberVisible = true
+    }
+  }
+
+  func setDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    guard let sheet = self.sheetPresentationController,
+          let screenHeight = Util.getScreenHeight()
+    else {
+      return
+    }
+
+    if contentHeight > screenHeight {
+      sheet.detents = [
+        .large()
+      ]
+    } else {
+      if #available(iOS 16.0, *) {
+        sheet.detents = [
+          .custom { _ in
+            return contentHeight
+          }
+        ]
+      } else {
+        sheet.detents = [
+          .medium()
+        ]
+      }
+    }
+
+    if !preventExpansion {
+      sheet.detents.append(.large())
+    }
+  }
+
+  func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    if let sheet = self.sheetPresentationController {
+      sheet.animateChanges {
+        self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
+        if #available(iOS 16.0, *) {
+          sheet.invalidateDetents()
+        }
+      }
+    }
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+}
diff --git a/modules/bottom-sheet/ios/Util.swift b/modules/bottom-sheet/ios/Util.swift
new file mode 100644
index 0000000000..c654596a74
--- /dev/null
+++ b/modules/bottom-sheet/ios/Util.swift
@@ -0,0 +1,18 @@
+//
+//  Util.swift
+//  Pods
+//
+//  Created by Hailey on 10/2/24.
+//
+
+class Util {
+  static func getScreenHeight() -> CGFloat? {
+    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+     let window = windowScene.windows.first {
+      let safeAreaInsets = window.safeAreaInsets
+      let fullScreenHeight = UIScreen.main.bounds.height
+      return fullScreenHeight - (safeAreaInsets.top + safeAreaInsets.bottom)
+    }
+    return nil
+  }
+}
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
new file mode 100644
index 0000000000..8177df5787
--- /dev/null
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -0,0 +1,22 @@
+import React from 'react'
+import {ColorValue, NativeSyntheticEvent} from 'react-native'
+
+export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
+
+export interface BottomSheetViewProps {
+  children: React.ReactNode
+  cornerRadius?: number
+  preventDismiss?: boolean
+  preventExpansion?: boolean
+  containerBackgroundColor?: ColorValue
+  topInset?: number
+  bottomInset?: number
+
+  minHeight?: number
+  maxHeight?: number
+
+  onStateChange?: (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => void
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+}
diff --git a/modules/bottom-sheet/src/BottomSheetView.tsx b/modules/bottom-sheet/src/BottomSheetView.tsx
new file mode 100644
index 0000000000..90d60e8696
--- /dev/null
+++ b/modules/bottom-sheet/src/BottomSheetView.tsx
@@ -0,0 +1,104 @@
+import * as React from 'react'
+import {
+  ColorValue,
+  Dimensions,
+  NativeSyntheticEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
+
+const screenHeight = Dimensions.get('screen').height
+
+const NativeView: React.ComponentType<
+  BottomSheetViewProps & {
+    ref: React.RefObject<any>
+    style: StyleProp<ViewStyle>
+  }
+> = requireNativeViewManager('BlueskyBottomSheet')
+
+export class BottomSheetView extends React.Component<
+  BottomSheetViewProps,
+  {
+    open: boolean
+  }
+> {
+  ref = React.createRef<any>()
+
+  constructor(props: BottomSheetViewProps) {
+    super(props)
+    this.state = {
+      open: false,
+    }
+  }
+
+  present() {
+    this.setState({open: true})
+  }
+
+  dismiss() {
+    this.ref.current?.dismiss()
+  }
+
+  private onStateChange = (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => {
+    const {state} = event.nativeEvent
+    const isOpen = state !== 'closed'
+    this.setState({open: isOpen})
+    this.props.onStateChange?.(event)
+  }
+
+  private getBackgroundColor = (): ColorValue | undefined => {
+    const parent = React.Children.toArray(
+      this.props.children,
+    )[0] as React.ReactElement
+    if (parent?.props?.style) {
+      const parentStyle = StyleSheet.flatten(parent.props.style) as ViewStyle
+      return parentStyle.backgroundColor ?? 'transparent'
+    }
+    return undefined
+  }
+
+  private updateLayout = () => {
+    this.ref.current?.updateLayout()
+  }
+
+  render() {
+    const {children, ...rest} = this.props
+    const topInset = rest.topInset ?? 0
+    const bottomInset = rest.bottomInset ?? 0
+
+    if (!this.state.open) {
+      return null
+    }
+
+    const backgroundColor = this.getBackgroundColor()
+    return (
+      <NativeView
+        {...rest}
+        onStateChange={this.onStateChange}
+        ref={this.ref}
+        style={{
+          position: 'absolute',
+          height: screenHeight - topInset - bottomInset,
+          width: '100%',
+        }}
+        containerBackgroundColor={backgroundColor}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor,
+            paddingTop: topInset,
+            paddingBottom: bottomInset,
+          }}>
+          <View onLayout={this.updateLayout}>{children}</View>
+        </View>
+      </NativeView>
+    )
+  }
+}
diff --git a/modules/bottom-sheet/src/BottomSheetView.web.tsx b/modules/bottom-sheet/src/BottomSheetView.web.tsx
new file mode 100644
index 0000000000..17cfe1e66a
--- /dev/null
+++ b/modules/bottom-sheet/src/BottomSheetView.web.tsx
@@ -0,0 +1,5 @@
+import {BottomSheetViewProps} from './BottomSheet.types'
+
+export function BottomSheetView(_: BottomSheetViewProps) {
+  throw new Error('BottomSheetView is not available on web')
+}
diff --git a/package.json b/package.json
index e40634685f..6352440296 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "@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.11",
     "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
diff --git a/yarn.lock b/yarn.lock
index 68a374eeb3..6ff953ba53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4120,11 +4120,6 @@
   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.11":
-  version "0.1.1-alpha.11"
-  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.11.tgz#a9c0e1c1903ba066c185481958f4ea9519cd5ba3"
-  integrity sha512-RtiEpEIXtejBzCtspFO7oEw6n87LnVQuSz+FGGEQZ6ywnRUBy6HZ5bpE3IFI7mmyF2YjAPg2nLzsqR9NXRMlhQ==
-
 "@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 2ac8308ecbd4f8f3454af87c20c1aaadce9bfe8f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:53:33 -0700
Subject: [PATCH 53/66] lint

---
 .../bottomsheet/BlueskyBottomSheetView.kt     | 87 +++++++++++--------
 .../modules/bottomsheet/BottomSheetModule.kt  | 77 ++++++++--------
 .../expo/modules/bottomsheet/SheetView.kt     | 18 ++--
 modules/bottom-sheet/ios/SheetManager.swift   |  6 +-
 4 files changed, 105 insertions(+), 83 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
index 13dc402a07..f557034b77 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
@@ -11,7 +11,10 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 
-class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+class BottomSheetView(
+  context: Context,
+  appContext: AppContext,
+) : ExpoView(context, appContext) {
   val sheetState = mutableStateOf(SheetState())
 
   private var reactRootView: ReactRootView? = null
@@ -33,9 +36,11 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
 
       field = value
       this.sheetState.value.isOpen = value
-      onStateChange(mapOf(
-        "state" to if (value) "open" else "closed"
-      ))
+      onStateChange(
+        mapOf(
+          "state" to if (value) "open" else "closed",
+        ),
+      )
     }
 
   private var isOpening: Boolean = false
@@ -58,13 +63,26 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
 
   // Lifecycle
 
-  override fun addView(child: View?, index: Int) {
+  override fun addView(
+    child: View?,
+    index: Int,
+  ) {
     this.innerView = child
   }
 
-  override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
+  override fun onLayout(
+    changed: Boolean,
+    l: Int,
+    t: Int,
+    r: Int,
+    b: Int,
+  ) {
     this.innerView?.let {
-      val height = it.allViews.last().measuredHeight.toFloat()
+      val height =
+        it.allViews
+          .last()
+          .measuredHeight
+          .toFloat()
       this.present(height)
     }
   }
@@ -92,32 +110,33 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
     this.reactRootView = reactRootView
 
     this.isOpening = true
-    this.sheetView = ComposeView(context).also {
-      it.setContent {
-        SheetView(
-          state = sheetState,
-          innerView = reactRootView,
-          contentHeight = innerView.height.toFloat(),
-          onDismissRequest = {
-            onAttemptDismiss(mapOf())
-            if (!preventDismiss) {
-              dismiss()
-            }
-          },
-          onExpanded = {
-            isOpening = false
-            isOpen = true
-            hasInitiallyOpened = true
-          },
-          onHidden = {
-            if (hasInitiallyOpened) {
-              destroy()
-            }
-          }
-        )
+    this.sheetView =
+      ComposeView(context).also {
+        it.setContent {
+          SheetView(
+            state = sheetState,
+            innerView = reactRootView,
+            contentHeight = innerView.height.toFloat(),
+            onDismissRequest = {
+              onAttemptDismiss(mapOf())
+              if (!preventDismiss) {
+                dismiss()
+              }
+            },
+            onExpanded = {
+              isOpening = false
+              isOpen = true
+              hasInitiallyOpened = true
+            },
+            onHidden = {
+              if (hasInitiallyOpened) {
+                destroy()
+              }
+            },
+          )
+        }
+        getRootLayout().addView(it)
       }
-      getRootLayout().addView(it)
-    }
   }
 
   fun dismiss() {
@@ -127,7 +146,5 @@ class BottomSheetView(context: Context, appContext: AppContext) : ExpoView(conte
 
   // Utils
 
-  private fun getRootLayout(): FrameLayout {
-    return appContext.currentActivity!!.findViewById(android.R.id.content)
-  }
+  private fun getRootLayout(): FrameLayout = appContext.currentActivity!!.findViewById(android.R.id.content)
 }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
index d087301975..72e0213f5a 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
@@ -5,46 +5,49 @@ import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 
 class BottomSheetModule : Module() {
-  override fun definition() = ModuleDefinition {
-    Name("BlueskyBottomSheet")
+  override fun definition() =
+    ModuleDefinition {
+      Name("BlueskyBottomSheet")
 
-    Function("getSafeAreaInset") {
-      return@Function 10 // @TODO
-    }
-
-    View(BottomSheetView::class) {
-      Events(arrayOf(
-        "onStateChange",
-        "onAttemptDismiss",
-      ))
-
-      AsyncFunction("dismiss") { view: BottomSheetView ->
-        view.dismiss()
-      }
-
-      Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
-        view.preventDismiss = prop
-      }
-
-      Prop("minHeight") { view: BottomSheetView, prop: Float ->
-        view.minHeight = prop
-      }
-
-      Prop("maxHeight") { view: BottomSheetView, prop: Float ->
-        view.maxHeight = prop
-      }
-
-      Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
-        view.sheetState.value.cornerRadius = prop
-      }
-
-      Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
-        view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+      Function("getSafeAreaInset") {
+        return@Function 10 // @TODO
       }
 
-      Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
-        view.sheetState.value.preventExpansion = prop
+      View(BottomSheetView::class) {
+        Events(
+          arrayOf(
+            "onStateChange",
+            "onAttemptDismiss",
+          ),
+        )
+
+        AsyncFunction("dismiss") { view: BottomSheetView ->
+          view.dismiss()
+        }
+
+        Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
+          view.preventDismiss = prop
+        }
+
+        Prop("minHeight") { view: BottomSheetView, prop: Float ->
+          view.minHeight = prop
+        }
+
+        Prop("maxHeight") { view: BottomSheetView, prop: Float ->
+          view.maxHeight = prop
+        }
+
+        Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
+          view.sheetState.value.cornerRadius = prop
+        }
+
+        Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
+          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+        }
+
+        Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
+          view.sheetState.value.preventExpansion = prop
+        }
       }
     }
-  }
 }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
index 8e5a37541f..cf12597590 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
@@ -21,7 +21,7 @@ import androidx.compose.ui.viewinterop.AndroidView
 data class SheetState(
   var isOpen: Boolean = false,
   var cornerRadius: Float? = null,
-  var containerBackgroundColor: Int ? = null,
+  var containerBackgroundColor: Int? = null,
   var preventExpansion: Boolean = false,
 )
 
@@ -40,20 +40,22 @@ fun SheetView(
   ModalBottomSheet(
     sheetState = sheetState,
     onDismissRequest = onDismissRequest,
-    shape = RoundedCornerShape(
-      topStart = state.value.cornerRadius ?: 0f,
-      topEnd = state.value.cornerRadius ?: 0f,
-    ),
+    shape =
+      RoundedCornerShape(
+        topStart = state.value.cornerRadius ?: 0f,
+        topEnd = state.value.cornerRadius ?: 0f,
+      ),
     containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
   ) {
     Column(
-      Modifier.fillMaxWidth()
+      Modifier
+        .fillMaxWidth()
         .height(contentHeight.dp)
         // Prevent covering up the handle
-        .padding(top = 34.dp)
+        .padding(top = 34.dp),
     ) {
       AndroidView(
-        factory = { innerView }
+        factory = { innerView },
       )
     }
   }
diff --git a/modules/bottom-sheet/ios/SheetManager.swift b/modules/bottom-sheet/ios/SheetManager.swift
index c46954c033..e4e843bea5 100644
--- a/modules/bottom-sheet/ios/SheetManager.swift
+++ b/modules/bottom-sheet/ios/SheetManager.swift
@@ -11,15 +11,15 @@ class SheetManager {
   static let shared = SheetManager()
 
   private var sheetViews = NSHashTable<SheetView>(options: .weakMemory)
-  
+
   func add(_ view: SheetView) {
     sheetViews.add(view)
   }
-  
+
   func remove(_ view: SheetView) {
     sheetViews.remove(view)
   }
-  
+
   func dismissAll() {
     sheetViews.allObjects.forEach { sheetView in
       sheetView.dismiss()

From 52532fb3fff3bf5808f93f68a81bcc5e1b6e514c Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:53:42 -0700
Subject: [PATCH 54/66] add config

---
 modules/bottom-sheet/expo-module.config.json | 9 +++++++++
 modules/bottom-sheet/index.ts                | 4 ++++
 2 files changed, 13 insertions(+)
 create mode 100644 modules/bottom-sheet/expo-module.config.json
 create mode 100644 modules/bottom-sheet/index.ts

diff --git a/modules/bottom-sheet/expo-module.config.json b/modules/bottom-sheet/expo-module.config.json
new file mode 100644
index 0000000000..81b5b078ed
--- /dev/null
+++ b/modules/bottom-sheet/expo-module.config.json
@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modules": ["BottomSheetModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.bottomsheet.BottomSheetModule"]
+  }
+}
diff --git a/modules/bottom-sheet/index.ts b/modules/bottom-sheet/index.ts
new file mode 100644
index 0000000000..ea0c87b83e
--- /dev/null
+++ b/modules/bottom-sheet/index.ts
@@ -0,0 +1,4 @@
+import {BottomSheetState, BottomSheetViewProps} from './src/BottomSheet.types'
+import {BottomSheetView} from './src/BottomSheetView'
+
+export {type BottomSheetState, BottomSheetView, type BottomSheetViewProps}

From 2b98055f0e2ea1f19d38b4c64a43681303ea2551 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 17:54:56 -0700
Subject: [PATCH 55/66] update type imports

---
 src/components/Dialog/index.tsx | 8 ++++----
 src/components/Dialog/types.ts  | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 7493e7748b..0695c11ebf 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -2,7 +2,6 @@ import React, {useImperativeHandle} from 'react'
 import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
 import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {BlueskyBottomSheetView} from '@haileyok/bluesky-bottom-sheet'
 
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
@@ -17,6 +16,7 @@ import {
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
 import {Portal} from '#/components/Portal'
+import {BottomSheetView} from '../../../modules/bottom-sheet'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
@@ -52,7 +52,7 @@ export function OuterWithoutPortal({
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
-  const ref = React.useRef<BlueskyBottomSheetView>(null)
+  const ref = React.useRef<BottomSheetView>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
@@ -109,7 +109,7 @@ export function OuterWithoutPortal({
 
   return (
     <Context.Provider value={context}>
-      <BlueskyBottomSheetView
+      <BottomSheetView
         ref={ref}
         topInset={30}
         bottomInset={insets.bottom}
@@ -123,7 +123,7 @@ export function OuterWithoutPortal({
         <Wrapper testID={testID} style={[t.atoms.bg]}>
           {children}
         </Wrapper>
-      </BlueskyBottomSheetView>
+      </BottomSheetView>
     </Context.Provider>
   )
 }
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index a8568e5748..c5219e5eab 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -4,9 +4,9 @@ import type {
   GestureResponderEvent,
   ScrollViewProps,
 } from 'react-native'
-import {BlueskyBottomSheetViewProps} from '@haileyok/bluesky-bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
+import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
 
 type A11yProps = Required<AccessibilityProps>
 
@@ -53,7 +53,7 @@ export type DialogControlOpenOptions = {
 export type DialogOuterProps = {
   control: DialogControlProps
   onClose?: () => void
-  nativeOptions?: Omit<BlueskyBottomSheetViewProps, 'children'>
+  nativeOptions?: Omit<BottomSheetViewProps, 'children'>
   webOptions?: {}
   testID?: string
 }

From 7ee865f75d0ef8be323ccb0a2b44543c4da29d10 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 18:05:23 -0700
Subject: [PATCH 56/66] fix import

---
 modules/bottom-sheet/src/BottomSheetView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/bottom-sheet/src/BottomSheetView.tsx b/modules/bottom-sheet/src/BottomSheetView.tsx
index 90d60e8696..b42c97587c 100644
--- a/modules/bottom-sheet/src/BottomSheetView.tsx
+++ b/modules/bottom-sheet/src/BottomSheetView.tsx
@@ -19,7 +19,7 @@ const NativeView: React.ComponentType<
     ref: React.RefObject<any>
     style: StyleProp<ViewStyle>
   }
-> = requireNativeViewManager('BlueskyBottomSheet')
+> = requireNativeViewManager('BottomSheet')
 
 export class BottomSheetView extends React.Component<
   BottomSheetViewProps,

From 7489a70735afc759560535b767f2477ba388a005 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 18:05:57 -0700
Subject: [PATCH 57/66] add event to ios

---
 .../bottom-sheet/ios/BottomSheetModule.swift    |  3 ++-
 modules/bottom-sheet/ios/SheetView.swift        | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
index 2b4498adf7..01ffef67c7 100644
--- a/modules/bottom-sheet/ios/BottomSheetModule.swift
+++ b/modules/bottom-sheet/ios/BottomSheetModule.swift
@@ -10,8 +10,9 @@ public class BottomSheetModule: Module {
 
     View(SheetView.self) {
       Events([
+        "onAttemptDismiss",
+        "onSnapPointChange",
         "onStateChange",
-        "onAttemptDismiss"
       ])
 
       AsyncFunction("dismiss") { (view: SheetView) in
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index ccf7fcb23d..2146f1bc03 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -7,8 +7,9 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   private var innerView: UIView?
 
   // Events
-  private let onStateChange = EventDispatcher()
   private let onAttemptDismiss = EventDispatcher()
+  private let onSnapPointChange = EventDispatcher()
+  private let onStateChange = EventDispatcher()
 
   // Open event firing
   private var isOpen: Bool = false {
@@ -158,4 +159,18 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
     self.destroy()
   }
+  
+  func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
+    let identifier = sheetPresentationController.selectedDetentIdentifier
+    
+    if identifier == .large {
+      onSnapPointChange([
+        "snapPoint": 2,
+      ])
+    } else {
+      onSnapPointChange([
+        "snapPoint": 1,
+      ])
+    }
+  }
 }

From 0ce5d449f71573bc0ba6cdeec683151e4703f50d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 18:21:56 -0700
Subject: [PATCH 58/66] simplify logic

---
 modules/bottom-sheet/index.ts                 | 13 ++++++--
 modules/bottom-sheet/ios/SheetView.swift      | 31 ++++++++++++-------
 modules/bottom-sheet/src/BottomSheet.types.ts | 11 ++++++-
 src/components/Dialog/context.ts              |  2 ++
 src/components/Dialog/index.tsx               | 26 +++++++++++++---
 src/components/Dialog/types.ts                |  2 ++
 6 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/modules/bottom-sheet/index.ts b/modules/bottom-sheet/index.ts
index ea0c87b83e..2eae5bfc2f 100644
--- a/modules/bottom-sheet/index.ts
+++ b/modules/bottom-sheet/index.ts
@@ -1,4 +1,13 @@
-import {BottomSheetState, BottomSheetViewProps} from './src/BottomSheet.types'
+import {
+  BottomSheetSnapPoint,
+  BottomSheetState,
+  BottomSheetViewProps,
+} from './src/BottomSheet.types'
 import {BottomSheetView} from './src/BottomSheetView'
 
-export {type BottomSheetState, BottomSheetView, type BottomSheetViewProps}
+export {
+  BottomSheetSnapPoint,
+  type BottomSheetState,
+  BottomSheetView,
+  type BottomSheetViewProps,
+}
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index 2146f1bc03..c4db60994c 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -52,6 +52,22 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
       }
     }
   }
+  private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
+    didSet {
+      guard let selectedDetentIdentifier else {
+        return
+      }
+      if selectedDetentIdentifier == .large {
+        onSnapPointChange([
+          "snapPoint": 2
+        ])
+      } else {
+        onSnapPointChange([
+          "snapPoint": 1
+        ])
+      }
+    }
+  }
 
   // MARK: - Lifecycle
 
@@ -104,11 +120,12 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     }
 
     let sheetVc = SheetViewController()
+    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
     if let sheet = sheetVc.sheetPresentationController {
       sheet.delegate = self
       sheet.preferredCornerRadius = self.cornerRadius
+      self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
     }
-    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
     sheetVc.view.addSubview(innerView)
 
     self.sheetVc = sheetVc
@@ -161,16 +178,6 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   }
   
   func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
-    let identifier = sheetPresentationController.selectedDetentIdentifier
-    
-    if identifier == .large {
-      onSnapPointChange([
-        "snapPoint": 2,
-      ])
-    } else {
-      onSnapPointChange([
-        "snapPoint": 1,
-      ])
-    }
+    self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
   }
 }
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index 8177df5787..d08e985fa7 100644
--- a/modules/bottom-sheet/src/BottomSheet.types.ts
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -3,6 +3,12 @@ import {ColorValue, NativeSyntheticEvent} from 'react-native'
 
 export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
 
+export enum BottomSheetSnapPoint {
+  Hidden,
+  Partial,
+  Full,
+}
+
 export interface BottomSheetViewProps {
   children: React.ReactNode
   cornerRadius?: number
@@ -15,8 +21,11 @@ export interface BottomSheetViewProps {
   minHeight?: number
   maxHeight?: number
 
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+  onSnapPointChange?: (
+    event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
+  ) => void
   onStateChange?: (
     event: NativeSyntheticEvent<{state: BottomSheetState}>,
   ) => void
-  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
 }
diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
index 27b8a56375..058d09b25d 100644
--- a/src/components/Dialog/context.ts
+++ b/src/components/Dialog/context.ts
@@ -6,10 +6,12 @@ import {
   DialogControlRefProps,
   DialogOuterProps,
 } from '#/components/Dialog/types'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 export const Context = React.createContext<DialogContextProps>({
   close: () => {},
   insideDialog: false,
+  snapPoint: BottomSheetSnapPoint.Hidden,
 })
 
 export function useDialogContext() {
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 0695c11ebf..54d303396b 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -8,7 +8,7 @@ import {isIOS} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, flatten, useTheme} from '#/alf'
-import {Context} from '#/components/Dialog/context'
+import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
   DialogControlProps,
   DialogInnerProps,
@@ -16,7 +16,10 @@ import {
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
 import {Portal} from '#/components/Portal'
-import {BottomSheetView} from '../../../modules/bottom-sheet'
+import {
+  BottomSheetSnapPoint,
+  BottomSheetView,
+} from '../../../modules/bottom-sheet'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
@@ -57,6 +60,10 @@ export function OuterWithoutPortal({
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
 
+  const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
+    BottomSheetSnapPoint.Partial,
+  )
+
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
       try {
@@ -103,7 +110,10 @@ export function OuterWithoutPortal({
     [open, close],
   )
 
-  const context = React.useMemo(() => ({close, insideDialog: true}), [close])
+  const context = React.useMemo(
+    () => ({close, insideDialog: true, snapPoint}),
+    [close, snapPoint],
+  )
 
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
@@ -113,6 +123,10 @@ export function OuterWithoutPortal({
         ref={ref}
         topInset={30}
         bottomInset={insets.bottom}
+        onSnapPointChange={e => {
+          console.log(e.nativeEvent)
+          setSnapPoint(e.nativeEvent.snapPoint)
+        }}
         onStateChange={e => {
           if (e.nativeEvent.state === 'closed') {
             onCloseAnimationComplete()
@@ -147,8 +161,12 @@ export function Inner({children, style}: DialogInnerProps) {
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style}, ref) {
     const insets = useSafeAreaInsets()
+    const {snapPoint} = useDialogContext()
     return (
-      <ScrollView style={[a.px_xl, style]} ref={ref}>
+      <ScrollView
+        style={[a.px_xl, style]}
+        ref={ref}
+        bounces={snapPoint === BottomSheetSnapPoint.Full}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
       </ScrollView>
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index c5219e5eab..a964f29c89 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -7,6 +7,7 @@ import type {
 
 import {ViewStyleProp} from '#/alf'
 import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 type A11yProps = Required<AccessibilityProps>
 
@@ -38,6 +39,7 @@ export type DialogControlProps = DialogControlRefProps & {
 export type DialogContextProps = {
   close: DialogControlProps['close']
   insideDialog: boolean
+  snapPoint: BottomSheetSnapPoint
 }
 
 export type DialogControlOpenOptions = {

From b6adc935c40f2199bde12d32c32b82702a3d7af8 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 18:25:07 -0700
Subject: [PATCH 59/66] ensure event fires on open

---
 modules/bottom-sheet/ios/SheetView.swift | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index c4db60994c..6c223ef690 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -54,9 +54,6 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   }
   private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
     didSet {
-      guard let selectedDetentIdentifier else {
-        return
-      }
       if selectedDetentIdentifier == .large {
         onSnapPointChange([
           "snapPoint": 2

From 086dde7028a3c874699be5e569e1b29f68fa0e08 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 18:27:13 -0700
Subject: [PATCH 60/66] log

---
 src/components/Dialog/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 54d303396b..18b4b7889d 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -124,7 +124,6 @@ export function OuterWithoutPortal({
         topInset={30}
         bottomInset={insets.bottom}
         onSnapPointChange={e => {
-          console.log(e.nativeEvent)
           setSnapPoint(e.nativeEvent.snapPoint)
         }}
         onStateChange={e => {

From 83d1c381f7f035e3a6044408ef11b5e9213d478a Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Wed, 2 Oct 2024 20:51:36 -0500
Subject: [PATCH 61/66] Allow default PressableComponent override

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

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 9483089072..cc04bb254e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -117,7 +117,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      PressableComponent = Pressable,
+      PressableComponent,
       ...rest
     },
     ref,

From 639a7ea3b0affe12c001c74bd23c39dc2169571f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 19:00:33 -0700
Subject: [PATCH 62/66] fix accessibility

---
 src/components/Button.tsx                  | 1 +
 src/components/NormalizedRNGHPressable.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index cc04bb254e..3a50ea2643 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-ignore - this will always be a pressable
         ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 351005619d..bfafb2323a 100644
--- a/src/components/NormalizedRNGHPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -122,6 +122,8 @@ export class NormalizedRNGHPressable extends React.Component<PressableProps> {
         onPressOut={this.onPressOut}
         onHoverIn={this.onHoverIn}
         onHoverOut={this.onHoverOut}
+        accessible={true}
+        accessibilityRole="button"
       />
     )
   }

From 8295c237504fb37d8b92498a65c77713357c5243 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 19:04:36 -0700
Subject: [PATCH 63/66] before spread

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

diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index bfafb2323a..2cf2249fc6 100644
--- a/src/components/NormalizedRNGHPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -115,6 +115,8 @@ export class NormalizedRNGHPressable extends React.Component<PressableProps> {
   render() {
     return (
       <BSPressable
+        accessible={true}
+        accessibilityRole="button"
         {...this.props}
         onPress={this.onPress}
         onLongPress={this.onLongPress}
@@ -122,8 +124,6 @@ export class NormalizedRNGHPressable extends React.Component<PressableProps> {
         onPressOut={this.onPressOut}
         onHoverIn={this.onHoverIn}
         onHoverOut={this.onHoverOut}
-        accessible={true}
-        accessibilityRole="button"
       />
     )
   }

From b64a2941aa616886a69552d8a7f4864295695cef Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 19:08:46 -0700
Subject: [PATCH 64/66] clean

---
 modules/bottom-sheet/ios/BottomSheetModule.swift | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
index 01ffef67c7..22b9104ffb 100644
--- a/modules/bottom-sheet/ios/BottomSheetModule.swift
+++ b/modules/bottom-sheet/ios/BottomSheetModule.swift
@@ -27,10 +27,6 @@ public class BottomSheetModule: Module {
         view.cornerRadius = CGFloat(prop)
       }
 
-      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
-        view.preventDismiss = prop
-      }
-
       Prop("minHeight") { (view: SheetView, prop: Double) in
         view.minHeight = prop
       }
@@ -38,6 +34,10 @@ public class BottomSheetModule: Module {
       Prop("maxHeight") { (view: SheetView, prop: Double) in
         view.maxHeight = prop
       }
+      
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
 
       Prop("preventExpansion") { (view: SheetView, prop: Bool) in
         view.preventExpansion = prop

From 97c505327eb4ee681a59fa4af78e0dd6c6bc5ba9 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 19:29:28 -0700
Subject: [PATCH 65/66] implement keyboard handling

---
 package.json                          | 2 +-
 src/components/Dialog/index.tsx       | 9 ++++++---
 src/components/ReportDialog/index.tsx | 4 ----
 src/components/dms/ReportDialog.tsx   | 2 --
 yarn.lock                             | 8 ++++----
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 6352440296..6e063522e7 100644
--- a/package.json
+++ b/package.json
@@ -175,7 +175,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "0.41.2",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.12.1",
+    "react-native-keyboard-controller": "^1.14.0",
     "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^9.1.3",
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 18b4b7889d..85dc14fa21 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,6 +1,7 @@
 import React, {useImperativeHandle} from 'react'
 import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
 import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {logger} from '#/logger'
@@ -162,13 +163,15 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const insets = useSafeAreaInsets()
     const {snapPoint} = useDialogContext()
     return (
-      <ScrollView
+      <KeyboardAwareScrollView
         style={[a.px_xl, style]}
         ref={ref}
-        bounces={snapPoint === BottomSheetSnapPoint.Full}>
+        bounces={snapPoint === BottomSheetSnapPoint.Full}
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      </ScrollView>
+      </KeyboardAwareScrollView>
     )
   },
 )
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index b781d9f39e..567867ce3d 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -13,7 +13,6 @@ import {AppBskyLabelerDefs} from '@atproto/api'
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
-import {useOnKeyboardDidShow} from '#/components/hooks/useOnKeyboard'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {SelectLabelerView} from './SelectLabelerView'
@@ -39,9 +38,6 @@ function ReportDialogInner(props: ReportDialogProps) {
   const isLoading = useDelayedLoading(500, isLabelerLoading)
 
   const ref = React.useRef<ScrollView>(null)
-  useOnKeyboardDidShow(() => {
-    ref.current?.scrollToEnd({animated: true})
-  })
 
   return (
     <Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>
diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 60a18723b0..27d4151b73 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -15,7 +15,6 @@ import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Divider} from '../Divider'
 import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
@@ -44,7 +43,6 @@ let ReportDialog = ({
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
-        <KeyboardControllerPadding />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
diff --git a/yarn.lock b/yarn.lock
index 6ff953ba53..03cbd97acc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18099,10 +18099,10 @@ react-native-ios-context-menu@^1.15.3:
   dependencies:
     "@dominicstop/ts-event-emitter" "^1.1.0"
 
-react-native-keyboard-controller@^1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.12.1.tgz#6de22ed4d060528a0dd25621eeaa7f71772ce35f"
-  integrity sha512-2OpQcesiYsMilrTzgcTafSGexd9UryRQRuHudIcOn0YaqvvzNpnhVZMVuJMH93fJv/iaZYp3138rgUKOdHhtSw==
+react-native-keyboard-controller@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.14.0.tgz#f6faaa12b3736a10f4eec4236ed5b0343508b9a1"
+  integrity sha512-JW9k2fehFXOpvLWh1YcgyubLodg/HPi6bR11sCZB/BOawf1tnbGnqk967B8XkxDOKHH6mg+z82quCvv8ALh1rg==
 
 react-native-mmkv@^2.12.2:
   version "2.12.2"

From 1c149916941662b0a2065f22b37796eaa4fcc027 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 19:33:54 -0700
Subject: [PATCH 66/66] rm now useless components

---
 .../KeyboardControllerPadding.android.tsx     | 31 -------------------
 src/components/KeyboardControllerPadding.tsx  |  7 -----
 2 files changed, 38 deletions(-)
 delete mode 100644 src/components/KeyboardControllerPadding.android.tsx
 delete mode 100644 src/components/KeyboardControllerPadding.tsx

diff --git a/src/components/KeyboardControllerPadding.android.tsx b/src/components/KeyboardControllerPadding.android.tsx
deleted file mode 100644
index 92ef1b0b05..0000000000
--- a/src/components/KeyboardControllerPadding.android.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import {useKeyboardHandler} from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-
-export function KeyboardControllerPadding({maxHeight}: {maxHeight?: number}) {
-  const keyboardHeight = useSharedValue(0)
-
-  useKeyboardHandler(
-    {
-      onMove: e => {
-        'worklet'
-
-        if (maxHeight && e.height > maxHeight) {
-          keyboardHeight.value = maxHeight
-        } else {
-          keyboardHeight.value = e.height
-        }
-      },
-    },
-    [maxHeight],
-  )
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    height: keyboardHeight.value,
-  }))
-
-  return <Animated.View style={animatedStyle} />
-}
diff --git a/src/components/KeyboardControllerPadding.tsx b/src/components/KeyboardControllerPadding.tsx
deleted file mode 100644
index f3163d87cf..0000000000
--- a/src/components/KeyboardControllerPadding.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function KeyboardControllerPadding({
-  maxHeight: _,
-}: {
-  maxHeight?: number
-}) {
-  return null
-}