Add Group context to reply modal

app/soapbox/features/compose/components/compose-form.tsx

@@ -31,6 +31,7 @@ import MarkdownButton from './markdown-button';
 import PollButton from './poll-button';
 import PollForm from './polls/poll-form';
 import PrivacyDropdown from './privacy-dropdown';
+import ReplyGroupIndicator from './reply-group-indicator';
 import ReplyMentions from './reply-mentions';
 import ScheduleButton from './schedule-button';
 import SpoilerButton from './spoiler-button';
@@ -295,6 +296,8 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
       <WarningContainer composeId={id} />
 
+      {!shouldCondense && !event && !group && groupId && <ReplyGroupIndicator composeId={id} />}
+
       {!shouldCondense && !event && !group && <ReplyIndicatorContainer composeId={id} />}
 
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}

app/soapbox/features/compose/components/reply-group-indicator.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Link from 'soapbox/components/link';
+import { Text } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { Group } from 'soapbox/schemas';
+import { makeGetStatus } from 'soapbox/selectors';
+
+interface IReplyGroupIndicator {
+  composeId: string
+}
+
+const ReplyGroupIndicator = (props: IReplyGroupIndicator) => {
+  const { composeId } = props;
+
+  const getStatus = useCallback(makeGetStatus(), []);
+
+  const status = useAppSelector((state) => getStatus(state, { id: state.compose.get(composeId)?.in_reply_to! }));
+  const group = status?.group as Group;
+
+  if (!group) {
+    return null;
+  }
+
+  return (
+    <Text theme='muted' size='sm'>
+      <FormattedMessage
+        id='compose.reply_group_indicator.message'
+        defaultMessage='Posting to {groupLink}'
+        values={{
+          groupLink: <Link
+            to={`/group/${group.slug}`}
+            dangerouslySetInnerHTML={{ __html: group.display_name_html }}
+          />,
+        }}
+      />
+    </Text>
+  );
+};
+
+export default ReplyGroupIndicator;

app/soapbox/locales/en.json

@@ -388,6 +388,7 @@
   "compose.character_counter.title": "Used {chars} out of {maxChars} {maxChars, plural, one {character} other {characters}}",
   "compose.edit_success": "Your post was edited",
   "compose.invalid_schedule": "You must schedule a post at least 5 minutes out.",
+  "compose.reply_group_indicator.message": "Posting to {groupLink}",
   "compose.submit_success": "Your post was sent!",
   "compose_event.create": "Create",
   "compose_event.edit_success": "Your event was edited",