diff --git a/app/soapbox/features/ui/components/modals/compose-modal.tsx b/app/soapbox/features/ui/components/modals/compose-modal.tsx index f29df9042..358a6d648 100644 --- a/app/soapbox/features/ui/components/modals/compose-modal.tsx +++ b/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 = ({ onClose, composeId = 'compose-m 'ring-2 ring-offset-2 ring-primary-600': isDraggedOver, })} > - + } + /> ); }; +interface IComposeFormGroupToggle { + composeId: string + groupId: string | null +} + +const ComposeFormGroupToggle: React.FC = ({ 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 ( + + + + + ); +}; + export default ComposeModal;