ComposeModal: add share to group toggle

app/soapbox/features/ui/components/modals/compose-modal.tsx

@@ -2,11 +2,12 @@ import clsx from 'clsx';
 import React, { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { cancelReplyCompose, uploadCompose } from 'soapbox/actions/compose';
+import { cancelReplyCompose, setGroupTimelineVisible, uploadCompose } from 'soapbox/actions/compose';
 import { openModal, closeModal } from 'soapbox/actions/modals';
 import { checkComposeContent } from 'soapbox/components/modal-root';
-import { Modal } from 'soapbox/components/ui';
-import { useAppDispatch, useCompose, useDraggedFiles } from 'soapbox/hooks';
+import { HStack, Modal, Text, Toggle } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles } from 'soapbox/hooks';
+import { useGroup } from 'soapbox/hooks/api';
 
 import ComposeForm from '../../../compose/components/compose-form';
 
@@ -82,9 +83,49 @@ const ComposeModal: React.FC<IComposeModal> = ({ onClose, composeId = 'compose-m
         'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
       })}
     >
-      <ComposeForm id={composeId} />
+      <ComposeForm
+        id={composeId}
+        extra={<ComposeFormGroupToggle composeId={composeId} groupId={groupId} />}
+      />
     </Modal>
   );
 };
 
+interface IComposeFormGroupToggle {
+  composeId: string
+  groupId: string | null
+}
+
+const ComposeFormGroupToggle: React.FC<IComposeFormGroupToggle> = ({ composeId, groupId }) => {
+  const dispatch = useAppDispatch();
+  const { group } = useGroup(groupId || '', false);
+
+  const groupTimelineVisible = useAppSelector((state) => !!state.compose.get(composeId)?.group_timeline_visible);
+
+  const handleToggleChange = () => {
+    dispatch(setGroupTimelineVisible(composeId, !groupTimelineVisible));
+  };
+
+  const labelId = `group-timeline-visible+${composeId}`;
+
+  if (!group) return null;
+  if (group.locked) return null;
+
+  return (
+    <HStack alignItems='center' space={4}>
+      <label className='ml-auto cursor-pointer' htmlFor={labelId}>
+        <Text theme='muted'>
+          <FormattedMessage id='compose_group.share_to_followers' defaultMessage='Share with my followers' />
+        </Text>
+      </label>
+      <Toggle
+        id={labelId}
+        checked={groupTimelineVisible}
+        onChange={handleToggleChange}
+        size='sm'
+      />
+    </HStack>
+  );
+};
+
 export default ComposeModal;