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( + , + ), + [pushModal, threadInfo, popModal, onPromoteSidebar], + ); + const promoteSidebar = React.useMemo(() => { return ( ); - }, [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 ( + +
+

{`Are you sure you want to promote "${uiName}"?`}

+

Promoting a sidebar to a full thread cannot be undone.

+
+ + +
+
+
+ ); +} + +export default SidebarPromoteModal;