Dialog solution

src/view/screens/Storybook/Dialogs.tsx

@@ -7,11 +7,14 @@ import {H3, P} from '#/components/Typography'
 import * as Dialog from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {useOpenGlobalDialog} from '#/components/dialogs'
+import {ReportDialog} from '#/components/dialogs/ReportDialog'
 
 export function Dialogs() {
   const control = Dialog.useDialogControl()
   const prompt = Prompt.usePromptControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const openDialog = useOpenGlobalDialog()
 
   return (
     <View style={[a.gap_md]}>
@@ -36,6 +39,19 @@ export function Dialogs() {
         Open prompt
       </Button>
 
+      <View style={[a.flex_row, a.gap_md]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="small"
+          onPress={() => {
+            openDialog(ReportDialog, {type: 'user', did: ''})
+          }}
+          label="Open prompt">
+          Open dialogs
+        </Button>
+      </View>
+
       <Prompt.Outer control={prompt}>
         <Prompt.Title>This is a prompt</Prompt.Title>
         <Prompt.Description>

src/view/screens/Storybook/index.tsx

@@ -66,6 +66,7 @@ export function Storybook() {
             </Button>
           </View>
 
+          <Dialogs />
           <ThemeProvider theme="light">
             <Theming />
           </ThemeProvider>
@@ -83,7 +84,6 @@ export function Storybook() {
           <Icons />
           <Links />
           <Forms />
-          <Dialogs />
           <Breakpoints />
         </View>
       </CenteredView>