Dialogs side quest

src/view/com/util/forms/PostDropdownBtn.tsx

@@ -31,6 +31,7 @@ import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {isWeb} from '#/platform/detection'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {useReportDialogControl} from '#/components/dialogs/ReportDialog'
 
 let PostDropdownBtn = ({
   testID,
@@ -63,6 +64,7 @@ let PostDropdownBtn = ({
   const hiddenPosts = useHiddenPosts()
   const {hidePost} = useHiddenPostsApi()
   const openLink = useOpenLink()
+  const reportDialogControl = useReportDialogControl()
 
   const rootUri = record.reply?.root?.uri || postUri
   const isThreadMuted = mutedThreads.includes(rootUri)
@@ -209,11 +211,12 @@ let PostDropdownBtn = ({
       hasSession && {
         label: _(msg`Report post`),
         onPress() {
-          openModal({
-            name: 'report',
-            uri: postUri,
-            cid: postCid,
-          })
+          reportDialogControl.open({type: 'post', uri: postUri, cid: postCid})
+          // openModal({
+          //   name: 'report',
+          //   uri: postUri,
+          //   cid: postCid,
+          // })
         },
         testID: 'postDropdownReportBtn',
         icon: {

src/view/shell/index.tsx

@@ -29,6 +29,7 @@ import {useSession} from '#/state/session'
 import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
 import {Outlet as PortalOutlet} from '#/components/Portal'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -94,8 +95,10 @@ function ShellInner() {
       </View>
       <Composer winHeight={winDim.height} />
       <ModalsContainer />
-      <PortalOutlet />
       <Lightbox />
+
+      <ReportDialog />
+      <PortalOutlet />
     </>
   )
 }

src/view/shell/index.web.tsx

@@ -16,6 +16,7 @@ import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {Outlet as PortalOutlet} from '#/components/Portal'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -40,8 +41,11 @@ function ShellInner() {
       </ErrorBoundary>
       <Composer winHeight={0} />
       <ModalsContainer />
-      <PortalOutlet />
       <Lightbox />
+
+      <ReportDialog />
+      <PortalOutlet />
+
       {!isDesktop && isDrawerOpen && (
         <TouchableOpacity
           onPress={() => setDrawerOpen(false)}