diff --git a/src/components/moderation/ReportDialog/index.tsx b/src/components/moderation/ReportDialog/index.tsx
index ebfbe0dcd3..14b58d9fd2 100644
--- a/src/components/moderation/ReportDialog/index.tsx
+++ b/src/components/moderation/ReportDialog/index.tsx
@@ -35,7 +35,11 @@ import {useCopyForSubject} from './copy'
import {initialState, reducer} from './state'
import {type ReportDialogProps, type ReportSubject} from './types'
import {parseReportSubject} from './utils/parseReportSubject'
-import {type ReportOption, useReportOptions} from './utils/useReportOptions'
+import {
+ type ReportOption,
+ TopLevelReportOption,
+ useReportOptions,
+} from './utils/useReportOptions'
export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
@@ -95,7 +99,7 @@ function Inner(props: ReportDialogProps) {
} = useMyLabelersQuery({excludeNonConfigurableLabelers: true})
const isLoading = useDelayedLoading(500, isLabelerLoading)
const copy = useCopyForSubject(props.subject)
- const reportOptions = useReportOptions()
+ const {reasons, sortedReasons, getTopLevelReason} = useReportOptions()
const [state, dispatch] = React.useReducer(reducer, initialState)
/**
@@ -237,32 +241,32 @@ function Inner(props: ReportDialogProps) {
) : (
<>
- {state.selectedOption ? (
+ {state.selectedTopLevelOption ? (
-
+
) : (
- {reportOptions[props.subject.type].map(o => (
- (
+ {
- dispatch({type: 'selectOption', option: o})
+ dispatch({type: 'selectTopLevelOption', option: o})
}}
/>
))}
@@ -307,6 +311,82 @@ function Inner(props: ReportDialogProps) {
)}
+
+
+ {state.selectedOption ? (
+
+
+
+
+
+
+ ) : state.selectedTopLevelOption ? (
+
+ {getTopLevelReason(state.selectedTopLevelOption.key).options.map(
+ o => (
+ {
+ dispatch({type: 'selectOption', option: o})
+ }}
+ />
+ ),
+ )}
+
+ {['post', 'account'].includes(props.subject.type) && (
+
+ {({hovered, pressed}) => (
+
+
+
+ Need to report a copyright violation, legal request,
+ or regulatory compliance issue?
+
+
+
+
+ )}
+
+ )}
+
+ ) : null}
+
+
void
+ option: TopLevelReportOption
+ onSelect?: (option: TopLevelReportOption) => void
}) {
const t = useTheme()
const {_} = useLingui()
@@ -584,7 +664,7 @@ function OptionCard({
}, [onSelect, option])
return (