diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js --- a/web/chat/thread-menu.react.js +++ b/web/chat/thread-menu.react.js @@ -27,6 +27,7 @@ import MenuItem from '../components/menu-item.react'; import Menu from '../components/menu.react'; import SidebarListModal from '../modals/chat/sidebar-list-modal.react'; +import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react'; import { useModalContext } from '../modals/modal-provider.react'; import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react'; import ThreadMembersModal from '../modals/threads/members/members-modal.react'; @@ -197,16 +198,28 @@ ); }, [onClickLeaveThread, threadInfo]); + const onClickPromoteSidebarToThread = React.useCallback( + () => + pushModal( + <SidebarPromoteModal + threadInfo={threadInfo} + onClose={popModal} + onConfirm={onPromoteSidebar} + />, + ), + [pushModal, threadInfo, popModal, onPromoteSidebar], + ); + const promoteSidebar = React.useMemo(() => { return ( <MenuItem key="promote" text="Promote Thread" icon="message-square-lines" - onClick={onPromoteSidebar} + onClick={onClickPromoteSidebarToThread} /> ); - }, [onPromoteSidebar]); + }, [onClickPromoteSidebarToThread]); const menuItems = React.useMemo(() => { const notificationsItem = ( diff --git a/web/modals/chat/sidebar-promote-modal.css b/web/modals/chat/sidebar-promote-modal.css new file mode 100644 --- /dev/null +++ b/web/modals/chat/sidebar-promote-modal.css @@ -0,0 +1,16 @@ +div.modal_body { + padding: 20px; + color: var(--fg); + background-color: var(--modal-bg); + border-radius: 16px; + flex: 1; + display: flex; + flex-direction: column; +} + +div.buttonContainer { + padding-top: 32px; + display: flex; + gap: 24px; + justify-content: flex-end; +} diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js new file mode 100644 --- /dev/null +++ b/web/modals/chat/sidebar-promote-modal.react.js @@ -0,0 +1,49 @@ +// @flow + +import * as React from 'react'; + +import type { ThreadInfo } from 'lib/types/thread-types'; + +import Button from '../../components/button.react'; +import Modal from '../modal.react'; +import css from './sidebar-promote-modal.css'; + +type Props = { + +onClose: () => void, + +onConfirm: () => void, + +threadInfo: ThreadInfo, +}; + +function SidebarPromoteModal(props: Props): React.Node { + const { threadInfo, onClose, onConfirm } = props; + const { uiName } = threadInfo; + + const handleConfirm = React.useCallback(() => { + onConfirm(); + onClose(); + }, [onClose, onConfirm]); + + return ( + <Modal + size="large" + name="Promote Thread" + icon="warning-circle" + onClose={onClose} + > + <div className={css.modal_body}> + <p>{`Are you sure you want to promote "${uiName}"?`}</p> + <p>Promoting a sidebar to a full thread cannot be undone.</p> + <div className={css.buttonContainer}> + <Button onClick={onClose} type="submit" variant="secondary"> + Cancel + </Button> + <Button onClick={handleConfirm} type="submit" variant="danger"> + Promote to Full Thread + </Button> + </div> + </div> + </Modal> + ); +} + +export default SidebarPromoteModal;