Report chat message for user card on chat page

resources/js/chat/message-group.tsx

···
 
 import UserAvatar from 'components/user-avatar';
 import UserLink from 'components/user-link';
+import Reportable from 'interfaces/reportable';
+import { last } from 'lodash';
 import { observer } from 'mobx-react';
 import Message from 'models/chat/message';
 import * as moment from 'moment';
···
 
 @observer
 export default class MessageGroup extends React.Component<Props> {
+  private get reportable() {
+    const lastMessage = last(this.props.messages);
+
+    if (lastMessage == null) {
+      throw new Error('invalid reportable access on empty message group');
+    }
+
+    if (typeof lastMessage.messageId !== 'number') {
+      return undefined;
+    }
+
+    return {
+      id: lastMessage.messageId.toString(),
+      type: 'message',
+    } satisfies Reportable;
+  }
+
   render(): React.ReactNode {
     const messages = this.props.messages;
 
···
     return (
       <div className={classWithModifiers('chat-message-group', { own: sender.id === core.currentUser?.id })}>
         <div className='chat-message-group__sender'>
-          <UserLink tooltipPosition='top center' user={sender}>
+          <UserLink
+            reportable={this.reportable}
+            tooltipPosition='top center'
+            user={sender}
+          >
             <div className='chat-message-group__avatar'>
               <UserAvatar modifiers='full-circle' user={{ avatar_url: sender.avatarUrl }} />
             </div>

resources/js/components/report-form.tsx

···
 // See the LICENCE file in the repository root for full licence text.
 
 import SelectOptions from 'components/select-options';
+import { ReportableType } from 'interfaces/reportable';
 import { route } from 'laroute';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
···
   />, root);
 }
 
-export const reportableTypeToGroupKey = {
+
+type GroupKey =
+  | 'beatmapset'
+  | 'beatmapset_discussion_post'
+  | 'comment'
+  | 'forum_post'
+  | 'message'
+  | 'scores'
+  | 'user';
+export const reportableTypeToGroupKey: Record<ReportableType, GroupKey> = {
   beatmapset: 'beatmapset',
   beatmapset_discussion_post: 'beatmapset_discussion_post',
   comment: 'comment',
   forum_post: 'forum_post',
+  message: 'message',
   score_best_fruits: 'scores',
   score_best_mania: 'scores',
   score_best_osu: 'scores',
···
   solo_score: 'scores',
   user: 'user',
 } as const;
-export type ReportableType = keyof typeof reportableTypeToGroupKey;
-type GroupKey = typeof reportableTypeToGroupKey[ReportableType];
 
 // intended to be in display order, not alphabetical order.
 /* eslint-disable sort-keys */
···
 } as const;
 /* eslint-enable sort-keys */
 
-const availableOptionsByGroupKey: Partial<Record<GroupKey, (keyof typeof availableOptions)[]>> = {
+const reasons = {
   beatmapset: ['UnwantedContent', 'Other'],
-  beatmapset_discussion_post: ['Insults', 'Spam', 'UnwantedContent', 'Nonsense', 'Other'],
-  comment: ['Insults', 'Spam', 'UnwantedContent', 'Nonsense', 'Other'],
-  forum_post: ['Insults', 'Spam', 'UnwantedContent', 'Nonsense', 'Other'],
-  scores: ['Cheating', 'MultipleAccounts', 'Other'],
+  post: ['Insults', 'Spam', 'UnwantedContent', 'Nonsense', 'Other'],
+  score: ['Cheating', 'MultipleAccounts', 'Other'],
+} as const;
+
+const availableOptionsByGroupKey: Partial<Record<GroupKey, readonly (keyof typeof availableOptions)[]>> = {
+  beatmapset: reasons.beatmapset,
+  beatmapset_discussion_post: reasons.post,
+  comment: reasons.post,
+  forum_post: reasons.post,
+  message: reasons.post,
+  scores: reasons.score,
 };
 
 interface Props {
···
   private timeout: number | undefined;
 
   private get canSubmit() {
-    return !this.disabled && this.comments.length > 0;
+    return !this.disabled && (this.comments.length > 0 || this.props.reportableType === 'message');
   }
 
   private get groupKey() {

resources/js/components/report-reportable.tsx

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import { ReportableType } from 'interfaces/reportable';
 import * as React from 'react';
 import { trans } from 'utils/lang';
-import { ReportableType, reportableTypeToGroupKey, showReportForm } from './report-form';
+import { reportableTypeToGroupKey, showReportForm } from './report-form';
 
 type ReactButton = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 type ReactButtonWithoutRef = Pick<ReactButton, Exclude<keyof ReactButton, 'ref'>>;

resources/js/components/user-card-tooltip.tsx

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import Reportable from 'interfaces/reportable';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import * as _ from 'lodash';
···
   card.classList.remove('js-react--user-card');
   card.classList.add('js-react--user-card-tooltip');
   card.dataset.lookup = userId;
-  if (element.dataset.tooltipPosition != null) {
-    card.dataset.tooltipPosition = element.dataset.tooltipPosition;
+  for (const [key, value] of Object.entries(element.dataset)) {
+    card.dataset[key] = value;
   }
 
   $(element).qtip(createTooltipOptions(card));
···
   state: Readonly<State> = {};
   private readonly contextActiveKeyDidChange = contextActiveKeyDidChange.bind(this);
 
+  private get reportable() {
+    const dataString = this.props.container.dataset.reportable;
+
+    return dataString == null
+      ? undefined
+      : JSON.parse(dataString) as Reportable;
+  }
+
   componentDidMount() {
     this.getUser().then((user) => {
       this.setState({ user });
···
       <TooltipContext.Provider value={this.props.container}>
         <ContainerContext.Provider value={{ activeKeyDidChange: this.activeKeyDidChange }}>
           <KeyContext.Provider value={this.props.lookup}>
-            <UserCard activated={activated} user={this.state.user} />
+            <UserCard
+              activated={activated}
+              reportable={this.reportable}
+              user={this.state.user}
+            />
           </KeyContext.Provider>
         </ContainerContext.Provider>
       </TooltipContext.Provider>

resources/js/components/user-card.tsx

···
 
 import BlockButton from 'components/block-button';
 import FriendButton from 'components/friend-button';
+import Reportable from 'interfaces/reportable';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
 import * as _ from 'lodash';
···
   activated: boolean;
   mode: ViewMode;
   modifiers?: Modifiers;
+  reportable?: Reportable;
   user?: UserJson | null;
 }
 
···
           className='simple-menu__item'
           icon
           onFormOpen={dismiss}
-          reportableId={this.user.id.toString()}
-          reportableType='user'
+          reportableId={this.props.reportable?.id ?? this.user.id.toString()}
+          reportableType={this.props.reportable?.type ?? 'user'}
           user={this.user}
         />
       </div>

resources/js/components/user-link.tsx

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
+import Reportable from 'interfaces/reportable';
 import Ruleset from 'interfaces/ruleset';
 import UserJson from 'interfaces/user-json';
 import { route } from 'laroute';
···
   children?: React.ReactNode;
   className?: string;
   mode?: Ruleset;
+  reportable?: Reportable;
   tooltipPosition?: string;
   user: Partial<Pick<UserJson, 'id' | 'username'>>;
 }
···
     return (
       <a
         className={className}
+        data-reportable={JSON.stringify(this.props.reportable)}
         data-tooltip-position={this.props.tooltipPosition}
         data-user-id={this.props.user.id}
         href={href}

resources/js/interfaces/reportable.ts

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+export type ReportableType =
+  | 'beatmapset'
+  | 'beatmapset_discussion_post'
+  | 'comment'
+  | 'forum_post'
+  | 'message'
+  | 'score_best_fruits'
+  | 'score_best_mania'
+  | 'score_best_osu'
+  | 'score_best_taiko'
+  | 'solo_score'
+  | 'user';
+
+export default interface Reportable {
+  id: string;
+  type: ReportableType;
+}

resources/lang/en/report.php

···
         'title' => 'Report :username\'s post?',
     ],
 
+    'message' => [
+        'button' => 'Report Message',
+        'title' => 'Report :username\'s message?',
+    ],
+
     'scores' => [
         'button' => 'Report Score',
         'title' => 'Report :username\'s score?',