fix(ui): report category dropdown uses folds menu, not native select (N56)

Extract a shared ReportCategorySelect: folds Button trigger + PopOut +
FocusTrap + Menu + MenuItem (escape + arrow-key nav, like OrderButton),
replacing the OS-styled native <select> in both ReportRoomModal and
ReportUserModal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/ReportUserModal.tsx

@@ -19,6 +19,7 @@ import {
 } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { ReportCategorySelect } from './ReportCategorySelect';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { useModalStyle } from '../../hooks/useModalStyle';
@@ -137,31 +138,12 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                 <Text as="label" htmlFor="report-user-category" size="L400">
                   Category
                 </Text>
-                <Box
-                  as="select"
+                <ReportCategorySelect
                   id="report-user-category"
-                  aria-label="Report category"
                   value={category}
-                  onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                    setCategory(e.target.value as ReportCategory)
-                  }
-                  style={{
-                    padding: `${config.space.S200} ${config.space.S300}`,
-                    borderRadius: config.radii.R300,
-                    border: `1px solid ${color.Surface.ContainerLine}`,
-                    background: color.Surface.Container,
-                    color: color.Surface.OnContainer,
-                    fontSize: 'inherit',
-                    fontFamily: 'inherit',
-                    width: '100%',
-                  }}
-                >
-                  {(Object.keys(CATEGORY_LABELS) as ReportCategory[]).map((key) => (
-                    <option key={key} value={key}>
-                      {CATEGORY_LABELS[key]}
-                    </option>
-                  ))}
-                </Box>
+                  labels={CATEGORY_LABELS}
+                  onChange={(v) => setCategory(v as ReportCategory)}
+                />
               </Box>
 
               <Box direction="Column" gap="100">