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

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

diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx
index c674175a20..db933b98c8 100644
--- a/src/state/dialogs/index.tsx
+++ b/src/state/dialogs/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 
+import {isWeb} from '#/platform/detection'
 import {DialogControlRefProps} from '#/components/Dialog'
 import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context'
 
@@ -42,11 +43,18 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const openDialogs = React.useRef<Set<string>>(new Set())
 
   const closeAllDialogs = React.useCallback(() => {
-    openDialogs.current.forEach(id => {
-      const dialog = activeDialogs.current.get(id)
-      if (dialog) dialog.current.close()
-    })
-    return openDialogs.current.size > 0
+    if (isWeb) {
+      openDialogs.current.forEach(id => {
+        const dialog = activeDialogs.current.get(id)
+        if (dialog) dialog.current.close()
+      })
+
+      return openDialogs.current.size > 0
+    } else {
+      // @TODO DIALOGS REFACTOR
+      console.error('HAILEY FIX THIS 🥺📋')
+      return false
+    }
   }, [])
 
   const setDialogIsOpen = React.useCallback((id: string, isOpen: boolean) => {
diff --git a/yarn.lock b/yarn.lock
index 8f68ea4f3f..e3dc084342 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4120,6 +4120,11 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@haileyok/bluesky-bottom-sheet@^0.1.1-alpha.4":
+  version "0.1.1-alpha.4"
+  resolved "https://registry.yarnpkg.com/@haileyok/bluesky-bottom-sheet/-/bluesky-bottom-sheet-0.1.1-alpha.4.tgz#19717e57e63d70e79b8bd86984903c448deb83bc"
+  integrity sha512-bEZRbErsI6OJCgmFolbr9Ta5LxNvyaltzRPFOVtwsykIwL8tqNJeNlmfxP8EdJa5lSu2kK1MauQcygmCIouzwg==
+
 "@haileyok/bluesky-video@0.1.10":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@haileyok/bluesky-video/-/bluesky-video-0.1.10.tgz#2756e8c83a78caeb6b120a175578eac1eb6889a9"

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

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 67603ed2d8..8762fcb25d 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -1,24 +1,13 @@
 import React, {useImperativeHandle} from 'react'
-import {
-  Dimensions,
-  Keyboard,
-  Pressable,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native'
-import Animated, {useAnimatedStyle} from 'react-native-reanimated'
+import {Dimensions, Keyboard, StyleProp, View, ViewStyle} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import BottomSheet, {
-  BottomSheetBackdropProps,
   BottomSheetFlatList,
   BottomSheetFlatListMethods,
   BottomSheetScrollView,
   BottomSheetScrollViewMethods,
   BottomSheetTextInput,
   BottomSheetView,
-  useBottomSheet,
-  WINDOW_HEIGHT,
 } from '@discord/bottom-sheet/src'
 import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'
 
@@ -41,71 +30,20 @@ export * from '#/components/Dialog/utils'
 // @ts-ignore
 export const Input = createInput(BottomSheetTextInput)
 
-function Backdrop(props: BottomSheetBackdropProps) {
-  const t = useTheme()
-  const bottomSheet = useBottomSheet()
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const opacity =
-      (Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000
-
-    return {
-      opacity: Math.min(Math.max(opacity, 0), 0.55),
-    }
-  })
-
-  const onPress = React.useCallback(() => {
-    bottomSheet.close()
-  }, [bottomSheet])
-
-  return (
-    <Animated.View
-      style={[
-        t.atoms.bg_contrast_300,
-        {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          position: 'absolute',
-        },
-        animatedStyle,
-      ]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel="Dialog backdrop"
-        accessibilityHint="Press the backdrop to close the dialog"
-        style={{flex: 1}}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}
-
 export function Outer({
   children,
   control,
   onClose,
-  nativeOptions,
+  nativeOptions: _nativeOptions, // @TODO DIALOG REFACTOR
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const t = useTheme()
   const sheet = React.useRef<BottomSheet>(null)
-  const sheetOptions = nativeOptions?.sheet || {}
-  const hasSnapPoints = !!sheetOptions.snapPoints
   const insets = useSafeAreaInsets()
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
-
-  /*
-   * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
-   */
-  const [openIndex, setOpenIndex] = React.useState(-1)
-
-  /*
-   * `openIndex` is the index of the snap point to open the bottom sheet to. If >0, the bottom sheet is open.
-   */
-  const isOpen = openIndex > -1
+  // @TODO DIALOG REFACTOR - can i get rid of this? seems pointless tbh
+  const [isOpen, setIsOpen] = React.useState(false)
 
   const callQueuedCallbacks = React.useCallback(() => {
     for (const cb of closeCallbacks.current) {
@@ -119,25 +57,21 @@ export function Outer({
     closeCallbacks.current = []
   }, [])
 
-  const open = React.useCallback<DialogControlProps['open']>(
-    ({index} = {}) => {
-      // Run any leftover callbacks that might have been queued up before calling `.open()`
-      callQueuedCallbacks()
-
-      setDialogIsOpen(control.id, true)
-      // can be set to any index of `snapPoints`, but `0` is the first i.e. "open"
-      setOpenIndex(index || 0)
-      sheet.current?.snapToIndex(index || 0)
-    },
-    [setDialogIsOpen, control.id, callQueuedCallbacks],
-  )
+  const open = React.useCallback<DialogControlProps['open']>(() => {
+    // Run any leftover callbacks that might have been queued up before calling `.open()`
+    callQueuedCallbacks()
+    setIsOpen(true)
+    setDialogIsOpen(control.id, true)
+    // sheet.current?.open() // @TODO DIALOG REFACTOR
+  }, [setDialogIsOpen, control.id, callQueuedCallbacks])
 
   // This is the function that we call when we want to dismiss the dialog.
   const close = React.useCallback<DialogControlProps['close']>(cb => {
+    setIsOpen(false)
     if (typeof cb === 'function') {
       closeCallbacks.current.push(cb)
     }
-    sheet.current?.close()
+    // sheet.current?.close() // @TODO DIALOG REFACTOR
   }, [])
 
   // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -146,8 +80,6 @@ export function Outer({
     // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this
     // tells us that we need to toggle the accessibility overlay setting
     setDialogIsOpen(control.id, false)
-    setOpenIndex(-1)
-
     callQueuedCallbacks()
     onClose?.()
   }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
@@ -180,18 +112,13 @@ export function Outer({
             testID={testID}
             onTouchMove={() => Keyboard.dismiss()}>
             <BottomSheet
-              enableDynamicSizing={!hasSnapPoints}
               enablePanDownToClose
               keyboardBehavior="interactive"
               android_keyboardInputMode="adjustResize"
               keyboardBlurBehavior="restore"
               topInset={insets.top}
-              {...sheetOptions}
-              snapPoints={sheetOptions.snapPoints || ['100%']}
               ref={sheet}
-              index={openIndex}
               backgroundStyle={{backgroundColor: 'transparent'}}
-              backdropComponent={Backdrop}
               handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
               handleStyle={{display: 'none'}}
               onClose={onCloseAnimationComplete}>

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

---
 src/components/Dialog/index.tsx               | 77 +++++++++----------
 src/components/LikesDialog.tsx                | 17 ++--
 src/components/Menu/index.tsx                 |  4 +-
 src/components/NewskieDialog.tsx              |  7 +-
 src/components/Prompt.tsx                     |  2 -
 src/components/ReportDialog/index.tsx         |  2 -
 src/components/StarterPack/QrCodeDialog.tsx   |  1 -
 src/components/StarterPack/ShareDialog.tsx    | 15 ++--
 .../Wizard/WizardEditListDialog.tsx           |  7 +-
 src/components/TagMenu/index.tsx              |  2 -
 src/components/WhoCanReply.tsx                |  1 -
 src/components/dialogs/BirthDateSettings.tsx  |  2 -
 src/components/dialogs/Embed.tsx              |  1 -
 src/components/dialogs/EmbedConsent.tsx       |  2 -
 src/components/dialogs/GifSelect.tsx          |  1 -
 src/components/dialogs/MutedWords.tsx         |  1 -
 .../dialogs/PostInteractionSettingsDialog.tsx |  2 -
 src/components/dialogs/Signin.tsx             |  1 -
 src/components/dialogs/SwitchAccount.tsx      |  2 -
 .../dialogs/nuxs/NeueTypography.tsx           |  2 -
 src/components/dms/MessagesNUX.tsx            |  1 -
 src/components/dms/ReportDialog.tsx           |  1 -
 src/components/forms/DateField/index.tsx      |  1 -
 .../intents/VerifyEmailIntentDialog.tsx       |  3 +-
 .../moderation/LabelsOnMeDialog.tsx           |  2 -
 .../moderation/ModerationDetailsDialog.tsx    |  1 -
 .../Messages/Conversation/ChatDisabled.tsx    |  1 -
 src/screens/Onboarding/StepProfile/index.tsx  |  1 -
 src/view/com/auth/server-input/index.tsx      |  2 -
 src/view/com/composer/GifAltText.tsx          |  1 -
 .../composer/photos/ImageAltTextDialog.tsx    |  2 -
 .../com/composer/videos/SubtitleDialog.tsx    |  1 -
 src/view/com/util/post-ctrls/RepostButton.tsx |  1 -
 .../Settings/DisableEmail2FADialog.tsx        |  2 -
 src/view/screens/Settings/ExportCarDialog.tsx |  2 -
 src/view/screens/Storybook/Dialogs.tsx        | 10 +--
 36 files changed, 58 insertions(+), 123 deletions(-)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 8762fcb25d..23fef5794d 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -21,7 +21,6 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Portal} from '#/components/Portal'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
@@ -93,53 +92,47 @@ export function Outer({
     [open, close],
   )
 
-  React.useEffect(() => {
-    return () => {
-      setDialogIsOpen(control.id, false)
-    }
-  }, [control.id, setDialogIsOpen])
+  // @TODO DIALOG REFACTOR - what is this? rm i think?
+  // React.useEffect(() => {
+  //   return () => {
+  //     setDialogIsOpen(control.id, false)
+  //   }
+  // }, [control.id, setDialogIsOpen])
 
   const context = React.useMemo(() => ({close}), [close])
 
   return (
     isOpen && (
       <Portal>
-        <FullWindowOverlay>
-          <View
-            // iOS
-            accessibilityViewIsModal
-            style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
-            <BottomSheet
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              ref={sheet}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-              handleStyle={{display: 'none'}}
-              onClose={onCloseAnimationComplete}>
-              <Context.Provider value={context}>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    t.atoms.bg,
-                    {
-                      borderTopLeftRadius: 40,
-                      borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
-                    },
-                  ]}
-                />
-                {children}
-              </Context.Provider>
-            </BottomSheet>
-          </View>
-        </FullWindowOverlay>
+        <View
+          // iOS
+          accessibilityViewIsModal
+          style={[a.absolute, a.inset_0]}
+          testID={testID}
+          onTouchMove={() => Keyboard.dismiss()}>
+          <BottomSheet
+            topInset={insets.top}
+            bottomInset={insets.bottom}
+            ref={sheet}
+            // handleIndicatorStyle={{backgroundColor: t.palette.primary_500}} // @TODO DIALOG REFACTOR need to add this to lib!
+            onClose={onCloseAnimationComplete}>
+            <Context.Provider value={context}>
+              <View
+                style={[
+                  a.absolute,
+                  a.inset_0,
+                  t.atoms.bg,
+                  {
+                    borderTopLeftRadius: 40,
+                    borderTopRightRadius: 40,
+                    height: Dimensions.get('window').height * 2,
+                  },
+                ]}
+              />
+              {children}
+            </Context.Provider>
+          </BottomSheet>
+        </View>
       </Portal>
     )
   )
diff --git a/src/components/LikesDialog.tsx b/src/components/LikesDialog.tsx
index 94a3f27e26..249c68f3c1 100644
--- a/src/components/LikesDialog.tsx
+++ b/src/components/LikesDialog.tsx
@@ -1,20 +1,19 @@
-import React, {useMemo, useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 interface LikesDialogProps {
   control: Dialog.DialogOuterProps['control']
@@ -24,8 +23,6 @@ interface LikesDialogProps {
 export function LikesDialog(props: LikesDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LikesDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index a0a21a50f9..b80fc918e0 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -4,7 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
-import {isNative} from 'platform/detection'
+import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -85,8 +85,6 @@ export function Outer({
 
   return (
     <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
         <Dialog.ScrollableInner label="Menu TODO">
diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx
index 1a523a839d..e25f48edf5 100644
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@@ -5,12 +5,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
 
+import {HITSLOP_10} from '#/lib/constants'
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,6 @@ export function NewskieDialog({
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <Dialog.ScrollableInner
           label={_(msg`New user info dialog`)}
           style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 8765cdee31..8aa111bf3d 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -41,8 +41,6 @@ export function Outer({
   return (
     <Dialog.Outer control={control} testID={testID}>
       <Context.Provider value={context}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
diff --git a/src/components/ReportDialog/index.tsx b/src/components/ReportDialog/index.tsx
index c87d32f9ec..a9f4a63b07 100644
--- a/src/components/ReportDialog/index.tsx
+++ b/src/components/ReportDialog/index.tsx
@@ -24,8 +24,6 @@ import {ReportDialogProps} from './types'
 export function ReportDialog(props: ReportDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ReportDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/StarterPack/QrCodeDialog.tsx b/src/components/StarterPack/QrCodeDialog.tsx
index b2af8ff73a..2feea0973a 100644
--- a/src/components/StarterPack/QrCodeDialog.tsx
+++ b/src/components/StarterPack/QrCodeDialog.tsx
@@ -149,7 +149,6 @@ export function QrCodeDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 9851b08567..494aceae1f 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -6,14 +6,14 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {shareUrl} from '#/lib/sharing'
+import {logEvent} from '#/lib/statsig/statsig'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {shareUrl} from 'lib/sharing'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isNative, isWeb} from 'platform/detection'
-import * as Toast from 'view/com/util/Toast'
+import {isNative, isWeb} from '#/platform/detection'
+import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
@@ -84,7 +84,6 @@ function ShareDialogInner({
 
   return (
     <>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
           <View style={[a.p_xl, a.align_center]}>
diff --git a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
index f7b0aba344..1d69e4f4a0 100644
--- a/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
+++ b/src/components/StarterPack/Wizard/WizardEditListDialog.tsx
@@ -7,9 +7,9 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -80,7 +80,6 @@ export function WizardEditListDialog({
       control={control}
       testID="newChatDialog"
       nativeOptions={{sheet: {snapPoints: ['95%']}}}>
-      <Dialog.Handle />
       <Dialog.InnerFlatList
         ref={listRef}
         data={getData()}
diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx
index 2c6a0b674c..2e4249609a 100644
--- a/src/components/TagMenu/index.tsx
+++ b/src/components/TagMenu/index.tsx
@@ -84,8 +84,6 @@ export function TagMenu({
       {children}
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
         <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
           {isPreferencesLoading ? (
             <View style={[a.w_full, a.align_center]}>
diff --git a/src/components/WhoCanReply.tsx b/src/components/WhoCanReply.tsx
index ab6ef8293c..2839943c97 100644
--- a/src/components/WhoCanReply.tsx
+++ b/src/components/WhoCanReply.tsx
@@ -170,7 +170,6 @@ function WhoCanReplyDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
         style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
diff --git a/src/components/dialogs/BirthDateSettings.tsx b/src/components/dialogs/BirthDateSettings.tsx
index 08608f9d88..72ce9690e9 100644
--- a/src/components/dialogs/BirthDateSettings.tsx
+++ b/src/components/dialogs/BirthDateSettings.tsx
@@ -30,8 +30,6 @@ export function BirthDateSettingsDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
         <View style={[a.gap_sm, a.pb_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>
diff --git a/src/components/dialogs/Embed.tsx b/src/components/dialogs/Embed.tsx
index ca75b01390..7aa2a4fc1e 100644
--- a/src/components/dialogs/Embed.tsx
+++ b/src/components/dialogs/Embed.tsx
@@ -27,7 +27,6 @@ type EmbedDialogProps = {
 let EmbedDialog = ({control, ...rest}: EmbedDialogProps): React.ReactNode => {
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <EmbedDialogInner {...rest} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/EmbedConsent.tsx b/src/components/dialogs/EmbedConsent.tsx
index 765b8adc7e..3aa0f0b404 100644
--- a/src/components/dialogs/EmbedConsent.tsx
+++ b/src/components/dialogs/EmbedConsent.tsx
@@ -49,8 +49,6 @@ export function EmbedConsentDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}
         style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index 1afc588dad..a06491c15f 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -61,7 +61,6 @@ export function GifSelectDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
       <ErrorBoundary renderError={renderErrorBoundary}>
         <GifList control={control} onSelectGif={onSelectGif} />
       </ErrorBoundary>
diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx
index 81a6141038..daa18f94e7 100644
--- a/src/components/dialogs/MutedWords.tsx
+++ b/src/components/dialogs/MutedWords.tsx
@@ -39,7 +39,6 @@ export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <MutedWordsInner />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/PostInteractionSettingsDialog.tsx b/src/components/dialogs/PostInteractionSettingsDialog.tsx
index 47eefae6f9..93be838542 100644
--- a/src/components/dialogs/PostInteractionSettingsDialog.tsx
+++ b/src/components/dialogs/PostInteractionSettingsDialog.tsx
@@ -61,7 +61,6 @@ export function PostInteractionSettingsControlledDialog({
   const {_} = useLingui()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Edit post interaction settings`)}
         style={[{maxWidth: 500}, a.w_full]}>
@@ -96,7 +95,6 @@ export function PostInteractionSettingsDialog(
 ) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <PostInteractionSettingsDialogControlledInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/Signin.tsx b/src/components/dialogs/Signin.tsx
index b9c939e94b..d24f6af644 100644
--- a/src/components/dialogs/Signin.tsx
+++ b/src/components/dialogs/Signin.tsx
@@ -18,7 +18,6 @@ export function SigninDialog() {
   const {signinDialogControl: control} = useGlobalDialogsControlContext()
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <SigninDialogInner control={control} />
     </Dialog.Outer>
   )
diff --git a/src/components/dialogs/SwitchAccount.tsx b/src/components/dialogs/SwitchAccount.tsx
index 0bd4bcb8cb..809ed1e3f6 100644
--- a/src/components/dialogs/SwitchAccount.tsx
+++ b/src/components/dialogs/SwitchAccount.tsx
@@ -42,8 +42,6 @@ export function SwitchAccountDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
         <View style={[a.gap_lg]}>
           <Text style={[a.text_2xl, a.font_bold]}>
diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx
index f160c87743..97028b6e54 100644
--- a/src/components/dialogs/nuxs/NeueTypography.tsx
+++ b/src/components/dialogs/nuxs/NeueTypography.tsx
@@ -43,8 +43,6 @@ export function NeueTypography() {
 
   return (
     <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
         <View style={[a.gap_xl]}>
           <View style={[a.gap_md]}>
diff --git a/src/components/dms/MessagesNUX.tsx b/src/components/dms/MessagesNUX.tsx
index 5c21ee05be..723696a04d 100644
--- a/src/components/dms/MessagesNUX.tsx
+++ b/src/components/dms/MessagesNUX.tsx
@@ -39,7 +39,6 @@ export function MessagesNUX() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <DialogInner chatDeclation={profile.associated?.chat} />
     </Dialog.Outer>
   )
diff --git a/src/components/dms/ReportDialog.tsx b/src/components/dms/ReportDialog.tsx
index 5493a1c87f..28b5e86202 100644
--- a/src/components/dms/ReportDialog.tsx
+++ b/src/components/dms/ReportDialog.tsx
@@ -44,7 +44,6 @@ let ReportDialog = ({
     <Dialog.Outer
       control={control}
       nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-      <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx
index 1c78d2abbb..7546aec484 100644
--- a/src/components/forms/DateField/index.tsx
+++ b/src/components/forms/DateField/index.tsx
@@ -57,7 +57,6 @@ export function DateField({
         accessibilityHint={accessibilityHint}
       />
       <Dialog.Outer control={control} testID={testID}>
-        <Dialog.Handle />
         <Dialog.Inner label={label}>
           <View style={a.gap_lg}>
             <View style={[a.relative, a.w_full, a.align_center]}>
diff --git a/src/components/intents/VerifyEmailIntentDialog.tsx b/src/components/intents/VerifyEmailIntentDialog.tsx
index e8c63af82f..9f3808020a 100644
--- a/src/components/intents/VerifyEmailIntentDialog.tsx
+++ b/src/components/intents/VerifyEmailIntentDialog.tsx
@@ -3,7 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAgent, useSession} from 'state/session'
+import {useAgent, useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -17,7 +17,6 @@ export function VerifyEmailIntentDialog() {
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
       <Inner control={control} />
     </Dialog.Outer>
   )
diff --git a/src/components/moderation/LabelsOnMeDialog.tsx b/src/components/moderation/LabelsOnMeDialog.tsx
index e63cea93b2..389c722c87 100644
--- a/src/components/moderation/LabelsOnMeDialog.tsx
+++ b/src/components/moderation/LabelsOnMeDialog.tsx
@@ -31,8 +31,6 @@ export interface LabelsOnMeDialogProps {
 export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <LabelsOnMeDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/components/moderation/ModerationDetailsDialog.tsx b/src/components/moderation/ModerationDetailsDialog.tsx
index 2259178538..1198e8b921 100644
--- a/src/components/moderation/ModerationDetailsDialog.tsx
+++ b/src/components/moderation/ModerationDetailsDialog.tsx
@@ -26,7 +26,6 @@ export interface ModerationDetailsDialogProps {
 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
       <ModerationDetailsDialogInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/screens/Messages/Conversation/ChatDisabled.tsx b/src/screens/Messages/Conversation/ChatDisabled.tsx
index c768d2504b..efe8545bf1 100644
--- a/src/screens/Messages/Conversation/ChatDisabled.tsx
+++ b/src/screens/Messages/Conversation/ChatDisabled.tsx
@@ -54,7 +54,6 @@ function AppealDialog() {
       </Button>
 
       <Dialog.Outer control={control}>
-        <Dialog.Handle />
         <DialogInner />
       </Dialog.Outer>
     </>
diff --git a/src/screens/Onboarding/StepProfile/index.tsx b/src/screens/Onboarding/StepProfile/index.tsx
index 663418f220..c6a39ab45e 100644
--- a/src/screens/Onboarding/StepProfile/index.tsx
+++ b/src/screens/Onboarding/StepProfile/index.tsx
@@ -286,7 +286,6 @@ export function StepProfile() {
       </View>
 
       <Dialog.Outer control={creatorControl}>
-        <Dialog.Handle />
         <Dialog.Inner
           label="Avatar creator"
           style={[
diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
index fb69e1d9c7..4e36688aec 100644
--- a/src/view/com/auth/server-input/index.tsx
+++ b/src/view/com/auth/server-input/index.tsx
@@ -70,8 +70,6 @@ export function ServerInputDialog({
       control={control}
       nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx
index a05607c76c..53db2da941 100644
--- a/src/view/com/composer/GifAltText.tsx
+++ b/src/view/com/composer/GifAltText.tsx
@@ -99,7 +99,6 @@ export function GifAltText({
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-        <Dialog.Handle />
         <AltTextInner
           onSubmit={onPressSubmit}
           link={link}
diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx
index 123e1066a5..fc9c6c4931 100644
--- a/src/view/com/composer/photos/ImageAltTextDialog.tsx
+++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx
@@ -22,8 +22,6 @@ type Props = {
 export const ImageAltTextDialog = (props: Props): React.ReactNode => {
   return (
     <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
       <ImageAltTextInner {...props} />
     </Dialog.Outer>
   )
diff --git a/src/view/com/composer/videos/SubtitleDialog.tsx b/src/view/com/composer/videos/SubtitleDialog.tsx
index c07fdfc562..5926244908 100644
--- a/src/view/com/composer/videos/SubtitleDialog.tsx
+++ b/src/view/com/composer/videos/SubtitleDialog.tsx
@@ -59,7 +59,6 @@ export function SubtitleDialogBtn(props: Props) {
       <Dialog.Outer
         control={control}
         nativeOptions={isAndroid ? {sheet: {snapPoints: ['60%']}} : {}}>
-        <Dialog.Handle />
         <SubtitleDialogInner {...props} />
       </Dialog.Outer>
     </View>
diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx
index 0ecdf25b93..8a41ec88ac 100644
--- a/src/view/com/util/post-ctrls/RepostButton.tsx
+++ b/src/view/com/util/post-ctrls/RepostButton.tsx
@@ -87,7 +87,6 @@ let RepostButton = ({
         ) : undefined}
       </Button>
       <Dialog.Outer control={dialogControl}>
-        <Dialog.Handle />
         <Dialog.Inner label={_(msg`Repost or quote post`)}>
           <View style={a.gap_xl}>
             <View style={a.gap_xs}>
diff --git a/src/view/screens/Settings/DisableEmail2FADialog.tsx b/src/view/screens/Settings/DisableEmail2FADialog.tsx
index a27cff9a3e..bbc6902543 100644
--- a/src/view/screens/Settings/DisableEmail2FADialog.tsx
+++ b/src/view/screens/Settings/DisableEmail2FADialog.tsx
@@ -78,8 +78,6 @@ export function DisableEmail2FADialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx
index a6ddb38204..3d21d7cb5e 100644
--- a/src/view/screens/Settings/ExportCarDialog.tsx
+++ b/src/view/screens/Settings/ExportCarDialog.tsx
@@ -52,8 +52,6 @@ export function ExportCarDialog({
 
   return (
     <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
         accessibilityLabelledBy="dialog-title">
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index 3a9f67de81..bb13831046 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import {View} from 'react-native'
 import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {NavigationProp} from 'lib/routes/types'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -179,8 +179,6 @@ export function Dialogs() {
       </Prompt.Outer>
 
       <Dialog.Outer control={basic}>
-        <Dialog.Handle />
-
         <Dialog.Inner label="test">
           <H3 nativeID="dialog-title">Dialog</H3>
           <P nativeID="dialog-description">A basic dialog</P>
@@ -190,8 +188,6 @@ export function Dialogs() {
       <Dialog.Outer
         control={scrollable}
         nativeOptions={{sheet: {snapPoints: ['100%']}}}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -230,8 +226,6 @@ export function Dialogs() {
       </Dialog.Outer>
 
       <Dialog.Outer control={testDialog}>
-        <Dialog.Handle />
-
         <Dialog.ScrollableInner
           accessibilityDescribedBy="dialog-description"
           accessibilityLabelledBy="dialog-title">
@@ -356,8 +350,6 @@ export function Dialogs() {
 
       {shouldRenderUnmountTest && (
         <Dialog.Outer control={unmountTestDialog}>
-          <Dialog.Handle />
-
           <Dialog.Inner label="test">
             <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
             <P nativeID="dialog-description">Will unmount in about 5 seconds</P>

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

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

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 23fef5794d..2a59ac7f67 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -214,28 +214,6 @@ export const InnerFlatList = React.forwardRef<
   )
 })
 
-export function Handle() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 40}]}>
-      <View
-        style={[
-          a.rounded_sm,
-          {
-            top: a.pt_lg.paddingTop,
-            width: 35,
-            height: 4,
-            alignSelf: 'center',
-            backgroundColor: t.palette.contrast_900,
-            opacity: 0.5,
-          },
-        ]}
-      />
-    </View>
-  )
-}
-
 export function Close() {
   return null
 }

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

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

diff --git a/src/components/dialogs/GifSelect.ios.tsx b/src/components/dialogs/GifSelect.ios.tsx
index 2f867e8657..abe5aa3cc3 100644
--- a/src/components/dialogs/GifSelect.ios.tsx
+++ b/src/components/dialogs/GifSelect.ios.tsx
@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonText} from '../Button'
-import {Handle} from '../Dialog'
 import {useThrottledValue} from '../hooks/useThrottledValue'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
@@ -70,7 +69,6 @@ export function GifSelectDialog({
       aria-modal
       accessibilityViewIsModal>
       <View style={[a.flex_1, t.atoms.bg]}>
-        <Handle />
         <ErrorBoundary renderError={renderErrorBoundary}>
           <GifList onSelectGif={onSelectGif} close={close} />
         </ErrorBoundary>

From c86b4ed693ab29b3c764d431dbaa26132c2dbf17 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Wed, 2 Oct 2024 23:51:14 +0300
Subject: [PATCH 6/6] rm handle on web

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

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)