From 64c9d864889f54ae89aa91eabd31d51b49b29929 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Tue, 1 Oct 2024 13:59:20 -0700
Subject: [PATCH 01/62] remove

---
 src/components/Dialog/index.tsx |  2 --
 src/state/dialogs/index.tsx     | 36 ++++++++-------------------------
 src/view/shell/index.tsx        | 26 ++++++++++--------------
 3 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index d5d92048ad..67603ed2d8 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -176,8 +176,6 @@ export function Outer({
           <View
             // iOS
             accessibilityViewIsModal
-            // Android
-            importantForAccessibility="yes"
             style={[a.absolute, a.inset_0]}
             testID={testID}
             onTouchMove={() => Keyboard.dismiss()}>
diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index 26bb6792fd..c674175a20 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import {SharedValue, useSharedValue} from 'react-native-reanimated'
 
 import {DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
@@ -16,14 +15,6 @@ interface IDialogContext {
    * `useId`.
    */
   openDialogs: React.MutableRefObject<Set<string>>
-  /**
-   * The counterpart to `accessibilityViewIsModal` for Android. This property
-   * applies to the parent of all non-modal views, and prevents TalkBack from
-   * navigating within content beneath an open dialog.
-   *
-   * @see https://reactnative.dev/docs/accessibility#importantforaccessibility-android
-   */
-  importantForAccessibility: SharedValue<'auto' | 'no-hide-descendants'>
 }
 
 const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
@@ -49,9 +40,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     Map<string, React.MutableRefObject<DialogControlRefProps>>
   >(new Map())
   const openDialogs = React.useRef<Set<string>>(new Set())
-  const importantForAccessibility = useSharedValue<
-    'auto' | 'no-hide-descendants'
-  >('auto')
 
   const closeAllDialogs = React.useCallback(() => {
     openDialogs.current.forEach(id => {
@@ -61,28 +49,20 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     return openDialogs.current.size > 0
   }, [])
 
-  const setDialogIsOpen = React.useCallback(
-    (id: string, isOpen: boolean) => {
-      if (isOpen) {
-        openDialogs.current.add(id)
-        importantForAccessibility.value = 'no-hide-descendants'
-      } else {
-        openDialogs.current.delete(id)
-        if (openDialogs.current.size < 1) {
-          importantForAccessibility.value = 'auto'
-        }
-      }
-    },
-    [importantForAccessibility],
-  )
+  const setDialogIsOpen = React.useCallback((id: string, isOpen: boolean) => {
+    if (isOpen) {
+      openDialogs.current.add(id)
+    } else {
+      openDialogs.current.delete(id)
+    }
+  }, [])
 
   const context = React.useMemo<IDialogContext>(
     () => ({
       activeDialogs,
       openDialogs,
-      importantForAccessibility,
     }),
-    [importantForAccessibility, activeDialogs, openDialogs],
+    [activeDialogs, openDialogs],
   )
   const controls = React.useMemo(
     () => ({closeAllDialogs, setDialogIsOpen}),
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index aed92cbb7a..83468ecf3e 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -13,6 +13,13 @@ import * as NavigationBar from 'expo-navigation-bar'
 import {StatusBar} from 'expo-status-bar'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
+import {useDedupe} from '#/lib/hooks/useDedupe'
+import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useNotificationsRegistration} from '#/lib/notifications/notifications'
+import {isStateAtTabRoot} from '#/lib/routes/helpers'
+import {useTheme} from '#/lib/ThemeContext'
+import {isAndroid} from '#/platform/detection'
 import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
@@ -20,17 +27,9 @@ import {
   useSetDrawerOpen,
 } from '#/state/shell'
 import {useCloseAnyActiveElement} from '#/state/util'
-import {useDedupe} from 'lib/hooks/useDedupe'
-import {useNotificationsHandler} from 'lib/hooks/useNotificationHandler'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useNotificationsRegistration} from 'lib/notifications/notifications'
-import {isStateAtTabRoot} from 'lib/routes/helpers'
-import {useTheme} from 'lib/ThemeContext'
-import {isAndroid} from 'platform/detection'
-import {useDialogStateContext} from 'state/dialogs'
-import {Lightbox} from 'view/com/lightbox/Lightbox'
-import {ModalsContainer} from 'view/com/modals/Modal'
-import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
+import {Lightbox} from '#/view/com/lightbox/Lightbox'
+import {ModalsContainer} from '#/view/com/modals/Modal'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -61,7 +60,6 @@ function ShellInner() {
   const canGoBack = useNavigationState(state => !isStateAtTabRoot(state))
   const {hasSession} = useSession()
   const closeAnyActiveElement = useCloseAnyActiveElement()
-  const {importantForAccessibility} = useDialogStateContext()
 
   useNotificationsRegistration()
   useNotificationsHandler()
@@ -101,9 +99,7 @@ function ShellInner() {
 
   return (
     <>
-      <Animated.View
-        style={containerPadding}
-        importantForAccessibility={importantForAccessibility}>
+      <Animated.View style={containerPadding}>
         <ErrorBoundary>
           <Drawer
             renderDrawerContent={renderDrawerContent}

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

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

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

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

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

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

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

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

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

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

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

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

From 0ed5d48e027eaa886950218a4b0d7ea5443464b5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 16:14:47 -0700
Subject: [PATCH 06/62] [Sheets] [Pt. 6] Update `Inner` and `InnerFlatList` and
 their uses (#5564)

---
 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 6799c35afb..303da0d009 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,
@@ -116,20 +110,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>
   )
 }
 
@@ -146,13 +136,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={
@@ -160,16 +149,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 ecf7215a34a8751af4fc9a166545858c441516f0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:11:27 -0700
Subject: [PATCH 07/62] [Sheets] [Pt. 7] Part seven rework, much simplier!
 (#5582)

---
 src/components/BottomSheetButton.tsx          |  12 ++
 src/components/BottomSheetLink.tsx            |  92 +++++++++++++
 src/components/BottomSheetLink.web.tsx        |   3 +
 src/components/Button.tsx                     |  20 ++-
 src/components/Dialog/context.ts              |   1 +
 src/components/Dialog/index.tsx               |   2 +-
 src/components/Dialog/types.ts                |   1 +
 src/components/Link.tsx                       |  46 ++++++-
 src/components/Menu/index.tsx                 |   6 +-
 src/components/Menu/types.ts                  |   6 +-
 src/components/NormalizedRNGHPressable.tsx    | 128 ++++++++++++++++++
 .../NormalizedRNGHPressable.web.tsx           |   3 +
 .../ReportDialog/SelectLabelerView.tsx        |   8 +-
 .../ReportDialog/SelectReportOptionView.tsx   |   6 +-
 .../moderation/LabelsOnMeDialog.tsx           |  50 +++----
 15 files changed, 341 insertions(+), 43 deletions(-)
 create mode 100644 src/components/BottomSheetButton.tsx
 create mode 100644 src/components/BottomSheetLink.tsx
 create mode 100644 src/components/BottomSheetLink.web.tsx
 create mode 100644 src/components/NormalizedRNGHPressable.tsx
 create mode 100644 src/components/NormalizedRNGHPressable.web.tsx

diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
new file mode 100644
index 0000000000..9eaee55deb
--- /dev/null
+++ b/src/components/BottomSheetButton.tsx
@@ -0,0 +1,12 @@
+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/BottomSheetLink.tsx b/src/components/BottomSheetLink.tsx
new file mode 100644
index 0000000000..36d52c90c1
--- /dev/null
+++ b/src/components/BottomSheetLink.tsx
@@ -0,0 +1,92 @@
+import React from 'react'
+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 {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
+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 (
+    <NormalizedRNGHPressable
+      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>
+    </NormalizedRNGHPressable>
+  )
+}
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/Button.tsx b/src/components/Button.tsx
index 17179994a9..98ad1709c4 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'
@@ -87,6 +89,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,10 +117,22 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
+      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 {insideDialog} = useDialogContext()
+    if (!Component) {
+      if (insideDialog) {
+        Component = NormalizedRNGHPressable
+      } else {
+        Component = Pressable
+      }
+    }
+
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
@@ -449,10 +464,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Pressable
+      <Component
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
+        // @ts-expect-error ref type
         ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
@@ -500,7 +516,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/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 = {
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/Menu/index.tsx b/src/components/Menu/index.tsx
index c48d6f9bd0..809df96908 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 {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 (
-    <Pressable
+    <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>
-    </Pressable>
+    </NormalizedRNGHPressable>
   )
 }
 
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/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
new file mode 100644
index 0000000000..351005619d
--- /dev/null
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -0,0 +1,128 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  MeasureOnSuccessCallback,
+  NativeMouseEvent,
+  NativeSyntheticEvent,
+  PressableProps,
+} 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: {
+      ...event.nativeEvent,
+      touches: [],
+      changedTouches: [],
+      identifier: event.nativeEvent.identifier.toString(),
+      target: event.nativeEvent.target.toString(),
+    },
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    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,
+  target: NormalizedRNGHPressable,
+): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
+  return {
+    ...event.nativeEvent,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+  }
+}
+
+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
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
+      />
+    )
+  }
+}
diff --git a/src/components/NormalizedRNGHPressable.web.tsx b/src/components/NormalizedRNGHPressable.web.tsx
new file mode 100644
index 0000000000..86f5730495
--- /dev/null
+++ b/src/components/NormalizedRNGHPressable.web.tsx
@@ -0,0 +1,3 @@
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
+
+export {NormalizedRNGHPressable}
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 c49182009a256ec8ef77bd2cc1830620534a21d5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:26:58 -0700
Subject: [PATCH 08/62] [Sheets] [Pt. 8] Allow nesting in other sheets or
 native modals (#5567)

---
 package.json                                  |  2 +-
 src/components/Dialog/index.tsx               | 61 +++++++++++++------
 src/components/Dialog/index.web.tsx           |  1 +
 src/components/Link.tsx                       |  5 +-
 src/components/Prompt.tsx                     | 23 +++++--
 .../ReportDialog/SelectLabelerView.tsx        |  7 +--
 src/components/ReportDialog/index.tsx         |  3 +-
 .../moderation/LabelsOnMeDialog.tsx           | 15 +++--
 .../moderation/ModerationDetailsDialog.tsx    | 34 ++++++-----
 src/view/com/composer/Composer.tsx            |  1 +
 yarn.lock                                     |  8 +--
 11 files changed, 97 insertions(+), 63 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 6fbc8d87a0..7493e7748b 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 {
@@ -29,6 +30,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)
@@ -84,26 +105,26 @@ export function Outer({
 
   const context = React.useMemo(() => ({close, insideDialog: true}), [close])
 
+  const Wrapper = isIOS ? View : GestureHandlerRootView
+
   return (
-    <Portal>
-      <Context.Provider value={context}>
-        <BlueskyBottomSheetView
-          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
+        ref={ref}
+        topInset={30}
+        bottomInset={insets.bottom}
+        onStateChange={e => {
+          if (e.nativeEvent.state === 'closed') {
+            onCloseAnimationComplete()
+          }
+        }}
+        cornerRadius={20}
+        {...nativeOptions}>
+        <Wrapper testID={testID} style={[t.atoms.bg]}>
+          {children}
+        </Wrapper>
+      </BlueskyBottomSheetView>
+    </Context.Provider>
   )
 }
 
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 8aa111bf3d..3e877a6630 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -3,8 +3,9 @@ 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 {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -25,9 +26,11 @@ export function Outer({
   children,
   control,
   testID,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
+  withoutPortal?: boolean
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -38,8 +41,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}
@@ -50,7 +56,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Dialog.Outer>
+    </Wrapper>
   )
 }
 
@@ -139,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: ButtonProps['onPress']
+  onPress: (e: GestureResponderEvent) => void
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -179,6 +185,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
+  withoutPortal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -192,12 +199,16 @@ 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: GestureResponderEvent) => 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/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>
     </>
   )
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/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>
   )
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 4466f68b812aab39cc6f16cf783c25b9de44f04d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:38:34 -0700
Subject: [PATCH 09/62] [Sheets] [Pt. 10] (#5581)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 .prettierignore                               |   3 +
 bskyweb/cmd/bskyweb/server.go                 |   1 +
 package.json                                  |   2 +-
 src/Navigation.tsx                            |   2 +-
 src/alf/atoms.ts                              |  28 +++
 src/alf/fonts.ts                              |  14 ++
 src/components/BottomSheetButton.tsx          |  12 --
 src/components/Button.tsx                     |  14 +-
 src/components/Menu/index.tsx                 |  14 +-
 src/components/ReportDialog/SubmitView.tsx    |   4 +-
 src/components/dialogs/MutedWords.tsx         |  22 ++-
 .../dialogs/PostInteractionSettingsDialog.tsx |   4 +-
 src/components/dms/MessagesNUX.tsx            | 174 ------------------
 src/components/forms/Toggle.tsx               |  10 +-
 .../intents/VerifyEmailIntentDialog.tsx       |  84 ++++-----
 .../Messages/{List/index.tsx => ChatList.tsx} |   6 +-
 .../index.tsx => Conversation.tsx}            |  14 +-
 .../ChatDisabled.tsx                          |   0
 .../{List => components}/ChatListItem.tsx     |   0
 .../MessageInput.tsx                          |   2 +-
 .../MessageInput.web.tsx                      |   4 +-
 .../MessageInputEmbed.tsx                     |   0
 .../MessageListError.tsx                      |   0
 .../MessagesList.tsx                          |  14 +-
 .../StepProfile/PlaceholderCanvas.tsx         |  48 ++---
 src/view/com/auth/server-input/index.tsx      |   9 +-
 .../post-thread/PostThreadComposePrompt.tsx   |  24 ++-
 src/view/com/util/post-ctrls/RepostButton.tsx |   1 -
 yarn.lock                                     |   8 +-
 29 files changed, 201 insertions(+), 317 deletions(-)
 delete mode 100644 src/components/BottomSheetButton.tsx
 delete mode 100644 src/components/dms/MessagesNUX.tsx
 rename src/screens/Messages/{List/index.tsx => ChatList.tsx} (98%)
 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/.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
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)
 
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/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/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/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'),
+  })
+}
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/Button.tsx b/src/components/Button.tsx
index 98ad1709c4..0c7c1ac46d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -89,7 +89,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 & VariantProps & {disabled?: boolean}
@@ -117,7 +117,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      Component,
+      PressableComponent,
       ...rest
     },
     ref,
@@ -125,11 +125,11 @@ 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 {insideDialog} = useDialogContext()
-    if (!Component) {
+    if (!PressableComponent) {
       if (insideDialog) {
-        Component = NormalizedRNGHPressable
+        PressableComponent = NormalizedRNGHPressable
       } else {
-        Component = Pressable
+        PressableComponent = Pressable
       }
     }
 
@@ -464,7 +464,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
     const flattenedBaseStyles = flatten([baseStyles, style])
 
     return (
-      <Component
+      <PressableComponent
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
@@ -516,7 +516,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/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,
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index e323d15042..682e918c2d 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -16,6 +16,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'
 
@@ -153,7 +154,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/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index daa18f94e7..55fd98d711 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -30,6 +30,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'
 
@@ -168,7 +169,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]}>
@@ -183,7 +185,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]}>
@@ -207,7 +210,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]}>
@@ -222,7 +226,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]}>
@@ -256,7 +261,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]}>
@@ -272,7 +278,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]}>
@@ -302,7 +309,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/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 93be838542..cc8b4fc9bf 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -37,6 +37,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/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
deleted file mode 100644
index 723696a04d..0000000000
--- a/src/components/dms/MessagesNUX.tsx
+++ /dev/null
@@ -1,174 +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}>
-      <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/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/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index 9f3808020a..070ba7c40e 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 {isNative} from '#/platform/detection'
 import {useAgent, useSession} from '#/state/session'
-import {atoms as a} from '#/alf'
-import {Button, 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'
+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'
@@ -22,7 +25,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<
@@ -57,43 +62,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]}>
@@ -102,38 +111,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>
   )
 }
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/ChatList.tsx
similarity index 98%
rename from src/screens/Messages/List/index.tsx
rename to src/screens/Messages/ChatList.tsx
index efd717f0b4..9912456e13 100644
--- a/src/screens/Messages/List/index.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'
@@ -33,7 +32,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'>
 
@@ -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`)}
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'
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>
     )
   },
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index de7ed6d15b..659ff7f733 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -12,6 +12,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({
@@ -82,7 +83,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>
@@ -90,7 +94,8 @@ export function ServerInputDialog({
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
-              label={_(msg`Custom`)}>
+              label={_(msg`Custom`)}
+              PressableComponent={NormalizedRNGHPressable}>
               <ToggleButton.ButtonText>
                 {_(msg`Custom`)}
               </ToggleButton.ButtonText>
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'}
         />
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 14c869df8d..896e197b65 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -156,7 +156,6 @@ let RepostButton = ({
             </View>
             <Button
               label={_(msg`Cancel quote post`)}
-              onAccessibilityEscape={close}
               onPress={close}
               size="large"
               variant="solid"
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 79996ac952ba710d891f52770e0736f82486e132 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:43:54 -0700
Subject: [PATCH 10/62] [Sheets] [Pt. 11] Move native code into repo (#5583)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 modules/bottom-sheet/android/build.gradle     |  56 ++++++
 .../android/src/main/AndroidManifest.xml      |   2 +
 .../bottomsheet/BlueskyBottomSheetView.kt     | 150 ++++++++++++++++
 .../modules/bottomsheet/BottomSheetModule.kt  |  53 ++++++
 .../expo/modules/bottomsheet/SheetView.kt     |  70 ++++++++
 modules/bottom-sheet/expo-module.config.json  |   9 +
 modules/bottom-sheet/index.ts                 |   4 +
 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 -
 src/components/Dialog/index.tsx               |   8 +-
 src/components/Dialog/types.ts                |   4 +-
 yarn.lock                                     |   5 -
 20 files changed, 822 insertions(+), 12 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/expo-module.config.json
 create mode 100644 modules/bottom-sheet/index.ts
 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..f557034b77
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
@@ -0,0 +1,150 @@
+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 = 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..72e0213f5a
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetModule.kt
@@ -0,0 +1,53 @@
+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..cf12597590
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
@@ -0,0 +1,70 @@
+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/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}
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..e4e843bea5
--- /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..b42c97587c
--- /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('BottomSheet')
+
+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/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
 }
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 14e3567663869edf1a14cd56f5935026c5319fb8 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:49:49 -0700
Subject: [PATCH 11/62] [Sheets] [Pt. 12] Add event for selected snap point
 change (#5584)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 modules/bottom-sheet/index.ts                 | 13 ++++++++--
 .../bottom-sheet/ios/BottomSheetModule.swift  | 11 ++++----
 modules/bottom-sheet/ios/SheetView.swift      | 23 +++++++++++++++--
 modules/bottom-sheet/src/BottomSheet.types.ts | 10 ++++++++
 src/components/BottomSheetButton.tsx          |  0
 src/components/Button.tsx                     | 12 +++++----
 src/components/Dialog/context.ts              |  4 ++-
 src/components/Dialog/index.tsx               | 25 ++++++++++++++++---
 src/components/Dialog/index.web.tsx           |  3 ++-
 src/components/Dialog/types.ts                |  4 ++-
 src/components/NormalizedRNGHPressable.tsx    |  2 ++
 11 files changed, 86 insertions(+), 21 deletions(-)
 create mode 100644 src/components/BottomSheetButton.tsx

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/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
index 2b4498adf7..bd878c5abc 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
@@ -26,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 +35,10 @@ public class BottomSheetModule: Module {
         view.maxHeight = prop
       }
 
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
+
       Prop("preventExpansion") { (view: SheetView, prop: Bool) in
         view.preventExpansion = prop
       }
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index ccf7fcb23d..2bfaa0a815 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 {
@@ -51,6 +52,19 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
       }
     }
   }
+  private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
+    didSet {
+      if selectedDetentIdentifier == .large {
+        onSnapPointChange([
+          "snapPoint": 2
+        ])
+      } else {
+        onSnapPointChange([
+          "snapPoint": 1
+        ])
+      }
+    }
+  }
 
   // MARK: - Lifecycle
 
@@ -103,11 +117,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
@@ -158,4 +173,8 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
     self.destroy()
   }
+
+  func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
+    self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
+  }
 }
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index 8177df5787..e3cf64b997 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,6 +21,10 @@ export interface BottomSheetViewProps {
   minHeight?: number
   maxHeight?: number
 
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+  onSnapPointChange?: (
+    event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
+  ) => void
   onStateChange?: (
     event: NativeSyntheticEvent<{state: BottomSheetState}>,
   ) => void
diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 0c7c1ac46d..a43bc552e1 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -122,11 +122,13 @@ export const Button = React.forwardRef<View, ButtonProps>(
     },
     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 {insideDialog} = useDialogContext()
+    /*
+     * This will pick the correct default pressable to use. If we are inside a
+     * native dialog, we need to use the RNGH pressable.
+     */
+    const {isNativeDialog} = useDialogContext()
     if (!PressableComponent) {
-      if (insideDialog) {
+      if (isNativeDialog) {
         PressableComponent = NormalizedRNGHPressable
       } else {
         PressableComponent = Pressable
@@ -468,7 +470,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
-        // @ts-expect-error ref type
+        // @ts-ignore - this will always be a pressable
         ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
index 27b8a56375..6247b6d3d1 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,
+  isNativeDialog: false,
+  nativeSnapPoint: BottomSheetSnapPoint.Hidden,
 })
 
 export function useDialogContext() {
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 0695c11ebf..cb2e37ac7e 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, isNativeDialog: true, nativeSnapPoint: snapPoint}),
+    [close, snapPoint],
+  )
 
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
@@ -113,6 +123,9 @@ export function OuterWithoutPortal({
         ref={ref}
         topInset={30}
         bottomInset={insets.bottom}
+        onSnapPointChange={e => {
+          setSnapPoint(e.nativeEvent.snapPoint)
+        }}
         onStateChange={e => {
           if (e.nativeEvent.state === 'closed') {
             onCloseAnimationComplete()
@@ -147,8 +160,12 @@ export function Inner({children, style}: DialogInnerProps) {
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style}, ref) {
     const insets = useSafeAreaInsets()
+    const {nativeSnapPoint} = useDialogContext()
     return (
-      <ScrollView style={[a.px_xl, style]} ref={ref}>
+      <ScrollView
+        style={[a.px_xl, style]}
+        ref={ref}
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
       </ScrollView>
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index a50e960a8a..3d860f112b 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -103,7 +103,8 @@ export function Outer({
   const context = React.useMemo(
     () => ({
       close,
-      insideDialog: true,
+      isNativeDialog: false,
+      nativeSnapPoint: 0,
     }),
     [close],
   )
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index c5219e5eab..2fd4d7c05a 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>
 
@@ -37,7 +38,8 @@ export type DialogControlProps = DialogControlRefProps & {
 
 export type DialogContextProps = {
   close: DialogControlProps['close']
-  insideDialog: boolean
+  isNativeDialog: boolean
+  nativeSnapPoint: BottomSheetSnapPoint
 }
 
 export type DialogControlOpenOptions = {
diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 351005619d..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}

From 52a8e4d6167b64d8731a6b1b157f2467f0fbc5b5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 21:53:23 -0700
Subject: [PATCH 12/62] [Sheets] [Pt. 13] Keyboard handling (#5586)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 modules/bottom-sheet/src/BottomSheet.types.ts |  1 -
 package.json                                  |  2 +-
 src/components/Dialog/index.tsx               |  9 ++++--
 .../KeyboardControllerPadding.android.tsx     | 31 -------------------
 src/components/KeyboardControllerPadding.tsx  |  7 -----
 src/components/ReportDialog/index.tsx         |  4 ---
 src/components/dms/ReportDialog.tsx           |  2 --
 yarn.lock                                     |  8 ++---
 8 files changed, 11 insertions(+), 53 deletions(-)
 delete mode 100644 src/components/KeyboardControllerPadding.android.tsx
 delete mode 100644 src/components/KeyboardControllerPadding.tsx

diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index e3cf64b997..d08e985fa7 100644
--- a/modules/bottom-sheet/src/BottomSheet.types.ts
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -28,5 +28,4 @@ export interface BottomSheetViewProps {
   onStateChange?: (
     event: NativeSyntheticEvent<{state: BottomSheetState}>,
   ) => void
-  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
 }
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 cb2e37ac7e..effe781071 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 {nativeSnapPoint} = useDialogContext()
     return (
-      <ScrollView
+      <KeyboardAwareScrollView
         style={[a.px_xl, style]}
         ref={ref}
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}>
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      </ScrollView>
+      </KeyboardAwareScrollView>
     )
   },
 )
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
-}
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 058ddb0c53d969d7b3c4bf312158a1901bbc57ec Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 22:03:52 -0700
Subject: [PATCH 13/62] [Sheets] [Pt. 14] Portaling behaviors for nested
 dialogs (#5588)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 src/components/Dialog/index.tsx       |  65 ++--
 src/components/Dialog/types.ts        |   2 +
 src/components/Portal.tsx             |   2 +
 src/components/Prompt.tsx             |  22 +-
 src/components/dialogs/MutedWords.tsx | 536 ++++++++++++++------------
 5 files changed, 327 insertions(+), 300 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index effe781071..bdbfb24d01 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -16,7 +16,7 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {Portal} from '#/components/Portal'
+import {Portal as DefaultPortal} from '#/components/Portal'
 import {
   BottomSheetSnapPoint,
   BottomSheetView,
@@ -34,26 +34,7 @@ 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,
+  Portal = DefaultPortal,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const ref = React.useRef<BottomSheetView>(null)
@@ -119,26 +100,28 @@ export function OuterWithoutPortal({
   const Wrapper = isIOS ? View : GestureHandlerRootView
 
   return (
-    <Context.Provider value={context}>
-      <BottomSheetView
-        ref={ref}
-        topInset={30}
-        bottomInset={insets.bottom}
-        onSnapPointChange={e => {
-          setSnapPoint(e.nativeEvent.snapPoint)
-        }}
-        onStateChange={e => {
-          if (e.nativeEvent.state === 'closed') {
-            onCloseAnimationComplete()
-          }
-        }}
-        cornerRadius={20}
-        {...nativeOptions}>
-        <Wrapper testID={testID} style={[t.atoms.bg]}>
-          {children}
-        </Wrapper>
-      </BottomSheetView>
-    </Context.Provider>
+    <Portal>
+      <Context.Provider value={context}>
+        <BottomSheetView
+          ref={ref}
+          topInset={30}
+          bottomInset={insets.bottom}
+          onSnapPointChange={e => {
+            setSnapPoint(e.nativeEvent.snapPoint)
+          }}
+          onStateChange={e => {
+            if (e.nativeEvent.state === 'closed') {
+              onCloseAnimationComplete()
+            }
+          }}
+          cornerRadius={20}
+          {...nativeOptions}>
+          <Wrapper testID={testID} style={[t.atoms.bg]}>
+            {children}
+          </Wrapper>
+        </BottomSheetView>
+      </Context.Provider>
+    </Portal>
   )
 }
 
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index 2fd4d7c05a..cf698bf5b0 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -6,6 +6,7 @@ import type {
 } from 'react-native'
 
 import {ViewStyleProp} from '#/alf'
+import {PortalComponent} from '#/components/Portal'
 import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
 import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
@@ -58,6 +59,7 @@ export type DialogOuterProps = {
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
   webOptions?: {}
   testID?: string
+  Portal?: PortalComponent
 }
 
 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 03b397b2b8..7441df005c 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -12,6 +12,8 @@ type ComponentMap = {
   [id: string]: Component
 }
 
+export type PortalComponent = ({children}: {children?: React.ReactNode}) => null
+
 export function createPortalGroup() {
   const Context = React.createContext<ContextType>({
     outlet: null,
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 3e877a6630..a38a55174f 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -3,10 +3,10 @@ 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 {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
 export {
@@ -26,11 +26,11 @@ export function Outer({
   children,
   control,
   testID,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -41,11 +41,8 @@ export function Outer({
     [titleId, descriptionId],
   )
 
-  const Wrapper =
-    withoutPortal && isNative ? Dialog.OuterWithoutPortal : Dialog.Outer
-
   return (
-    <Wrapper control={control} testID={testID}>
+    <Dialog.Outer control={control} testID={testID} Portal={Portal}>
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
@@ -56,7 +53,7 @@ export function Outer({
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>
-    </Wrapper>
+    </Dialog.Outer>
   )
 }
 
@@ -185,7 +182,7 @@ export function Basic({
   onConfirm,
   confirmButtonColor,
   showCancel = true,
-  withoutPortal,
+  Portal,
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
   title: string
@@ -202,13 +199,10 @@ export function Basic({
   onConfirm: (e: GestureResponderEvent) => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
-  withoutPortal?: boolean
+  Portal?: PortalComponent
 }>) {
   return (
-    <Outer
-      control={control}
-      testID="confirmModal"
-      withoutPortal={withoutPortal}>
+    <Outer control={control} testID="confirmModal" Portal={Portal}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 55fd98d711..38571e6b8d 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -31,11 +31,14 @@ 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 {createPortalGroup} from '#/components/Portal'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
 
 const ONE_DAY = 24 * 60 * 60 * 1000
 
+const Portal = createPortalGroup()
+
 export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
   return (
@@ -105,111 +108,190 @@ function MutedWordsInner() {
   }, [_, field, targets, addMutedWord, setField, durations, excludeFollowing])
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
-      <View>
-        <Text
-          style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
-          <Trans>Add muted words and tags</Trans>
-        </Text>
-        <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
-          <Trans>
-            Posts can be muted based on their text, their tags, or both. We
-            recommend avoiding common words that appear in many posts, since it
-            can result in no posts being shown.
-          </Trans>
-        </Text>
-
-        <View style={[a.pb_sm]}>
-          <Dialog.Input
-            autoCorrect={false}
-            autoCapitalize="none"
-            autoComplete="off"
-            label={_(msg`Enter a word or tag`)}
-            placeholder={_(msg`Enter a word or tag`)}
-            value={field}
-            onChangeText={value => {
-              if (error) {
-                setError('')
-              }
-              setField(value)
-            }}
-            onSubmitEditing={submit}
-          />
-        </View>
+    <Portal.Provider>
+      <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
+        <View>
+          <Text
+            style={[
+              a.text_md,
+              a.font_bold,
+              a.pb_sm,
+              t.atoms.text_contrast_high,
+            ]}>
+            <Trans>Add muted words and tags</Trans>
+          </Text>
+          <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
+            <Trans>
+              Posts can be muted based on their text, their tags, or both. We
+              recommend avoiding common words that appear in many posts, since
+              it can result in no posts being shown.
+            </Trans>
+          </Text>
 
-        <View style={[a.pb_xl, a.gap_sm]}>
-          <Toggle.Group
-            label={_(msg`Select how long to mute this word for.`)}
-            type="radio"
-            values={durations}
-            onChange={setDurations}>
-            <Text
-              style={[
-                a.pb_xs,
-                a.text_sm,
-                a.font_bold,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>Duration:</Trans>
-            </Text>
+          <View style={[a.pb_sm]}>
+            <Dialog.Input
+              autoCorrect={false}
+              autoCapitalize="none"
+              autoComplete="off"
+              label={_(msg`Enter a word or tag`)}
+              placeholder={_(msg`Enter a word or tag`)}
+              value={field}
+              onChangeText={value => {
+                if (error) {
+                  setError('')
+                }
+                setField(value)
+              }}
+              onSubmitEditing={submit}
+            />
+          </View>
+
+          <View style={[a.pb_xl, a.gap_sm]}>
+            <Toggle.Group
+              label={_(msg`Select how long to mute this word for.`)}
+              type="radio"
+              values={durations}
+              onChange={setDurations}>
+              <Text
+                style={[
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Duration:</Trans>
+              </Text>
 
-            <View
-              style={[
-                gtMobile && [a.flex_row, a.align_center, a.justify_start],
-                a.gap_sm,
-              ]}>
               <View
                 style={[
-                  a.flex_1,
-                  a.flex_row,
-                  a.justify_start,
-                  a.align_center,
+                  gtMobile && [a.flex_row, a.align_center, a.justify_start],
                   a.gap_sm,
                 ]}>
-                <Toggle.Item
-                  label={_(msg`Mute this word until you unmute it`)}
-                  name="forever"
-                  style={[a.flex_1]}
-                  PressableComponent={NormalizedRNGHPressable}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>Forever</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
+                <View
+                  style={[
+                    a.flex_1,
+                    a.flex_row,
+                    a.justify_start,
+                    a.align_center,
+                    a.gap_sm,
+                  ]}>
+                  <Toggle.Item
+                    label={_(msg`Mute this word until you unmute it`)}
+                    name="forever"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>Forever</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 24 hours`)}
+                    name="24_hours"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>24 hours</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+                </View>
 
-                <Toggle.Item
-                  label={_(msg`Mute this word for 24 hours`)}
-                  name="24_hours"
-                  style={[a.flex_1]}
-                  PressableComponent={NormalizedRNGHPressable}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>24 hours</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
+                <View
+                  style={[
+                    a.flex_1,
+                    a.flex_row,
+                    a.justify_start,
+                    a.align_center,
+                    a.gap_sm,
+                  ]}>
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 7 days`)}
+                    name="7_days"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>7 days</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 30 days`)}
+                    name="30_days"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>30 days</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+                </View>
               </View>
+            </Toggle.Group>
 
-              <View
+            <Toggle.Group
+              label={_(
+                msg`Select what content this mute word should apply to.`,
+              )}
+              type="radio"
+              values={targets}
+              onChange={setTargets}>
+              <Text
                 style={[
-                  a.flex_1,
-                  a.flex_row,
-                  a.justify_start,
-                  a.align_center,
-                  a.gap_sm,
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
                 ]}>
+                <Trans>Mute in:</Trans>
+              </Text>
+
+              <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}>
                 <Toggle.Item
-                  label={_(msg`Mute this word for 7 days`)}
-                  name="7_days"
+                  label={_(msg`Mute this word in post text and tags`)}
+                  name="content"
                   style={[a.flex_1]}
                   PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
@@ -217,15 +299,16 @@ function MutedWordsInner() {
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
                       <Toggle.Radio />
                       <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>7 days</Trans>
+                        <Trans>Text & tags</Trans>
                       </Toggle.LabelText>
                     </View>
+                    <PageText size="sm" />
                   </TargetToggle>
                 </Toggle.Item>
 
                 <Toggle.Item
-                  label={_(msg`Mute this word for 30 days`)}
-                  name="30_days"
+                  label={_(msg`Mute this word in tags only`)}
+                  name="tag"
                   style={[a.flex_1]}
                   PressableComponent={NormalizedRNGHPressable}>
                   <TargetToggle>
@@ -233,186 +316,148 @@ function MutedWordsInner() {
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
                       <Toggle.Radio />
                       <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>30 days</Trans>
+                        <Trans>Tags only</Trans>
                       </Toggle.LabelText>
                     </View>
+                    <Hashtag size="sm" />
                   </TargetToggle>
                 </Toggle.Item>
               </View>
-            </View>
-          </Toggle.Group>
-
-          <Toggle.Group
-            label={_(msg`Select what content this mute word should apply to.`)}
-            type="radio"
-            values={targets}
-            onChange={setTargets}>
-            <Text
-              style={[
-                a.pb_xs,
-                a.text_sm,
-                a.font_bold,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>Mute in:</Trans>
-            </Text>
+            </Toggle.Group>
 
-            <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}>
+            <View>
+              <Text
+                style={[
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Options:</Trans>
+              </Text>
               <Toggle.Item
-                label={_(msg`Mute this word in post text and tags`)}
-                name="content"
-                style={[a.flex_1]}
+                label={_(msg`Do not apply this mute word to users you follow`)}
+                name="exclude_following"
+                style={[a.flex_row, a.justify_between]}
+                value={excludeFollowing}
+                onChange={setExcludeFollowing}
                 PressableComponent={NormalizedRNGHPressable}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                    <Toggle.Radio />
+                    <Toggle.Checkbox />
                     <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                      <Trans>Text & tags</Trans>
+                      <Trans>Exclude users you follow</Trans>
                     </Toggle.LabelText>
                   </View>
-                  <PageText size="sm" />
                 </TargetToggle>
               </Toggle.Item>
+            </View>
 
-              <Toggle.Item
-                label={_(msg`Mute this word in tags only`)}
-                name="tag"
-                style={[a.flex_1]}
-                PressableComponent={NormalizedRNGHPressable}>
-                <TargetToggle>
-                  <View
-                    style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                      <Trans>Tags only</Trans>
-                    </Toggle.LabelText>
-                  </View>
-                  <Hashtag size="sm" />
-                </TargetToggle>
-              </Toggle.Item>
+            <View style={[a.pt_xs]}>
+              <Button
+                disabled={isPending || !field}
+                label={_(msg`Add mute word for configured settings`)}
+                size="large"
+                color="primary"
+                variant="solid"
+                style={[]}
+                onPress={submit}>
+                <ButtonText>
+                  <Trans>Add</Trans>
+                </ButtonText>
+                <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
+              </Button>
             </View>
-          </Toggle.Group>
 
-          <View>
+            {error && (
+              <View
+                style={[
+                  a.mb_lg,
+                  a.flex_row,
+                  a.rounded_sm,
+                  a.p_md,
+                  a.mb_xs,
+                  t.atoms.bg_contrast_25,
+                  {
+                    backgroundColor: t.palette.negative_400,
+                  },
+                ]}>
+                <Text
+                  style={[
+                    a.italic,
+                    {color: t.palette.white},
+                    native({marginTop: 2}),
+                  ]}>
+                  {error}
+                </Text>
+              </View>
+            )}
+          </View>
+
+          <Divider />
+
+          <View style={[a.pt_2xl]}>
             <Text
               style={[
-                a.pb_xs,
-                a.text_sm,
+                a.text_md,
                 a.font_bold,
-                t.atoms.text_contrast_medium,
+                a.pb_md,
+                t.atoms.text_contrast_high,
               ]}>
-              <Trans>Options:</Trans>
+              <Trans>Your muted words</Trans>
             </Text>
-            <Toggle.Item
-              label={_(msg`Do not apply this mute word to users you follow`)}
-              name="exclude_following"
-              style={[a.flex_row, a.justify_between]}
-              value={excludeFollowing}
-              onChange={setExcludeFollowing}
-              PressableComponent={NormalizedRNGHPressable}>
-              <TargetToggle>
-                <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                  <Toggle.Checkbox />
-                  <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                    <Trans>Exclude users you follow</Trans>
-                  </Toggle.LabelText>
-                </View>
-              </TargetToggle>
-            </Toggle.Item>
-          </View>
 
-          <View style={[a.pt_xs]}>
-            <Button
-              disabled={isPending || !field}
-              label={_(msg`Add mute word for configured settings`)}
-              size="large"
-              color="primary"
-              variant="solid"
-              style={[]}
-              onPress={submit}>
-              <ButtonText>
-                <Trans>Add</Trans>
-              </ButtonText>
-              <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </Button>
-          </View>
-
-          {error && (
-            <View
-              style={[
-                a.mb_lg,
-                a.flex_row,
-                a.rounded_sm,
-                a.p_md,
-                a.mb_xs,
-                t.atoms.bg_contrast_25,
-                {
-                  backgroundColor: t.palette.negative_400,
-                },
-              ]}>
-              <Text
+            {isPreferencesLoading ? (
+              <Loader />
+            ) : preferencesError || !preferences ? (
+              <View
                 style={[
-                  a.italic,
-                  {color: t.palette.white},
-                  native({marginTop: 2}),
+                  a.py_md,
+                  a.px_lg,
+                  a.rounded_md,
+                  t.atoms.bg_contrast_25,
                 ]}>
-                {error}
-              </Text>
-            </View>
-          )}
-        </View>
-
-        <Divider />
-
-        <View style={[a.pt_2xl]}>
-          <Text
-            style={[
-              a.text_md,
-              a.font_bold,
-              a.pb_md,
-              t.atoms.text_contrast_high,
-            ]}>
-            <Trans>Your muted words</Trans>
-          </Text>
+                <Text style={[a.italic, t.atoms.text_contrast_high]}>
+                  <Trans>
+                    We're sorry, but we weren't able to load your muted words at
+                    this time. Please try again.
+                  </Trans>
+                </Text>
+              </View>
+            ) : preferences.moderationPrefs.mutedWords.length ? (
+              [...preferences.moderationPrefs.mutedWords]
+                .reverse()
+                .map((word, i) => (
+                  <MutedWordRow
+                    key={word.value + i}
+                    word={word}
+                    style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
+                  />
+                ))
+            ) : (
+              <View
+                style={[
+                  a.py_md,
+                  a.px_lg,
+                  a.rounded_md,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                <Text style={[a.italic, t.atoms.text_contrast_high]}>
+                  <Trans>You haven't muted any words or tags yet</Trans>
+                </Text>
+              </View>
+            )}
+          </View>
 
-          {isPreferencesLoading ? (
-            <Loader />
-          ) : preferencesError || !preferences ? (
-            <View
-              style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
-              <Text style={[a.italic, t.atoms.text_contrast_high]}>
-                <Trans>
-                  We're sorry, but we weren't able to load your muted words at
-                  this time. Please try again.
-                </Trans>
-              </Text>
-            </View>
-          ) : preferences.moderationPrefs.mutedWords.length ? (
-            [...preferences.moderationPrefs.mutedWords]
-              .reverse()
-              .map((word, i) => (
-                <MutedWordRow
-                  key={word.value + i}
-                  word={word}
-                  style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
-                />
-              ))
-          ) : (
-            <View
-              style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
-              <Text style={[a.italic, t.atoms.text_contrast_high]}>
-                <Trans>You haven't muted any words or tags yet</Trans>
-              </Text>
-            </View>
-          )}
+          {isNative && <View style={{height: 20}} />}
         </View>
 
-        {isNative && <View style={{height: 20}} />}
-      </View>
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
 
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
+      <Portal.Outlet />
+    </Portal.Provider>
   )
 }
 
@@ -444,6 +489,7 @@ function MutedWordRow({
         onConfirm={remove}
         confirmButtonCta={_(msg`Remove`)}
         confirmButtonColor="negative"
+        Portal={Portal.Portal}
       />
 
       <View

From 89ac12516d85e2655d99dc11c06e102ea44ffa83 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 22:08:36 -0700
Subject: [PATCH 14/62] [Sheets] [Pt. 15] Fix up dialogs inside the composer
 (#5589)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: dan <dan.abramov@gmail.com>
---
 .../dialogs/PostInteractionSettingsDialog.tsx |   7 +-
 src/state/queries/video/compress-video.ts     |  39 --
 src/state/queries/video/util.ts               |  11 +-
 .../queries/video/video-upload.shared.ts      |  88 ++-
 src/state/queries/video/video-upload.ts       | 111 +--
 src/state/queries/video/video-upload.web.ts   | 137 ++--
 src/state/queries/video/video.ts              | 646 ++++++++++--------
 src/view/com/composer/Composer.tsx            | 640 +++++++++--------
 src/view/com/composer/GifAltText.tsx          |   5 +-
 src/view/com/composer/photos/Gallery.tsx      |  13 +-
 .../composer/photos/ImageAltTextDialog.tsx    |   4 +-
 .../com/composer/threadgate/ThreadgateBtn.tsx |   5 +
 .../com/composer/videos/SelectVideoBtn.tsx    |  47 +-
 .../com/composer/videos/SubtitleDialog.tsx    |   4 +-
 14 files changed, 941 insertions(+), 816 deletions(-)
 delete mode 100644 src/state/queries/video/compress-video.ts

diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index cc8b4fc9bf..498e28b640 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -38,6 +38,7 @@ 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 {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
 export type PostInteractionSettingsFormProps = {
@@ -55,13 +56,15 @@ export type PostInteractionSettingsFormProps = {
 
 export function PostInteractionSettingsControlledDialog({
   control,
+  Portal,
   ...rest
 }: PostInteractionSettingsFormProps & {
   control: Dialog.DialogControlProps
+  Portal?: PortalComponent
 }) {
   const {_} = useLingui()
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} Portal={Portal}>
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -230,7 +233,6 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
-  const control = Dialog.useDialogContext()
   const {data: lists} = useMyListsQuery('curate')
   const [quotesEnabled, setQuotesEnabled] = React.useState(
     !(
@@ -437,7 +439,6 @@ export function PostInteractionSettingsForm({
       <Button
         label={_(msg`Save`)}
         onPress={onSave}
-        onAccessibilityEscape={control.close}
         color="primary"
         size="large"
         variant="solid"
diff --git a/src/state/queries/video/compress-video.ts b/src/state/queries/video/compress-video.ts
deleted file mode 100644
index cefbf94066..0000000000
--- a/src/state/queries/video/compress-video.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {ImagePickerAsset} from 'expo-image-picker'
-import {useMutation} from '@tanstack/react-query'
-
-import {cancelable} from '#/lib/async/cancelable'
-import {CompressedVideo} from '#/lib/media/video/types'
-import {compressVideo} from 'lib/media/video/compress'
-
-export function useCompressVideoMutation({
-  onProgress,
-  onSuccess,
-  onError,
-  signal,
-}: {
-  onProgress: (progress: number) => void
-  onError: (e: any) => void
-  onSuccess: (video: CompressedVideo) => void
-  signal: AbortSignal
-}) {
-  return useMutation({
-    mutationKey: ['video', 'compress'],
-    mutationFn: cancelable(
-      (asset: ImagePickerAsset) =>
-        compressVideo(asset, {
-          onProgress: num => onProgress(trunc2dp(num)),
-          signal,
-        }),
-      signal,
-    ),
-    onError,
-    onSuccess,
-    onMutate: () => {
-      onProgress(0)
-    },
-  })
-}
-
-function trunc2dp(num: number) {
-  return Math.trunc(num * 100) / 100
-}
diff --git a/src/state/queries/video/util.ts b/src/state/queries/video/util.ts
index 2c1298ab63..87b422c2c9 100644
--- a/src/state/queries/video/util.ts
+++ b/src/state/queries/video/util.ts
@@ -1,4 +1,3 @@
-import {useMemo} from 'react'
 import {AtpAgent} from '@atproto/api'
 
 import {SupportedMimeTypes, VIDEO_SERVICE} from '#/lib/constants'
@@ -17,12 +16,10 @@ export const createVideoEndpointUrl = (
   return url.href
 }
 
-export function useVideoAgent() {
-  return useMemo(() => {
-    return new AtpAgent({
-      service: VIDEO_SERVICE,
-    })
-  }, [])
+export function createVideoAgent() {
+  return new AtpAgent({
+    service: VIDEO_SERVICE,
+  })
 }
 
 export function mimeToExt(mimeType: SupportedMimeTypes | (string & {})) {
diff --git a/src/state/queries/video/video-upload.shared.ts b/src/state/queries/video/video-upload.shared.ts
index 6b633bf213..8c217eadcf 100644
--- a/src/state/queries/video/video-upload.shared.ts
+++ b/src/state/queries/video/video-upload.shared.ts
@@ -1,73 +1,61 @@
-import {useCallback} from 'react'
+import {BskyAgent} from '@atproto/api'
+import {I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 
 import {VIDEO_SERVICE_DID} from '#/lib/constants'
 import {UploadLimitError} from '#/lib/media/video/errors'
 import {getServiceAuthAudFromUrl} from '#/lib/strings/url-helpers'
-import {useAgent} from '#/state/session'
-import {useVideoAgent} from './util'
+import {createVideoAgent} from './util'
 
-export function useServiceAuthToken({
+export async function getServiceAuthToken({
+  agent,
   aud,
   lxm,
   exp,
 }: {
+  agent: BskyAgent
   aud?: string
   lxm: string
   exp?: number
 }) {
-  const agent = useAgent()
-
-  return useCallback(async () => {
-    const pdsAud = getServiceAuthAudFromUrl(agent.dispatchUrl)
-
-    if (!pdsAud) {
-      throw new Error('Agent does not have a PDS URL')
-    }
-
-    const {data: serviceAuth} = await agent.com.atproto.server.getServiceAuth({
-      aud: aud ?? pdsAud,
-      lxm,
-      exp,
-    })
-
-    return serviceAuth.token
-  }, [agent, aud, lxm, exp])
+  const pdsAud = getServiceAuthAudFromUrl(agent.dispatchUrl)
+  if (!pdsAud) {
+    throw new Error('Agent does not have a PDS URL')
+  }
+  const {data: serviceAuth} = await agent.com.atproto.server.getServiceAuth({
+    aud: aud ?? pdsAud,
+    lxm,
+    exp,
+  })
+  return serviceAuth.token
 }
 
-export function useVideoUploadLimits() {
-  const agent = useVideoAgent()
-  const getToken = useServiceAuthToken({
+export async function getVideoUploadLimits(agent: BskyAgent, _: I18n['_']) {
+  const token = await getServiceAuthToken({
+    agent,
     lxm: 'app.bsky.video.getUploadLimits',
     aud: VIDEO_SERVICE_DID,
   })
-  const {_} = useLingui()
-
-  return useCallback(async () => {
-    const {data: limits} = await agent.app.bsky.video
-      .getUploadLimits(
-        {},
-        {headers: {Authorization: `Bearer ${await getToken()}`}},
-      )
-      .catch(err => {
-        if (err instanceof Error) {
-          throw new UploadLimitError(err.message)
-        } else {
-          throw err
-        }
-      })
-
-    if (!limits.canUpload) {
-      if (limits.message) {
-        throw new UploadLimitError(limits.message)
+  const videoAgent = createVideoAgent()
+  const {data: limits} = await videoAgent.app.bsky.video
+    .getUploadLimits({}, {headers: {Authorization: `Bearer ${token}`}})
+    .catch(err => {
+      if (err instanceof Error) {
+        throw new UploadLimitError(err.message)
       } else {
-        throw new UploadLimitError(
-          _(
-            msg`You have temporarily reached the limit for video uploads. Please try again later.`,
-          ),
-        )
+        throw err
       }
+    })
+
+  if (!limits.canUpload) {
+    if (limits.message) {
+      throw new UploadLimitError(limits.message)
+    } else {
+      throw new UploadLimitError(
+        _(
+          msg`You have temporarily reached the limit for video uploads. Please try again later.`,
+        ),
+      )
     }
-  }, [agent, _, getToken])
+  }
 }
diff --git a/src/state/queries/video/video-upload.ts b/src/state/queries/video/video-upload.ts
index 170b538901..46f24a58b1 100644
--- a/src/state/queries/video/video-upload.ts
+++ b/src/state/queries/video/video-upload.ts
@@ -1,76 +1,79 @@
 import {createUploadTask, FileSystemUploadType} from 'expo-file-system'
-import {AppBskyVideoDefs} from '@atproto/api'
+import {AppBskyVideoDefs, BskyAgent} from '@atproto/api'
+import {I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMutation} from '@tanstack/react-query'
 import {nanoid} from 'nanoid/non-secure'
 
-import {cancelable} from '#/lib/async/cancelable'
+import {AbortError} from '#/lib/async/cancelable'
 import {ServerError} from '#/lib/media/video/errors'
 import {CompressedVideo} from '#/lib/media/video/types'
 import {createVideoEndpointUrl, mimeToExt} from '#/state/queries/video/util'
-import {useSession} from '#/state/session'
-import {useServiceAuthToken, useVideoUploadLimits} from './video-upload.shared'
+import {getServiceAuthToken, getVideoUploadLimits} from './video-upload.shared'
 
-export const useUploadVideoMutation = ({
-  onSuccess,
-  onError,
+export async function uploadVideo({
+  video,
+  agent,
+  did,
   setProgress,
   signal,
+  _,
 }: {
-  onSuccess: (response: AppBskyVideoDefs.JobStatus) => void
-  onError: (e: any) => void
+  video: CompressedVideo
+  agent: BskyAgent
+  did: string
   setProgress: (progress: number) => void
   signal: AbortSignal
-}) => {
-  const {currentAccount} = useSession()
-  const getToken = useServiceAuthToken({
+  _: I18n['_']
+}) {
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  await getVideoUploadLimits(agent, _)
+
+  const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
+    did,
+    name: `${nanoid(12)}.${mimeToExt(video.mimeType)}`,
+  })
+
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  const token = await getServiceAuthToken({
+    agent,
     lxm: 'com.atproto.repo.uploadBlob',
     exp: Date.now() / 1000 + 60 * 30, // 30 minutes
   })
-  const checkLimits = useVideoUploadLimits()
-  const {_} = useLingui()
+  const uploadTask = createUploadTask(
+    uri,
+    video.uri,
+    {
+      headers: {
+        'content-type': video.mimeType,
+        Authorization: `Bearer ${token}`,
+      },
+      httpMethod: 'POST',
+      uploadType: FileSystemUploadType.BINARY_CONTENT,
+    },
+    p => setProgress(p.totalBytesSent / p.totalBytesExpectedToSend),
+  )
 
-  return useMutation({
-    mutationKey: ['video', 'upload'],
-    mutationFn: cancelable(async (video: CompressedVideo) => {
-      await checkLimits()
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  const res = await uploadTask.uploadAsync()
 
-      const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
-        did: currentAccount!.did,
-        name: `${nanoid(12)}.${mimeToExt(video.mimeType)}`,
-      })
+  if (!res?.body) {
+    throw new Error('No response')
+  }
 
-      const uploadTask = createUploadTask(
-        uri,
-        video.uri,
-        {
-          headers: {
-            'content-type': video.mimeType,
-            Authorization: `Bearer ${await getToken()}`,
-          },
-          httpMethod: 'POST',
-          uploadType: FileSystemUploadType.BINARY_CONTENT,
-        },
-        p => setProgress(p.totalBytesSent / p.totalBytesExpectedToSend),
-      )
-      const res = await uploadTask.uploadAsync()
+  const responseBody = JSON.parse(res.body) as AppBskyVideoDefs.JobStatus
 
-      if (!res?.body) {
-        throw new Error('No response')
-      }
+  if (!responseBody.jobId) {
+    throw new ServerError(responseBody.error || _(msg`Failed to upload video`))
+  }
 
-      const responseBody = JSON.parse(res.body) as AppBskyVideoDefs.JobStatus
-
-      if (!responseBody.jobId) {
-        throw new ServerError(
-          responseBody.error || _(msg`Failed to upload video`),
-        )
-      }
-
-      return responseBody
-    }, signal),
-    onError,
-    onSuccess,
-  })
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  return responseBody
 }
diff --git a/src/state/queries/video/video-upload.web.ts b/src/state/queries/video/video-upload.web.ts
index c93e206030..bbae641999 100644
--- a/src/state/queries/video/video-upload.web.ts
+++ b/src/state/queries/video/video-upload.web.ts
@@ -1,86 +1,95 @@
 import {AppBskyVideoDefs} from '@atproto/api'
+import {BskyAgent} from '@atproto/api'
+import {I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMutation} from '@tanstack/react-query'
 import {nanoid} from 'nanoid/non-secure'
 
-import {cancelable} from '#/lib/async/cancelable'
+import {AbortError} from '#/lib/async/cancelable'
 import {ServerError} from '#/lib/media/video/errors'
 import {CompressedVideo} from '#/lib/media/video/types'
 import {createVideoEndpointUrl, mimeToExt} from '#/state/queries/video/util'
-import {useSession} from '#/state/session'
-import {useServiceAuthToken, useVideoUploadLimits} from './video-upload.shared'
+import {getServiceAuthToken, getVideoUploadLimits} from './video-upload.shared'
 
-export const useUploadVideoMutation = ({
-  onSuccess,
-  onError,
+export async function uploadVideo({
+  video,
+  agent,
+  did,
   setProgress,
   signal,
+  _,
 }: {
-  onSuccess: (response: AppBskyVideoDefs.JobStatus) => void
-  onError: (e: any) => void
+  video: CompressedVideo
+  agent: BskyAgent
+  did: string
   setProgress: (progress: number) => void
   signal: AbortSignal
-}) => {
-  const {currentAccount} = useSession()
-  const getToken = useServiceAuthToken({
+  _: I18n['_']
+}) {
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  await getVideoUploadLimits(agent, _)
+
+  const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
+    did,
+    name: `${nanoid(12)}.${mimeToExt(video.mimeType)}`,
+  })
+
+  let bytes = video.bytes
+  if (!bytes) {
+    if (signal.aborted) {
+      throw new AbortError()
+    }
+    bytes = await fetch(video.uri).then(res => res.arrayBuffer())
+  }
+
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  const token = await getServiceAuthToken({
+    agent,
     lxm: 'com.atproto.repo.uploadBlob',
     exp: Date.now() / 1000 + 60 * 30, // 30 minutes
   })
-  const checkLimits = useVideoUploadLimits()
-  const {_} = useLingui()
-
-  return useMutation({
-    mutationKey: ['video', 'upload'],
-    mutationFn: cancelable(async (video: CompressedVideo) => {
-      await checkLimits()
 
-      const uri = createVideoEndpointUrl('/xrpc/app.bsky.video.uploadVideo', {
-        did: currentAccount!.did,
-        name: `${nanoid(12)}.${mimeToExt(video.mimeType)}`,
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  const xhr = new XMLHttpRequest()
+  const res = await new Promise<AppBskyVideoDefs.JobStatus>(
+    (resolve, reject) => {
+      xhr.upload.addEventListener('progress', e => {
+        const progress = e.loaded / e.total
+        setProgress(progress)
       })
-
-      let bytes = video.bytes
-      if (!bytes) {
-        bytes = await fetch(video.uri).then(res => res.arrayBuffer())
+      xhr.onloadend = () => {
+        if (signal.aborted) {
+          reject(new AbortError())
+        } else if (xhr.readyState === 4) {
+          const uploadRes = JSON.parse(
+            xhr.responseText,
+          ) as AppBskyVideoDefs.JobStatus
+          resolve(uploadRes)
+        } else {
+          reject(new ServerError(_(msg`Failed to upload video`)))
+        }
       }
-
-      const token = await getToken()
-
-      const xhr = new XMLHttpRequest()
-      const res = await new Promise<AppBskyVideoDefs.JobStatus>(
-        (resolve, reject) => {
-          xhr.upload.addEventListener('progress', e => {
-            const progress = e.loaded / e.total
-            setProgress(progress)
-          })
-          xhr.onloadend = () => {
-            if (xhr.readyState === 4) {
-              const uploadRes = JSON.parse(
-                xhr.responseText,
-              ) as AppBskyVideoDefs.JobStatus
-              resolve(uploadRes)
-            } else {
-              reject(new ServerError(_(msg`Failed to upload video`)))
-            }
-          }
-          xhr.onerror = () => {
-            reject(new ServerError(_(msg`Failed to upload video`)))
-          }
-          xhr.open('POST', uri)
-          xhr.setRequestHeader('Content-Type', video.mimeType)
-          xhr.setRequestHeader('Authorization', `Bearer ${token}`)
-          xhr.send(bytes)
-        },
-      )
-
-      if (!res.jobId) {
-        throw new ServerError(res.error || _(msg`Failed to upload video`))
+      xhr.onerror = () => {
+        reject(new ServerError(_(msg`Failed to upload video`)))
       }
+      xhr.open('POST', uri)
+      xhr.setRequestHeader('Content-Type', video.mimeType)
+      xhr.setRequestHeader('Authorization', `Bearer ${token}`)
+      xhr.send(bytes)
+    },
+  )
 
-      return res
-    }, signal),
-    onError,
-    onSuccess,
-  })
+  if (!res.jobId) {
+    throw new ServerError(res.error || _(msg`Failed to upload video`))
+  }
+
+  if (signal.aborted) {
+    throw new AbortError()
+  }
+  return res
 }
diff --git a/src/state/queries/video/video.ts b/src/state/queries/video/video.ts
index 0d77935da9..fabee6ad1a 100644
--- a/src/state/queries/video/video.ts
+++ b/src/state/queries/video/video.ts
@@ -1,12 +1,11 @@
-import React, {useCallback, useEffect} from 'react'
 import {ImagePickerAsset} from 'expo-image-picker'
-import {AppBskyVideoDefs, BlobRef} from '@atproto/api'
+import {AppBskyVideoDefs, BlobRef, BskyAgent} from '@atproto/api'
+import {JobStatus} from '@atproto/api/dist/client/types/app/bsky/video/defs'
+import {I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {QueryClient, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {AbortError} from '#/lib/async/cancelable'
-import {SUPPORTED_MIME_TYPES, SupportedMimeTypes} from '#/lib/constants'
+import {compressVideo} from '#/lib/media/video/compress'
 import {
   ServerError,
   UploadLimitError,
@@ -14,338 +13,409 @@ import {
 } from '#/lib/media/video/errors'
 import {CompressedVideo} from '#/lib/media/video/types'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
-import {useCompressVideoMutation} from '#/state/queries/video/compress-video'
-import {useVideoAgent} from '#/state/queries/video/util'
-import {useUploadVideoMutation} from '#/state/queries/video/video-upload'
-
-type Status = 'idle' | 'compressing' | 'processing' | 'uploading' | 'done'
+import {createVideoAgent} from '#/state/queries/video/util'
+import {uploadVideo} from '#/state/queries/video/video-upload'
 
 type Action =
-  | {type: 'SetStatus'; status: Status}
-  | {type: 'SetProgress'; progress: number}
-  | {type: 'SetError'; error: string | undefined}
-  | {type: 'Reset'}
-  | {type: 'SetAsset'; asset: ImagePickerAsset}
-  | {type: 'SetDimensions'; width: number; height: number}
-  | {type: 'SetVideo'; video: CompressedVideo}
-  | {type: 'SetJobStatus'; jobStatus: AppBskyVideoDefs.JobStatus}
-  | {type: 'SetComplete'; blobRef: BlobRef}
+  | {type: 'to_idle'; nextController: AbortController}
+  | {
+      type: 'idle_to_compressing'
+      asset: ImagePickerAsset
+      signal: AbortSignal
+    }
+  | {
+      type: 'compressing_to_uploading'
+      video: CompressedVideo
+      signal: AbortSignal
+    }
+  | {
+      type: 'uploading_to_processing'
+      jobId: string
+      signal: AbortSignal
+    }
+  | {type: 'to_error'; error: string; signal: AbortSignal}
+  | {
+      type: 'to_done'
+      blobRef: BlobRef
+      signal: AbortSignal
+    }
+  | {type: 'update_progress'; progress: number; signal: AbortSignal}
+  | {
+      type: 'update_dimensions'
+      width: number
+      height: number
+      signal: AbortSignal
+    }
+  | {
+      type: 'update_job_status'
+      jobStatus: AppBskyVideoDefs.JobStatus
+      signal: AbortSignal
+    }
 
-export interface State {
-  status: Status
-  progress: number
-  asset?: ImagePickerAsset
+type IdleState = {
+  status: 'idle'
+  progress: 0
+  abortController: AbortController
+  asset?: undefined
+  video?: undefined
+  jobId?: undefined
+  pendingPublish?: undefined
+}
+
+type ErrorState = {
+  status: 'error'
+  progress: 100
+  abortController: AbortController
+  asset: ImagePickerAsset | null
   video: CompressedVideo | null
-  jobStatus?: AppBskyVideoDefs.JobStatus
-  blobRef?: BlobRef
-  error?: string
+  jobId: string | null
+  error: string
+  pendingPublish?: undefined
+}
+
+type CompressingState = {
+  status: 'compressing'
+  progress: number
   abortController: AbortController
-  pendingPublish?: {blobRef: BlobRef; mutableProcessed: boolean}
+  asset: ImagePickerAsset
+  video?: undefined
+  jobId?: undefined
+  pendingPublish?: undefined
 }
 
-export type VideoUploadDispatch = (action: Action) => void
+type UploadingState = {
+  status: 'uploading'
+  progress: number
+  abortController: AbortController
+  asset: ImagePickerAsset
+  video: CompressedVideo
+  jobId?: undefined
+  pendingPublish?: undefined
+}
 
-function reducer(queryClient: QueryClient) {
-  return (state: State, action: Action): State => {
-    let updatedState = state
-    if (action.type === 'SetStatus') {
-      updatedState = {...state, status: action.status}
-    } else if (action.type === 'SetProgress') {
-      updatedState = {...state, progress: action.progress}
-    } else if (action.type === 'SetError') {
-      updatedState = {...state, error: action.error}
-    } else if (action.type === 'Reset') {
-      state.abortController.abort()
-      queryClient.cancelQueries({
-        queryKey: ['video'],
-      })
-      updatedState = {
-        status: 'idle',
-        progress: 0,
-        video: null,
-        blobRef: undefined,
-        abortController: new AbortController(),
-      }
-    } else if (action.type === 'SetAsset') {
-      updatedState = {
+type ProcessingState = {
+  status: 'processing'
+  progress: number
+  abortController: AbortController
+  asset: ImagePickerAsset
+  video: CompressedVideo
+  jobId: string
+  jobStatus: AppBskyVideoDefs.JobStatus | null
+  pendingPublish?: undefined
+}
+
+type DoneState = {
+  status: 'done'
+  progress: 100
+  abortController: AbortController
+  asset: ImagePickerAsset
+  video: CompressedVideo
+  jobId?: undefined
+  pendingPublish: {blobRef: BlobRef; mutableProcessed: boolean}
+}
+
+export type State =
+  | IdleState
+  | ErrorState
+  | CompressingState
+  | UploadingState
+  | ProcessingState
+  | DoneState
+
+export function createVideoState(
+  abortController: AbortController = new AbortController(),
+): IdleState {
+  return {
+    status: 'idle',
+    progress: 0,
+    abortController,
+  }
+}
+
+export function videoReducer(state: State, action: Action): State {
+  if (action.type === 'to_idle') {
+    return createVideoState(action.nextController)
+  }
+  if (action.signal.aborted || action.signal !== state.abortController.signal) {
+    // This action is stale and the process that spawned it is no longer relevant.
+    return state
+  }
+  if (action.type === 'to_error') {
+    return {
+      status: 'error',
+      progress: 100,
+      abortController: state.abortController,
+      error: action.error,
+      asset: state.asset ?? null,
+      video: state.video ?? null,
+      jobId: state.jobId ?? null,
+    }
+  } else if (action.type === 'update_progress') {
+    if (state.status === 'compressing' || state.status === 'uploading') {
+      return {
         ...state,
-        asset: action.asset,
+        progress: action.progress,
+      }
+    }
+  } else if (action.type === 'idle_to_compressing') {
+    if (state.status === 'idle') {
+      return {
         status: 'compressing',
-        error: undefined,
+        progress: 0,
+        abortController: state.abortController,
+        asset: action.asset,
       }
-    } else if (action.type === 'SetDimensions') {
-      updatedState = {
+    }
+  } else if (action.type === 'update_dimensions') {
+    if (state.asset) {
+      return {
         ...state,
-        asset: state.asset
-          ? {...state.asset, width: action.width, height: action.height}
-          : undefined,
+        asset: {...state.asset, width: action.width, height: action.height},
       }
-    } else if (action.type === 'SetVideo') {
-      updatedState = {...state, video: action.video, status: 'uploading'}
-    } else if (action.type === 'SetJobStatus') {
-      updatedState = {...state, jobStatus: action.jobStatus}
-    } else if (action.type === 'SetComplete') {
-      updatedState = {
+    }
+  } else if (action.type === 'compressing_to_uploading') {
+    if (state.status === 'compressing') {
+      return {
+        status: 'uploading',
+        progress: 0,
+        abortController: state.abortController,
+        asset: state.asset,
+        video: action.video,
+      }
+    }
+    return state
+  } else if (action.type === 'uploading_to_processing') {
+    if (state.status === 'uploading') {
+      return {
+        status: 'processing',
+        progress: 0,
+        abortController: state.abortController,
+        asset: state.asset,
+        video: state.video,
+        jobId: action.jobId,
+        jobStatus: null,
+      }
+    }
+  } else if (action.type === 'update_job_status') {
+    if (state.status === 'processing') {
+      return {
         ...state,
+        jobStatus: action.jobStatus,
+        progress:
+          action.jobStatus.progress !== undefined
+            ? action.jobStatus.progress / 100
+            : state.progress,
+      }
+    }
+  } else if (action.type === 'to_done') {
+    if (state.status === 'processing') {
+      return {
+        status: 'done',
+        progress: 100,
+        abortController: state.abortController,
+        asset: state.asset,
+        video: state.video,
         pendingPublish: {
           blobRef: action.blobRef,
           mutableProcessed: false,
         },
-        status: 'done',
       }
     }
-    return updatedState
   }
+  console.error(
+    'Unexpected video action (' +
+      action.type +
+      ') while in ' +
+      state.status +
+      ' state',
+  )
+  return state
 }
 
-export function useUploadVideo({
-  setStatus,
-  initialVideoUri,
-}: {
-  setStatus: (status: string) => void
-  onSuccess: () => void
-  initialVideoUri?: string
-}) {
-  const {_} = useLingui()
-  const queryClient = useQueryClient()
-  const [state, dispatch] = React.useReducer(reducer(queryClient), {
-    status: 'idle',
-    progress: 0,
-    video: null,
-    abortController: new AbortController(),
-  })
-
-  const {setJobId} = useUploadStatusQuery({
-    onStatusChange: (status: AppBskyVideoDefs.JobStatus) => {
-      // This might prove unuseful, most of the job status steps happen too quickly to even be displayed to the user
-      // Leaving it for now though
-      dispatch({
-        type: 'SetJobStatus',
-        jobStatus: status,
-      })
-      setStatus(status.state.toString())
-    },
-    onSuccess: blobRef => {
-      dispatch({
-        type: 'SetComplete',
-        blobRef,
-      })
-    },
-    onError: useCallback(
-      error => {
-        logger.error('Error processing video', {safeMessage: error})
-        dispatch({
-          type: 'SetError',
-          error: _(msg`Video failed to process`),
-        })
-      },
-      [_],
-    ),
-  })
+function trunc2dp(num: number) {
+  return Math.trunc(num * 100) / 100
+}
 
-  const {mutate: onVideoCompressed} = useUploadVideoMutation({
-    onSuccess: response => {
-      dispatch({
-        type: 'SetStatus',
-        status: 'processing',
-      })
-      setJobId(response.jobId)
-    },
-    onError: e => {
-      if (e instanceof AbortError) {
-        return
-      } else if (e instanceof ServerError || e instanceof UploadLimitError) {
-        let message
-        // https://github.com/bluesky-social/tango/blob/lumi/lumi/worker/permissions.go#L77
-        switch (e.message) {
-          case 'User is not allowed to upload videos':
-            message = _(msg`You are not allowed to upload videos.`)
-            break
-          case 'Uploading is disabled at the moment':
-            message = _(
-              msg`Hold up! We’re gradually giving access to video, and you’re still waiting in line. Check back soon!`,
-            )
-            break
-          case "Failed to get user's upload stats":
-            message = _(
-              msg`We were unable to determine if you are allowed to upload videos. Please try again.`,
-            )
-            break
-          case 'User has exceeded daily upload bytes limit':
-            message = _(
-              msg`You've reached your daily limit for video uploads (too many bytes)`,
-            )
-            break
-          case 'User has exceeded daily upload videos limit':
-            message = _(
-              msg`You've reached your daily limit for video uploads (too many videos)`,
-            )
-            break
-          case 'Account is not old enough to upload videos':
-            message = _(
-              msg`Your account is not yet old enough to upload videos. Please try again later.`,
-            )
-            break
-          default:
-            message = e.message
-            break
-        }
-        dispatch({
-          type: 'SetError',
-          error: message,
-        })
-      } else {
-        dispatch({
-          type: 'SetError',
-          error: _(msg`An error occurred while uploading the video.`),
-        })
-      }
-      logger.error('Error uploading video', {safeMessage: e})
-    },
-    setProgress: p => {
-      dispatch({type: 'SetProgress', progress: p})
-    },
-    signal: state.abortController.signal,
+export async function processVideo(
+  asset: ImagePickerAsset,
+  dispatch: (action: Action) => void,
+  agent: BskyAgent,
+  did: string,
+  signal: AbortSignal,
+  _: I18n['_'],
+) {
+  dispatch({
+    type: 'idle_to_compressing',
+    asset,
+    signal,
   })
 
-  const {mutate: onSelectVideo} = useCompressVideoMutation({
-    onProgress: p => {
-      dispatch({type: 'SetProgress', progress: p})
-    },
-    onSuccess: (video: CompressedVideo) => {
+  let video: CompressedVideo | undefined
+  try {
+    video = await compressVideo(asset, {
+      onProgress: num => {
+        dispatch({type: 'update_progress', progress: trunc2dp(num), signal})
+      },
+      signal,
+    })
+  } catch (e) {
+    const message = getCompressErrorMessage(e, _)
+    if (message !== null) {
       dispatch({
-        type: 'SetVideo',
-        video,
+        type: 'to_error',
+        error: message,
+        signal,
       })
-      onVideoCompressed(video)
-    },
-    onError: e => {
-      if (e instanceof AbortError) {
-        return
-      } else if (e instanceof VideoTooLargeError) {
-        dispatch({
-          type: 'SetError',
-          error: _(msg`The selected video is larger than 50MB.`),
-        })
-      } else {
-        dispatch({
-          type: 'SetError',
-          error: _(msg`An error occurred while compressing the video.`),
-        })
-        logger.error('Error compressing video', {safeMessage: e})
-      }
-    },
-    signal: state.abortController.signal,
+    }
+    return
+  }
+  dispatch({
+    type: 'compressing_to_uploading',
+    video,
+    signal,
   })
 
-  const selectVideo = React.useCallback(
-    (asset: ImagePickerAsset) => {
-      // compression step on native converts to mp4, so no need to check there
-      if (isWeb) {
-        const mimeType = getMimeType(asset)
-        if (!SUPPORTED_MIME_TYPES.includes(mimeType as SupportedMimeTypes)) {
-          throw new Error(_(msg`Unsupported video type: ${mimeType}`))
-        }
-      }
-
+  let uploadResponse: AppBskyVideoDefs.JobStatus | undefined
+  try {
+    uploadResponse = await uploadVideo({
+      video,
+      agent,
+      did,
+      signal,
+      _,
+      setProgress: p => {
+        dispatch({type: 'update_progress', progress: p, signal})
+      },
+    })
+  } catch (e) {
+    const message = getUploadErrorMessage(e, _)
+    if (message !== null) {
       dispatch({
-        type: 'SetAsset',
-        asset,
+        type: 'to_error',
+        error: message,
+        signal,
       })
-      onSelectVideo(asset)
-    },
-    [_, onSelectVideo],
-  )
-
-  const clearVideo = () => {
-    dispatch({type: 'Reset'})
+    }
+    return
   }
 
-  const updateVideoDimensions = useCallback((width: number, height: number) => {
-    dispatch({
-      type: 'SetDimensions',
-      width,
-      height,
-    })
-  }, [])
+  const jobId = uploadResponse.jobId
+  dispatch({
+    type: 'uploading_to_processing',
+    jobId,
+    signal,
+  })
 
-  // Whenever we receive an initial video uri, we should immediately run compression if necessary
-  useEffect(() => {
-    if (initialVideoUri) {
-      selectVideo({uri: initialVideoUri} as ImagePickerAsset)
+  let pollFailures = 0
+  while (true) {
+    if (signal.aborted) {
+      return // Exit async loop
     }
-  }, [initialVideoUri, selectVideo])
-
-  return {
-    state,
-    dispatch,
-    selectVideo,
-    clearVideo,
-    updateVideoDimensions,
-  }
-}
 
-const useUploadStatusQuery = ({
-  onStatusChange,
-  onSuccess,
-  onError,
-}: {
-  onStatusChange: (status: AppBskyVideoDefs.JobStatus) => void
-  onSuccess: (blobRef: BlobRef) => void
-  onError: (error: Error) => void
-}) => {
-  const videoAgent = useVideoAgent()
-  const [enabled, setEnabled] = React.useState(true)
-  const [jobId, setJobId] = React.useState<string>()
+    const videoAgent = createVideoAgent()
+    let status: JobStatus | undefined
+    let blob: BlobRef | undefined
+    try {
+      const response = await videoAgent.app.bsky.video.getJobStatus({jobId})
+      status = response.data.jobStatus
+      pollFailures = 0
 
-  const {error} = useQuery({
-    queryKey: ['video', 'upload status', jobId],
-    queryFn: async () => {
-      if (!jobId) return // this won't happen, can ignore
-
-      const {data} = await videoAgent.app.bsky.video.getJobStatus({jobId})
-      const status = data.jobStatus
       if (status.state === 'JOB_STATE_COMPLETED') {
-        setEnabled(false)
-        if (!status.blob)
+        blob = status.blob
+        if (!blob) {
           throw new Error('Job completed, but did not return a blob')
-        onSuccess(status.blob)
+        }
       } else if (status.state === 'JOB_STATE_FAILED') {
         throw new Error(status.error ?? 'Job failed to process')
       }
-      onStatusChange(status)
-      return status
-    },
-    enabled: Boolean(jobId && enabled),
-    refetchInterval: 1500,
-  })
+    } catch (e) {
+      if (!status) {
+        pollFailures++
+        if (pollFailures < 50) {
+          await new Promise(resolve => setTimeout(resolve, 5000))
+          continue // Continue async loop
+        }
+      }
 
-  useEffect(() => {
-    if (error) {
-      onError(error)
-      setEnabled(false)
+      logger.error('Error processing video', {safeMessage: e})
+      dispatch({
+        type: 'to_error',
+        error: _(msg`Video failed to process`),
+        signal,
+      })
+      return // Exit async loop
     }
-  }, [error, onError])
 
-  return {
-    setJobId: (_jobId: string) => {
-      setJobId(_jobId)
-      setEnabled(true)
-    },
+    if (blob) {
+      dispatch({
+        type: 'to_done',
+        blobRef: blob,
+        signal,
+      })
+    } else {
+      dispatch({
+        type: 'update_job_status',
+        jobStatus: status,
+        signal,
+      })
+    }
+
+    if (
+      status.state !== 'JOB_STATE_COMPLETED' &&
+      status.state !== 'JOB_STATE_FAILED'
+    ) {
+      await new Promise(resolve => setTimeout(resolve, 1500))
+      continue // Continue async loop
+    }
+
+    return // Exit async loop
   }
 }
 
-function getMimeType(asset: ImagePickerAsset) {
-  if (isWeb) {
-    const [mimeType] = asset.uri.slice('data:'.length).split(';base64,')
-    if (!mimeType) {
-      throw new Error('Could not determine mime type')
-    }
-    return mimeType
+function getCompressErrorMessage(e: unknown, _: I18n['_']): string | null {
+  if (e instanceof AbortError) {
+    return null
   }
-  if (!asset.mimeType) {
-    throw new Error('Could not determine mime type')
+  if (e instanceof VideoTooLargeError) {
+    return _(msg`The selected video is larger than 50MB.`)
+  }
+  logger.error('Error compressing video', {safeMessage: e})
+  return _(msg`An error occurred while compressing the video.`)
+}
+
+function getUploadErrorMessage(e: unknown, _: I18n['_']): string | null {
+  if (e instanceof AbortError) {
+    return null
+  }
+  logger.error('Error uploading video', {safeMessage: e})
+  if (e instanceof ServerError || e instanceof UploadLimitError) {
+    // https://github.com/bluesky-social/tango/blob/lumi/lumi/worker/permissions.go#L77
+    switch (e.message) {
+      case 'User is not allowed to upload videos':
+        return _(msg`You are not allowed to upload videos.`)
+      case 'Uploading is disabled at the moment':
+        return _(
+          msg`Hold up! We’re gradually giving access to video, and you’re still waiting in line. Check back soon!`,
+        )
+      case "Failed to get user's upload stats":
+        return _(
+          msg`We were unable to determine if you are allowed to upload videos. Please try again.`,
+        )
+      case 'User has exceeded daily upload bytes limit':
+        return _(
+          msg`You've reached your daily limit for video uploads (too many bytes)`,
+        )
+      case 'User has exceeded daily upload videos limit':
+        return _(
+          msg`You've reached your daily limit for video uploads (too many videos)`,
+        )
+      case 'Account is not old enough to upload videos':
+        return _(
+          msg`Your account is not yet old enough to upload videos. Please try again later.`,
+        )
+      default:
+        return e.message
+    }
   }
-  return asset.mimeType
+  return _(msg`An error occurred while uploading the video.`)
 }
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index eb15a78a4b..003ff6909a 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -36,6 +36,7 @@ import Animated, {
   ZoomOut,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {ImagePickerAsset} from 'expo-image-picker'
 import {
   AppBskyFeedDefs,
   AppBskyFeedGetPostThread,
@@ -82,9 +83,10 @@ import {Gif} from '#/state/queries/tenor'
 import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
 import {threadgateViewToAllowUISetting} from '#/state/queries/threadgate/util'
 import {
+  createVideoState,
+  processVideo,
   State as VideoUploadState,
-  useUploadVideo,
-  VideoUploadDispatch,
+  videoReducer,
 } from '#/state/queries/video/video'
 import {useAgent, useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
@@ -118,10 +120,13 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import {createPortalGroup} from '#/components/Portal'
 import * as Prompt from '#/components/Prompt'
 import {Text as NewText} from '#/components/Typography'
 import {composerReducer, createComposerState} from './state'
 
+const Portal = createPortalGroup()
+
 const MAX_IMAGES = 4
 
 type CancelRef = {
@@ -147,7 +152,8 @@ export const ComposePost = ({
 }) => {
   const {currentAccount} = useSession()
   const agent = useAgent()
-  const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
+  const currentDid = currentAccount!.did
+  const {data: currentProfile} = useProfileQuery({did: currentDid})
   const {isModalActive} = useModals()
   const {closeComposer} = useComposerControls()
   const pal = usePalette('default')
@@ -189,21 +195,50 @@ export const ComposePost = ({
   const [videoAltText, setVideoAltText] = useState('')
   const [captions, setCaptions] = useState<{lang: string; file: File}[]>([])
 
-  const {
-    selectVideo,
-    clearVideo,
-    state: videoUploadState,
-    updateVideoDimensions,
-    dispatch: videoUploadDispatch,
-  } = useUploadVideo({
-    setStatus: setProcessingState,
-    onSuccess: () => {
-      if (publishOnUpload) {
-        onPressPublish(true)
-      }
+  const [videoUploadState, videoDispatch] = useReducer(
+    videoReducer,
+    undefined,
+    createVideoState,
+  )
+
+  const selectVideo = React.useCallback(
+    (asset: ImagePickerAsset) => {
+      processVideo(
+        asset,
+        videoDispatch,
+        agent,
+        currentDid,
+        videoUploadState.abortController.signal,
+        _,
+      )
     },
-    initialVideoUri: initVideoUri,
-  })
+    [_, videoUploadState.abortController, videoDispatch, agent, currentDid],
+  )
+
+  // Whenever we receive an initial video uri, we should immediately run compression if necessary
+  useEffect(() => {
+    if (initVideoUri) {
+      selectVideo({uri: initVideoUri} as ImagePickerAsset)
+    }
+  }, [initVideoUri, selectVideo])
+
+  const clearVideo = React.useCallback(() => {
+    videoUploadState.abortController.abort()
+    videoDispatch({type: 'to_idle', nextController: new AbortController()})
+  }, [videoUploadState.abortController, videoDispatch])
+
+  const updateVideoDimensions = useCallback(
+    (width: number, height: number) => {
+      videoDispatch({
+        type: 'update_dimensions',
+        width,
+        height,
+        signal: videoUploadState.abortController.signal,
+      })
+    },
+    [videoUploadState.abortController],
+  )
+
   const hasVideo = Boolean(videoUploadState.asset || videoUploadState.video)
 
   const [publishOnUpload, setPublishOnUpload] = useState(false)
@@ -400,19 +435,18 @@ export const ComposePost = ({
             postgate,
             onStateChange: setProcessingState,
             langs: toPostLanguages(langPrefs.postLanguage),
-            video: videoUploadState.pendingPublish?.blobRef
-              ? {
-                  blobRef: videoUploadState.pendingPublish.blobRef,
-                  altText: videoAltText,
-                  captions: captions,
-                  aspectRatio: videoUploadState.asset
-                    ? {
-                        width: videoUploadState.asset?.width,
-                        height: videoUploadState.asset?.height,
-                      }
-                    : undefined,
-                }
-              : undefined,
+            video:
+              videoUploadState.status === 'done'
+                ? {
+                    blobRef: videoUploadState.pendingPublish.blobRef,
+                    altText: videoAltText,
+                    captions: captions,
+                    aspectRatio: {
+                      width: videoUploadState.asset.width,
+                      height: videoUploadState.asset.height,
+                    },
+                  }
+                : undefined,
           })
         ).uri
         try {
@@ -598,272 +632,285 @@ export const ComposePost = ({
   const keyboardVerticalOffset = useKeyboardVerticalOffset()
 
   return (
-    <KeyboardAvoidingView
-      testID="composePostView"
-      behavior={isIOS ? 'padding' : 'height'}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-      style={a.flex_1}>
-      <View style={[a.flex_1, viewStyles]} aria-modal accessibilityViewIsModal>
-        <Animated.View
-          style={topBarAnimatedStyle}
-          layout={native(LinearTransition)}>
-          <View style={styles.topbarInner}>
-            <Button
-              label={_(msg`Cancel`)}
-              variant="ghost"
-              color="primary"
-              shape="default"
-              size="small"
-              style={[
-                a.rounded_full,
-                a.py_sm,
-                {paddingLeft: 7, paddingRight: 7},
-              ]}
-              onPress={onPressCancel}
-              accessibilityHint={_(
-                msg`Closes post composer and discards post draft`,
-              )}>
-              <ButtonText style={[a.text_md]}>
-                <Trans>Cancel</Trans>
-              </ButtonText>
-            </Button>
-            <View style={a.flex_1} />
-            {isProcessing ? (
-              <>
-                <Text style={pal.textLight}>{processingState}</Text>
-                <View style={styles.postBtn}>
-                  <ActivityIndicator />
-                </View>
-              </>
-            ) : (
-              <View style={[styles.postBtnWrapper]}>
-                <LabelsBtn
-                  labels={labels}
-                  onChange={setLabels}
-                  hasMedia={hasMedia}
-                />
-                {canPost ? (
-                  <Button
-                    testID="composerPublishBtn"
-                    label={
-                      replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
-                    }
-                    variant="solid"
-                    color="primary"
-                    shape="default"
-                    size="small"
-                    style={[a.rounded_full, a.py_sm]}
-                    onPress={() => onPressPublish()}
-                    disabled={
-                      videoUploadState.status !== 'idle' && publishOnUpload
-                    }>
-                    <ButtonText style={[a.text_md]}>
-                      {replyTo ? (
-                        <Trans context="action">Reply</Trans>
-                      ) : (
-                        <Trans context="action">Post</Trans>
-                      )}
-                    </ButtonText>
-                  </Button>
-                ) : (
-                  <View style={[styles.postBtn, pal.btn]}>
-                    <Text style={[pal.textLight, s.f16, s.bold]}>
-                      <Trans context="action">Post</Trans>
-                    </Text>
+    <Portal.Provider>
+      <KeyboardAvoidingView
+        testID="composePostView"
+        behavior={isIOS ? 'padding' : 'height'}
+        keyboardVerticalOffset={keyboardVerticalOffset}
+        style={a.flex_1}>
+        <View
+          style={[a.flex_1, viewStyles]}
+          aria-modal
+          accessibilityViewIsModal>
+          <Animated.View
+            style={topBarAnimatedStyle}
+            layout={native(LinearTransition)}>
+            <View style={styles.topbarInner}>
+              <Button
+                label={_(msg`Cancel`)}
+                variant="ghost"
+                color="primary"
+                shape="default"
+                size="small"
+                style={[
+                  a.rounded_full,
+                  a.py_sm,
+                  {paddingLeft: 7, paddingRight: 7},
+                ]}
+                onPress={onPressCancel}
+                accessibilityHint={_(
+                  msg`Closes post composer and discards post draft`,
+                )}>
+                <ButtonText style={[a.text_md]}>
+                  <Trans>Cancel</Trans>
+                </ButtonText>
+              </Button>
+              <View style={a.flex_1} />
+              {isProcessing ? (
+                <>
+                  <Text style={pal.textLight}>{processingState}</Text>
+                  <View style={styles.postBtn}>
+                    <ActivityIndicator />
                   </View>
-                )}
+                </>
+              ) : (
+                <View style={[styles.postBtnWrapper]}>
+                  <LabelsBtn
+                    labels={labels}
+                    onChange={setLabels}
+                    hasMedia={hasMedia}
+                  />
+                  {canPost ? (
+                    <Button
+                      testID="composerPublishBtn"
+                      label={
+                        replyTo ? _(msg`Publish reply`) : _(msg`Publish post`)
+                      }
+                      variant="solid"
+                      color="primary"
+                      shape="default"
+                      size="small"
+                      style={[a.rounded_full, a.py_sm]}
+                      onPress={() => onPressPublish()}
+                      disabled={
+                        videoUploadState.status !== 'idle' && publishOnUpload
+                      }>
+                      <ButtonText style={[a.text_md]}>
+                        {replyTo ? (
+                          <Trans context="action">Reply</Trans>
+                        ) : (
+                          <Trans context="action">Post</Trans>
+                        )}
+                      </ButtonText>
+                    </Button>
+                  ) : (
+                    <View style={[styles.postBtn, pal.btn]}>
+                      <Text style={[pal.textLight, s.f16, s.bold]}>
+                        <Trans context="action">Post</Trans>
+                      </Text>
+                    </View>
+                  )}
+                </View>
+              )}
+            </View>
+
+            {isAltTextRequiredAndMissing && (
+              <View style={[styles.reminderLine, pal.viewLight]}>
+                <View style={styles.errorIcon}>
+                  <FontAwesomeIcon
+                    icon="exclamation"
+                    style={{color: colors.red4}}
+                    size={10}
+                  />
+                </View>
+                <Text style={[pal.text, a.flex_1]}>
+                  <Trans>One or more images is missing alt text.</Trans>
+                </Text>
               </View>
             )}
-          </View>
+            <ErrorBanner
+              error={error}
+              videoUploadState={videoUploadState}
+              clearError={() => setError('')}
+              clearVideo={clearVideo}
+            />
+          </Animated.View>
+          <Animated.ScrollView
+            layout={native(LinearTransition)}
+            onScroll={scrollHandler}
+            style={styles.scrollView}
+            keyboardShouldPersistTaps="always"
+            onContentSizeChange={onScrollViewContentSizeChange}
+            onLayout={onScrollViewLayout}>
+            {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
+
+            <View
+              style={[
+                styles.textInputLayout,
+                isNative && styles.textInputLayoutMobile,
+              ]}>
+              <UserAvatar
+                avatar={currentProfile?.avatar}
+                size={50}
+                type={currentProfile?.associated?.labeler ? 'labeler' : 'user'}
+              />
+              <TextInput
+                ref={textInput}
+                richtext={richtext}
+                placeholder={selectTextInputPlaceholder}
+                autoFocus
+                setRichText={setRichText}
+                onPhotoPasted={onPhotoPasted}
+                onPressPublish={() => onPressPublish()}
+                onNewLink={onNewLink}
+                onError={setError}
+                accessible={true}
+                accessibilityLabel={_(msg`Write post`)}
+                accessibilityHint={_(
+                  msg`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`,
+                )}
+              />
+            </View>
 
-          {isAltTextRequiredAndMissing && (
-            <View style={[styles.reminderLine, pal.viewLight]}>
-              <View style={styles.errorIcon}>
-                <FontAwesomeIcon
-                  icon="exclamation"
-                  style={{color: colors.red4}}
-                  size={10}
+            <Gallery
+              images={images}
+              dispatch={dispatch}
+              Portal={Portal.Portal}
+            />
+            {images.length === 0 && extLink && (
+              <View style={a.relative}>
+                <ExternalEmbed
+                  link={extLink}
+                  gif={extGif}
+                  onRemove={() => {
+                    setExtLink(undefined)
+                    setExtGif(undefined)
+                  }}
+                />
+                <GifAltText
+                  link={extLink}
+                  gif={extGif}
+                  onSubmit={handleChangeGifAltText}
+                  Portal={Portal.Portal}
                 />
               </View>
-              <Text style={[pal.text, a.flex_1]}>
-                <Trans>One or more images is missing alt text.</Trans>
-              </Text>
+            )}
+            <LayoutAnimationConfig skipExiting>
+              {hasVideo && (
+                <Animated.View
+                  style={[a.w_full, a.mt_lg]}
+                  entering={native(ZoomIn)}
+                  exiting={native(ZoomOut)}>
+                  {videoUploadState.asset &&
+                    (videoUploadState.status === 'compressing' ? (
+                      <VideoTranscodeProgress
+                        asset={videoUploadState.asset}
+                        progress={videoUploadState.progress}
+                        clear={clearVideo}
+                      />
+                    ) : videoUploadState.video ? (
+                      <VideoPreview
+                        asset={videoUploadState.asset}
+                        video={videoUploadState.video}
+                        setDimensions={updateVideoDimensions}
+                        clear={clearVideo}
+                      />
+                    ) : null)}
+                  <SubtitleDialogBtn
+                    defaultAltText={videoAltText}
+                    saveAltText={setVideoAltText}
+                    captions={captions}
+                    setCaptions={setCaptions}
+                    Portal={Portal.Portal}
+                  />
+                </Animated.View>
+              )}
+            </LayoutAnimationConfig>
+            <View style={!hasVideo ? [a.mt_md] : []}>
+              {quote ? (
+                <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
+                  <View style={{pointerEvents: 'none'}}>
+                    <QuoteEmbed quote={quote} />
+                  </View>
+                  {quote.uri !== initQuote?.uri && (
+                    <QuoteX onRemove={() => setQuote(undefined)} />
+                  )}
+                </View>
+              ) : null}
             </View>
+          </Animated.ScrollView>
+          <SuggestedLanguage text={richtext.text} />
+
+          {replyTo ? null : (
+            <ThreadgateBtn
+              postgate={postgate}
+              onChangePostgate={setPostgate}
+              threadgateAllowUISettings={threadgateAllowUISettings}
+              onChangeThreadgateAllowUISettings={
+                onChangeThreadgateAllowUISettings
+              }
+              style={bottomBarAnimatedStyle}
+              Portal={Portal.Portal}
+            />
           )}
-          <ErrorBanner
-            error={error}
-            videoUploadState={videoUploadState}
-            clearError={() => setError('')}
-            videoUploadDispatch={videoUploadDispatch}
-          />
-        </Animated.View>
-        <Animated.ScrollView
-          layout={native(LinearTransition)}
-          onScroll={scrollHandler}
-          style={styles.scrollView}
-          keyboardShouldPersistTaps="always"
-          onContentSizeChange={onScrollViewContentSizeChange}
-          onLayout={onScrollViewLayout}>
-          {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
-
           <View
             style={[
-              styles.textInputLayout,
-              isNative && styles.textInputLayoutMobile,
+              t.atoms.bg,
+              t.atoms.border_contrast_medium,
+              styles.bottomBar,
             ]}>
-            <UserAvatar
-              avatar={currentProfile?.avatar}
-              size={50}
-              type={currentProfile?.associated?.labeler ? 'labeler' : 'user'}
-            />
-            <TextInput
-              ref={textInput}
-              richtext={richtext}
-              placeholder={selectTextInputPlaceholder}
-              autoFocus
-              setRichText={setRichText}
-              onPhotoPasted={onPhotoPasted}
-              onPressPublish={() => onPressPublish()}
-              onNewLink={onNewLink}
-              onError={setError}
-              accessible={true}
-              accessibilityLabel={_(msg`Write post`)}
-              accessibilityHint={_(
-                msg`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`,
-              )}
-            />
-          </View>
-
-          <Gallery images={images} dispatch={dispatch} />
-          {images.length === 0 && extLink && (
-            <View style={a.relative}>
-              <ExternalEmbed
-                link={extLink}
-                gif={extGif}
-                onRemove={() => {
-                  setExtLink(undefined)
-                  setExtGif(undefined)
-                }}
-              />
-              <GifAltText
-                link={extLink}
-                gif={extGif}
-                onSubmit={handleChangeGifAltText}
-              />
-            </View>
-          )}
-          <LayoutAnimationConfig skipExiting>
-            {hasVideo && (
-              <Animated.View
-                style={[a.w_full, a.mt_lg]}
-                entering={native(ZoomIn)}
-                exiting={native(ZoomOut)}>
-                {videoUploadState.asset &&
-                  (videoUploadState.status === 'compressing' ? (
-                    <VideoTranscodeProgress
-                      asset={videoUploadState.asset}
-                      progress={videoUploadState.progress}
-                      clear={clearVideo}
-                    />
-                  ) : videoUploadState.video ? (
-                    <VideoPreview
-                      asset={videoUploadState.asset}
-                      video={videoUploadState.video}
-                      setDimensions={updateVideoDimensions}
-                      clear={clearVideo}
-                    />
-                  ) : null)}
-                <SubtitleDialogBtn
-                  defaultAltText={videoAltText}
-                  saveAltText={setVideoAltText}
-                  captions={captions}
-                  setCaptions={setCaptions}
+            {videoUploadState.status !== 'idle' &&
+            videoUploadState.status !== 'done' ? (
+              <VideoUploadToolbar state={videoUploadState} />
+            ) : (
+              <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
+                <SelectPhotoBtn
+                  size={images.length}
+                  disabled={!canSelectImages}
+                  onAdd={onImageAdd}
+                />
+                <SelectVideoBtn
+                  onSelectVideo={selectVideo}
+                  disabled={!canSelectImages}
+                  setError={setError}
+                />
+                <OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} />
+                <SelectGifBtn
+                  onClose={focusTextInput}
+                  onSelectGif={onSelectGif}
+                  disabled={hasMedia}
                 />
-              </Animated.View>
+                {!isMobile ? (
+                  <Button
+                    onPress={onEmojiButtonPress}
+                    style={a.p_sm}
+                    label={_(msg`Open emoji picker`)}
+                    accessibilityHint={_(msg`Open emoji picker`)}
+                    variant="ghost"
+                    shape="round"
+                    color="primary">
+                    <EmojiSmile size="lg" />
+                  </Button>
+                ) : null}
+              </ToolbarWrapper>
             )}
-          </LayoutAnimationConfig>
-          <View style={!hasVideo ? [a.mt_md] : []}>
-            {quote ? (
-              <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
-                <View style={{pointerEvents: 'none'}}>
-                  <QuoteEmbed quote={quote} />
-                </View>
-                {quote.uri !== initQuote?.uri && (
-                  <QuoteX onRemove={() => setQuote(undefined)} />
-                )}
-              </View>
-            ) : null}
+            <View style={a.flex_1} />
+            <SelectLangBtn />
+            <CharProgress count={graphemeLength} />
           </View>
-        </Animated.ScrollView>
-        <SuggestedLanguage text={richtext.text} />
-
-        {replyTo ? null : (
-          <ThreadgateBtn
-            postgate={postgate}
-            onChangePostgate={setPostgate}
-            threadgateAllowUISettings={threadgateAllowUISettings}
-            onChangeThreadgateAllowUISettings={
-              onChangeThreadgateAllowUISettings
-            }
-            style={bottomBarAnimatedStyle}
-          />
-        )}
-        <View
-          style={[
-            t.atoms.bg,
-            t.atoms.border_contrast_medium,
-            styles.bottomBar,
-          ]}>
-          {videoUploadState.status !== 'idle' &&
-          videoUploadState.status !== 'done' ? (
-            <VideoUploadToolbar state={videoUploadState} />
-          ) : (
-            <ToolbarWrapper style={[a.flex_row, a.align_center, a.gap_xs]}>
-              <SelectPhotoBtn
-                size={images.length}
-                disabled={!canSelectImages}
-                onAdd={onImageAdd}
-              />
-              <SelectVideoBtn
-                onSelectVideo={selectVideo}
-                disabled={!canSelectImages}
-                setError={setError}
-              />
-              <OpenCameraBtn disabled={!canSelectImages} onAdd={onImageAdd} />
-              <SelectGifBtn
-                onClose={focusTextInput}
-                onSelectGif={onSelectGif}
-                disabled={hasMedia}
-              />
-              {!isMobile ? (
-                <Button
-                  onPress={onEmojiButtonPress}
-                  style={a.p_sm}
-                  label={_(msg`Open emoji picker`)}
-                  accessibilityHint={_(msg`Open emoji picker`)}
-                  variant="ghost"
-                  shape="round"
-                  color="primary">
-                  <EmojiSmile size="lg" />
-                </Button>
-              ) : null}
-            </ToolbarWrapper>
-          )}
-          <View style={a.flex_1} />
-          <SelectLangBtn />
-          <CharProgress count={graphemeLength} />
         </View>
-      </View>
-      <Prompt.Basic
-        control={discardPromptControl}
-        title={_(msg`Discard draft?`)}
-        description={_(msg`Are you sure you'd like to discard this draft?`)}
-        onConfirm={onClose}
-        confirmButtonCta={_(msg`Discard`)}
-        confirmButtonColor="negative"
-        withoutPortal={true}
-      />
-    </KeyboardAvoidingView>
+        <Prompt.Basic
+          control={discardPromptControl}
+          title={_(msg`Discard draft?`)}
+          description={_(msg`Are you sure you'd like to discard this draft?`)}
+          onConfirm={onClose}
+          confirmButtonCta={_(msg`Discard`)}
+          confirmButtonColor="negative"
+          Portal={Portal.Portal}
+        />
+      </KeyboardAvoidingView>
+      <Portal.Outlet />
+    </Portal.Provider>
   )
 }
 
@@ -1084,25 +1131,25 @@ function ErrorBanner({
   error: standardError,
   videoUploadState,
   clearError,
-  videoUploadDispatch,
+  clearVideo,
 }: {
   error: string
   videoUploadState: VideoUploadState
   clearError: () => void
-  videoUploadDispatch: VideoUploadDispatch
+  clearVideo: () => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
 
   const videoError =
-    videoUploadState.status !== 'idle' ? videoUploadState.error : undefined
+    videoUploadState.status === 'error' ? videoUploadState.error : undefined
   const error = standardError || videoError
 
   const onClearError = () => {
     if (standardError) {
       clearError()
     } else {
-      videoUploadDispatch({type: 'Reset'})
+      clearVideo()
     }
   }
 
@@ -1137,7 +1184,7 @@ function ErrorBanner({
             <ButtonIcon icon={X} />
           </Button>
         </View>
-        {videoError && videoUploadState.jobStatus?.jobId && (
+        {videoError && videoUploadState.jobId && (
           <NewText
             style={[
               {paddingLeft: 28},
@@ -1146,7 +1193,7 @@ function ErrorBanner({
               a.leading_snug,
               t.atoms.text_contrast_low,
             ]}>
-            <Trans>Job ID: {videoUploadState.jobStatus.jobId}</Trans>
+            <Trans>Job ID: {videoUploadState.jobId}</Trans>
           </NewText>
         )}
       </View>
@@ -1175,9 +1222,7 @@ function ToolbarWrapper({
 function VideoUploadToolbar({state}: {state: VideoUploadState}) {
   const t = useTheme()
   const {_} = useLingui()
-  const progress = state.jobStatus?.progress
-    ? state.jobStatus.progress / 100
-    : state.progress
+  const progress = state.progress
   const shouldRotate =
     state.status === 'processing' && (progress === 0 || progress === 1)
   let wheelProgress = shouldRotate ? 0.33 : progress
@@ -1213,16 +1258,15 @@ function VideoUploadToolbar({state}: {state: VideoUploadState}) {
     case 'processing':
       text = _('Processing video...')
       break
+    case 'error':
+      text = _('Error')
+      wheelProgress = 100
+      break
     case 'done':
       text = _('Video uploaded')
       break
   }
 
-  if (state.error) {
-    text = _('Error')
-    wheelProgress = 100
-  }
-
   return (
     <ToolbarWrapper style={[a.flex_row, a.align_center, {paddingVertical: 5}]}>
       <Animated.View style={[animatedStyle]}>
@@ -1230,7 +1274,11 @@ function VideoUploadToolbar({state}: {state: VideoUploadState}) {
           size={30}
           borderWidth={1}
           borderColor={t.atoms.border_contrast_low.borderColor}
-          color={state.error ? t.palette.negative_500 : t.palette.primary_500}
+          color={
+            state.status === 'error'
+              ? t.palette.negative_500
+              : t.palette.primary_500
+          }
           progress={wheelProgress}
         />
       </Animated.View>
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index 1737fc29ca..b4ff731fbe 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -19,6 +19,7 @@ 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 {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {GifEmbed} from '../util/post-embeds/GifEmbed'
 import {AltTextReminder} from './photos/Gallery'
@@ -27,10 +28,12 @@ export function GifAltText({
   link: linkProp,
   gif,
   onSubmit,
+  Portal,
 }: {
   link: ExternalEmbedDraft
   gif?: Gif
   onSubmit: (alt: string) => void
+  Portal: PortalComponent
 }) {
   const control = Dialog.useDialogControl()
   const {_} = useLingui()
@@ -95,7 +98,7 @@ export function GifAltText({
 
       <AltTextReminder />
 
-      <Dialog.Outer control={control}>
+      <Dialog.Outer control={control} Portal={Portal}>
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 5692f3d2c9..af8ef6c036 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -21,6 +21,7 @@ import {ComposerImage, cropImage} from '#/state/gallery'
 import {Text} from '#/view/com/util/text/Text'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
+import {PortalComponent} from '#/components/Portal'
 import {ComposerAction} from '../state'
 import {EditImageDialog} from './EditImageDialog'
 import {ImageAltTextDialog} from './ImageAltTextDialog'
@@ -30,6 +31,7 @@ const IMAGE_GAP = 8
 interface GalleryProps {
   images: ComposerImage[]
   dispatch: (action: ComposerAction) => void
+  Portal: PortalComponent
 }
 
 export let Gallery = (props: GalleryProps): React.ReactNode => {
@@ -57,7 +59,12 @@ interface GalleryInnerProps extends GalleryProps {
   containerInfo: Dimensions
 }
 
-const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
+const GalleryInner = ({
+  images,
+  containerInfo,
+  dispatch,
+  Portal,
+}: GalleryInnerProps) => {
   const {isMobile} = useWebMediaQueries()
 
   const {altTextControlStyle, imageControlsStyle, imageStyle} =
@@ -111,6 +118,7 @@ const GalleryInner = ({images, containerInfo, dispatch}: GalleryInnerProps) => {
               onRemove={() => {
                 dispatch({type: 'embed_remove_image', image})
               }}
+              Portal={Portal}
             />
           )
         })}
@@ -127,6 +135,7 @@ type GalleryItemProps = {
   imageStyle?: ViewStyle
   onChange: (next: ComposerImage) => void
   onRemove: () => void
+  Portal: PortalComponent
 }
 
 const GalleryItem = ({
@@ -136,6 +145,7 @@ const GalleryItem = ({
   imageStyle,
   onChange,
   onRemove,
+  Portal,
 }: GalleryItemProps): React.ReactNode => {
   const {_} = useLingui()
   const t = useTheme()
@@ -230,6 +240,7 @@ const GalleryItem = ({
         control={altTextControl}
         image={image}
         onChange={onChange}
+        Portal={Portal}
       />
 
       <EditImageDialog
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index fc9c6c4931..a5ef5bc031 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -11,17 +11,19 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
 type Props = {
   control: Dialog.DialogOuterProps['control']
   image: ComposerImage
   onChange: (next: ComposerImage) => void
+  Portal: PortalComponent
 }
 
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer control={props.control} Portal={props.Portal}>
       <ImageAltTextInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
index b0806180c4..7e57a57d46 100644
--- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx
+++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx
@@ -13,6 +13,7 @@ import * as Dialog from '#/components/Dialog'
 import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog'
 import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {PortalComponent} from '#/components/Portal'
 
 export function ThreadgateBtn({
   postgate,
@@ -20,6 +21,7 @@ export function ThreadgateBtn({
   threadgateAllowUISettings,
   onChangeThreadgateAllowUISettings,
   style,
+  Portal,
 }: {
   postgate: AppBskyFeedPostgate.Record
   onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
@@ -28,6 +30,8 @@ export function ThreadgateBtn({
   onChangeThreadgateAllowUISettings: (v: ThreadgateAllowUISetting[]) => void
 
   style?: StyleProp<AnimatedStyle<ViewStyle>>
+
+  Portal: PortalComponent
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -77,6 +81,7 @@ export function ThreadgateBtn({
         onChangePostgate={onChangePostgate}
         threadgateAllowUISettings={threadgateAllowUISettings}
         onChangeThreadgateAllowUISettings={onChangeThreadgateAllowUISettings}
+        Portal={Portal}
       />
     </>
   )
diff --git a/src/view/com/composer/videos/SelectVideoBtn.tsx b/src/view/com/composer/videos/SelectVideoBtn.tsx
index 2f2b4c3e7a..bbb3d95f2b 100644
--- a/src/view/com/composer/videos/SelectVideoBtn.tsx
+++ b/src/view/com/composer/videos/SelectVideoBtn.tsx
@@ -9,12 +9,14 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {SUPPORTED_MIME_TYPES, SupportedMimeTypes} from '#/lib/constants'
+import {BSKY_SERVICE} from '#/lib/constants'
 import {useVideoLibraryPermission} from '#/lib/hooks/usePermissions'
+import {getHostnameFromUrl} from '#/lib/strings/url-helpers'
+import {isWeb} from '#/platform/detection'
 import {isNative} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useSession} from '#/state/session'
-import {BSKY_SERVICE} from 'lib/constants'
-import {getHostnameFromUrl} from 'lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {VideoClip_Stroke2_Corner0_Rounded as VideoClipIcon} from '#/components/icons/VideoClip'
@@ -58,16 +60,25 @@ export function SelectVideoBtn({onSelectVideo, disabled, setError}: Props) {
           UIImagePickerPreferredAssetRepresentationMode.Current,
       })
       if (response.assets && response.assets.length > 0) {
-        if (isNative) {
-          if (typeof response.assets[0].duration !== 'number')
-            throw Error('Asset is not a video')
-          if (response.assets[0].duration > VIDEO_MAX_DURATION) {
-            setError(_(msg`Videos must be less than 60 seconds long`))
-            return
-          }
-        }
+        const asset = response.assets[0]
         try {
-          onSelectVideo(response.assets[0])
+          if (isWeb) {
+            // compression step on native converts to mp4, so no need to check there
+            const mimeType = getMimeType(asset)
+            if (
+              !SUPPORTED_MIME_TYPES.includes(mimeType as SupportedMimeTypes)
+            ) {
+              throw Error(_(msg`Unsupported video type: ${mimeType}`))
+            }
+          } else {
+            if (typeof asset.duration !== 'number') {
+              throw Error('Asset is not a video')
+            }
+            if (asset.duration > VIDEO_MAX_DURATION) {
+              throw Error(_(msg`Videos must be less than 60 seconds long`))
+            }
+          }
+          onSelectVideo(asset)
         } catch (err) {
           if (err instanceof Error) {
             setError(err.message)
@@ -132,3 +143,17 @@ function VerifyEmailPrompt({control}: {control: Prompt.PromptControlProps}) {
     />
   )
 }
+
+function getMimeType(asset: ImagePickerAsset) {
+  if (isWeb) {
+    const [mimeType] = asset.uri.slice('data:'.length).split(';base64,')
+    if (!mimeType) {
+      throw new Error('Could not determine mime type')
+    }
+    return mimeType
+  }
+  if (!asset.mimeType) {
+    throw new Error('Could not determine mime type')
+  }
+  return asset.mimeType
+}
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index d57c6740cf..f15fffb182 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -17,6 +17,7 @@ import {CC_Stroke2_Corner0_Rounded as CCIcon} from '#/components/icons/CC'
 import {PageText_Stroke2_Corner0_Rounded as PageTextIcon} from '#/components/icons/PageText'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 import {SubtitleFilePicker} from './SubtitleFilePicker'
 
@@ -29,6 +30,7 @@ interface Props {
   setCaptions: React.Dispatch<
     React.SetStateAction<{lang: string; file: File}[]>
   >
+  Portal: PortalComponent
 }
 
 export function SubtitleDialogBtn(props: Props) {
@@ -56,7 +58,7 @@ export function SubtitleDialogBtn(props: Props) {
           {isWeb ? <Trans>Captions & alt text</Trans> : <Trans>Alt text</Trans>}
         </ButtonText>
       </Button>
-      <Dialog.Outer control={control}>
+      <Dialog.Outer control={control} Portal={props.Portal}>
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>

From cc8134225606207be177b501c40a7e1d4bcf5ed7 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 22:40:31 -0700
Subject: [PATCH 15/62] add dismiss all

---
 modules/bottom-sheet/index.ts                         |  4 ++--
 .../src/{BottomSheetView.tsx => BottomSheet.tsx}      |  9 ++++++++-
 .../{BottomSheetView.web.tsx => BottomSheet.web.tsx}  |  2 +-
 src/components/BottomSheetButton.tsx                  |  0
 src/components/Dialog/index.tsx                       | 11 ++++-------
 src/state/dialogs/index.tsx                           |  4 ++--
 6 files changed, 17 insertions(+), 13 deletions(-)
 rename modules/bottom-sheet/src/{BottomSheetView.tsx => BottomSheet.tsx} (91%)
 rename modules/bottom-sheet/src/{BottomSheetView.web.tsx => BottomSheet.web.tsx} (67%)
 delete mode 100644 src/components/BottomSheetButton.tsx

diff --git a/modules/bottom-sheet/index.ts b/modules/bottom-sheet/index.ts
index 2eae5bfc2f..1fe3dac0eb 100644
--- a/modules/bottom-sheet/index.ts
+++ b/modules/bottom-sheet/index.ts
@@ -1,13 +1,13 @@
+import {BottomSheet} from './src/BottomSheet'
 import {
   BottomSheetSnapPoint,
   BottomSheetState,
   BottomSheetViewProps,
 } from './src/BottomSheet.types'
-import {BottomSheetView} from './src/BottomSheetView'
 
 export {
+  BottomSheet,
   BottomSheetSnapPoint,
   type BottomSheetState,
-  BottomSheetView,
   type BottomSheetViewProps,
 }
diff --git a/modules/bottom-sheet/src/BottomSheetView.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
similarity index 91%
rename from modules/bottom-sheet/src/BottomSheetView.tsx
rename to modules/bottom-sheet/src/BottomSheet.tsx
index b42c97587c..7a402e7a8e 100644
--- a/modules/bottom-sheet/src/BottomSheetView.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -8,6 +8,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
+import {requireNativeModule} from 'expo'
 import {requireNativeViewManager} from 'expo-modules-core'
 
 import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
@@ -21,7 +22,9 @@ const NativeView: React.ComponentType<
   }
 > = requireNativeViewManager('BottomSheet')
 
-export class BottomSheetView extends React.Component<
+const NativeModule = requireNativeModule('BottomSheet')
+
+export class BottomSheet extends React.Component<
   BottomSheetViewProps,
   {
     open: boolean
@@ -68,6 +71,10 @@ export class BottomSheetView extends React.Component<
     this.ref.current?.updateLayout()
   }
 
+  static dismissAll = async () => {
+    await NativeModule.dismissAll()
+  }
+
   render() {
     const {children, ...rest} = this.props
     const topInset = rest.topInset ?? 0
diff --git a/modules/bottom-sheet/src/BottomSheetView.web.tsx b/modules/bottom-sheet/src/BottomSheet.web.tsx
similarity index 67%
rename from modules/bottom-sheet/src/BottomSheetView.web.tsx
rename to modules/bottom-sheet/src/BottomSheet.web.tsx
index 17cfe1e66a..4573604eb2 100644
--- a/modules/bottom-sheet/src/BottomSheetView.web.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.web.tsx
@@ -1,5 +1,5 @@
 import {BottomSheetViewProps} from './BottomSheet.types'
 
-export function BottomSheetView(_: BottomSheetViewProps) {
+export function BottomSheet(_: BottomSheetViewProps) {
   throw new Error('BottomSheetView is not available on web')
 }
diff --git a/src/components/BottomSheetButton.tsx b/src/components/BottomSheetButton.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index bdbfb24d01..82cf894b93 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -17,10 +17,7 @@ import {
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
 import {Portal as DefaultPortal} from '#/components/Portal'
-import {
-  BottomSheetSnapPoint,
-  BottomSheetView,
-} from '../../../modules/bottom-sheet'
+import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
@@ -37,7 +34,7 @@ export function Outer({
   Portal = DefaultPortal,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
-  const ref = React.useRef<BottomSheetView>(null)
+  const ref = React.useRef<BottomSheet>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
@@ -102,7 +99,7 @@ export function Outer({
   return (
     <Portal>
       <Context.Provider value={context}>
-        <BottomSheetView
+        <BottomSheet
           ref={ref}
           topInset={30}
           bottomInset={insets.bottom}
@@ -119,7 +116,7 @@ export function Outer({
           <Wrapper testID={testID} style={[t.atoms.bg]}>
             {children}
           </Wrapper>
-        </BottomSheetView>
+        </BottomSheet>
       </Context.Provider>
     </Portal>
   )
diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index db933b98c8..315ab412c5 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import {isWeb} from '#/platform/detection'
 import {DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
+import {BottomSheet} from '../../../modules/bottom-sheet'
 
 interface IDialogContext {
   /**
@@ -51,8 +52,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
 
       return openDialogs.current.size > 0
     } else {
-      // @TODO DIALOGS REFACTOR
-      console.error('HAILEY FIX THIS 🥺📋')
+      BottomSheet.dismissAll()
       return false
     }
   }, [])

From 1b7e66f7008a780a73a38ac834ef0e39f6cae49f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 23:03:22 -0700
Subject: [PATCH 16/62] bring some android stuff back up to date

---
 .../bottomsheet/BlueskyBottomSheetView.kt     | 150 ------------------
 .../modules/bottomsheet/BottomSheetModule.kt  |  29 ++--
 modules/bottom-sheet/ios/SheetView.swift      |   7 +-
 3 files changed, 21 insertions(+), 165 deletions(-)
 delete mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt

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
deleted file mode 100644
index f557034b77..0000000000
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BlueskyBottomSheetView.kt
+++ /dev/null
@@ -1,150 +0,0 @@
-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 = 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 72e0213f5a..a34d1fdd43 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
@@ -7,17 +7,18 @@ import expo.modules.kotlin.modules.ModuleDefinition
 class BottomSheetModule : Module() {
   override fun definition() =
     ModuleDefinition {
-      Name("BlueskyBottomSheet")
+      Name("BottomSheet")
 
-      Function("getSafeAreaInset") {
-        return@Function 10 // @TODO
+      AsyncFunction("dismissAll") {
+        SheetManager.dismissAll()
       }
 
       View(BottomSheetView::class) {
         Events(
           arrayOf(
-            "onStateChange",
             "onAttemptDismiss",
+            "onSnapPointChange",
+            "onStateChange",
           ),
         )
 
@@ -25,8 +26,16 @@ class BottomSheetModule : Module() {
           view.dismiss()
         }
 
-        Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
-          view.preventDismiss = prop
+        AsyncFunction("updateLayout") { view: BottomSheetView ->
+          view.updateLayout()
+        }
+
+        Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
+          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+        }
+
+        Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
+          view.sheetState.value.cornerRadius = prop
         }
 
         Prop("minHeight") { view: BottomSheetView, prop: Float ->
@@ -37,12 +46,8 @@ class BottomSheetModule : Module() {
           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("preventDismiss") { view: BottomSheetView, prop: Boolean ->
+          view.preventDismiss = prop
         }
 
         Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index 2bfaa0a815..57959e80ba 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -96,7 +96,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
       return
     }
 
-    self.present(contentHeight: innerView.subviews[0].frame.size.height)
+    self.present()
   }
 
   private func destroy() {
@@ -109,9 +109,10 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
 
   // MARK: - Presentation
 
-  func present(contentHeight: CGFloat) {
+  func present() {
     guard !self.isOpen,
           let innerView = self.innerView,
+          let contentHeight = innerView.subviews.first?.frame.height,
           let rvc = self.reactViewController() else {
       return
     }
@@ -135,7 +136,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   }
 
   func updateLayout() {
-    if let contentHeight = self.innerView?.subviews[0].frame.size.height {
+    if let contentHeight = self.innerView?.subviews.first?.frame.size.height {
       self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight),
                                preventExpansion: self.preventExpansion)
     }

From 5e41b503add189586fa00d3860929b39443ec8de Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Wed, 2 Oct 2024 23:11:27 -0700
Subject: [PATCH 17/62] fix jest

---
 jest/jestSetup.js               |  5 +++++
 src/components/Dialog/index.tsx | 10 +++++++---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/jest/jestSetup.js b/jest/jestSetup.js
index 4653490f3c..5564d81f15 100644
--- a/jest/jestSetup.js
+++ b/jest/jestSetup.js
@@ -96,6 +96,11 @@ jest.mock('expo-modules-core', () => ({
         getIsReducedMotionEnabled: () => false,
       }
     }
+    if (moduleName === 'BottomSheet') {
+      return {
+        dismissAll: () => {},
+      }
+    }
   }),
   requireNativeViewManager: jest.fn().mockImplementation(moduleName => {
     return () => null
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 82cf894b93..372c92ed1f 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,6 +1,10 @@
 import React, {useImperativeHandle} from 'react'
-import {StyleProp, TextInput, View, ViewStyle} from 'react-native'
-import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {
+  GestureHandlerRootView,
+  ScrollView,
+  TextInput as RNGHTextInput,
+} from 'react-native-gesture-handler'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
@@ -23,7 +27,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(TextInput)
+export const Input = createInput(RNGHTextInput)
 
 export function Outer({
   children,

From f5b2fe7558794e28ed4b104a4d8f93f390ee5960 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 00:35:06 -0700
Subject: [PATCH 18/62] fix incorrect snap point

---
 modules/bottom-sheet/ios/SheetView.swift | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index 57959e80ba..54944030ff 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -122,7 +122,11 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     if let sheet = sheetVc.sheetPresentationController {
       sheet.delegate = self
       sheet.preferredCornerRadius = self.cornerRadius
-      self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
+      if sheet.detents.count == 1 {
+        sheet.selectedDetentIdentifier = .large
+      } else {
+        self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
+      }
     }
     sheetVc.view.addSubview(innerView)
 

From 9c309bb579f0b0f8ccd92d9e5bb826f2224c0970 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 3 Oct 2024 16:31:26 +0300
Subject: [PATCH 19/62] fix web export of BottomSheetInlineLinkText

---
 src/components/BottomSheetLink.web.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/BottomSheetLink.web.tsx b/src/components/BottomSheetLink.web.tsx
index 6bfb275c25..eb21ca880e 100644
--- a/src/components/BottomSheetLink.web.tsx
+++ b/src/components/BottomSheetLink.web.tsx
@@ -1,3 +1 @@
-import {Link as BottomSheetLink} from './Link'
-
-export {BottomSheetLink}
+export {Link as BottomSheetInlineLinkText} from './Link'

From fba3cce81e8f9306bed6b2b85d7cd8785cff402a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 08:53:53 -0700
Subject: [PATCH 20/62] add sheet manager

---
 .../expo/modules/bottomsheet/SheetManager.kt  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt
new file mode 100644
index 0000000000..ac6a820235
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt
@@ -0,0 +1,28 @@
+package expo.modules.bottomsheet
+
+import java.lang.ref.WeakReference
+
+class SheetManager {
+  companion object {
+    private val sheets = mutableSetOf<WeakReference<BottomSheetView>>()
+
+    fun add(view: BottomSheetView) {
+      sheets.add(WeakReference(view))
+    }
+
+    fun remove(view: BottomSheetView) {
+      sheets.forEach {
+        if (it.get() == view) {
+          sheets.remove(it)
+          return
+        }
+      }
+    }
+
+    fun dismissAll() {
+      sheets.forEach {
+        it.get()?.dismiss()
+      }
+    }
+  }
+}
\ No newline at end of file

From 54ebc4036e6377db00a702ff85de0b2291026b4c Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 08:54:06 -0700
Subject: [PATCH 21/62] tweak

---
 modules/bottom-sheet/android/build.gradle     |  1 +
 .../expo/modules/bottomsheet/SheetView.kt     | 79 +++++++++++++------
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/modules/bottom-sheet/android/build.gradle b/modules/bottom-sheet/android/build.gradle
index 555d34ed1f..a685376092 100644
--- a/modules/bottom-sheet/android/build.gradle
+++ b/modules/bottom-sheet/android/build.gradle
@@ -53,4 +53,5 @@ dependencies {
   implementation "androidx.compose.material3:material3:1.3.0"
   implementation "androidx.compose.material:material:1.7.2"
   implementation "com.facebook.react:react-native:+"
+  implementation("com.composables:core:1.12.0")
 }
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 cf12597590..183dada50e 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
@@ -1,22 +1,37 @@
 package expo.modules.bottomsheet
 
+import android.util.Log
 import android.view.View
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
 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.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
+import com.composables.core.BottomSheet
+import com.composables.core.SheetDetent
+import com.composables.core.SheetDetent.Companion.FullyExpanded
+import com.composables.core.SheetDetent.Companion.Hidden
+import com.composables.core.rememberBottomSheetState
+import kotlinx.coroutines.launch
+import kotlin.annotations.jvm.Mutable
 
 data class SheetState(
   var isOpen: Boolean = false,
@@ -29,41 +44,57 @@ data class SheetState(
 @Composable
 fun SheetView(
   state: MutableState<SheetState>,
+  openState: MutableState<Boolean>,
   innerView: View,
   contentHeight: Float,
   onDismissRequest: () -> Unit,
   onExpanded: () -> Unit,
   onHidden: () -> Unit,
 ) {
-  val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
+  val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight ->
+    containerHeight*0.6f
+  }
+
+  val scope = rememberCoroutineScope()
+
+  val sheetState = rememberBottomSheetState(
+    initialDetent = Hidden,
+    detents = listOf(Hidden, Peek, FullyExpanded)
+  )
 
-  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),
+  BottomSheet(
+    state = sheetState,
+    modifier = Modifier.fillMaxWidth()
+      .shadow(4.dp)
+      .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f))
+      .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT))
+      .imePadding()
+//    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 },
-      )
+    AndroidView(
+      factory = { innerView },
+    )
+  }
+
+  LaunchedEffect(openState) {
+    Log.d("SheetView", "openState: ${openState.value}")
+    if (openState.value) {
+      sheetState.currentDetent = Peek
+    } else {
+      sheetState.currentDetent = Hidden
     }
   }
 
-  LaunchedEffect(sheetState.currentValue) {
-    if (sheetState.currentValue == SheetValue.PartiallyExpanded || sheetState.currentValue == SheetValue.Expanded) {
+  LaunchedEffect(sheetState.currentDetent) {
+    if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) {
       onExpanded()
-    } else if (sheetState.currentValue == SheetValue.Hidden) {
+    } else if (sheetState.currentDetent == Hidden) {
       onHidden()
     }
   }

From 7620b51cf0f55bc027e0a59d94fd8e18478dd2ef Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 09:08:58 -0700
Subject: [PATCH 22/62] spread

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 372c92ed1f..4c62ba832f 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -143,14 +143,16 @@ export function Inner({children, style}: DialogInnerProps) {
 }
 
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
-  function ScrollableInner({children, style}, ref) {
+  function ScrollableInner({children, style, ...props}, ref) {
     const insets = useSafeAreaInsets()
     const {nativeSnapPoint} = useDialogContext()
     return (
       <KeyboardAwareScrollView
         style={[a.px_xl, style]}
         ref={ref}
+        {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        nestedScrollEnabled={true}
         bottomOffset={30}
         ScrollViewComponent={ScrollView}>
         {children}

From 584c29649fef338e83a9895d350dc92ef500b26c Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 3 Oct 2024 11:47:45 -0500
Subject: [PATCH 23/62] Rm BottomSheetLink

---
 src/components/Link.tsx                       | 39 -------------------
 .../ReportDialog/SelectReportOptionView.tsx   |  6 +--
 2 files changed, 3 insertions(+), 42 deletions(-)

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 5a66767243..447833a239 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -241,45 +241,6 @@ 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 (
-    <Button
-      {...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}
-    </Button>
-  )
-}
-
 export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
 > &
diff --git a/src/components/ReportDialog/SelectReportOptionView.tsx b/src/components/ReportDialog/SelectReportOptionView.tsx
index 7e27cacf0c..169c07d732 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 {BottomSheetLink} from '#/components/Link'
+import {Link} 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>
-            <BottomSheetLink
+            <Link
               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} />
-            </BottomSheetLink>
+            </Link>
           </View>
         )}
       </View>

From fe4c157abb07e947001f67878b463d740a701197 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 10:40:55 -0700
Subject: [PATCH 24/62] android stuff

---
 modules/bottom-sheet/android/build.gradle     |  10 +-
 .../modules/bottomsheet/BottomSheetModule.kt  |   6 +-
 .../modules/bottomsheet/BottomSheetView.kt    | 185 ++++++++++++++++++
 .../expo/modules/bottomsheet/SheetView.kt     | 101 ----------
 modules/bottom-sheet/src/BottomSheet.tsx      |  20 +-
 .../Dialog/DialogTextInput.android.ts         |   3 +
 src/components/Dialog/DialogTextInput.ts      |   3 +
 src/components/Dialog/index.tsx               |  19 +-
 8 files changed, 218 insertions(+), 129 deletions(-)
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
 delete mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
 create mode 100644 src/components/Dialog/DialogTextInput.android.ts
 create mode 100644 src/components/Dialog/DialogTextInput.ts

diff --git a/modules/bottom-sheet/android/build.gradle b/modules/bottom-sheet/android/build.gradle
index a685376092..a1d423044b 100644
--- a/modules/bottom-sheet/android/build.gradle
+++ b/modules/bottom-sheet/android/build.gradle
@@ -40,18 +40,10 @@ android {
   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.google.android.material:material:1.12.0'
   implementation "com.facebook.react:react-native:+"
-  implementation("com.composables:core:1.12.0")
 }
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 a34d1fdd43..4a9b2ccd4d 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
@@ -31,11 +31,11 @@ class BottomSheetModule : Module() {
         }
 
         Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
-          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+//          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
         }
 
         Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
-          view.sheetState.value.cornerRadius = prop
+//          view.sheetState.value.cornerRadius = prop
         }
 
         Prop("minHeight") { view: BottomSheetView, prop: Float ->
@@ -51,7 +51,7 @@ class BottomSheetModule : Module() {
         }
 
         Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
-          view.sheetState.value.preventExpansion = prop
+          view.preventExpansion = prop
         }
       }
     }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
new file mode 100644
index 0000000000..92d22671ce
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -0,0 +1,185 @@
+package expo.modules.bottomsheet
+
+import android.content.Context
+import android.view.View
+import android.widget.FrameLayout
+import androidx.core.view.allViews
+import com.facebook.react.ReactRootView
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+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) {
+
+  private var reactRootView: ReactRootView? = null
+  private var innerView: View? = null
+  private var dialog: BottomSheetDialog? = null
+
+  private val onAttemptDismiss by EventDispatcher()
+  private val onSnapPointChange by EventDispatcher()
+  private val onStateChange by EventDispatcher()
+
+  // Props
+  var preventDismiss = false
+    set(value) {
+      field = value
+      this.dialog?.setCancelable(!value)
+    }
+  var preventExpansion = false
+  var minHeight = 0f
+  var maxHeight = 0f
+
+  private var isOpen: Boolean = false
+    set(value) {
+      field = 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 selectedSnapPoint = 0
+    set(value) {
+      if (field == value) return
+
+      field = value
+      onSnapPointChange(
+        mapOf(
+          "snapPoint" to value,
+        ),
+      )
+    }
+
+  // Lifecycle
+
+  init {
+    SheetManager.add(this)
+  }
+
+  override fun addView(
+    child: View?,
+    index: Int,
+  ) {
+    this.innerView = child
+  }
+
+  override fun onLayout(
+    changed: Boolean,
+    l: Int,
+    t: Int,
+    r: Int,
+    b: Int,
+  ) {
+    this.present()
+  }
+
+  private fun destroy() {
+    this.isClosing = false
+    this.isOpen = false
+    this.dialog = null
+    this.reactRootView = null
+    this.innerView = null
+  }
+
+  // Presentation
+
+  private fun present() {
+    val innerView = this.innerView ?: return
+    val contentHeight = innerView.allViews.first().height.toFloat()
+
+    // Needs to be a react root view for RNGH to work
+    val rootView = ReactRootView(context)
+    rootView.addView(innerView)
+    this.reactRootView = rootView
+
+    this.isOpening = true
+
+    val dialog = BottomSheetDialog(context)
+    dialog.setContentView(rootView)
+    dialog.setCancelable(!preventDismiss)
+    dialog.setOnShowListener {
+      val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
+      bottomSheet?.let {
+        // Let the outside view handle the background color on its own, the default for this is
+        // white and we don't want that.
+        it.setBackgroundColor(0)
+
+        val behavior = BottomSheetBehavior.from(it)
+
+        behavior.isFitToContents = false
+        behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+        behavior.skipCollapsed = true
+        behavior.isDraggable = true
+        behavior.isHideable = true
+
+        behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
+          override fun onStateChanged(bottomSheet: View, newState: Int) {
+            when (newState) {
+              BottomSheetBehavior.STATE_EXPANDED -> {
+                selectedSnapPoint = 2
+              }
+              BottomSheetBehavior.STATE_COLLAPSED -> {
+                selectedSnapPoint = 1
+              }
+              BottomSheetBehavior.STATE_HALF_EXPANDED -> {
+                selectedSnapPoint = 1
+              }
+              BottomSheetBehavior.STATE_HIDDEN -> {
+                selectedSnapPoint = 0
+              }
+            }
+          }
+
+          override fun onSlide(bottomSheet: View, slideOffset: Float) { }
+        })
+      }
+    }
+    dialog.setOnDismissListener {
+      this.isClosing = true
+      this.destroy()
+    }
+    dialog.setOnCancelListener {
+      it.cancel()
+    }
+    dialog.show()
+    this.dialog = dialog
+  }
+
+  fun updateLayout() {
+    this.innerView?.let {
+      val contentHeight = it.allViews.first().height.toFloat()
+    }
+  }
+
+  fun dismiss() {
+    this.dialog?.dismiss()
+    this.isClosing = true
+    this.destroy()
+  }
+}
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
deleted file mode 100644
index 183dada50e..0000000000
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetView.kt
+++ /dev/null
@@ -1,101 +0,0 @@
-package expo.modules.bottomsheet
-
-import android.util.Log
-import android.view.View
-import androidx.compose.foundation.background
-import androidx.compose.foundation.gestures.scrollable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.imePadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.ExperimentalMaterial3Api
-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.runtime.rememberCoroutineScope
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.shadow
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.viewinterop.AndroidView
-import com.composables.core.BottomSheet
-import com.composables.core.SheetDetent
-import com.composables.core.SheetDetent.Companion.FullyExpanded
-import com.composables.core.SheetDetent.Companion.Hidden
-import com.composables.core.rememberBottomSheetState
-import kotlinx.coroutines.launch
-import kotlin.annotations.jvm.Mutable
-
-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>,
-  openState: MutableState<Boolean>,
-  innerView: View,
-  contentHeight: Float,
-  onDismissRequest: () -> Unit,
-  onExpanded: () -> Unit,
-  onHidden: () -> Unit,
-) {
-  val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight ->
-    containerHeight*0.6f
-  }
-
-  val scope = rememberCoroutineScope()
-
-  val sheetState = rememberBottomSheetState(
-    initialDetent = Hidden,
-    detents = listOf(Hidden, Peek, FullyExpanded)
-  )
-
-  BottomSheet(
-    state = sheetState,
-    modifier = Modifier.fillMaxWidth()
-      .shadow(4.dp)
-      .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f))
-      .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT))
-      .imePadding()
-//    onDismissRequest = onDismissRequest,
-//    shape =
-//      RoundedCornerShape(
-//        topStart = state.value.cornerRadius ?: 0f,
-//        topEnd = state.value.cornerRadius ?: 0f,
-//      ),
-//    containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
-  ) {
-    AndroidView(
-      factory = { innerView },
-    )
-  }
-
-  LaunchedEffect(openState) {
-    Log.d("SheetView", "openState: ${openState.value}")
-    if (openState.value) {
-      sheetState.currentDetent = Peek
-    } else {
-      sheetState.currentDetent = Hidden
-    }
-  }
-
-  LaunchedEffect(sheetState.currentDetent) {
-    if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) {
-      onExpanded()
-    } else if (sheetState.currentDetent == Hidden) {
-      onHidden()
-    }
-  }
-}
diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index 7a402e7a8e..c01b159aa3 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -3,6 +3,7 @@ import {
   ColorValue,
   Dimensions,
   NativeSyntheticEvent,
+  Platform,
   StyleProp,
   StyleSheet,
   View,
@@ -79,6 +80,7 @@ export class BottomSheet extends React.Component<
     const {children, ...rest} = this.props
     const topInset = rest.topInset ?? 0
     const bottomInset = rest.bottomInset ?? 0
+    const cornerRadius = rest.cornerRadius ?? 0
 
     if (!this.state.open) {
       return null
@@ -97,12 +99,18 @@ export class BottomSheet extends React.Component<
         }}
         containerBackgroundColor={backgroundColor}>
         <View
-          style={{
-            flex: 1,
-            backgroundColor,
-            paddingTop: topInset,
-            paddingBottom: bottomInset,
-          }}>
+          style={[
+            {
+              flex: 1,
+              backgroundColor,
+              paddingTop: topInset,
+              paddingBottom: bottomInset,
+            },
+            Platform.OS === 'android' && {
+              borderTopLeftRadius: cornerRadius,
+              borderTopRightRadius: cornerRadius,
+            },
+          ]}>
           <View onLayout={this.updateLayout}>{children}</View>
         </View>
       </NativeView>
diff --git a/src/components/Dialog/DialogTextInput.android.ts b/src/components/Dialog/DialogTextInput.android.ts
new file mode 100644
index 0000000000..248eb2602d
--- /dev/null
+++ b/src/components/Dialog/DialogTextInput.android.ts
@@ -0,0 +1,3 @@
+import {TextInput as DialogTextInput} from 'react-native-gesture-handler'
+
+export {DialogTextInput}
diff --git a/src/components/Dialog/DialogTextInput.ts b/src/components/Dialog/DialogTextInput.ts
new file mode 100644
index 0000000000..faad8d8675
--- /dev/null
+++ b/src/components/Dialog/DialogTextInput.ts
@@ -0,0 +1,3 @@
+import {TextInput as DialogTextInput} from 'react-native'
+
+export {DialogTextInput}
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 4c62ba832f..5bba2ab5d7 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,10 +1,6 @@
 import React, {useImperativeHandle} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {
-  GestureHandlerRootView,
-  ScrollView,
-  TextInput as RNGHTextInput,
-} from 'react-native-gesture-handler'
+import {Platform, StyleProp, 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'
 
@@ -14,6 +10,7 @@ import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context, useDialogContext} from '#/components/Dialog/context'
+import {DialogTextInput} from '#/components/Dialog/DialogTextInput'
 import {
   DialogControlProps,
   DialogInnerProps,
@@ -27,7 +24,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(RNGHTextInput)
+export const Input = createInput(DialogTextInput)
 
 export function Outer({
   children,
@@ -151,10 +148,12 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         style={[a.px_xl, style]}
         ref={ref}
         {...props}
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        bounces={
+          Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full
+        }
+        overScrollMode="always"
         nestedScrollEnabled={true}
-        bottomOffset={30}
-        ScrollViewComponent={ScrollView}>
+        bottomOffset={30}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
       </KeyboardAwareScrollView>

From 959060b115d70528ba2c50bd465ec9d983aa37f2 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 11:02:22 -0700
Subject: [PATCH 25/62] fix scrolling in some dialogs

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 5bba2ab5d7..c6195f5c35 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -151,8 +151,6 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         bounces={
           Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full
         }
-        overScrollMode="always"
-        nestedScrollEnabled={true}
         bottomOffset={30}>
         {children}
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />

From 3af81a662a8bdb672ed86eb395bf54aff19c04b2 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:12:11 -0700
Subject: [PATCH 26/62] auto sizing

---
 .../modules/bottomsheet/BottomSheetView.kt    | 70 ++++++++++++++++---
 modules/bottom-sheet/ios/SheetView.swift      |  2 +
 2 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 92d22671ce..09b7696e03 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -1,6 +1,7 @@
 package expo.modules.bottomsheet
 
 import android.content.Context
+import android.util.Log
 import android.view.View
 import android.widget.FrameLayout
 import androidx.core.view.allViews
@@ -20,6 +21,8 @@ class BottomSheetView(
   private var innerView: View? = null
   private var dialog: BottomSheetDialog? = null
 
+  private val screenHeight = context.resources.displayMetrics.heightPixels.toFloat()
+
   private val onAttemptDismiss by EventDispatcher()
   private val onSnapPointChange by EventDispatcher()
   private val onStateChange by EventDispatcher()
@@ -31,8 +34,24 @@ class BottomSheetView(
       this.dialog?.setCancelable(!value)
     }
   var preventExpansion = false
+
   var minHeight = 0f
+    set (value) {
+      field = if (value < 0) {
+        0f
+      } else {
+        value
+      }
+    }
+
   var maxHeight = 0f
+    set (value) {
+      field = if (value > this.screenHeight) {
+        this.screenHeight.toFloat()
+      } else {
+        value
+      }
+    }
 
   private var isOpen: Boolean = false
     set(value) {
@@ -99,30 +118,38 @@ class BottomSheetView(
     this.present()
   }
 
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    this.destroy()
+  }
+
   private fun destroy() {
     this.isClosing = false
     this.isOpen = false
     this.dialog = null
     this.reactRootView = null
     this.innerView = null
+    SheetManager.remove(this)
   }
 
   // Presentation
 
   private fun present() {
+    if (this.isOpen || this.isOpening || this.isClosing) return
+
     val innerView = this.innerView ?: return
-    val contentHeight = innerView.allViews.first().height.toFloat()
+    val contentHeight = this.getContentHeight()
 
     // Needs to be a react root view for RNGH to work
     val rootView = ReactRootView(context)
     rootView.addView(innerView)
     this.reactRootView = rootView
 
-    this.isOpening = true
-
     val dialog = BottomSheetDialog(context)
     dialog.setContentView(rootView)
     dialog.setCancelable(!preventDismiss)
+    Log.d("BottomSheetView", "contentHeight: $contentHeight")
+    Log.d("BottomSheetView", "screenHeight: $screenHeight")
     dialog.setOnShowListener {
       val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
       bottomSheet?.let {
@@ -132,8 +159,20 @@ class BottomSheetView(
 
         val behavior = BottomSheetBehavior.from(it)
 
-        behavior.isFitToContents = false
-        behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+        behavior.isFitToContents = true
+        if (contentHeight > this.screenHeight) {
+          behavior.halfExpandedRatio = 0.99f
+          behavior.state = BottomSheetBehavior.STATE_EXPANDED
+        } else {
+          val targetHeight = if (contentHeight < this.minHeight) {
+            this.minHeight
+          } else {
+            contentHeight
+          }
+          // the sheet needs a percentage for the "middle detent" size, rather than a pixel value
+          behavior.halfExpandedRatio = targetHeight / screenHeight
+          behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+        }
         behavior.skipCollapsed = true
         behavior.isDraggable = true
         behavior.isHideable = true
@@ -164,9 +203,8 @@ class BottomSheetView(
       this.isClosing = true
       this.destroy()
     }
-    dialog.setOnCancelListener {
-      it.cancel()
-    }
+
+    this.isOpening = true
     dialog.show()
     this.dialog = dialog
   }
@@ -179,7 +217,19 @@ class BottomSheetView(
 
   fun dismiss() {
     this.dialog?.dismiss()
-    this.isClosing = true
-    this.destroy()
+  }
+
+  // Util
+
+  fun getContentHeight(): Float {
+    val innerView = this.innerView ?: return 0f
+
+    innerView.allViews.forEach {
+      if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
+        return it.height.toFloat() + 20f
+      }
+    }
+
+    return 0f
   }
 }
diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index 54944030ff..be05dfa94c 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -111,6 +111,8 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
 
   func present() {
     guard !self.isOpen,
+          !self.isOpening,
+          !self.isClosing,
           let innerView = self.innerView,
           let contentHeight = innerView.subviews.first?.frame.height,
           let rvc = self.reactViewController() else {

From 346897d25560200b8547eeb9cdee74071fa49f50 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:28:35 -0700
Subject: [PATCH 27/62] more autosize stuff

---
 .../modules/bottomsheet/BottomSheetView.kt    | 57 +++++++++++++------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 09b7696e03..8edce6a0f5 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -1,7 +1,6 @@
 package expo.modules.bottomsheet
 
 import android.content.Context
-import android.util.Log
 import android.view.View
 import android.widget.FrameLayout
 import androidx.core.view.allViews
@@ -44,7 +43,7 @@ class BottomSheetView(
       }
     }
 
-  var maxHeight = 0f
+  var maxHeight = this.screenHeight
     set (value) {
       field = if (value > this.screenHeight) {
         this.screenHeight.toFloat()
@@ -148,8 +147,6 @@ class BottomSheetView(
     val dialog = BottomSheetDialog(context)
     dialog.setContentView(rootView)
     dialog.setCancelable(!preventDismiss)
-    Log.d("BottomSheetView", "contentHeight: $contentHeight")
-    Log.d("BottomSheetView", "screenHeight: $screenHeight")
     dialog.setOnShowListener {
       val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
       bottomSheet?.let {
@@ -160,18 +157,13 @@ class BottomSheetView(
         val behavior = BottomSheetBehavior.from(it)
 
         behavior.isFitToContents = true
+        behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight)
         if (contentHeight > this.screenHeight) {
-          behavior.halfExpandedRatio = 0.99f
           behavior.state = BottomSheetBehavior.STATE_EXPANDED
+          this.selectedSnapPoint = 2
         } else {
-          val targetHeight = if (contentHeight < this.minHeight) {
-            this.minHeight
-          } else {
-            contentHeight
-          }
-          // the sheet needs a percentage for the "middle detent" size, rather than a pixel value
-          behavior.halfExpandedRatio = targetHeight / screenHeight
           behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+          this.selectedSnapPoint = 1
         }
         behavior.skipCollapsed = true
         behavior.isDraggable = true
@@ -210,26 +202,57 @@ class BottomSheetView(
   }
 
   fun updateLayout() {
-    this.innerView?.let {
-      val contentHeight = it.allViews.first().height.toFloat()
+    val dialog = this.dialog ?: return
+    val contentHeight = this.getContentHeight()
+
+    val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
+    bottomSheet?.let {
+      val behavior = BottomSheetBehavior.from(it)
+
+      behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight)
+
+      if (contentHeight > this.screenHeight && behavior.state != BottomSheetBehavior.STATE_EXPANDED) {
+        behavior.state = BottomSheetBehavior.STATE_EXPANDED
+      } else if (contentHeight < this.screenHeight && behavior.state != BottomSheetBehavior.STATE_HALF_EXPANDED) {
+        behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+      }
     }
   }
 
+  private fun getTargetHeight(): Float {
+    val contentHeight = this.getContentHeight()
+    val height = if (contentHeight > maxHeight) {
+      maxHeight
+    } else if (contentHeight < minHeight) {
+      minHeight
+    } else {
+      contentHeight
+    }
+    return height
+  }
+
+  private fun clampRatio(ratio: Float): Float {
+    if (ratio < 0.01) {
+      return 0.01f
+    } else if (ratio > 0.99) {
+      return 0.99f
+    }
+    return ratio
+  }
+
   fun dismiss() {
     this.dialog?.dismiss()
   }
 
   // Util
 
-  fun getContentHeight(): Float {
+  private fun getContentHeight(): Float {
     val innerView = this.innerView ?: return 0f
-
     innerView.allViews.forEach {
       if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
         return it.height.toFloat() + 20f
       }
     }
-
     return 0f
   }
 }

From 91ea4860e129d875eac5da9f1b281bee25c65744 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:30:15 -0700
Subject: [PATCH 28/62] tweak inset stuff

---
 .../src/main/java/expo/modules/bottomsheet/BottomSheetView.kt   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 8edce6a0f5..67dab92f6e 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -250,7 +250,7 @@ class BottomSheetView(
     val innerView = this.innerView ?: return 0f
     innerView.allViews.forEach {
       if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
-        return it.height.toFloat() + 20f
+        return it.height.toFloat() + 50f
       }
     }
     return 0f

From c389f4f994ad4a30b4ada0e9873f44201e3f2d72 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:32:36 -0700
Subject: [PATCH 29/62] remove inset

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

diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index c01b159aa3..e7d19ae975 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -94,7 +94,7 @@ export class BottomSheet extends React.Component<
         ref={this.ref}
         style={{
           position: 'absolute',
-          height: screenHeight - topInset - bottomInset,
+          height: screenHeight,
           width: '100%',
         }}
         containerBackgroundColor={backgroundColor}>

From ec2f66caf32f385e705627f876ca29482bcd8359 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:34:19 -0700
Subject: [PATCH 30/62] organize

---
 .../modules/bottomsheet/BottomSheetView.kt    | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 67dab92f6e..9cb719e8ef 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -219,6 +219,22 @@ class BottomSheetView(
     }
   }
 
+  fun dismiss() {
+    this.dialog?.dismiss()
+  }
+
+  // Util
+
+  private fun getContentHeight(): Float {
+    val innerView = this.innerView ?: return 0f
+    innerView.allViews.forEach {
+      if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
+        return it.height.toFloat() + 50f
+      }
+    }
+    return 0f
+  }
+
   private fun getTargetHeight(): Float {
     val contentHeight = this.getContentHeight()
     val height = if (contentHeight > maxHeight) {
@@ -239,20 +255,4 @@ class BottomSheetView(
     }
     return ratio
   }
-
-  fun dismiss() {
-    this.dialog?.dismiss()
-  }
-
-  // Util
-
-  private fun getContentHeight(): Float {
-    val innerView = this.innerView ?: return 0f
-    innerView.allViews.forEach {
-      if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
-        return it.height.toFloat() + 50f
-      }
-    }
-    return 0f
-  }
 }

From d8c822ad3bfd23bfa58206aee92e648c37ffc9b1 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 12:56:38 -0700
Subject: [PATCH 31/62] fix

---
 .../main/java/expo/modules/bottomsheet/BottomSheetView.kt    | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 9cb719e8ef..1792c025eb 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -117,11 +117,6 @@ class BottomSheetView(
     this.present()
   }
 
-  override fun onDetachedFromWindow() {
-    super.onDetachedFromWindow()
-    this.destroy()
-  }
-
   private fun destroy() {
     this.isClosing = false
     this.isOpen = false

From 78554a3d6b6e5c4bafe75f3654b0e4a50ff910f1 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 13:08:49 -0700
Subject: [PATCH 32/62] ?

---
 src/components/Dialog/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index c6195f5c35..87a6b8994c 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,5 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {Platform, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, 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'
@@ -148,12 +148,10 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         style={[a.px_xl, style]}
         ref={ref}
         {...props}
-        bounces={
-          Platform.OS !== 'ios' || nativeSnapPoint === BottomSheetSnapPoint.Full
-        }
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
         bottomOffset={30}>
         {children}
-        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop * 2}} />
       </KeyboardAwareScrollView>
     )
   },

From 3f2450fc017a4b410151776681e8086d03bcc34f Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 14:39:53 -0700
Subject: [PATCH 33/62] hack for keyboard android

---
 src/components/Dialog/index.tsx                     | 6 +++++-
 src/components/ReportDialog/SubmitView.tsx          | 3 +++
 src/view/com/composer/GifAltText.tsx                | 3 +++
 src/view/com/composer/photos/ImageAltTextDialog.tsx | 4 +++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 87a6b8994c..3b26f5b20e 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -151,7 +151,11 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
         bottomOffset={30}>
         {children}
-        <View style={{height: insets.bottom + a.pt_5xl.paddingTop * 2}} />
+        <View
+          style={{
+            height: insets.bottom + a.pt_5xl.paddingTop * (isIOS ? 1 : 2.5),
+          }}
+        />
       </KeyboardAwareScrollView>
     )
   },
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index 682e918c2d..5b2f527fdd 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -6,6 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 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'
@@ -227,6 +228,8 @@ export function SubmitView({
           {submitting && <ButtonIcon icon={Loader} />}
         </Button>
       </View>
+      {/* Maybe fix this later -h */}
+      {isAndroid ? <View style={{height: 300}} /> : null}
     </View>
   )
 }
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index b4ff731fbe..bc93084f50 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -12,6 +12,7 @@ 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'
@@ -184,6 +185,8 @@ function AltTextInner({
         </View>
       </View>
       <Dialog.Close />
+      {/* Maybe fix this later -h */}
+      {isAndroid ? <View style={{height: 300}} /> : null}
     </Dialog.ScrollableInner>
   )
 }
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index a5ef5bc031..a468db5376 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -5,7 +5,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {MAX_ALT_TEXT} from '#/lib/constants'
-import {isWeb} from '#/platform/detection'
+import {isAndroid, isWeb} from '#/platform/detection'
 import {ComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -116,6 +116,8 @@ const ImageAltTextInner = ({
           </ButtonText>
         </Button>
       </View>
+      {/* Maybe fix this later -h */}
+      {isAndroid ? <View style={{height: 300}} /> : null}
     </Dialog.ScrollableInner>
   )
 }

From 8dfc9a65a6474f58f2d10c8a866a08ffb430b658 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 15:01:26 -0700
Subject: [PATCH 34/62] tweaks/fixes

---
 modules/bottom-sheet/ios/SheetViewController.swift | 10 +++++-----
 src/components/Dialog/index.tsx                    |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
index 9caa5bab14..004e79a5c4 100644
--- a/modules/bottom-sheet/ios/SheetViewController.swift
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -27,7 +27,7 @@ class SheetViewController: UIViewController {
       return
     }
 
-    if contentHeight > screenHeight {
+    if contentHeight > screenHeight - 100 {
       sheet.detents = [
         .large()
       ]
@@ -43,10 +43,10 @@ class SheetViewController: UIViewController {
           .medium()
         ]
       }
-    }
-
-    if !preventExpansion {
-      sheet.detents.append(.large())
+      
+      if !preventExpansion {
+        sheet.detents.append(.large())
+      }
     }
   }
 
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 3b26f5b20e..888914c8bc 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -149,7 +149,8 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-        bottomOffset={30}>
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
         {children}
         <View
           style={{

From dd6464507bfd714b4768b3585d9b462471c37e08 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 15:27:00 -0700
Subject: [PATCH 35/62] fix translate

---
 src/components/Menu/index.tsx               |  6 ++----
 src/state/preferences/in-app-browser.tsx    | 12 ++++++------
 src/view/com/util/forms/PostDropdownBtn.tsx |  4 ++--
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index bfdcf4099d..4654d9f9b4 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -119,10 +119,8 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       accessibilityLabel={label}
       onFocus={onFocus}
       onBlur={onBlur}
-      onPress={e => {
-        control?.close()
-        onPress(e)
-
+      onPress={async e => {
+        await onPress(e)
         if (!e.defaultPrevented) {
           control?.close()
         }
diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx
index 76c854105e..1494fa4e8a 100644
--- a/src/state/preferences/in-app-browser.tsx
+++ b/src/state/preferences/in-app-browser.tsx
@@ -2,14 +2,14 @@ import React from 'react'
 import {Linking} from 'react-native'
 import * as WebBrowser from 'expo-web-browser'
 
-import {isNative} from '#/platform/detection'
-import * as persisted from '#/state/persisted'
-import {usePalette} from 'lib/hooks/usePalette'
+import {usePalette} from '#/lib/hooks/usePalette'
 import {
   createBskyAppAbsoluteUrl,
   isBskyRSSUrl,
   isRelativeUrl,
-} from 'lib/strings/url-helpers'
+} from '#/lib/strings/url-helpers'
+import {isNative} from '#/platform/detection'
+import * as persisted from '#/state/persisted'
 import {useModalControls} from '../modals'
 
 type StateContext = persisted.Schema['useInAppBrowser']
@@ -62,7 +62,7 @@ export function useOpenLink() {
   const pal = usePalette('default')
 
   const openLink = React.useCallback(
-    (url: string, override?: boolean) => {
+    async (url: string, override?: boolean) => {
       if (isBskyRSSUrl(url) && isRelativeUrl(url)) {
         url = createBskyAppAbsoluteUrl(url)
       }
@@ -75,7 +75,7 @@ export function useOpenLink() {
           })
           return
         } else if (override ?? enabled) {
-          WebBrowser.openBrowserAsync(url, {
+          await WebBrowser.openBrowserAsync(url, {
             presentationStyle:
               WebBrowser.WebBrowserPresentationStyle.FULL_SCREEN,
             toolbarColor: pal.colors.backgroundLight,
diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx
index ef87c24533..5449fdaf31 100644
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@@ -239,8 +239,8 @@ let PostDropdownBtn = ({
     Toast.show(_(msg`Copied to clipboard`), 'clipboard-check')
   }, [_, richText])
 
-  const onPressTranslate = React.useCallback(() => {
-    openLink(translatorUrl)
+  const onPressTranslate = React.useCallback(async () => {
+    await openLink(translatorUrl)
   }, [openLink, translatorUrl])
 
   const onHidePost = React.useCallback(() => {

From 308b197bcfa7926e5377a2be222747496f0a6e55 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 15:33:59 -0700
Subject: [PATCH 36/62] fix link

---
 .../moderation/LabelsOnMeDialog.tsx           | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index fc30b004ad..aa64972a96 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -16,7 +16,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {Divider} from '../Divider'
 import {Loader} from '../Loader'
@@ -237,24 +236,23 @@ function AppealForm({
 
   return (
     <>
-      <Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
-        <Trans>Appeal "{strings.name}" label</Trans>
-      </Text>
-      <Text style={[a.text_md, a.leading_snug]}>
-        <Trans>
-          This appeal will be sent to{' '}
-          <InlineLinkText
-            label={sourceName}
-            to={makeProfileLink(
-              labeler ? labeler.creator : {did: label.src, handle: ''},
-            )}
-            onPress={() => control.close()}
-            style={[a.text_md, a.leading_snug]}>
-            {sourceName}
-          </InlineLinkText>
-          .
-        </Trans>
-      </Text>
+      <View style={{flexWrap: 'wrap', flexDirection: 'row'}}>
+        <Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
+          <Trans>Appeal "{strings.name}" label</Trans>
+        </Text>
+        <Text style={[a.text_md, a.leading_snug]}>
+          <Trans>This appeal will be sent to</Trans>{' '}
+        </Text>
+        <BottomSheetInlineLinkText
+          label={sourceName}
+          to={makeProfileLink(
+            labeler ? labeler.creator : {did: label.src, handle: ''},
+          )}
+          onPress={() => control.close()}
+          style={[a.text_md, a.leading_snug]}>
+          {sourceName}
+        </BottomSheetInlineLinkText>
+      </View>
       <View style={[a.my_md]}>
         <Dialog.Input
           label={_(msg`Text input field`)}

From 1e9d792257bda19a4d25395bf0f79da4498121be Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 15:36:07 -0700
Subject: [PATCH 37/62] add back period

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

diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index aa64972a96..acedf81754 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -252,6 +252,7 @@ function AppealForm({
           style={[a.text_md, a.leading_snug]}>
           {sourceName}
         </BottomSheetInlineLinkText>
+        <Text style={[a.text_md, a.leading_snug]}>.</Text>
       </View>
       <View style={[a.my_md]}>
         <Dialog.Input

From d3d29180678b43baf841b85962b29db9b5c291b5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 17:19:58 -0700
Subject: [PATCH 38/62] touch handler ios

---
 modules/bottom-sheet/ios/SheetView.swift   |   5 +
 src/components/NormalizedRNGHPressable.tsx | 131 +--------------------
 2 files changed, 7 insertions(+), 129 deletions(-)

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index be05dfa94c..d68cd7a31d 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -5,6 +5,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   // Views
   private var sheetVc: SheetViewController?
   private var innerView: UIView?
+  private var touchHandler: RCTTouchHandler?
 
   // Events
   private let onAttemptDismiss = EventDispatcher()
@@ -71,6 +72,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   required init (appContext: AppContext? = nil) {
     super.init(appContext: appContext)
     self.maxHeight = Util.getScreenHeight()
+    self.touchHandler = RCTTouchHandler(bridge: appContext?.reactBridge)
     SheetManager.shared.add(self)
   }
 
@@ -81,6 +83,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
   // 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.touchHandler?.attach(to: subview)
     self.innerView = subview
   }
 
@@ -103,6 +106,8 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     self.isClosing = false
     self.isOpen = false
     self.sheetVc = nil
+    self.touchHandler?.detach(from: self.innerView)
+    self.touchHandler = nil
     self.innerView = nil
     SheetManager.shared.remove(self)
   }
diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
index 2cf2249fc6..86f5730495 100644
--- a/src/components/NormalizedRNGHPressable.tsx
+++ b/src/components/NormalizedRNGHPressable.tsx
@@ -1,130 +1,3 @@
-import React from 'react'
-import {
-  GestureResponderEvent,
-  MeasureOnSuccessCallback,
-  NativeMouseEvent,
-  NativeSyntheticEvent,
-  PressableProps,
-} from 'react-native'
-import {Pressable as BSPressable} from 'react-native-gesture-handler'
-import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
 
-function pressableEventToGestureResponderEvent(
-  event: PressableEvent,
-  target: NormalizedRNGHPressable,
-): GestureResponderEvent {
-  return {
-    nativeEvent: {
-      ...event.nativeEvent,
-      touches: [],
-      changedTouches: [],
-      identifier: event.nativeEvent.identifier.toString(),
-      target: event.nativeEvent.target.toString(),
-    },
-    // @ts-expect-error
-    target: target,
-    // @ts-expect-error
-    currentTarget: target,
-    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,
-  target: NormalizedRNGHPressable,
-): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
-  return {
-    ...event.nativeEvent,
-    // @ts-expect-error
-    target: target,
-    // @ts-expect-error
-    currentTarget: target,
-    preventDefault() {},
-    stopPropagation() {},
-    cancelable: false,
-    defaultPrevented: false,
-    eventPhase: 0,
-    isTrusted: false,
-    bubbles: false,
-    timeStamp: event.nativeEvent.timestamp,
-  }
-}
-
-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
-        accessible={true}
-        accessibilityRole="button"
-        {...this.props}
-        onPress={this.onPress}
-        onLongPress={this.onLongPress}
-        onPressIn={this.onPressIn}
-        onPressOut={this.onPressOut}
-        onHoverIn={this.onHoverIn}
-        onHoverOut={this.onHoverOut}
-      />
-    )
-  }
-}
+export {NormalizedRNGHPressable}

From 045abf202de25c3a203f89b58a550606a628c7aa Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:10:57 -0700
Subject: [PATCH 39/62] forward touches android

---
 .../modules/bottomsheet/BottomSheetView.kt    |  94 ++++++++---
 .../bottomsheet/DialogRootViewGroup.kt        | 152 ++++++++++++++++++
 2 files changed, 228 insertions(+), 18 deletions(-)
 create mode 100644 modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 1792c025eb..c46d0f76c0 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -2,24 +2,35 @@ package expo.modules.bottomsheet
 
 import android.content.Context
 import android.view.View
+import android.view.ViewGroup
+import android.view.ViewStructure
+import android.view.accessibility.AccessibilityEvent
 import android.widget.FrameLayout
 import androidx.core.view.allViews
 import com.facebook.react.ReactRootView
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.UIManager
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
+import java.util.ArrayList
 
 class BottomSheetView(
   context: Context,
   appContext: AppContext,
-) : ExpoView(context, appContext) {
-
-  private var reactRootView: ReactRootView? = null
+) : ExpoView(context, appContext), LifecycleEventListener {
   private var innerView: View? = null
   private var dialog: BottomSheetDialog? = null
 
+  private lateinit var dialogRootViewGroup: DialogRootViewGroup
+  private var eventDispatcher: EventDispatcher? = null
+
   private val screenHeight = context.resources.displayMetrics.heightPixels.toFloat()
 
   private val onAttemptDismiss by EventDispatcher()
@@ -97,14 +108,14 @@ class BottomSheetView(
   // Lifecycle
 
   init {
-    SheetManager.add(this)
-  }
+    (appContext.reactContext as? ReactContext)?.let {
+      it.addLifecycleEventListener(this)
+      this.eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(it, this.id)
 
-  override fun addView(
-    child: View?,
-    index: Int,
-  ) {
-    this.innerView = child
+      this.dialogRootViewGroup = DialogRootViewGroup(context)
+      this.dialogRootViewGroup.eventDispatcher = this.eventDispatcher
+    }
+    SheetManager.add(this)
   }
 
   override fun onLayout(
@@ -121,7 +132,6 @@ class BottomSheetView(
     this.isClosing = false
     this.isOpen = false
     this.dialog = null
-    this.reactRootView = null
     this.innerView = null
     SheetManager.remove(this)
   }
@@ -131,16 +141,10 @@ class BottomSheetView(
   private fun present() {
     if (this.isOpen || this.isOpening || this.isClosing) return
 
-    val innerView = this.innerView ?: return
     val contentHeight = this.getContentHeight()
 
-    // Needs to be a react root view for RNGH to work
-    val rootView = ReactRootView(context)
-    rootView.addView(innerView)
-    this.reactRootView = rootView
-
     val dialog = BottomSheetDialog(context)
-    dialog.setContentView(rootView)
+    dialog.setContentView(dialogRootViewGroup)
     dialog.setCancelable(!preventDismiss)
     dialog.setOnShowListener {
       val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
@@ -250,4 +254,58 @@ class BottomSheetView(
     }
     return ratio
   }
+
+
+
+  override fun onHostResume() { }
+
+  override fun onHostPause() { }
+
+  override fun onHostDestroy() {
+    (appContext.reactContext as? ReactContext)?.let {
+      it.removeLifecycleEventListener(this)
+      this.destroy()
+    }
+  }
+
+  // View overrides to pass to DialogRootViewGroup instead
+
+  override fun dispatchProvideStructure(structure: ViewStructure?) {
+    dialogRootViewGroup.dispatchProvideStructure(structure)
+  }
+
+  override fun setId(id: Int) {
+    super.setId(id)
+    dialogRootViewGroup.id = id
+  }
+
+  override fun addView(
+    child: View?,
+    index: Int,
+  ) {
+    this.innerView = child
+    (child as ViewGroup).let {
+      dialogRootViewGroup.addView(child, index)
+    }
+  }
+
+  override fun removeView(view: View?) {
+    UiThreadUtil.assertOnUiThread()
+    if (view != null) {
+      dialogRootViewGroup.removeView(view)
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    UiThreadUtil.assertOnUiThread()
+    val child = getChildAt(index)
+    dialogRootViewGroup.removeView(child)
+  }
+
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>?) { }
+
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean {
+    return false
+  }
+
 }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt
new file mode 100644
index 0000000000..de26f3dca6
--- /dev/null
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt
@@ -0,0 +1,152 @@
+package expo.modules.bottomsheet
+
+import android.annotation.SuppressLint
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.react.bridge.GuardedRunnable
+import com.facebook.react.config.ReactFeatureFlags
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerModule
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+
+// SEE https://github.com/facebook/react-native/blob/309cdea337101cfe2212cfb6abebf1e783e43282/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/modal/ReactModalHostView.kt#L378
+
+/**
+ * DialogRootViewGroup is the ViewGroup which contains all the children of a Modal. It gets all
+ * child information forwarded from [ReactModalHostView] and uses that to create children. It is
+ * also responsible for acting as a RootView and handling touch events. It does this the same way
+ * as ReactRootView.
+ *
+ * To get layout to work properly, we need to layout all the elements within the Modal as if they
+ * can fill the entire window. To do that, we need to explicitly set the styleWidth and
+ * styleHeight on the LayoutShadowNode to be the window size. This is done through the
+ * UIManagerModule, and will then cause the children to layout as if they can fill the window.
+ */
+class DialogRootViewGroup(private val context: Context?) :
+  ReactViewGroup(context),
+  RootView {
+  private var hasAdjustedSize = false
+  private var viewWidth = 0
+  private var viewHeight = 0
+
+  private val jSTouchDispatcher = JSTouchDispatcher(this)
+  private var jSPointerDispatcher: JSPointerDispatcher? = null
+  private var sizeChangeListener: OnSizeChangeListener? = null
+
+  var eventDispatcher: EventDispatcher? = null
+
+  interface OnSizeChangeListener {
+    fun onSizeChange(width: Int, height: Int)
+  }
+
+  init {
+    if (ReactFeatureFlags.dispatchPointerEvents) {
+      jSPointerDispatcher = JSPointerDispatcher(this)
+    }
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    viewWidth = w
+    viewHeight = h
+    updateFirstChildView()
+
+    sizeChangeListener?.onSizeChange(w, h)
+  }
+
+  fun setOnSizeChangeListener(listener: OnSizeChangeListener) {
+    sizeChangeListener = listener
+  }
+
+  private fun updateFirstChildView() {
+    if (childCount > 0) {
+      hasAdjustedSize = false
+      val viewTag = getChildAt(0).id
+      reactContext.runOnNativeModulesQueueThread(
+        object : GuardedRunnable(reactContext) {
+          override fun runGuarded() {
+            val uiManager: UIManagerModule =
+              reactContext
+                .reactApplicationContext
+                .getNativeModule(UIManagerModule::class.java) ?: return
+
+            uiManager.updateNodeSize(viewTag, viewWidth, viewHeight)
+          }
+        }
+      )
+    } else {
+      hasAdjustedSize = true
+    }
+  }
+
+  override fun addView(child: View, index: Int, params: LayoutParams) {
+    super.addView(child, index, params)
+    if (hasAdjustedSize) {
+      updateFirstChildView()
+    }
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
+  private val reactContext: ThemedReactContext
+    get() = context as ThemedReactContext
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jSTouchDispatcher.handleTouchEvent(event, it) }
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    return super.onInterceptTouchEvent(event)
+  }
+
+  @SuppressLint("ClickableViewAccessibility")
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jSTouchDispatcher.handleTouchEvent(event, it) }
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+    super.onTouchEvent(event)
+
+    // In case when there is no children interested in handling touch event, we return true from
+    // the root view in order to receive subsequent events related to that gesture
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+    return super.onHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+    return super.onHoverEvent(event)
+  }
+
+  @Deprecated("Deprecated in Java")
+  override fun onChildStartedNativeGesture(ev: MotionEvent?) {
+    eventDispatcher?.let {
+      if (ev != null) {
+        jSTouchDispatcher.onChildStartedNativeGesture(ev, it)
+      }
+    }
+  }
+
+  override fun onChildStartedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jSTouchDispatcher.onChildStartedNativeGesture(ev, it) }
+    jSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jSTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+    jSPointerDispatcher?.onChildEndedNativeGesture()
+  }
+
+  override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
+    // No-op - override in order to still receive events to onInterceptTouchEvent
+    // even when some other view disallow that
+  }
+}
\ No newline at end of file

From bcccd88ef9a55adeef24f5e79e57633cd92abccc Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:19:11 -0700
Subject: [PATCH 40/62] remove all the pressable hacks

---
 src/components/BottomSheetLink.tsx            | 92 -------------------
 src/components/BottomSheetLink.web.tsx        |  1 -
 src/components/Button.tsx                     | 17 +---
 src/components/Menu/index.tsx                 |  7 +-
 src/components/NormalizedRNGHPressable.tsx    |  3 -
 .../NormalizedRNGHPressable.web.tsx           |  3 -
 src/components/ReportDialog/SubmitView.tsx    |  4 +-
 src/components/dialogs/MutedWords.tsx         | 22 ++---
 .../dialogs/PostInteractionSettingsDialog.tsx |  4 +-
 src/components/forms/Toggle.tsx               |  8 +-
 .../moderation/LabelsOnMeDialog.tsx           | 10 +-
 .../moderation/ModerationDetailsDialog.tsx    |  5 +-
 src/view/com/auth/server-input/index.tsx      |  9 +-
 13 files changed, 25 insertions(+), 160 deletions(-)
 delete mode 100644 src/components/BottomSheetLink.tsx
 delete mode 100644 src/components/BottomSheetLink.web.tsx
 delete mode 100644 src/components/NormalizedRNGHPressable.tsx
 delete mode 100644 src/components/NormalizedRNGHPressable.web.tsx

diff --git a/src/components/BottomSheetLink.tsx b/src/components/BottomSheetLink.tsx
deleted file mode 100644
index 36d52c90c1..0000000000
--- a/src/components/BottomSheetLink.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-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 {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
-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 (
-    <NormalizedRNGHPressable
-      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>
-    </NormalizedRNGHPressable>
-  )
-}
diff --git a/src/components/BottomSheetLink.web.tsx b/src/components/BottomSheetLink.web.tsx
deleted file mode 100644
index eb21ca880e..0000000000
--- a/src/components/BottomSheetLink.web.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export {Link as BottomSheetInlineLinkText} from './Link'
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 2c78b8d1e2..4acb4f1dc4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -15,9 +15,7 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, flatten, select, tokens, useTheme} 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'
@@ -117,24 +115,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
       disabled = false,
       style,
       hoverStyle: hoverStyleProp,
-      PressableComponent,
+      PressableComponent = Pressable,
       ...rest
     },
     ref,
   ) => {
-    /*
-     * This will pick the correct default pressable to use. If we are inside a
-     * native dialog, we need to use the RNGH pressable.
-     */
-    const {isNativeDialog} = useDialogContext()
-    if (!PressableComponent) {
-      if (isNativeDialog) {
-        PressableComponent = NormalizedRNGHPressable
-      } else {
-        PressableComponent = Pressable
-      }
-    }
-
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 4654d9f9b4..943a7e7b0c 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -18,7 +18,6 @@ import {
   ItemTextProps,
   TriggerProps,
 } from '#/components/Menu/types'
-import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 
 export {
@@ -113,7 +112,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
   } = useInteractionState()
 
   return (
-    <NormalizedRNGHPressable
+    <Pressable
       {...rest}
       accessibilityHint=""
       accessibilityLabel={label}
@@ -149,7 +148,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
         {children}
       </ItemContext.Provider>
-    </NormalizedRNGHPressable>
+    </Pressable>
   )
 }
 
diff --git a/src/components/NormalizedRNGHPressable.tsx b/src/components/NormalizedRNGHPressable.tsx
deleted file mode 100644
index 86f5730495..0000000000
--- a/src/components/NormalizedRNGHPressable.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {Pressable as NormalizedRNGHPressable} from 'react-native'
-
-export {NormalizedRNGHPressable}
diff --git a/src/components/NormalizedRNGHPressable.web.tsx b/src/components/NormalizedRNGHPressable.web.tsx
deleted file mode 100644
index 86f5730495..0000000000
--- a/src/components/NormalizedRNGHPressable.web.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import {Pressable as NormalizedRNGHPressable} from 'react-native'
-
-export {NormalizedRNGHPressable}
diff --git a/src/components/ReportDialog/SubmitView.tsx b/src/components/ReportDialog/SubmitView.tsx
index 5b2f527fdd..ef4a9b7fbc 100644
--- a/src/components/ReportDialog/SubmitView.tsx
+++ b/src/components/ReportDialog/SubmitView.tsx
@@ -17,7 +17,6 @@ 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'
 
@@ -155,8 +154,7 @@ export function SubmitView({
                 <Toggle.Item
                   key={labeler.creator.did}
                   name={labeler.creator.did}
-                  label={title}
-                  PressableComponent={NormalizedRNGHPressable}>
+                  label={title}>
                   <LabelerToggle title={title} />
                 </Toggle.Item>
               )
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 38571e6b8d..490ae8e2e8 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -30,7 +30,6 @@ 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 {createPortalGroup} from '#/components/Portal'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -178,8 +177,7 @@ function MutedWordsInner() {
                   <Toggle.Item
                     label={_(msg`Mute this word until you unmute it`)}
                     name="forever"
-                    style={[a.flex_1]}
-                    PressableComponent={NormalizedRNGHPressable}>
+                    style={[a.flex_1]}>
                     <TargetToggle>
                       <View
                         style={[
@@ -199,8 +197,7 @@ function MutedWordsInner() {
                   <Toggle.Item
                     label={_(msg`Mute this word for 24 hours`)}
                     name="24_hours"
-                    style={[a.flex_1]}
-                    PressableComponent={NormalizedRNGHPressable}>
+                    style={[a.flex_1]}>
                     <TargetToggle>
                       <View
                         style={[
@@ -229,8 +226,7 @@ function MutedWordsInner() {
                   <Toggle.Item
                     label={_(msg`Mute this word for 7 days`)}
                     name="7_days"
-                    style={[a.flex_1]}
-                    PressableComponent={NormalizedRNGHPressable}>
+                    style={[a.flex_1]}>
                     <TargetToggle>
                       <View
                         style={[
@@ -250,8 +246,7 @@ function MutedWordsInner() {
                   <Toggle.Item
                     label={_(msg`Mute this word for 30 days`)}
                     name="30_days"
-                    style={[a.flex_1]}
-                    PressableComponent={NormalizedRNGHPressable}>
+                    style={[a.flex_1]}>
                     <TargetToggle>
                       <View
                         style={[
@@ -292,8 +287,7 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word in post text and tags`)}
                   name="content"
-                  style={[a.flex_1]}
-                  PressableComponent={NormalizedRNGHPressable}>
+                  style={[a.flex_1]}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -309,8 +303,7 @@ function MutedWordsInner() {
                 <Toggle.Item
                   label={_(msg`Mute this word in tags only`)}
                   name="tag"
-                  style={[a.flex_1]}
-                  PressableComponent={NormalizedRNGHPressable}>
+                  style={[a.flex_1]}>
                   <TargetToggle>
                     <View
                       style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
@@ -340,8 +333,7 @@ function MutedWordsInner() {
                 name="exclude_following"
                 style={[a.flex_row, a.justify_between]}
                 value={excludeFollowing}
-                onChange={setExcludeFollowing}
-                PressableComponent={NormalizedRNGHPressable}>
+                onChange={setExcludeFollowing}>
                 <TargetToggle>
                   <View
                     style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 498e28b640..a2775306c7 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -37,7 +37,6 @@ 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 {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
@@ -306,8 +305,7 @@ export function PostInteractionSettingsForm({
               }
               value={quotesEnabled}
               onChange={onChangeQuotesEnabled}
-              style={[, a.justify_between, a.pt_xs]}
-              PressableComponent={NormalizedRNGHPressable}>
+              style={[, a.justify_between, a.pt_xs]}>
               <Text style={[t.atoms.text_contrast_medium]}>
                 {quotesEnabled ? (
                   <Trans>Quote posts enabled</Trans>
diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx
index bb5f154df0..4e3695bbf2 100644
--- a/src/components/forms/Toggle.tsx
+++ b/src/components/forms/Toggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
+import {Pressable, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
@@ -68,7 +68,6 @@ export type ItemProps = ViewStyleProp & {
   onChange?: (selected: boolean) => void
   isInvalid?: boolean
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
-  PressableComponent?: React.ComponentType<PressableProps>
 }
 
 export function useItemContext() {
@@ -160,7 +159,6 @@ export function Item({
   style,
   type = 'checkbox',
   label,
-  PressableComponent = Pressable,
   ...rest
 }: ItemProps) {
   const {
@@ -208,7 +206,7 @@ export function Item({
 
   return (
     <ItemContext.Provider value={state}>
-      <PressableComponent
+      <Pressable
         accessibilityHint={undefined} // optional
         hitSlop={HITSLOP_10}
         {...rest}
@@ -233,7 +231,7 @@ export function Item({
         onBlur={onBlur}
         style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
         {typeof children === 'function' ? children(state) : children}
-      </PressableComponent>
+      </Pressable>
     </ItemContext.Provider>
   )
 }
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index acedf81754..3f857254f9 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -13,9 +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 {BottomSheetInlineLinkText} from '#/components/BottomSheetLink'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {Divider} from '../Divider'
 import {Loader} from '../Loader'
@@ -165,14 +165,14 @@ function Label({
             <Text style={[t.atoms.text_contrast_medium]}>
               <Trans>Source: </Trans>{' '}
             </Text>
-            <BottomSheetInlineLinkText
+            <InlineLinkText
               label={sourceName}
               to={makeProfileLink(
                 labeler ? labeler.creator : {did: label.src, handle: ''},
               )}
               onPress={() => control.close()}>
               {sourceName}
-            </BottomSheetInlineLinkText>
+            </InlineLinkText>
           </View>
         )}
       </View>
@@ -243,7 +243,7 @@ function AppealForm({
         <Text style={[a.text_md, a.leading_snug]}>
           <Trans>This appeal will be sent to</Trans>{' '}
         </Text>
-        <BottomSheetInlineLinkText
+        <InlineLinkText
           label={sourceName}
           to={makeProfileLink(
             labeler ? labeler.creator : {did: label.src, handle: ''},
@@ -251,7 +251,7 @@ function AppealForm({
           onPress={() => control.close()}
           style={[a.text_md, a.leading_snug]}>
           {sourceName}
-        </BottomSheetInlineLinkText>
+        </InlineLinkText>
         <Text style={[a.text_md, a.leading_snug]}>.</Text>
       </View>
       <View style={[a.my_md]}>
diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx
index 2fb190efa5..1e274c1c98 100644
--- a/src/components/moderation/ModerationDetailsDialog.tsx
+++ b/src/components/moderation/ModerationDetailsDialog.tsx
@@ -10,7 +10,6 @@ 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'
@@ -150,13 +149,13 @@ function ModerationDetailsDialogInner({
               <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
                 <Trans>This label was applied by </Trans>
               </Text>
-              <BottomSheetInlineLinkText
+              <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`)}
-              </BottomSheetInlineLinkText>
+              </InlineLinkText>
             </>
           )}
         </View>
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index 659ff7f733..de7ed6d15b 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -12,7 +12,6 @@ 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,10 +82,7 @@ export function ServerInputDialog({
             label="Preferences"
             values={fixedOption}
             onChange={setFixedOption}>
-            <ToggleButton.Button
-              name={BSKY_SERVICE}
-              label={_(msg`Bluesky`)}
-              PressableComponent={NormalizedRNGHPressable}>
+            <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
               <ToggleButton.ButtonText>
                 {_(msg`Bluesky`)}
               </ToggleButton.ButtonText>
@@ -94,8 +90,7 @@ export function ServerInputDialog({
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
-              label={_(msg`Custom`)}
-              PressableComponent={NormalizedRNGHPressable}>
+              label={_(msg`Custom`)}>
               <ToggleButton.ButtonText>
                 {_(msg`Custom`)}
               </ToggleButton.ButtonText>

From 7b2bf9159e77ef270a67c4ea5b763d1fe9d06373 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:29:57 -0700
Subject: [PATCH 41/62] remove more unnecessary

---
 .../modules/bottomsheet/BottomSheetModule.kt  |   1 -
 .../modules/bottomsheet/BottomSheetView.kt    | 123 ++++++++++--------
 .../bottomsheet/DialogRootViewGroup.kt        |  37 ++++--
 .../expo/modules/bottomsheet/SheetManager.kt  |   2 +-
 .../bottom-sheet/ios/BottomSheetModule.swift  |   2 +-
 .../ios/SheetViewController.swift             |   2 +-
 .../Dialog/DialogTextInput.android.ts         |   3 -
 src/components/Dialog/DialogTextInput.ts      |   3 -
 src/components/Dialog/index.tsx               |  15 +--
 9 files changed, 105 insertions(+), 83 deletions(-)
 delete mode 100644 src/components/Dialog/DialogTextInput.android.ts
 delete mode 100644 src/components/Dialog/DialogTextInput.ts

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 4a9b2ccd4d..b5b526e604 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
@@ -1,6 +1,5 @@
 package expo.modules.bottomsheet
 
-import android.graphics.Color
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index c46d0f76c0..37854019b8 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -1,16 +1,15 @@
 package expo.modules.bottomsheet
 
 import android.content.Context
+import android.util.Log
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
 import android.view.accessibility.AccessibilityEvent
 import android.widget.FrameLayout
 import androidx.core.view.allViews
-import com.facebook.react.ReactRootView
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.ReactContext
-import com.facebook.react.bridge.UIManager
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
@@ -24,14 +23,17 @@ import java.util.ArrayList
 class BottomSheetView(
   context: Context,
   appContext: AppContext,
-) : ExpoView(context, appContext), LifecycleEventListener {
+) : ExpoView(context, appContext),
+  LifecycleEventListener {
   private var innerView: View? = null
   private var dialog: BottomSheetDialog? = null
 
   private lateinit var dialogRootViewGroup: DialogRootViewGroup
   private var eventDispatcher: EventDispatcher? = null
 
-  private val screenHeight = context.resources.displayMetrics.heightPixels.toFloat()
+  private val screenHeight =
+    context.resources.displayMetrics.heightPixels
+      .toFloat()
 
   private val onAttemptDismiss by EventDispatcher()
   private val onSnapPointChange by EventDispatcher()
@@ -46,21 +48,23 @@ class BottomSheetView(
   var preventExpansion = false
 
   var minHeight = 0f
-    set (value) {
-      field = if (value < 0) {
-        0f
-      } else {
-        value
-      }
+    set(value) {
+      field =
+        if (value < 0) {
+          0f
+        } else {
+          value
+        }
     }
 
   var maxHeight = this.screenHeight
-    set (value) {
-      field = if (value > this.screenHeight) {
-        this.screenHeight.toFloat()
-      } else {
-        value
-      }
+    set(value) {
+      field =
+        if (value > this.screenHeight) {
+          this.screenHeight.toFloat()
+        } else {
+          value
+        }
     }
 
   private var isOpen: Boolean = false
@@ -77,9 +81,11 @@ class BottomSheetView(
     set(value) {
       field = value
       if (value) {
-        onStateChange(mapOf(
-          "state" to "opening"
-        ))
+        onStateChange(
+          mapOf(
+            "state" to "opening",
+          ),
+        )
       }
     }
 
@@ -87,9 +93,11 @@ class BottomSheetView(
     set(value) {
       field = value
       if (value) {
-        onStateChange(mapOf(
-          "state" to "closing"
-        ))
+        onStateChange(
+          mapOf(
+            "state" to "closing",
+          ),
+        )
       }
     }
 
@@ -168,26 +176,34 @@ class BottomSheetView(
         behavior.isDraggable = true
         behavior.isHideable = true
 
-        behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
-          override fun onStateChanged(bottomSheet: View, newState: Int) {
-            when (newState) {
-              BottomSheetBehavior.STATE_EXPANDED -> {
-                selectedSnapPoint = 2
-              }
-              BottomSheetBehavior.STATE_COLLAPSED -> {
-                selectedSnapPoint = 1
-              }
-              BottomSheetBehavior.STATE_HALF_EXPANDED -> {
-                selectedSnapPoint = 1
-              }
-              BottomSheetBehavior.STATE_HIDDEN -> {
-                selectedSnapPoint = 0
+        behavior.addBottomSheetCallback(
+          object : BottomSheetBehavior.BottomSheetCallback() {
+            override fun onStateChanged(
+              bottomSheet: View,
+              newState: Int,
+            ) {
+              when (newState) {
+                BottomSheetBehavior.STATE_EXPANDED -> {
+                  selectedSnapPoint = 2
+                }
+                BottomSheetBehavior.STATE_COLLAPSED -> {
+                  selectedSnapPoint = 1
+                }
+                BottomSheetBehavior.STATE_HALF_EXPANDED -> {
+                  selectedSnapPoint = 1
+                }
+                BottomSheetBehavior.STATE_HIDDEN -> {
+                  selectedSnapPoint = 0
+                }
               }
             }
-          }
 
-          override fun onSlide(bottomSheet: View, slideOffset: Float) { }
-        })
+            override fun onSlide(
+              bottomSheet: View,
+              slideOffset: Float,
+            ) { }
+          },
+        )
       }
     }
     dialog.setOnDismissListener {
@@ -226,23 +242,27 @@ class BottomSheetView(
 
   private fun getContentHeight(): Float {
     val innerView = this.innerView ?: return 0f
+    var index = 0
     innerView.allViews.forEach {
-      if (it.javaClass.simpleName == "RNGestureHandlerRootView") {
-        return it.height.toFloat() + 50f
+      if (index == 1) {
+        Log.d("BottomSheetView", it.javaClass.simpleName)
+        return it.height.toFloat()
       }
+      index++
     }
     return 0f
   }
 
   private fun getTargetHeight(): Float {
     val contentHeight = this.getContentHeight()
-    val height = if (contentHeight > maxHeight) {
-      maxHeight
-    } else if (contentHeight < minHeight) {
-      minHeight
-    } else {
-      contentHeight
-    }
+    val height =
+      if (contentHeight > maxHeight) {
+        maxHeight
+      } else if (contentHeight < minHeight) {
+        minHeight
+      } else {
+        contentHeight
+      }
     return height
   }
 
@@ -255,8 +275,6 @@ class BottomSheetView(
     return ratio
   }
 
-
-
   override fun onHostResume() { }
 
   override fun onHostPause() { }
@@ -304,8 +322,5 @@ class BottomSheetView(
 
   override fun addChildrenForAccessibility(outChildren: ArrayList<View>?) { }
 
-  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean {
-    return false
-  }
-
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent?): Boolean = false
 }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt
index de26f3dca6..c022924e99 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/DialogRootViewGroup.kt
@@ -27,8 +27,9 @@ import com.facebook.react.views.view.ReactViewGroup
  * styleHeight on the LayoutShadowNode to be the window size. This is done through the
  * UIManagerModule, and will then cause the children to layout as if they can fill the window.
  */
-class DialogRootViewGroup(private val context: Context?) :
-  ReactViewGroup(context),
+class DialogRootViewGroup(
+  private val context: Context?,
+) : ReactViewGroup(context),
   RootView {
   private var hasAdjustedSize = false
   private var viewWidth = 0
@@ -41,7 +42,10 @@ class DialogRootViewGroup(private val context: Context?) :
   var eventDispatcher: EventDispatcher? = null
 
   interface OnSizeChangeListener {
-    fun onSizeChange(width: Int, height: Int)
+    fun onSizeChange(
+      width: Int,
+      height: Int,
+    )
   }
 
   init {
@@ -50,7 +54,12 @@ class DialogRootViewGroup(private val context: Context?) :
     }
   }
 
-  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+  override fun onSizeChanged(
+    w: Int,
+    h: Int,
+    oldw: Int,
+    oldh: Int,
+  ) {
     super.onSizeChanged(w, h, oldw, oldh)
 
     viewWidth = w
@@ -78,14 +87,18 @@ class DialogRootViewGroup(private val context: Context?) :
 
             uiManager.updateNodeSize(viewTag, viewWidth, viewHeight)
           }
-        }
+        },
       )
     } else {
       hasAdjustedSize = true
     }
   }
 
-  override fun addView(child: View, index: Int, params: LayoutParams) {
+  override fun addView(
+    child: View,
+    index: Int,
+    params: LayoutParams,
+  ) {
     super.addView(child, index, params)
     if (hasAdjustedSize) {
       updateFirstChildView()
@@ -135,12 +148,18 @@ class DialogRootViewGroup(private val context: Context?) :
     }
   }
 
-  override fun onChildStartedNativeGesture(childView: View, ev: MotionEvent) {
+  override fun onChildStartedNativeGesture(
+    childView: View,
+    ev: MotionEvent,
+  ) {
     eventDispatcher?.let { jSTouchDispatcher.onChildStartedNativeGesture(ev, it) }
     jSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
   }
 
-  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+  override fun onChildEndedNativeGesture(
+    childView: View,
+    ev: MotionEvent,
+  ) {
     eventDispatcher?.let { jSTouchDispatcher.onChildEndedNativeGesture(ev, it) }
     jSPointerDispatcher?.onChildEndedNativeGesture()
   }
@@ -149,4 +168,4 @@ class DialogRootViewGroup(private val context: Context?) :
     // No-op - override in order to still receive events to onInterceptTouchEvent
     // even when some other view disallow that
   }
-}
\ No newline at end of file
+}
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt
index ac6a820235..be78849988 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/SheetManager.kt
@@ -25,4 +25,4 @@ class SheetManager {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/modules/bottom-sheet/ios/BottomSheetModule.swift b/modules/bottom-sheet/ios/BottomSheetModule.swift
index bd878c5abc..579608e75b 100644
--- a/modules/bottom-sheet/ios/BottomSheetModule.swift
+++ b/modules/bottom-sheet/ios/BottomSheetModule.swift
@@ -12,7 +12,7 @@ public class BottomSheetModule: Module {
       Events([
         "onAttemptDismiss",
         "onSnapPointChange",
-        "onStateChange",
+        "onStateChange"
       ])
 
       AsyncFunction("dismiss") { (view: SheetView) in
diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
index 004e79a5c4..2d5837939a 100644
--- a/modules/bottom-sheet/ios/SheetViewController.swift
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -43,7 +43,7 @@ class SheetViewController: UIViewController {
           .medium()
         ]
       }
-      
+
       if !preventExpansion {
         sheet.detents.append(.large())
       }
diff --git a/src/components/Dialog/DialogTextInput.android.ts b/src/components/Dialog/DialogTextInput.android.ts
deleted file mode 100644
index 248eb2602d..0000000000
--- a/src/components/Dialog/DialogTextInput.android.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import {TextInput as DialogTextInput} from 'react-native-gesture-handler'
-
-export {DialogTextInput}
diff --git a/src/components/Dialog/DialogTextInput.ts b/src/components/Dialog/DialogTextInput.ts
deleted file mode 100644
index faad8d8675..0000000000
--- a/src/components/Dialog/DialogTextInput.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import {TextInput as DialogTextInput} from 'react-native'
-
-export {DialogTextInput}
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 888914c8bc..64abb0ea97 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,6 +1,5 @@
 import React, {useImperativeHandle} from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {GestureHandlerRootView, ScrollView} from 'react-native-gesture-handler'
+import {ScrollView, StyleProp, TextInput, View, ViewStyle} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
@@ -10,7 +9,6 @@ import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, flatten, useTheme} from '#/alf'
 import {Context, useDialogContext} from '#/components/Dialog/context'
-import {DialogTextInput} from '#/components/Dialog/DialogTextInput'
 import {
   DialogControlProps,
   DialogInnerProps,
@@ -24,7 +22,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(DialogTextInput)
+export const Input = createInput(TextInput)
 
 export function Outer({
   children,
@@ -95,8 +93,6 @@ export function Outer({
     [close, snapPoint],
   )
 
-  const Wrapper = isIOS ? View : GestureHandlerRootView
-
   return (
     <Portal>
       <Context.Provider value={context}>
@@ -114,9 +110,9 @@ export function Outer({
           }}
           cornerRadius={20}
           {...nativeOptions}>
-          <Wrapper testID={testID} style={[t.atoms.bg]}>
+          <View testID={testID} style={[t.atoms.bg]}>
             {children}
-          </Wrapper>
+          </View>
         </BottomSheet>
       </Context.Provider>
     </Portal>
@@ -149,8 +145,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-        bottomOffset={30}
-        ScrollViewComponent={ScrollView}>
+        bottomOffset={30}>
         {children}
         <View
           style={{

From b56e9d8802f3fc209c4e36e41e88474dd32c8683 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:31:49 -0700
Subject: [PATCH 42/62] log

---
 .../src/main/java/expo/modules/bottomsheet/BottomSheetView.kt   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 37854019b8..6cfd24e50a 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -1,7 +1,6 @@
 package expo.modules.bottomsheet
 
 import android.content.Context
-import android.util.Log
 import android.view.View
 import android.view.ViewGroup
 import android.view.ViewStructure
@@ -245,7 +244,6 @@ class BottomSheetView(
     var index = 0
     innerView.allViews.forEach {
       if (index == 1) {
-        Log.d("BottomSheetView", it.javaClass.simpleName)
         return it.height.toFloat()
       }
       index++

From 0b9a42758aa48e3127e178aa1ab5af4d2922e24d Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:37:35 -0700
Subject: [PATCH 43/62] clean

---
 .../java/expo/modules/bottomsheet/BottomSheetModule.kt    | 8 --------
 1 file changed, 8 deletions(-)

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 b5b526e604..fe3b34aa8b 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
@@ -29,14 +29,6 @@ class BottomSheetModule : Module() {
           view.updateLayout()
         }
 
-        Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
-//          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
-        }
-
-        Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
-//          view.sheetState.value.cornerRadius = prop
-        }
-
         Prop("minHeight") { view: BottomSheetView, prop: Float ->
           view.minHeight = prop
         }

From 459edba648d6c5dadc64fdcd13f771136bf5efdd Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 4 Oct 2024 04:38:21 +0300
Subject: [PATCH 44/62] Use new sheets for GIF select (delete platform
 branching) (#5592)

Co-authored-by: Hailey <me@haileyok.com>
---
 src/components/Button.tsx                     |   2 +-
 src/components/Dialog/index.tsx               |   7 +-
 src/components/dialogs/GifSelect.ios.tsx      | 253 ------------------
 src/components/dialogs/GifSelect.shared.tsx   |  53 ----
 src/components/dialogs/GifSelect.tsx          |  71 ++++-
 src/components/dms/dialogs/NewChatDialog.tsx  |   5 +-
 .../dms/dialogs/SearchablePeopleList.tsx      |  67 ++---
 .../dms/dialogs/ShareViaChatDialog.tsx        |   5 +-
 src/view/com/composer/Composer.tsx            |   1 +
 src/view/com/composer/photos/SelectGifBtn.tsx |   5 +-
 10 files changed, 109 insertions(+), 360 deletions(-)
 delete mode 100644 src/components/dialogs/GifSelect.ios.tsx
 delete mode 100644 src/components/dialogs/GifSelect.shared.tsx

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 4acb4f1dc4..a0352855a7 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -376,7 +376,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           }
         } else if (size === 'small') {
           if (shape === 'round') {
-            baseStyles.push({height: 34, width: 34})
+            baseStyles.push({height: 36, width: 36})
           } else {
             baseStyles.push({height: 34, width: 34})
           }
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 64abb0ea97..3ddad6e2c3 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -7,7 +7,7 @@ import {logger} from '#/logger'
 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 {atoms as a, useTheme} from '#/alf'
 import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
   DialogControlProps,
@@ -160,12 +160,13 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
 export const InnerFlatList = React.forwardRef<
   ListMethods,
   ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
->(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
+>(function InnerFlatList({style, ...props}, ref) {
   const insets = useSafeAreaInsets()
+  const {nativeSnapPoint} = useDialogContext()
   return (
     <List
       keyboardShouldPersistTaps="handled"
-      contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
+      bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
       ListFooterComponent={
         <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
       }
diff --git a/src/components/dialogs/GifSelect.ios.tsx b/src/components/dialogs/GifSelect.ios.tsx
deleted file mode 100644
index abe5aa3cc3..0000000000
--- a/src/components/dialogs/GifSelect.ios.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import React, {
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {Modal, ScrollView, TextInput, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {cleanError} from '#/lib/strings/errors'
-import {
-  Gif,
-  useFeaturedGifsQuery,
-  useGifSearchQuery,
-} from '#/state/queries/tenor'
-import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
-import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {FlatList_INTERNAL} from '#/view/com/util/Views'
-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 {useThrottledValue} from '../hooks/useThrottledValue'
-import {ListFooter, ListMaybePlaceholder} from '../Lists'
-import {GifPreview} from './GifSelect.shared'
-
-export function GifSelectDialog({
-  controlRef,
-  onClose,
-  onSelectGif: onSelectGifProp,
-}: {
-  controlRef: React.RefObject<{open: () => void}>
-  onClose: () => void
-  onSelectGif: (gif: Gif) => void
-}) {
-  const t = useTheme()
-  const [open, setOpen] = useState(false)
-
-  useImperativeHandle(controlRef, () => ({
-    open: () => setOpen(true),
-  }))
-
-  const close = useCallback(() => {
-    setOpen(false)
-    onClose()
-  }, [onClose])
-
-  const onSelectGif = useCallback(
-    (gif: Gif) => {
-      onSelectGifProp(gif)
-      close()
-    },
-    [onSelectGifProp, close],
-  )
-
-  const renderErrorBoundary = useCallback(
-    (error: any) => <ModalError details={String(error)} close={close} />,
-    [close],
-  )
-
-  return (
-    <Modal
-      visible={open}
-      animationType="slide"
-      presentationStyle="formSheet"
-      onRequestClose={close}
-      aria-modal
-      accessibilityViewIsModal>
-      <View style={[a.flex_1, t.atoms.bg]}>
-        <ErrorBoundary renderError={renderErrorBoundary}>
-          <GifList onSelectGif={onSelectGif} close={close} />
-        </ErrorBoundary>
-      </View>
-    </Modal>
-  )
-}
-
-function GifList({
-  onSelectGif,
-}: {
-  close: () => void
-  onSelectGif: (gif: Gif) => void
-}) {
-  const {_} = useLingui()
-  const t = useTheme()
-  const {gtMobile} = useBreakpoints()
-  const textInputRef = useRef<TextInput>(null)
-  const listRef = useRef<FlatList_INTERNAL>(null)
-  const [undeferredSearch, setSearch] = useState('')
-  const search = useThrottledValue(undeferredSearch, 500)
-
-  const isSearching = search.length > 0
-
-  const trendingQuery = useFeaturedGifsQuery()
-  const searchQuery = useGifSearchQuery(search)
-
-  const {
-    data,
-    fetchNextPage,
-    isFetchingNextPage,
-    hasNextPage,
-    error,
-    isLoading,
-    isError,
-    refetch,
-  } = isSearching ? searchQuery : trendingQuery
-
-  const flattenedData = useMemo(() => {
-    return data?.pages.flatMap(page => page.results) || []
-  }, [data])
-
-  const renderItem = useCallback(
-    ({item}: {item: Gif}) => {
-      return <GifPreview gif={item} onSelectGif={onSelectGif} />
-    },
-    [onSelectGif],
-  )
-
-  const onEndReached = React.useCallback(() => {
-    if (isFetchingNextPage || !hasNextPage || error) return
-    fetchNextPage()
-  }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
-
-  const hasData = flattenedData.length > 0
-
-  const onGoBack = useCallback(() => {
-    if (isSearching) {
-      // clear the input and reset the state
-      textInputRef.current?.clear()
-      setSearch('')
-    } else {
-      close()
-    }
-  }, [isSearching])
-
-  const listHeader = useMemo(() => {
-    return (
-      <View style={[a.relative, a.mb_lg, a.pt_4xl, a.flex_row, a.align_center]}>
-        {/* cover top corners */}
-        <View
-          style={[
-            a.absolute,
-            a.inset_0,
-            {
-              borderBottomLeftRadius: 8,
-              borderBottomRightRadius: 8,
-            },
-            t.atoms.bg,
-          ]}
-        />
-
-        <TextField.Root>
-          <TextField.Icon icon={Search} />
-          <TextField.Input
-            label={_(msg`Search GIFs`)}
-            placeholder={_(msg`Search Tenor`)}
-            onChangeText={text => {
-              setSearch(text)
-              listRef.current?.scrollToOffset({offset: 0, animated: false})
-            }}
-            returnKeyType="search"
-            clearButtonMode="while-editing"
-            inputRef={textInputRef}
-            maxLength={50}
-          />
-        </TextField.Root>
-      </View>
-    )
-  }, [t.atoms.bg, _])
-
-  return (
-    <FlatList_INTERNAL
-      ref={listRef}
-      key={gtMobile ? '3 cols' : '2 cols'}
-      data={flattenedData}
-      renderItem={renderItem}
-      numColumns={gtMobile ? 3 : 2}
-      columnWrapperStyle={a.gap_sm}
-      contentContainerStyle={a.px_lg}
-      ListHeaderComponent={
-        <>
-          {listHeader}
-          {!hasData && (
-            <ListMaybePlaceholder
-              isLoading={isLoading}
-              isError={isError}
-              onRetry={refetch}
-              onGoBack={onGoBack}
-              emptyType="results"
-              sideBorders={false}
-              topBorder={false}
-              errorTitle={_(msg`Failed to load GIFs`)}
-              errorMessage={_(msg`There was an issue connecting to Tenor.`)}
-              emptyMessage={
-                isSearching
-                  ? _(msg`No search results found for "${search}".`)
-                  : _(
-                      msg`No featured GIFs found. There may be an issue with Tenor.`,
-                    )
-              }
-            />
-          )}
-        </>
-      }
-      stickyHeaderIndices={[0]}
-      onEndReached={onEndReached}
-      onEndReachedThreshold={4}
-      keyExtractor={(item: Gif) => item.id}
-      keyboardDismissMode="on-drag"
-      ListFooterComponent={
-        hasData ? (
-          <ListFooter
-            isFetchingNextPage={isFetchingNextPage}
-            error={cleanError(error)}
-            onRetry={fetchNextPage}
-            style={{borderTopWidth: 0}}
-          />
-        ) : null
-      }
-    />
-  )
-}
-
-function ModalError({details, close}: {details?: string; close: () => void}) {
-  const {_} = useLingui()
-
-  return (
-    <ScrollView
-      style={[a.flex_1, a.gap_md]}
-      centerContent
-      contentContainerStyle={a.px_lg}>
-      <ErrorScreen
-        title={_(msg`Oh no!`)}
-        message={_(
-          msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
-        )}
-        details={details}
-      />
-      <Button
-        label={_(msg`Close dialog`)}
-        onPress={close}
-        color="primary"
-        size="large"
-        variant="solid">
-        <ButtonText>
-          <Trans>Close</Trans>
-        </ButtonText>
-      </Button>
-    </ScrollView>
-  )
-}
diff --git a/src/components/dialogs/GifSelect.shared.tsx b/src/components/dialogs/GifSelect.shared.tsx
deleted file mode 100644
index 90b2abaa83..0000000000
--- a/src/components/dialogs/GifSelect.shared.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {useCallback} from 'react'
-import {Image} from 'expo-image'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {logEvent} from '#/lib/statsig/statsig'
-import {Gif} from '#/state/queries/tenor'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button} from '../Button'
-
-export function GifPreview({
-  gif,
-  onSelectGif,
-}: {
-  gif: Gif
-  onSelectGif: (gif: Gif) => void
-}) {
-  const {gtTablet} = useBreakpoints()
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const onPress = useCallback(() => {
-    logEvent('composer:gif:select', {})
-    onSelectGif(gif)
-  }, [onSelectGif, gif])
-
-  return (
-    <Button
-      label={_(msg`Select GIF "${gif.title}"`)}
-      style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]}
-      onPress={onPress}>
-      {({pressed}) => (
-        <Image
-          style={[
-            a.flex_1,
-            a.mb_sm,
-            a.rounded_sm,
-            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
-            t.atoms.bg_contrast_25,
-          ]}
-          source={{
-            uri: gif.media_formats.tinygif.url,
-          }}
-          contentFit="cover"
-          accessibilityLabel={gif.title}
-          accessibilityHint=""
-          cachePolicy="none"
-          accessibilityIgnoresInvertColors
-        />
-      )}
-    </Button>
-  )
-}
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 887cc30378..bf98f50025 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -6,9 +6,12 @@ import React, {
   useState,
 } from 'react'
 import {TextInput, View} from 'react-native'
+import {useWindowDimensions} from 'react-native'
+import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
@@ -19,7 +22,7 @@ import {
 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 {atoms as a, ios, native, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
@@ -27,16 +30,18 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arr
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
-import {GifPreview} from './GifSelect.shared'
+import {PortalComponent} from '../Portal'
 
 export function GifSelectDialog({
   controlRef,
   onClose,
   onSelectGif: onSelectGifProp,
+  Portal,
 }: {
   controlRef: React.RefObject<{open: () => void}>
   onClose: () => void
   onSelectGif: (gif: Gif) => void
+  Portal?: PortalComponent
 }) {
   const control = Dialog.useDialogControl()
 
@@ -57,7 +62,15 @@ export function GifSelectDialog({
   )
 
   return (
-    <Dialog.Outer control={control} onClose={onClose}>
+    <Dialog.Outer
+      control={control}
+      onClose={onClose}
+      Portal={Portal}
+      nativeOptions={{
+        bottomInset: 0,
+        // use system corner radius on iOS
+        ...ios({cornerRadius: undefined}),
+      }}>
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>
@@ -79,6 +92,7 @@ function GifList({
   const listRef = useRef<ListMethods>(null)
   const [undeferredSearch, setSearch] = useState('')
   const search = useThrottledValue(undeferredSearch, 500)
+  const {height} = useWindowDimensions()
 
   const isSearching = search.length > 0
 
@@ -91,7 +105,7 @@ function GifList({
     isFetchingNextPage,
     hasNextPage,
     error,
-    isLoading,
+    isPending,
     isError,
     refetch,
   } = isSearching ? searchQuery : trendingQuery
@@ -192,13 +206,14 @@ function GifList({
         data={flattenedData}
         renderItem={renderItem}
         numColumns={gtMobile ? 3 : 2}
-        columnWrapperStyle={a.gap_sm}
+        columnWrapperStyle={[a.gap_sm]}
+        contentContainerStyle={[native([a.px_xl, {minHeight: height}])]}
         ListHeaderComponent={
           <>
             {listHeader}
             {!hasData && (
               <ListMaybePlaceholder
-                isLoading={isLoading}
+                isLoading={isPending}
                 isError={isError}
                 onRetry={refetch}
                 onGoBack={onGoBack}
@@ -269,3 +284,47 @@ function DialogError({details}: {details?: string}) {
     </Dialog.ScrollableInner>
   )
 }
+
+export function GifPreview({
+  gif,
+  onSelectGif,
+}: {
+  gif: Gif
+  onSelectGif: (gif: Gif) => void
+}) {
+  const {gtTablet} = useBreakpoints()
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const onPress = useCallback(() => {
+    logEvent('composer:gif:select', {})
+    onSelectGif(gif)
+  }, [onSelectGif, gif])
+
+  return (
+    <Button
+      label={_(msg`Select GIF "${gif.title}"`)}
+      style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]}
+      onPress={onPress}>
+      {({pressed}) => (
+        <Image
+          style={[
+            a.flex_1,
+            a.mb_sm,
+            a.rounded_sm,
+            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
+            t.atoms.bg_contrast_25,
+          ]}
+          source={{
+            uri: gif.media_formats.tinygif.url,
+          }}
+          contentFit="cover"
+          accessibilityLabel={gif.title}
+          accessibilityHint=""
+          cachePolicy="none"
+          accessibilityIgnoresInvertColors
+        />
+      )}
+    </Button>
+  )
+}
diff --git a/src/components/dms/dialogs/NewChatDialog.tsx b/src/components/dms/dialogs/NewChatDialog.tsx
index e838236e1e..57031f228d 100644
--- a/src/components/dms/dialogs/NewChatDialog.tsx
+++ b/src/components/dms/dialogs/NewChatDialog.tsx
@@ -55,7 +55,10 @@ export function NewChat({
         accessibilityHint=""
       />
 
-      <Dialog.Outer control={control} testID="newChatDialog">
+      <Dialog.Outer
+        control={control}
+        testID="newChatDialog"
+        nativeOptions={{topInset: 16}}>
         <SearchablePeopleList
           title={_(msg`Start a new chat`)}
           onSelectChat={onCreateChat}
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index 17a7f43e57..22af0f46d0 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -21,11 +21,10 @@ 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 {Button, ButtonIcon} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
@@ -99,15 +98,15 @@ export function SearchablePeopleList({
           })
         }
 
-        _items = _items.sort(a => {
+        _items = _items.sort(item => {
           // @ts-ignore
-          return a.enabled ? -1 : 1
+          return item.enabled ? -1 : 1
         })
       }
     } else {
       const placeholders: Item[] = Array(10)
         .fill(0)
-        .map((_, i) => ({
+        .map((__, i) => ({
           type: 'placeholder',
           key: i + '',
         }))
@@ -153,9 +152,9 @@ export function SearchablePeopleList({
           }
 
           // only sort follows
-          followsItems = followsItems.sort(a => {
+          followsItems = followsItems.sort(item => {
             // @ts-ignore
-            return a.enabled ? -1 : 1
+            return item.enabled ? -1 : 1
           })
 
           // then append
@@ -175,9 +174,9 @@ export function SearchablePeopleList({
           }
         }
 
-        _items = _items.sort(a => {
+        _items = _items.sort(item => {
           // @ts-ignore
-          return a.enabled ? -1 : 1
+          return item.enabled ? -1 : 1
         })
       } else {
         _items.push(...placeholders)
@@ -254,39 +253,32 @@ export function SearchablePeopleList({
             a.justify_center,
             {height: 32},
           ]}>
+          <Text
+            style={[
+              a.z_10,
+              a.text_lg,
+              a.font_bold,
+              a.leading_tight,
+              t.atoms.text_contrast_high,
+            ]}>
+            {title}
+          </Text>
           <Button
             label={_(msg`Close`)}
             size="small"
             shape="round"
-            variant="ghost"
+            variant={isWeb ? 'ghost' : 'solid'}
             color="secondary"
             style={[
               a.absolute,
               a.z_20,
-              native({
-                left: -7,
-              }),
-              web({
-                right: -4,
-              }),
+              web({right: -4}),
+              native({right: 0}),
+              native({height: 32, width: 32, borderRadius: 16}),
             ]}
             onPress={() => control.close()}>
-            {isWeb ? (
-              <X size="md" fill={t.palette.contrast_500} />
-            ) : (
-              <ChevronLeft size="md" fill={t.palette.contrast_500} />
-            )}
+            <ButtonIcon icon={X} size="md" />
           </Button>
-          <Text
-            style={[
-              a.z_10,
-              a.text_lg,
-              a.font_bold,
-              a.leading_tight,
-              t.atoms.text_contrast_high,
-            ]}>
-            {title}
-          </Text>
         </View>
 
         <View style={[native([a.pt_sm]), web([a.pt_xs])]}>
@@ -306,7 +298,6 @@ export function SearchablePeopleList({
     t.atoms.border_contrast_low,
     t.atoms.bg,
     t.atoms.text_contrast_high,
-    t.palette.contrast_500,
     _,
     title,
     searchText,
@@ -323,14 +314,7 @@ export function SearchablePeopleList({
       keyExtractor={(item: Item) => item.key}
       style={[
         web([a.py_0, {height: '100vh', maxHeight: 600}, a.px_0]),
-        native({
-          height: '100%',
-          paddingHorizontal: 0,
-          marginTop: 0,
-          paddingTop: 0,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        }),
+        native({height: '100%'}),
       ]}
       webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
       keyboardDismissMode="on-drag"
@@ -393,7 +377,8 @@ function ProfileCard({
           <View style={[a.flex_1, a.gap_2xs]}>
             <Text
               style={[t.atoms.text, a.font_bold, a.leading_tight, a.self_start]}
-              numberOfLines={1}>
+              numberOfLines={1}
+              emoji>
               {displayName}
             </Text>
             <Text
diff --git a/src/components/dms/dialogs/ShareViaChatDialog.tsx b/src/components/dms/dialogs/ShareViaChatDialog.tsx
index ed0aa05ea3..3af1b9eee7 100644
--- a/src/components/dms/dialogs/ShareViaChatDialog.tsx
+++ b/src/components/dms/dialogs/ShareViaChatDialog.tsx
@@ -17,7 +17,10 @@ export function SendViaChatDialog({
   onSelectChat: (chatId: string) => void
 }) {
   return (
-    <Dialog.Outer control={control} testID="sendViaChatChatDialog">
+    <Dialog.Outer
+      control={control}
+      testID="sendViaChatChatDialog"
+      nativeOptions={{topInset: 16}}>
       <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
     </Dialog.Outer>
   )
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 3cd3794986..692efcc890 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -878,6 +878,7 @@ export const ComposePost = ({
                   onClose={focusTextInput}
                   onSelectGif={onSelectGif}
                   disabled={hasMedia}
+                  Portal={Portal.Portal}
                 />
                 {!isMobile ? (
                   <Button
diff --git a/src/view/com/composer/photos/SelectGifBtn.tsx b/src/view/com/composer/photos/SelectGifBtn.tsx
index d13df0a110..d482e07837 100644
--- a/src/view/com/composer/photos/SelectGifBtn.tsx
+++ b/src/view/com/composer/photos/SelectGifBtn.tsx
@@ -9,14 +9,16 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {GifSelectDialog} from '#/components/dialogs/GifSelect'
 import {GifSquare_Stroke2_Corner0_Rounded as GifIcon} from '#/components/icons/Gif'
+import {PortalComponent} from '#/components/Portal'
 
 type Props = {
   onClose: () => void
   onSelectGif: (gif: Gif) => void
   disabled?: boolean
+  Portal?: PortalComponent
 }
 
-export function SelectGifBtn({onClose, onSelectGif, disabled}: Props) {
+export function SelectGifBtn({onClose, onSelectGif, disabled, Portal}: Props) {
   const {_} = useLingui()
   const ref = useRef<{open: () => void}>(null)
   const t = useTheme()
@@ -46,6 +48,7 @@ export function SelectGifBtn({onClose, onSelectGif, disabled}: Props) {
         controlRef={ref}
         onClose={onClose}
         onSelectGif={onSelectGif}
+        Portal={Portal}
       />
     </>
   )

From d2a3582e2b9f3bffdd7a6174dc16bf5e7ef85102 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:51:17 -0700
Subject: [PATCH 45/62] fix sizes

---
 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 a0352855a7..4acb4f1dc4 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -376,7 +376,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
           }
         } else if (size === 'small') {
           if (shape === 'round') {
-            baseStyles.push({height: 36, width: 36})
+            baseStyles.push({height: 34, width: 34})
           } else {
             baseStyles.push({height: 34, width: 34})
           }

From d6cc131b7e2f63777830fe30dfc0d1a0490e24d5 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 18:55:37 -0700
Subject: [PATCH 46/62] disable native grabber

---
 modules/bottom-sheet/ios/SheetViewController.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
index 2d5837939a..28585eec02 100644
--- a/modules/bottom-sheet/ios/SheetViewController.swift
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -16,7 +16,7 @@ class SheetViewController: UIViewController {
     self.isModalInPresentation = false
 
     if let sheet = self.sheetPresentationController {
-      sheet.prefersGrabberVisible = true
+      sheet.prefersGrabberVisible = false
     }
   }
 

From 385628f22b60acd298804a08e7f0f3eaf8562a5e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 3 Oct 2024 21:32:24 -0500
Subject: [PATCH 47/62] Handles

---
 src/components/Dialog/index.tsx               | 49 +++++++++++++++++--
 src/components/Dialog/index.web.tsx           |  4 ++
 src/components/LikesDialog.tsx                |  1 +
 src/components/Menu/index.tsx                 |  1 +
 src/components/NewskieDialog.tsx              |  1 +
 src/components/Prompt.tsx                     |  1 +
 src/components/ReportDialog/index.tsx         |  1 +
 src/components/StarterPack/ShareDialog.tsx    |  1 +
 .../Wizard/WizardEditListDialog.tsx           |  1 +
 src/components/TagMenu/index.tsx              |  1 +
 src/components/WhoCanReply.tsx                |  1 +
 src/components/dialogs/BirthDateSettings.tsx  |  1 +
 src/components/dialogs/Embed.tsx              |  1 +
 src/components/dialogs/EmbedConsent.tsx       |  1 +
 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      |  1 +
 .../dialogs/nuxs/NeueTypography.tsx           |  1 +
 src/components/dms/ReportDialog.tsx           |  1 +
 src/components/dms/dialogs/NewChatDialog.tsx  |  1 +
 .../dms/dialogs/ShareViaChatDialog.tsx        |  1 +
 src/components/forms/DateField/index.tsx      |  1 +
 .../intents/VerifyEmailIntentDialog.tsx       |  1 +
 .../moderation/LabelsOnMeDialog.tsx           |  1 +
 .../moderation/ModerationDetailsDialog.tsx    |  1 +
 .../Messages/components/ChatDisabled.tsx      |  1 +
 src/view/com/auth/server-input/index.tsx      |  1 +
 src/view/com/composer/GifAltText.tsx          |  1 +
 .../composer/photos/EditImageDialog.web.tsx   |  1 +
 .../composer/photos/ImageAltTextDialog.tsx    |  1 +
 .../com/composer/videos/SubtitleDialog.tsx    |  1 +
 src/view/com/util/post-ctrls/RepostButton.tsx |  1 +
 .../Settings/DisableEmail2FADialog.tsx        |  1 +
 src/view/screens/Settings/ExportCarDialog.tsx |  1 +
 36 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 3ddad6e2c3..bf837b56df 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,10 +1,20 @@
 import React, {useImperativeHandle} from 'react'
-import {ScrollView, StyleProp, TextInput, View, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  ScrollView,
+  StyleProp,
+  TextInput,
+  View,
+  ViewStyle,
+} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
+import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
@@ -98,7 +108,6 @@ export function Outer({
       <Context.Provider value={context}>
         <BottomSheet
           ref={ref}
-          topInset={30}
           bottomInset={insets.bottom}
           onSnapPointChange={e => {
             setSnapPoint(e.nativeEvent.snapPoint)
@@ -124,6 +133,7 @@ export function Inner({children, style}: DialogInnerProps) {
   return (
     <View
       style={[
+        a.pt_2xl,
         a.px_xl,
         {
           paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
@@ -141,7 +151,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const {nativeSnapPoint} = useDialogContext()
     return (
       <KeyboardAwareScrollView
-        style={[a.px_xl, style]}
+        style={[a.pt_2xl, a.px_xl, style]}
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
@@ -172,11 +182,42 @@ export const InnerFlatList = React.forwardRef<
       }
       ref={ref}
       {...props}
-      style={style}
+      style={[a.pt_2xl, style]}
     />
   )
 })
 
+export function Handle() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {screenReaderEnabled} = useA11y()
+  const {close} = useDialogContext()
+
+  return (
+    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 20}]}>
+      <Pressable
+        accessible={screenReaderEnabled}
+        onPress={() => close()}
+        accessibilityLabel={_(msg`Dismiss`)}
+        accessibilityHint={_(msg`Double tap to close the dialog`)}>
+        <View
+          style={[
+            a.rounded_sm,
+            {
+              top: 10,
+              width: 35,
+              height: 5,
+              alignSelf: 'center',
+              backgroundColor: t.palette.contrast_975,
+              opacity: 0.5,
+            },
+          ]}
+        />
+      </Pressable>
+    </View>
+  )
+}
+
 export function Close() {
   return null
 }
diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 3d860f112b..61b12261e0 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -256,3 +256,7 @@ export function Close() {
     </View>
   )
 }
+
+export function Handle() {
+  return null
+}
diff --git a/src/components/LikesDialog.tsx b/src/components/LikesDialog.tsx
index 249c68f3c1..4c68596f73 100644
--- a/src/components/LikesDialog.tsx
+++ b/src/components/LikesDialog.tsx
@@ -23,6 +23,7 @@ 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 943a7e7b0c..344c715216 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -87,6 +87,7 @@ export function Outer({
     <Dialog.Outer
       control={context.control}
       nativeOptions={{preventExpansion: true}}>
+      <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 e25f48edf5..0e35206586 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -78,6 +78,7 @@ 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 a38a55174f..fc6919af89 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -43,6 +43,7 @@ export function Outer({
 
   return (
     <Dialog.Outer control={control} testID={testID} Portal={Portal}>
+      <Dialog.Handle />
       <Context.Provider value={context}>
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index 567867ce3d..5bf8aa5b4b 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -23,6 +23,7 @@ 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/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 494aceae1f..997c6479c5 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -32,6 +32,7 @@ interface Props {
 export function ShareDialog(props: Props) {
   return (
     <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
       <ShareDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index d1ecdc8821..fddb8592ef 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -77,6 +77,7 @@ export function WizardEditListDialog({
 
   return (
     <Dialog.Outer control={control} testID="newChatDialog">
+      <Dialog.Handle />
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}
diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx
index 2e4249609a..917624a036 100644
--- a/src/components/TagMenu/index.tsx
+++ b/src/components/TagMenu/index.tsx
@@ -84,6 +84,7 @@ 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 2839943c97..ab6ef8293c 100644
--- a/src/components/WhoCanReply.tsx
+++ b/src/components/WhoCanReply.tsx
@@ -170,6 +170,7 @@ 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 72ce9690e9..81d0c6740e 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -30,6 +30,7 @@ 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 7aa2a4fc1e..ca75b01390 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -27,6 +27,7 @@ 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 3aa0f0b404..824155d8bb 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -49,6 +49,7 @@ 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 bf98f50025..4e227f7493 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -71,6 +71,7 @@ export function GifSelectDialog({
         // use system corner radius on iOS
         ...ios({cornerRadius: undefined}),
       }}>
+      <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 490ae8e2e8..c3aae8f0df 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -42,6 +42,7 @@ 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 a2775306c7..bddc499682 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -64,6 +64,7 @@ export function PostInteractionSettingsControlledDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control} Portal={Portal}>
+      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -98,6 +99,7 @@ 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 d24f6af644..b9c939e94b 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -18,6 +18,7 @@ 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 809ed1e3f6..ea870e2da9 100644
--- a/src/components/dialogs/SwitchAccount.tsx
+++ b/src/components/dialogs/SwitchAccount.tsx
@@ -42,6 +42,7 @@ 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 97028b6e54..f29dc356dd 100644
--- a/src/components/dialogs/nuxs/NeueTypography.tsx
+++ b/src/components/dialogs/nuxs/NeueTypography.tsx
@@ -43,6 +43,7 @@ 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/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 8824bbbe4b..06d69ff4be 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -40,6 +40,7 @@ let ReportDialog = ({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
+      <Dialog.Handle />
       <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 57031f228d..b74bf62e8a 100644
--- a/src/components/dms/dialogs/NewChatDialog.tsx
+++ b/src/components/dms/dialogs/NewChatDialog.tsx
@@ -59,6 +59,7 @@ export function NewChat({
         control={control}
         testID="newChatDialog"
         nativeOptions={{topInset: 16}}>
+        <Dialog.Handle />
         <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 3af1b9eee7..9a556752a9 100644
--- a/src/components/dms/dialogs/ShareViaChatDialog.tsx
+++ b/src/components/dms/dialogs/ShareViaChatDialog.tsx
@@ -21,6 +21,7 @@ export function SendViaChatDialog({
       control={control}
       testID="sendViaChatChatDialog"
       nativeOptions={{topInset: 16}}>
+      <Dialog.Handle />
       <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
     </Dialog.Outer>
   )
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 7546aec484..1c78d2abbb 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -57,6 +57,7 @@ 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 070ba7c40e..c78aabb6d4 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -20,6 +20,7 @@ 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 3f857254f9..bf0d1905e0 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -31,6 +31,7 @@ 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 1e274c1c98..0a1fae67e7 100644
--- a/src/components/moderation/ModerationDetailsDialog.tsx
+++ b/src/components/moderation/ModerationDetailsDialog.tsx
@@ -26,6 +26,7 @@ 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/components/ChatDisabled.tsx b/src/screens/Messages/components/ChatDisabled.tsx
index efe8545bf1..c768d2504b 100644
--- a/src/screens/Messages/components/ChatDisabled.tsx
+++ b/src/screens/Messages/components/ChatDisabled.tsx
@@ -54,6 +54,7 @@ function AppealDialog() {
       </Button>
 
       <Dialog.Outer control={control}>
+        <Dialog.Handle />
         <DialogInner />
       </Dialog.Outer>
     </>
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index de7ed6d15b..74b0d23155 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -67,6 +67,7 @@ export function ServerInputDialog({
 
   return (
     <Dialog.Outer control={control} 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 bc93084f50..3479fb973c 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -100,6 +100,7 @@ export function GifAltText({
       <AltTextReminder />
 
       <Dialog.Outer control={control} Portal={Portal}>
+        <Dialog.Handle />
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}
diff --git a/src/view/com/composer/photos/EditImageDialog.web.tsx b/src/view/com/composer/photos/EditImageDialog.web.tsx
index 0afb83ed96..ebe528abc0 100644
--- a/src/view/com/composer/photos/EditImageDialog.web.tsx
+++ b/src/view/com/composer/photos/EditImageDialog.web.tsx
@@ -20,6 +20,7 @@ import {EditImageDialogProps} from './EditImageDialog'
 export const EditImageDialog = (props: EditImageDialogProps) => {
   return (
     <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
       <EditImageInner key={props.image.source.id} {...props} />
     </Dialog.Outer>
   )
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index a468db5376..16ce4351af 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -24,6 +24,7 @@ type Props = {
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
     <Dialog.Outer control={props.control} Portal={props.Portal}>
+      <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 f15fffb182..3343db9586 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -59,6 +59,7 @@ export function SubtitleDialogBtn(props: Props) {
         </ButtonText>
       </Button>
       <Dialog.Outer control={control} Portal={props.Portal}>
+        <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 896e197b65..9be72ae23e 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -89,6 +89,7 @@ let RepostButton = ({
       <Dialog.Outer
         control={dialogControl}
         nativeOptions={{preventExpansion: true}}>
+        <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 bbc6902543..e4341fcd21 100644
--- a/src/view/screens/Settings/DisableEmail2FADialog.tsx
+++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx
@@ -78,6 +78,7 @@ 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 3d21d7cb5e..1d8d264712 100644
--- a/src/view/screens/Settings/ExportCarDialog.tsx
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -52,6 +52,7 @@ export function ExportCarDialog({
 
   return (
     <Dialog.Outer control={control}>
+      <Dialog.Handle />
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">

From 8eb5847d0c93c5f892a439aeeee926d58e049537 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 21:18:02 -0700
Subject: [PATCH 48/62] fix handle

---
 src/components/Dialog/index.tsx               | 26 +++++++-----
 .../dms/dialogs/SearchablePeopleList.tsx      | 42 +++++++++----------
 2 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index bf837b56df..500e509441 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -172,18 +172,22 @@ export const InnerFlatList = React.forwardRef<
   ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, ...props}, ref) {
   const insets = useSafeAreaInsets()
+  const t = useTheme()
   const {nativeSnapPoint} = useDialogContext()
   return (
-    <List
-      keyboardShouldPersistTaps="handled"
-      bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-      ListFooterComponent={
-        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-      }
-      ref={ref}
-      {...props}
-      style={[a.pt_2xl, style]}
-    />
+    <>
+      <View style={[a.w_full, t.atoms.bg, {height: a.pt_sm.paddingTop}]} />
+      <List
+        keyboardShouldPersistTaps="handled"
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        ListFooterComponent={
+          <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+        }
+        ref={ref}
+        {...props}
+        style={[style]}
+      />
+    </>
   )
 })
 
@@ -194,7 +198,7 @@ export function Handle() {
   const {close} = useDialogContext()
 
   return (
-    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 20}]}>
+    <View style={[a.w_full, a.align_center, a.z_10, t.atoms.bg, {height: 20}]}>
       <Pressable
         accessible={screenReaderEnabled}
         onPress={() => close()}
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index 22af0f46d0..a2a731e649 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -246,13 +246,7 @@ export function SearchablePeopleList({
           t.atoms.border_contrast_low,
           t.atoms.bg,
         ]}>
-        <View
-          style={[
-            a.relative,
-            native(a.align_center),
-            a.justify_center,
-            {height: 32},
-          ]}>
+        <View style={[a.relative, native(a.align_center), a.justify_center]}>
           <Text
             style={[
               a.z_10,
@@ -263,22 +257,24 @@ export function SearchablePeopleList({
             ]}>
             {title}
           </Text>
-          <Button
-            label={_(msg`Close`)}
-            size="small"
-            shape="round"
-            variant={isWeb ? 'ghost' : 'solid'}
-            color="secondary"
-            style={[
-              a.absolute,
-              a.z_20,
-              web({right: -4}),
-              native({right: 0}),
-              native({height: 32, width: 32, borderRadius: 16}),
-            ]}
-            onPress={() => control.close()}>
-            <ButtonIcon icon={X} size="md" />
-          </Button>
+          {isWeb ? (
+            <Button
+              label={_(msg`Close`)}
+              size="small"
+              shape="round"
+              variant={isWeb ? 'ghost' : 'solid'}
+              color="secondary"
+              style={[
+                a.absolute,
+                a.z_20,
+                web({right: -4}),
+                native({right: 0}),
+                native({height: 32, width: 32, borderRadius: 16}),
+              ]}
+              onPress={() => control.close()}>
+              <ButtonIcon icon={X} size="md" />
+            </Button>
+          ) : null}
         </View>
 
         <View style={[native([a.pt_sm]), web([a.pt_xs])]}>

From dd71172696ea3f832b5f1d3ef2281b27f954343b Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Thu, 3 Oct 2024 21:38:04 -0700
Subject: [PATCH 49/62] fix event not firing

---
 modules/bottom-sheet/ios/SheetView.swift | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index d68cd7a31d..0899eae6a0 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -130,7 +130,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
       sheet.delegate = self
       sheet.preferredCornerRadius = self.cornerRadius
       if sheet.detents.count == 1 {
-        sheet.selectedDetentIdentifier = .large
+        self.selectedDetentIdentifier = .large
       } else {
         self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
       }

From 775ea2e1d5dff276421eba8089ec3358188c6aaf Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 08:28:30 -0700
Subject: [PATCH 50/62] possible fix

---
 modules/bottom-sheet/src/BottomSheet.tsx |  4 +---
 src/components/Dialog/index.tsx          | 18 +++++++++---------
 src/components/Menu/index.tsx            |  1 -
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index e7d19ae975..ccba8b35ae 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -94,7 +94,7 @@ export class BottomSheet extends React.Component<
         ref={this.ref}
         style={{
           position: 'absolute',
-          height: screenHeight,
+          height: screenHeight - topInset - bottomInset,
           width: '100%',
         }}
         containerBackgroundColor={backgroundColor}>
@@ -103,8 +103,6 @@ export class BottomSheet extends React.Component<
             {
               flex: 1,
               backgroundColor,
-              paddingTop: topInset,
-              paddingBottom: bottomInset,
             },
             Platform.OS === 'android' && {
               borderTopLeftRadius: cornerRadius,
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 500e509441..368cb2dc02 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -13,7 +13,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
@@ -108,7 +107,6 @@ export function Outer({
       <Context.Provider value={context}>
         <BottomSheet
           ref={ref}
-          bottomInset={insets.bottom}
           onSnapPointChange={e => {
             setSnapPoint(e.nativeEvent.snapPoint)
           }}
@@ -118,6 +116,8 @@ export function Outer({
             }
           }}
           cornerRadius={20}
+          topInset={insets.top}
+          bottomInset={insets.bottom}
           {...nativeOptions}>
           <View testID={testID} style={[t.atoms.bg]}>
             {children}
@@ -136,7 +136,7 @@ export function Inner({children, style}: DialogInnerProps) {
         a.pt_2xl,
         a.px_xl,
         {
-          paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
+          paddingBottom: insets.bottom + insets.top,
         },
         style,
       ]}>
@@ -147,21 +147,21 @@ export function Inner({children, style}: DialogInnerProps) {
 
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style, ...props}, ref) {
-    const insets = useSafeAreaInsets()
     const {nativeSnapPoint} = useDialogContext()
+    const insets = useSafeAreaInsets()
     return (
       <KeyboardAwareScrollView
         style={[a.pt_2xl, a.px_xl, style]}
+        contentContainerStyle={
+          nativeSnapPoint === BottomSheetSnapPoint.Full && [
+            {paddingBottom: insets.bottom + insets.top},
+          ]
+        }
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
         bottomOffset={30}>
         {children}
-        <View
-          style={{
-            height: insets.bottom + a.pt_5xl.paddingTop * (isIOS ? 1 : 2.5),
-          }}
-        />
       </KeyboardAwareScrollView>
     )
   },
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 344c715216..b5ce6f583e 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -95,7 +95,6 @@ export function Outer({
             {children}
             {isNative && showCancel && <Cancel />}
           </View>
-          <View style={{height: a.gap_lg.gap}} />
         </Dialog.ScrollableInner>
       </Context.Provider>
     </Dialog.Outer>

From 658a352bdb2f5052b8c475cedf63c14f58c6efd9 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 09:19:51 -0700
Subject: [PATCH 51/62] fix event not firing (#5603)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
---
 modules/bottom-sheet/ios/SheetView.swift      |  6 +-
 .../ios/SheetViewController.swift             |  2 +
 modules/bottom-sheet/src/BottomSheet.tsx      | 16 +---
 modules/bottom-sheet/src/BottomSheet.types.ts | 19 ++--
 package.json                                  |  1 -
 patches/react-native+0.74.1.patch             | 80 +++++++++++++----
 src/App.native.tsx                            |  4 +-
 src/alf/util/useColorModeTheme.ts             |  6 +-
 src/components/Dialog/index.tsx               | 89 +++++++++++++++----
 src/components/Dialog/sheet-wrapper.ts        | 20 +++++
 src/components/Menu/index.tsx                 |  2 +-
 src/screens/Onboarding/StepProfile/index.tsx  | 36 +++++---
 src/state/dialogs/index.tsx                   | 37 ++++++--
 .../com/composer/photos/SelectPhotoBtn.tsx    | 14 +--
 src/view/com/util/UserAvatar.tsx              | 12 ++-
 src/view/com/util/UserBanner.tsx              |  6 +-
 src/view/shell/Composer.ios.tsx               | 77 +++++-----------
 src/view/shell/index.tsx                      | 13 ++-
 yarn.lock                                     |  8 --
 19 files changed, 282 insertions(+), 166 deletions(-)
 create mode 100644 src/components/Dialog/sheet-wrapper.ts

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index 0899eae6a0..f91cb43b45 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -129,11 +129,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     if let sheet = sheetVc.sheetPresentationController {
       sheet.delegate = self
       sheet.preferredCornerRadius = self.cornerRadius
-      if sheet.detents.count == 1 {
-        self.selectedDetentIdentifier = .large
-      } else {
-        self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
-      }
+      self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
     }
     sheetVc.view.addSubview(innerView)
 
diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
index 28585eec02..8deef3723e 100644
--- a/modules/bottom-sheet/ios/SheetViewController.swift
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -31,6 +31,7 @@ class SheetViewController: UIViewController {
       sheet.detents = [
         .large()
       ]
+      sheet.selectedDetentIdentifier = .large
     } else {
       if #available(iOS 16.0, *) {
         sheet.detents = [
@@ -47,6 +48,7 @@ class SheetViewController: UIViewController {
       if !preventExpansion {
         sheet.detents.append(.large())
       }
+      sheet.selectedDetentIdentifier = .medium
     }
   }
 
diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index ccba8b35ae..489b76d2b6 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react'
 import {
-  ColorValue,
   Dimensions,
   NativeSyntheticEvent,
   Platform,
   StyleProp,
-  StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
@@ -57,17 +55,6 @@ export class BottomSheet extends React.Component<
     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()
   }
@@ -77,7 +64,7 @@ export class BottomSheet extends React.Component<
   }
 
   render() {
-    const {children, ...rest} = this.props
+    const {children, backgroundColor, ...rest} = this.props
     const topInset = rest.topInset ?? 0
     const bottomInset = rest.bottomInset ?? 0
     const cornerRadius = rest.cornerRadius ?? 0
@@ -86,7 +73,6 @@ export class BottomSheet extends React.Component<
       return null
     }
 
-    const backgroundColor = this.getBackgroundColor()
     return (
       <NativeView
         {...rest}
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index d08e985fa7..d63530ddfb 100644
--- a/modules/bottom-sheet/src/BottomSheet.types.ts
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -9,11 +9,20 @@ export enum BottomSheetSnapPoint {
   Full,
 }
 
+export type BottomSheetAttemptDismissEvent = NativeSyntheticEvent<object>
+export type BottomSheetSnapPointChangeEvent = NativeSyntheticEvent<{
+  snapPoint: BottomSheetSnapPoint
+}>
+export type BottomSheetStateChangeEvent = NativeSyntheticEvent<{
+  state: BottomSheetState
+}>
+
 export interface BottomSheetViewProps {
   children: React.ReactNode
   cornerRadius?: number
   preventDismiss?: boolean
   preventExpansion?: boolean
+  backgroundColor?: ColorValue
   containerBackgroundColor?: ColorValue
   topInset?: number
   bottomInset?: number
@@ -21,11 +30,7 @@ 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: BottomSheetAttemptDismissEvent) => void
+  onSnapPointChange?: (event: BottomSheetSnapPointChangeEvent) => void
+  onStateChange?: (event: BottomSheetStateChangeEvent) => void
 }
diff --git a/package.json b/package.json
index 5250a14254..5aeaa8a42b 100644
--- a/package.json
+++ b/package.json
@@ -137,7 +137,6 @@
     "expo-sharing": "^12.0.1",
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
-    "expo-system-ui": "~3.0.4",
     "expo-task-manager": "~11.8.1",
     "expo-updates": "~0.25.14",
     "expo-web-browser": "~13.0.3",
diff --git a/patches/react-native+0.74.1.patch b/patches/react-native+0.74.1.patch
index aee3da1ecc..ea6161e2ff 100644
--- a/patches/react-native+0.74.1.patch
+++ b/patches/react-native+0.74.1.patch
@@ -38,37 +38,65 @@ index b0d71dc..41b9a0e 100644
 
  - (void)reactBlur
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
-index e9b330f..1ecdf0a 100644
+index e9b330f..ec5f58c 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
-@@ -16,4 +16,6 @@
+@@ -15,5 +15,8 @@
+ @property (nonatomic, copy) NSString *title;
  @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
  @property (nonatomic, weak) UIScrollView *scrollView;
-
-+- (void)forwarderBeginRefreshing;
++@property (nonatomic, copy) UIColor *customTintColor;
 +
++- (void)forwarderBeginRefreshing;
+
  @end
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-index b09e653..f93cb46 100644
+index b09e653..288e60c 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-@@ -198,9 +198,53 @@ - (void)refreshControlValueChanged
-   [self setCurrentRefreshingState:super.refreshing];
-   _refreshingProgrammatically = NO;
+@@ -22,6 +22,7 @@ @implementation RCTRefreshControl {
+   NSString *_title;
+   UIColor *_titleColor;
+   CGFloat _progressViewOffset;
++  UIColor *_customTintColor;
+ }
 
-+  if (@available(iOS 17.4, *)) {
-+    if (_currentRefreshingState) {
-+      UIImpactFeedbackGenerator *feedbackGenerator = [[UIImpactFeedbackGenerator alloc] initWithStyle:UIImpactFeedbackStyleLight];
-+      [feedbackGenerator prepare];
-+      [feedbackGenerator impactOccurred];
-+    }
-+  }
+ - (instancetype)init
+@@ -56,6 +57,12 @@ - (void)layoutSubviews
+   _isInitialRender = false;
+ }
+
++- (void)didMoveToSuperview
++{
++  [super didMoveToSuperview];
++  [self setTintColor:_customTintColor];
++}
 +
-   if (_onRefresh) {
-     _onRefresh(nil);
+ - (void)beginRefreshingProgrammatically
+ {
+   UInt64 beginRefreshingTimestamp = _currentRefreshingStateTimestamp;
+@@ -203,4 +210,58 @@ - (void)refreshControlValueChanged
    }
  }
 
++- (void)setCustomTintColor:(UIColor *)customTintColor
++{
++  _customTintColor = customTintColor;
++  [self setTintColor:customTintColor];
++}
++
++// Fix for https://github.com/facebook/react-native/issues/43388
++// A bug in iOS 17.4 causes the haptic to not play when refreshing if the tintColor
++// is set before the refresh control gets added to the scrollview. We'll call this
++// function whenever the superview changes. We'll also call it if the value of customTintColor
++// changes.
++- (void)setTintColor:(UIColor *)tintColor
++{
++  if ([self.superview isKindOfClass:[UIScrollView class]] && self.tintColor != tintColor) {
++    [super setTintColor:tintColor];
++  }
++}
++
 +/*
 + This method is used by Bluesky's ExpoScrollForwarder. This allows other React Native
 + libraries to perform a refresh of a scrollview and access the refresh control's onRefresh
@@ -106,6 +134,24 @@ index b09e653..f93cb46 100644
 +}
 +
  @end
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
+index 40aaf9c..1c60164 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
++++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
+@@ -22,11 +22,12 @@ - (UIView *)view
+
+ RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
+ RCT_EXPORT_VIEW_PROPERTY(refreshing, BOOL)
+-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+ RCT_EXPORT_VIEW_PROPERTY(title, NSString)
+ RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
+ RCT_EXPORT_VIEW_PROPERTY(progressViewOffset, CGFloat)
+
++RCT_REMAP_VIEW_PROPERTY(tintColor, customTintColor, UIColor)
++
+ RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
+ {
+   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
 diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
 index 5f5e1ab..aac00b6 100644
 --- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
diff --git a/src/App.native.tsx b/src/App.native.tsx
index e2fcd6d2ec..c6334379f7 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -1,6 +1,6 @@
 import 'react-native-url-polyfill/auto'
-import 'lib/sentry' // must be near top
-import 'view/icons'
+import '#/lib/sentry' // must be near top
+import '#/view/icons'
 
 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
index 12840c7062..561a504b2f 100644
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -1,9 +1,8 @@
 import React from 'react'
 import {ColorSchemeName, useColorScheme} from 'react-native'
-import * as SystemUI from 'expo-system-ui'
 
-import {isWeb} from 'platform/detection'
-import {useThemePrefs} from 'state/shell'
+import {isWeb} from '#/platform/detection'
+import {useThemePrefs} from '#/state/shell'
 import {dark, dim, light} from '#/alf/themes'
 import {ThemeName} from '#/alf/types'
 
@@ -12,7 +11,6 @@ export function useColorModeTheme(): ThemeName {
 
   React.useLayoutEffect(() => {
     updateDocument(theme)
-    SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
   }, [theme])
 
   return theme
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 368cb2dc02..6bf2f4522c 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -7,12 +7,17 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
+import {
+  KeyboardAwareScrollView,
+  useKeyboardHandler,
+} from 'react-native-keyboard-controller'
+import {runOnJS} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
@@ -26,6 +31,10 @@ import {
 import {createInput} from '#/components/forms/TextField'
 import {Portal as DefaultPortal} from '#/components/Portal'
 import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
+import {
+  BottomSheetSnapPointChangeEvent,
+  BottomSheetStateChangeEvent,
+} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
@@ -45,7 +54,12 @@ export function Outer({
   const ref = React.useRef<BottomSheet>(null)
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
-  const {setDialogIsOpen} = useDialogStateControlContext()
+  const {setDialogIsOpen, setFullyExpandedCount} =
+    useDialogStateControlContext()
+
+  const prevSnapPoint = React.useRef<BottomSheetSnapPoint>(
+    BottomSheetSnapPoint.Hidden,
+  )
 
   const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
     BottomSheetSnapPoint.Partial,
@@ -88,6 +102,36 @@ export function Outer({
     onClose?.()
   }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
 
+  const onSnapPointChange = (e: BottomSheetSnapPointChangeEvent) => {
+    const {snapPoint} = e.nativeEvent
+    setSnapPoint(snapPoint)
+    console.log(e.nativeEvent)
+
+    if (
+      snapPoint === BottomSheetSnapPoint.Full &&
+      prevSnapPoint.current !== BottomSheetSnapPoint.Full
+    ) {
+      setFullyExpandedCount(c => c + 1)
+    } else if (
+      snapPoint !== BottomSheetSnapPoint.Full &&
+      prevSnapPoint.current === BottomSheetSnapPoint.Full
+    ) {
+      setFullyExpandedCount(c => c - 1)
+    }
+    prevSnapPoint.current = snapPoint
+  }
+
+  const onStateChange = (e: BottomSheetStateChangeEvent) => {
+    if (e.nativeEvent.state === 'closed') {
+      onCloseAnimationComplete()
+
+      if (prevSnapPoint.current === BottomSheetSnapPoint.Full) {
+        setFullyExpandedCount(c => c - 1)
+      }
+      prevSnapPoint.current = BottomSheetSnapPoint.Hidden
+    }
+  }
+
   useImperativeHandle(
     control.ref,
     () => ({
@@ -107,21 +151,14 @@ export function Outer({
       <Context.Provider value={context}>
         <BottomSheet
           ref={ref}
-          onSnapPointChange={e => {
-            setSnapPoint(e.nativeEvent.snapPoint)
-          }}
-          onStateChange={e => {
-            if (e.nativeEvent.state === 'closed') {
-              onCloseAnimationComplete()
-            }
-          }}
+          onSnapPointChange={onSnapPointChange}
+          onStateChange={onStateChange}
           cornerRadius={20}
           topInset={insets.top}
           bottomInset={insets.bottom}
+          backgroundColor={t.atoms.bg.backgroundColor}
           {...nativeOptions}>
-          <View testID={testID} style={[t.atoms.bg]}>
-            {children}
-          </View>
+          <View testID={testID}>{children}</View>
         </BottomSheet>
       </Context.Provider>
     </Portal>
@@ -149,14 +186,28 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style, ...props}, ref) {
     const {nativeSnapPoint} = useDialogContext()
     const insets = useSafeAreaInsets()
+    const [keyboardHeight, setKeyboardHeight] = React.useState(0)
+    useKeyboardHandler({
+      onEnd: e => {
+        'worklet'
+        runOnJS(setKeyboardHeight)(e.height)
+      },
+    })
+
+    console.log('kb:', keyboardHeight)
+
+    const basePading =
+      (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
+    const fullPaddingBase = insets.bottom + insets.top + basePading
+    const fullPadding = isIOS ? fullPaddingBase : fullPaddingBase + 50
+
+    const paddingBottom =
+      nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading
+
     return (
       <KeyboardAwareScrollView
         style={[a.pt_2xl, a.px_xl, style]}
-        contentContainerStyle={
-          nativeSnapPoint === BottomSheetSnapPoint.Full && [
-            {paddingBottom: insets.bottom + insets.top},
-          ]
-        }
+        contentContainerStyle={[{paddingBottom}]}
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
@@ -198,7 +249,7 @@ export function Handle() {
   const {close} = useDialogContext()
 
   return (
-    <View style={[a.w_full, a.align_center, a.z_10, t.atoms.bg, {height: 20}]}>
+    <View style={[a.w_full, a.align_center, a.z_10, {height: 20}]}>
       <Pressable
         accessible={screenReaderEnabled}
         onPress={() => close()}
diff --git a/src/components/Dialog/sheet-wrapper.ts b/src/components/Dialog/sheet-wrapper.ts
new file mode 100644
index 0000000000..37c6633837
--- /dev/null
+++ b/src/components/Dialog/sheet-wrapper.ts
@@ -0,0 +1,20 @@
+import {useCallback} from 'react'
+
+import {useDialogStateControlContext} from '#/state/dialogs'
+
+/**
+ * If we're calling a system API like the image picker that opens a sheet
+ * wrap it in this function to make sure the status bar is the correct color.
+ */
+export function useSheetWrapper() {
+  const {setFullyExpandedCount} = useDialogStateControlContext()
+  return useCallback(
+    async <T>(promise: Promise<T>): Promise<T> => {
+      setFullyExpandedCount(c => c + 1)
+      const res = await promise
+      setFullyExpandedCount(c => c - 1)
+      return res
+    },
+    [setFullyExpandedCount],
+  )
+}
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index b5ce6f583e..2796d793c0 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -90,7 +90,7 @@ export function Outer({
       <Dialog.Handle />
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
-        <Dialog.ScrollableInner label="Menu TODO">
+        <Dialog.ScrollableInner label="Menu TODO" style={[a.pt_sm]}>
           <View style={[a.gap_lg]}>
             {children}
             {isNative && showCancel && <Cancel />}
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index c6a39ab45e..73472ec332 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -32,6 +32,7 @@ import {
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
 import {IconCircle} from '#/components/IconCircle'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 import {CircleInfo_Stroke2_Corner0_Rounded} from '#/components/icons/CircleInfo'
@@ -89,15 +90,18 @@ export function StepProfile() {
     requestNotificationsPermission('StartOnboarding')
   }, [gate, requestNotificationsPermission])
 
+  const sheetWrapper = useSheetWrapper()
   const openPicker = React.useCallback(
     async (opts?: ImagePickerOptions) => {
-      const response = await launchImageLibraryAsync({
-        exif: false,
-        mediaTypes: MediaTypeOptions.Images,
-        quality: 1,
-        ...opts,
-        legacy: true,
-      })
+      const response = await sheetWrapper(
+        launchImageLibraryAsync({
+          exif: false,
+          mediaTypes: MediaTypeOptions.Images,
+          quality: 1,
+          ...opts,
+          legacy: true,
+        }),
+      )
 
       return (response.assets ?? [])
         .slice(0, 1)
@@ -121,7 +125,7 @@ export function StepProfile() {
           size: getDataUriSize(image.uri),
         }))
     },
-    [_, setError],
+    [_, setError, sheetWrapper],
   )
 
   const onContinue = React.useCallback(async () => {
@@ -168,9 +172,11 @@ export function StepProfile() {
 
     setError('')
 
-    const items = await openPicker({
-      aspect: [1, 1],
-    })
+    const items = await sheetWrapper(
+      openPicker({
+        aspect: [1, 1],
+      }),
+    )
     let image = items[0]
     if (!image) return
 
@@ -196,7 +202,13 @@ export function StepProfile() {
       image,
       useCreatedAvatar: false,
     }))
-  }, [requestPhotoAccessIfNeeded, setAvatar, openPicker, setError])
+  }, [
+    requestPhotoAccessIfNeeded,
+    setAvatar,
+    openPicker,
+    setError,
+    sheetWrapper,
+  ])
 
   const onSecondaryPress = React.useCallback(() => {
     if (avatar.useCreatedAvatar) {
diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index 315ab412c5..80893190fc 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -19,15 +19,22 @@ interface IDialogContext {
   openDialogs: React.MutableRefObject<Set<string>>
 }
 
-const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
-
-const DialogControlContext = React.createContext<{
+interface IDialogControlContext {
   closeAllDialogs(): boolean
   setDialogIsOpen(id: string, isOpen: boolean): void
-}>({
-  closeAllDialogs: () => false,
-  setDialogIsOpen: () => {},
-})
+  /**
+   * The number of dialogs that are fully expanded. This is used to determine the backgground color of the status bar
+   * on iOS.
+   */
+  fullyExpandedCount: number
+  setFullyExpandedCount: React.Dispatch<React.SetStateAction<number>>
+}
+
+const DialogContext = React.createContext<IDialogContext>({} as IDialogContext)
+
+const DialogControlContext = React.createContext<IDialogControlContext>(
+  {} as IDialogControlContext,
+)
 
 export function useDialogStateContext() {
   return React.useContext(DialogContext)
@@ -38,6 +45,8 @@ export function useDialogStateControlContext() {
 }
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [fullyExpandedCount, setFullyExpandedCount] = React.useState(0)
+
   const activeDialogs = React.useRef<
     Map<string, React.MutableRefObject<DialogControlRefProps>>
   >(new Map())
@@ -73,8 +82,18 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
     [activeDialogs, openDialogs],
   )
   const controls = React.useMemo(
-    () => ({closeAllDialogs, setDialogIsOpen}),
-    [closeAllDialogs, setDialogIsOpen],
+    () => ({
+      closeAllDialogs,
+      setDialogIsOpen,
+      fullyExpandedCount,
+      setFullyExpandedCount,
+    }),
+    [
+      closeAllDialogs,
+      setDialogIsOpen,
+      fullyExpandedCount,
+      setFullyExpandedCount,
+    ],
   )
 
   return (
diff --git a/src/view/com/composer/photos/SelectPhotoBtn.tsx b/src/view/com/composer/photos/SelectPhotoBtn.tsx
index 34ead3d9a9..37bfbafe60 100644
--- a/src/view/com/composer/photos/SelectPhotoBtn.tsx
+++ b/src/view/com/composer/photos/SelectPhotoBtn.tsx
@@ -9,6 +9,7 @@ import {isNative} from '#/platform/detection'
 import {ComposerImage, createComposerImage} from '#/state/gallery'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
+import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
 import {Image_Stroke2_Corner0_Rounded as Image} from '#/components/icons/Image'
 
 type Props = {
@@ -21,23 +22,26 @@ export function SelectPhotoBtn({size, disabled, onAdd}: Props) {
   const {_} = useLingui()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
   const t = useTheme()
+  const sheetWrapper = useSheetWrapper()
 
   const onPressSelectPhotos = useCallback(async () => {
     if (isNative && !(await requestPhotoAccessIfNeeded())) {
       return
     }
 
-    const images = await openPicker({
-      selectionLimit: 4 - size,
-      allowsMultipleSelection: true,
-    })
+    const images = await sheetWrapper(
+      openPicker({
+        selectionLimit: 4 - size,
+        allowsMultipleSelection: true,
+      }),
+    )
 
     const results = await Promise.all(
       images.map(img => createComposerImage(img)),
     )
 
     onAdd(results)
-  }, [requestPhotoAccessIfNeeded, size, onAdd])
+  }, [requestPhotoAccessIfNeeded, size, onAdd, sheetWrapper])
 
   return (
     <Button
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 2b4376b698..43555ccb47 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -20,6 +20,7 @@ import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {precacheProfile} from '#/state/queries/profile'
 import {HighPriorityImage} from '#/view/com/util/images/Image'
 import {tokens, useTheme} from '#/alf'
+import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
 import {
   Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled,
   Camera_Stroke2_Corner0_Rounded as Camera,
@@ -271,6 +272,7 @@ let EditableUserAvatar = ({
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
+  const sheetWrapper = useSheetWrapper()
 
   const aviStyle = useMemo(() => {
     if (type === 'algo' || type === 'list') {
@@ -306,9 +308,11 @@ let EditableUserAvatar = ({
       return
     }
 
-    const items = await openPicker({
-      aspect: [1, 1],
-    })
+    const items = await sheetWrapper(
+      openPicker({
+        aspect: [1, 1],
+      }),
+    )
     const item = items[0]
     if (!item) {
       return
@@ -332,7 +336,7 @@ let EditableUserAvatar = ({
         logger.error('Failed to crop banner', {error: e})
       }
     }
-  }, [onSelectNewAvatar, requestPhotoAccessIfNeeded])
+  }, [onSelectNewAvatar, requestPhotoAccessIfNeeded, sheetWrapper])
 
   const onRemoveAvatar = React.useCallback(() => {
     onSelectNewAvatar(null)
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 13f4081fce..622cb2129d 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -17,6 +17,7 @@ import {logger} from '#/logger'
 import {isAndroid, isNative} from '#/platform/detection'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import {tokens, useTheme as useAlfTheme} from '#/alf'
+import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'
 import {
   Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled,
   Camera_Stroke2_Corner0_Rounded as Camera,
@@ -43,6 +44,7 @@ export function UserBanner({
   const {_} = useLingui()
   const {requestCameraAccessIfNeeded} = useCameraPermission()
   const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
+  const sheetWrapper = useSheetWrapper()
 
   const onOpenCamera = React.useCallback(async () => {
     if (!(await requestCameraAccessIfNeeded())) {
@@ -60,7 +62,7 @@ export function UserBanner({
     if (!(await requestPhotoAccessIfNeeded())) {
       return
     }
-    const items = await openPicker()
+    const items = await sheetWrapper(openPicker())
     if (!items[0]) {
       return
     }
@@ -80,7 +82,7 @@ export function UserBanner({
         logger.error('Failed to crop banner', {error: e})
       }
     }
-  }, [onSelectNewBanner, requestPhotoAccessIfNeeded])
+  }, [onSelectNewBanner, requestPhotoAccessIfNeeded, sheetWrapper])
 
   const onRemoveBanner = React.useCallback(() => {
     onSelectNewBanner?.(null)
diff --git a/src/view/shell/Composer.ios.tsx b/src/view/shell/Composer.ios.tsx
index 18410bf397..02efad8786 100644
--- a/src/view/shell/Composer.ios.tsx
+++ b/src/view/shell/Composer.ios.tsx
@@ -1,19 +1,28 @@
-import React, {useLayoutEffect} from 'react'
+import React from 'react'
 import {Modal, View} from 'react-native'
-import {StatusBar} from 'expo-status-bar'
-import * as SystemUI from 'expo-system-ui'
 
+import {useDialogStateControlContext} from '#/state/dialogs'
 import {useComposerState} from '#/state/shell/composer'
 import {atoms as a, useTheme} from '#/alf'
-import {getBackgroundColor, useThemeName} from '#/alf/util/useColorModeTheme'
 import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
 
 export function Composer({}: {winHeight: number}) {
+  const {setFullyExpandedCount} = useDialogStateControlContext()
   const t = useTheme()
   const state = useComposerState()
   const ref = useComposerCancelRef()
 
   const open = !!state
+  const prevOpen = React.useRef(open)
+
+  React.useEffect(() => {
+    if (open && !prevOpen.current) {
+      setFullyExpandedCount(c => c + 1)
+    } else if (!open && prevOpen.current) {
+      setFullyExpandedCount(c => c - 1)
+    }
+    prevOpen.current = open
+  }, [open, setFullyExpandedCount])
 
   return (
     <Modal
@@ -24,56 +33,18 @@ export function Composer({}: {winHeight: number}) {
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
       <View style={[t.atoms.bg, a.flex_1]}>
-        <Providers open={open}>
-          <ComposePost
-            cancelRef={ref}
-            replyTo={state?.replyTo}
-            onPost={state?.onPost}
-            quote={state?.quote}
-            quoteCount={state?.quoteCount}
-            mention={state?.mention}
-            text={state?.text}
-            imageUris={state?.imageUris}
-            videoUri={state?.videoUri}
-          />
-        </Providers>
+        <ComposePost
+          cancelRef={ref}
+          replyTo={state?.replyTo}
+          onPost={state?.onPost}
+          quote={state?.quote}
+          quoteCount={state?.quoteCount}
+          mention={state?.mention}
+          text={state?.text}
+          imageUris={state?.imageUris}
+          videoUri={state?.videoUri}
+        />
       </View>
     </Modal>
   )
 }
-
-function Providers({
-  children,
-  open,
-}: {
-  children: React.ReactNode
-  open: boolean
-}) {
-  // on iOS, it's a native formSheet. We use FullWindowOverlay to make
-  // the dialogs appear over it
-  return (
-    <>
-      {children}
-      <IOSModalBackground active={open} />
-    </>
-  )
-}
-
-// Generally, the backdrop of the app is the theme color, but when this is open
-// we want it to be black due to the modal being a form sheet.
-function IOSModalBackground({active}: {active: boolean}) {
-  const theme = useThemeName()
-
-  useLayoutEffect(() => {
-    SystemUI.setBackgroundColorAsync('black')
-
-    return () => {
-      SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
-    }
-  }, [theme])
-
-  // Set the status bar to light - however, only if the modal is active
-  // If we rely on this component being mounted to set this,
-  // there'll be a delay before it switches back to default.
-  return active ? <StatusBar style="light" animated /> : null
-}
diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx
index 83468ecf3e..8bc3de24d5 100644
--- a/src/view/shell/index.tsx
+++ b/src/view/shell/index.tsx
@@ -19,7 +19,8 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useNotificationsRegistration} from '#/lib/notifications/notifications'
 import {isStateAtTabRoot} from '#/lib/routes/helpers'
 import {useTheme} from '#/lib/ThemeContext'
-import {isAndroid} from '#/platform/detection'
+import {isAndroid, isIOS} from '#/platform/detection'
+import {useDialogStateControlContext} from '#/state/dialogs'
 import {useSession} from '#/state/session'
 import {
   useIsDrawerOpen,
@@ -123,6 +124,7 @@ function ShellInner() {
 }
 
 export const Shell: React.FC = function ShellImpl() {
+  const {fullyExpandedCount} = useDialogStateControlContext()
   const pal = usePalette('default')
   const theme = useTheme()
   React.useEffect(() => {
@@ -136,7 +138,14 @@ export const Shell: React.FC = function ShellImpl() {
   }, [theme])
   return (
     <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
-      <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
+      <StatusBar
+        style={
+          theme.colorScheme === 'dark' || (isIOS && fullyExpandedCount > 0)
+            ? 'light'
+            : 'dark'
+        }
+        animated
+      />
       <RoutesContainer>
         <ShellInner />
       </RoutesContainer>
diff --git a/yarn.lock b/yarn.lock
index 517018dbc3..4e5c396abc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11450,14 +11450,6 @@ expo-structured-headers@~3.8.0:
   resolved "https://registry.yarnpkg.com/expo-structured-headers/-/expo-structured-headers-3.8.0.tgz#11797a4c3a7a6770b21126cecffcda148030e361"
   integrity sha512-R+gFGn0x5CWl4OVlk2j1bJTJIz4KO8mPoCHpRHmfqMjmrMvrOM0qQSY3V5NHXwp1yT/L2v8aUmFQsBRIdvi1XA==
 
-expo-system-ui@~3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/expo-system-ui/-/expo-system-ui-3.0.4.tgz#5ace49d38eb03c09a8041b3b82c581a6b974741a"
-  integrity sha512-v1n6hBO30k9qw6RE8/au4yNoovs71ExGuXizJUlR5KSo4Ruogpb+0/2q3uRZMDIYWWCANvms8L0UOh6fQJ5TXg==
-  dependencies:
-    "@react-native/normalize-colors" "~0.74.83"
-    debug "^4.3.2"
-
 expo-task-manager@~11.8.1:
   version "11.8.1"
   resolved "https://registry.yarnpkg.com/expo-task-manager/-/expo-task-manager-11.8.1.tgz#33089e78ee3fbd83327fb403bce12d69baf7d21b"

From 6a3b1aa2b44d8861f0e29a5a9c8dde8b221d3ec9 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 10:35:24 -0500
Subject: [PATCH 52/62] Handle needs to be absolute

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 6bf2f4522c..1928dc4815 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -249,7 +249,14 @@ export function Handle() {
   const {close} = useDialogContext()
 
   return (
-    <View style={[a.w_full, a.align_center, a.z_10, {height: 20}]}>
+    <View
+      style={[
+        a.absolute,
+        a.w_full,
+        a.align_center,
+        a.z_10,
+        {height: 20},
+      ]}>
       <Pressable
         accessible={screenReaderEnabled}
         onPress={() => close()}

From 4c6cb95692c85b49f10a41efa9b70ece0db61f94 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 11:15:00 -0500
Subject: [PATCH 53/62] Remove space above Flatlist and apply to usages

---
 src/components/Dialog/index.tsx               | 33 +++++++------------
 .../Wizard/WizardEditListDialog.tsx           |  1 +
 src/components/dialogs/GifSelect.tsx          |  1 +
 .../dms/dialogs/SearchablePeopleList.tsx      |  7 ++--
 .../dms/dialogs/ShareViaChatDialog.tsx        |  5 +--
 5 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 1928dc4815..399f668bd3 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -223,22 +223,18 @@ export const InnerFlatList = React.forwardRef<
   ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, ...props}, ref) {
   const insets = useSafeAreaInsets()
-  const t = useTheme()
   const {nativeSnapPoint} = useDialogContext()
   return (
-    <>
-      <View style={[a.w_full, t.atoms.bg, {height: a.pt_sm.paddingTop}]} />
-      <List
-        keyboardShouldPersistTaps="handled"
-        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-        ListFooterComponent={
-          <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-        }
-        ref={ref}
-        {...props}
-        style={[style]}
-      />
-    </>
+    <List
+      keyboardShouldPersistTaps="handled"
+      bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+      ListFooterComponent={
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      }
+      ref={ref}
+      {...props}
+      style={[style]}
+    />
   )
 })
 
@@ -249,14 +245,7 @@ export function Handle() {
   const {close} = useDialogContext()
 
   return (
-    <View
-      style={[
-        a.absolute,
-        a.w_full,
-        a.align_center,
-        a.z_10,
-        {height: 20},
-      ]}>
+    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 20}]}>
       <Pressable
         accessible={screenReaderEnabled}
         onPress={() => close()}
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index fddb8592ef..1e9f1c52d4 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -86,6 +86,7 @@ export function WizardEditListDialog({
         ListHeaderComponent={
           <View
             style={[
+              native(a.pt_4xl),
               a.flex_row,
               a.justify_between,
               a.border_b,
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 4e227f7493..6023b5808a 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -143,6 +143,7 @@ function GifList({
     return (
       <View
         style={[
+          native(a.pt_4xl),
           a.relative,
           a.mb_lg,
           a.flex_row,
diff --git a/src/components/dms/dialogs/SearchablePeopleList.tsx b/src/components/dms/dialogs/SearchablePeopleList.tsx
index a2a731e649..a5687a0968 100644
--- a/src/components/dms/dialogs/SearchablePeopleList.tsx
+++ b/src/components/dms/dialogs/SearchablePeopleList.tsx
@@ -239,7 +239,8 @@ export function SearchablePeopleList({
       <View
         style={[
           a.relative,
-          web(a.pt_md),
+          web(a.pt_lg),
+          native(a.pt_4xl),
           a.pb_xs,
           a.px_lg,
           a.border_b,
@@ -251,7 +252,7 @@ export function SearchablePeopleList({
             style={[
               a.z_10,
               a.text_lg,
-              a.font_bold,
+              a.font_heavy,
               a.leading_tight,
               t.atoms.text_contrast_high,
             ]}>
@@ -277,7 +278,7 @@ export function SearchablePeopleList({
           ) : null}
         </View>
 
-        <View style={[native([a.pt_sm]), web([a.pt_xs])]}>
+        <View style={[, web([a.pt_xs])]}>
           <SearchInput
             inputRef={inputRef}
             value={searchText}
diff --git a/src/components/dms/dialogs/ShareViaChatDialog.tsx b/src/components/dms/dialogs/ShareViaChatDialog.tsx
index 9a556752a9..38b5583432 100644
--- a/src/components/dms/dialogs/ShareViaChatDialog.tsx
+++ b/src/components/dms/dialogs/ShareViaChatDialog.tsx
@@ -17,10 +17,7 @@ export function SendViaChatDialog({
   onSelectChat: (chatId: string) => void
 }) {
   return (
-    <Dialog.Outer
-      control={control}
-      testID="sendViaChatChatDialog"
-      nativeOptions={{topInset: 16}}>
+    <Dialog.Outer control={control} testID="sendViaChatChatDialog">
       <Dialog.Handle />
       <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
     </Dialog.Outer>

From 8e119f338dd5d462e8d46aa64bccb5a8938439ca Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 11:18:51 -0500
Subject: [PATCH 54/62] Add a little padding to bottom of menu

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

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 2796d793c0..7b567e11ba 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -94,6 +94,7 @@ export function Outer({
           <View style={[a.gap_lg]}>
             {children}
             {isNative && showCancel && <Cancel />}
+            <View style={[{height: a.pb_lg.paddingBottom}]} />
           </View>
         </Dialog.ScrollableInner>
       </Context.Provider>

From dfa1e5c9e406e15073cf0c524a8ef9b13b84c6b6 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 11:35:25 -0500
Subject: [PATCH 55/62] Fix padding on ScrollableInner

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 399f668bd3..b4f8c21eae 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -194,8 +194,6 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
       },
     })
 
-    console.log('kb:', keyboardHeight)
-
     const basePading =
       (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
     const fullPaddingBase = insets.bottom + insets.top + basePading
@@ -206,8 +204,8 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
 
     return (
       <KeyboardAwareScrollView
-        style={[a.pt_2xl, a.px_xl, style]}
-        contentContainerStyle={[{paddingBottom}]}
+        style={[style]}
+        contentContainerStyle={[a.pt_2xl, a.px_xl, {paddingBottom}]}
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}

From 597ecb37c56687816addc420164e5b79286d6121 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 4 Oct 2024 11:35:54 -0500
Subject: [PATCH 56/62] Fix todo

---
 src/components/Menu/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 7b567e11ba..a22f43cf8d 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -82,6 +82,7 @@ export function Outer({
   style?: StyleProp<ViewStyle>
 }>) {
   const context = React.useContext(Context)
+  const {_} = useLingui()
 
   return (
     <Dialog.Outer
@@ -90,7 +91,7 @@ export function Outer({
       <Dialog.Handle />
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
-        <Dialog.ScrollableInner label="Menu TODO" style={[a.pt_sm]}>
+        <Dialog.ScrollableInner label={_(msg`Menu`)} style={[a.pt_sm]}>
           <View style={[a.gap_lg]}>
             {children}
             {isNative && showCancel && <Cancel />}

From e8f1a73e54733a476614b60c4ff9e39d350eccf1 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 10:11:46 -0700
Subject: [PATCH 57/62] rm log

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index b4f8c21eae..fb4b31509f 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -105,8 +105,6 @@ export function Outer({
   const onSnapPointChange = (e: BottomSheetSnapPointChangeEvent) => {
     const {snapPoint} = e.nativeEvent
     setSnapPoint(snapPoint)
-    console.log(e.nativeEvent)
-
     if (
       snapPoint === BottomSheetSnapPoint.Full &&
       prevSnapPoint.current !== BottomSheetSnapPoint.Full

From 6b81ebe201c894b0e3bd07af62d0f80859482f14 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 10:20:48 -0700
Subject: [PATCH 58/62] more inset tweaks

---
 modules/bottom-sheet/src/BottomSheet.tsx      | 4 +---
 modules/bottom-sheet/src/BottomSheet.types.ts | 2 --
 src/components/Dialog/index.tsx               | 4 +---
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index 489b76d2b6..bd0d51a948 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -65,8 +65,6 @@ export class BottomSheet extends React.Component<
 
   render() {
     const {children, backgroundColor, ...rest} = this.props
-    const topInset = rest.topInset ?? 0
-    const bottomInset = rest.bottomInset ?? 0
     const cornerRadius = rest.cornerRadius ?? 0
 
     if (!this.state.open) {
@@ -80,7 +78,7 @@ export class BottomSheet extends React.Component<
         ref={this.ref}
         style={{
           position: 'absolute',
-          height: screenHeight - topInset - bottomInset,
+          height: screenHeight,
           width: '100%',
         }}
         containerBackgroundColor={backgroundColor}>
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index d63530ddfb..98c1c4f6e8 100644
--- a/modules/bottom-sheet/src/BottomSheet.types.ts
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -24,8 +24,6 @@ export interface BottomSheetViewProps {
   preventExpansion?: boolean
   backgroundColor?: ColorValue
   containerBackgroundColor?: ColorValue
-  topInset?: number
-  bottomInset?: number
 
   minHeight?: number
   maxHeight?: number
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index fb4b31509f..b2aba54232 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -52,7 +52,6 @@ export function Outer({
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const ref = React.useRef<BottomSheet>(null)
-  const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen, setFullyExpandedCount} =
     useDialogStateControlContext()
@@ -105,6 +104,7 @@ export function Outer({
   const onSnapPointChange = (e: BottomSheetSnapPointChangeEvent) => {
     const {snapPoint} = e.nativeEvent
     setSnapPoint(snapPoint)
+
     if (
       snapPoint === BottomSheetSnapPoint.Full &&
       prevSnapPoint.current !== BottomSheetSnapPoint.Full
@@ -152,8 +152,6 @@ export function Outer({
           onSnapPointChange={onSnapPointChange}
           onStateChange={onStateChange}
           cornerRadius={20}
-          topInset={insets.top}
-          bottomInset={insets.bottom}
           backgroundColor={t.atoms.bg.backgroundColor}
           {...nativeOptions}>
           <View testID={testID}>{children}</View>

From 6ae75c8ef03719e8e0de23fa78c8020f84c07ea9 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 10:38:17 -0700
Subject: [PATCH 59/62] disable drag android when needed

---
 .../modules/bottomsheet/BottomSheetModule.kt  |  4 ++
 .../modules/bottomsheet/BottomSheetView.kt    | 15 ++++++++
 modules/bottom-sheet/src/BottomSheet.types.ts |  1 +
 src/components/Dialog/context.ts              |  2 +
 src/components/Dialog/index.tsx               | 37 +++++++++++++++----
 src/components/Dialog/types.ts                |  2 +
 6 files changed, 53 insertions(+), 8 deletions(-)

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 fe3b34aa8b..057e6ed2e2 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
@@ -29,6 +29,10 @@ class BottomSheetModule : Module() {
           view.updateLayout()
         }
 
+        Prop("disableDrag") { view: BottomSheetView, prop: Boolean ->
+          view.disableDrag = prop
+        }
+
         Prop("minHeight") { view: BottomSheetView, prop: Float ->
           view.minHeight = prop
         }
diff --git a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
index 6cfd24e50a..a5a84ec3d9 100644
--- a/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
+++ b/modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt
@@ -39,6 +39,12 @@ class BottomSheetView(
   private val onStateChange by EventDispatcher()
 
   // Props
+  var disableDrag = false
+    set (value) {
+      field = value
+      this.setDraggable(!value)
+    }
+
   var preventDismiss = false
     set(value) {
       field = value
@@ -273,6 +279,15 @@ class BottomSheetView(
     return ratio
   }
 
+  private fun setDraggable(draggable: Boolean) {
+    val dialog = this.dialog ?: return
+    val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
+    bottomSheet?.let {
+      val behavior = BottomSheetBehavior.from(it)
+      behavior.isDraggable = draggable
+    }
+  }
+
   override fun onHostResume() { }
 
   override fun onHostPause() { }
diff --git a/modules/bottom-sheet/src/BottomSheet.types.ts b/modules/bottom-sheet/src/BottomSheet.types.ts
index 98c1c4f6e8..150932d423 100644
--- a/modules/bottom-sheet/src/BottomSheet.types.ts
+++ b/modules/bottom-sheet/src/BottomSheet.types.ts
@@ -24,6 +24,7 @@ export interface BottomSheetViewProps {
   preventExpansion?: boolean
   backgroundColor?: ColorValue
   containerBackgroundColor?: ColorValue
+  disableDrag?: boolean
 
   minHeight?: number
   maxHeight?: number
diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts
index 6247b6d3d1..b479bc7f06 100644
--- a/src/components/Dialog/context.ts
+++ b/src/components/Dialog/context.ts
@@ -12,6 +12,8 @@ export const Context = React.createContext<DialogContextProps>({
   close: () => {},
   isNativeDialog: false,
   nativeSnapPoint: BottomSheetSnapPoint.Hidden,
+  disableDrag: false,
+  setDisableDrag: () => {},
 })
 
 export function useDialogContext() {
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index b2aba54232..49b5e10b23 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,5 +1,7 @@
 import React, {useImperativeHandle} from 'react'
 import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
   Pressable,
   ScrollView,
   StyleProp,
@@ -17,7 +19,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
+import {isAndroid, isIOS} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
@@ -60,6 +62,7 @@ export function Outer({
     BottomSheetSnapPoint.Hidden,
   )
 
+  const [disableDrag, setDisableDrag] = React.useState(false)
   const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
     BottomSheetSnapPoint.Partial,
   )
@@ -140,8 +143,14 @@ export function Outer({
   )
 
   const context = React.useMemo(
-    () => ({close, isNativeDialog: true, nativeSnapPoint: snapPoint}),
-    [close, snapPoint],
+    () => ({
+      close,
+      isNativeDialog: true,
+      nativeSnapPoint: snapPoint,
+      disableDrag,
+      setDisableDrag,
+    }),
+    [close, snapPoint, disableDrag, setDisableDrag],
   )
 
   return (
@@ -149,11 +158,12 @@ export function Outer({
       <Context.Provider value={context}>
         <BottomSheet
           ref={ref}
-          onSnapPointChange={onSnapPointChange}
-          onStateChange={onStateChange}
           cornerRadius={20}
           backgroundColor={t.atoms.bg.backgroundColor}
-          {...nativeOptions}>
+          {...nativeOptions}
+          onSnapPointChange={onSnapPointChange}
+          onStateChange={onStateChange}
+          disableDrag={disableDrag}>
           <View testID={testID}>{children}</View>
         </BottomSheet>
       </Context.Provider>
@@ -180,7 +190,7 @@ export function Inner({children, style}: DialogInnerProps) {
 
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner({children, style, ...props}, ref) {
-    const {nativeSnapPoint} = useDialogContext()
+    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
     const insets = useSafeAreaInsets()
     const [keyboardHeight, setKeyboardHeight] = React.useState(0)
     useKeyboardHandler({
@@ -198,6 +208,15 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const paddingBottom =
       nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading
 
+    const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const {contentOffset} = e.nativeEvent
+      if (contentOffset.y > 0 && !disableDrag) {
+        setDisableDrag(true)
+      } else if (contentOffset.y <= 1 && disableDrag) {
+        setDisableDrag(false)
+      }
+    }
+
     return (
       <KeyboardAwareScrollView
         style={[style]}
@@ -205,7 +224,9 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
         ref={ref}
         {...props}
         bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
-        bottomOffset={30}>
+        bottomOffset={30}
+        scrollEventThrottle={50}
+        onScroll={isAndroid ? onScroll : undefined}>
         {children}
       </KeyboardAwareScrollView>
     )
diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts
index cf698bf5b0..caa787535b 100644
--- a/src/components/Dialog/types.ts
+++ b/src/components/Dialog/types.ts
@@ -41,6 +41,8 @@ export type DialogContextProps = {
   close: DialogControlProps['close']
   isNativeDialog: boolean
   nativeSnapPoint: BottomSheetSnapPoint
+  disableDrag: boolean
+  setDisableDrag: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export type DialogControlOpenOptions = {

From 2d1321250568ff73c4100bde04e7cb76856edecc Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 10:55:45 -0700
Subject: [PATCH 60/62] be sure to fire detent event

---
 modules/bottom-sheet/ios/SheetView.swift           | 1 +
 modules/bottom-sheet/ios/SheetViewController.swift | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/modules/bottom-sheet/ios/SheetView.swift b/modules/bottom-sheet/ios/SheetView.swift
index f91cb43b45..cf2019c6a1 100644
--- a/modules/bottom-sheet/ios/SheetView.swift
+++ b/modules/bottom-sheet/ios/SheetView.swift
@@ -146,6 +146,7 @@ class SheetView: ExpoView, UISheetPresentationControllerDelegate {
     if let contentHeight = self.innerView?.subviews.first?.frame.size.height {
       self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight),
                                preventExpansion: self.preventExpansion)
+      self.selectedDetentIdentifier = self.sheetVc?.getCurrentDetentIdentifier()
     }
   }
 
diff --git a/modules/bottom-sheet/ios/SheetViewController.swift b/modules/bottom-sheet/ios/SheetViewController.swift
index 8deef3723e..56473b21cd 100644
--- a/modules/bottom-sheet/ios/SheetViewController.swift
+++ b/modules/bottom-sheet/ios/SheetViewController.swift
@@ -62,6 +62,13 @@ class SheetViewController: UIViewController {
       }
     }
   }
+  
+  func getCurrentDetentIdentifier() -> UISheetPresentationController.Detent.Identifier? {
+    guard let sheet = self.sheetPresentationController else {
+      return nil
+    }
+    return sheet.selectedDetentIdentifier
+  }
 
   required init?(coder: NSCoder) {
     fatalError("init(coder:) has not been implemented")

From 84cc00f4d04936b23288ecf9c7fb262e3397573e Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 13:19:17 -0700
Subject: [PATCH 61/62] types

---
 src/components/Dialog/index.web.tsx          | 2 ++
 src/components/dms/dialogs/NewChatDialog.tsx | 5 +----
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 61b12261e0..7b9cfb6931 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -105,6 +105,8 @@ export function Outer({
       close,
       isNativeDialog: false,
       nativeSnapPoint: 0,
+      disableDrag: false,
+      setDisableDrag: () => {},
     }),
     [close],
   )
diff --git a/src/components/dms/dialogs/NewChatDialog.tsx b/src/components/dms/dialogs/NewChatDialog.tsx
index b74bf62e8a..e80fef2d7e 100644
--- a/src/components/dms/dialogs/NewChatDialog.tsx
+++ b/src/components/dms/dialogs/NewChatDialog.tsx
@@ -55,10 +55,7 @@ export function NewChat({
         accessibilityHint=""
       />
 
-      <Dialog.Outer
-        control={control}
-        testID="newChatDialog"
-        nativeOptions={{topInset: 16}}>
+      <Dialog.Outer control={control} testID="newChatDialog">
         <Dialog.Handle />
         <SearchablePeopleList
           title={_(msg`Start a new chat`)}

From 144f5874a4028da5d3b0de9254f2ca7d771e0277 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 4 Oct 2024 13:20:12 -0700
Subject: [PATCH 62/62] oops

---
 modules/bottom-sheet/src/BottomSheet.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/modules/bottom-sheet/src/BottomSheet.tsx b/modules/bottom-sheet/src/BottomSheet.tsx
index bd0d51a948..9e7d0c2091 100644
--- a/modules/bottom-sheet/src/BottomSheet.tsx
+++ b/modules/bottom-sheet/src/BottomSheet.tsx
@@ -7,8 +7,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {requireNativeModule} from 'expo'
-import {requireNativeViewManager} from 'expo-modules-core'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
 
 import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'