Dialogs side quest

src/components/dialogs/ReportDialog/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
+import {Context} from '#/components/dialogs'
+
+export type DialogParams =
+  | {
+      type: 'post'
+      uri: string
+      cid: string
+    }
+  | {
+      type: 'user'
+      did: string
+    }
+
+export function useReportDialogControl() {
+  return React.useContext(Context).report
+}
+
+export function ReportDialog() {
+  const control = useReportDialogControl()
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label="Report dialog">
+        <Inner />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function Inner() {
+  const ctx = Dialog.useDialogContext<DialogParams>()
+  return <Text>hello {JSON.stringify(ctx.params)}</Text>
+}

src/components/dialogs/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import * as Dialog from '#/components/Dialog'
+
+import {DialogParams as ReportDialogParams} from '#/components/dialogs/ReportDialog'
+
+/**
+ * Global dialog context. Name each dialog and specify its parameters.
+ */
+type Context = {
+  report: Dialog.DialogControlWithRefProps<ReportDialogParams>
+}
+
+/**
+ * Global dialog context.
+ */
+export const Context = React.createContext<Context>({} as Context)
+
+/**
+ * Global dialog context provider.
+ */
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const report = Dialog.useDialogControl<ReportDialogParams>()
+  const ctx = React.useMemo<Context>(
+    () => ({
+      report,
+    }),
+    [report],
+  )
+
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}