diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
index 70c3548bb4..c1ee819f83 100644
--- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/confirmation_modal.tsx
@@ -21,6 +21,7 @@ export const ConfirmationModal: React.FC<
title: React.ReactNode;
message: React.ReactNode;
confirm: React.ReactNode;
+ cancel?: React.ReactNode;
secondary?: React.ReactNode;
onSecondary?: () => void;
onConfirm: () => void;
@@ -30,6 +31,7 @@ export const ConfirmationModal: React.FC<
title,
message,
confirm,
+ cancel,
onClose,
onConfirm,
secondary,
@@ -65,10 +67,12 @@ export const ConfirmationModal: React.FC<
{secondary && (
diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx
new file mode 100644
index 0000000000..412649ef68
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/discard_draft_confirmation.tsx
@@ -0,0 +1,104 @@
+import { useCallback } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { replyCompose } from 'flavours/glitch/actions/compose';
+import { editStatus } from 'flavours/glitch/actions/statuses';
+import type { Status } from 'flavours/glitch/models/status';
+import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const editMessages = defineMessages({
+ title: {
+ id: 'confirmations.discard_draft.edit.title',
+ defaultMessage: 'Discard changes to your post?',
+ },
+ message: {
+ id: 'confirmations.discard_draft.edit.message',
+ defaultMessage:
+ 'Continuing will discard any changes you have made to the post you are currently editing.',
+ },
+ cancel: {
+ id: 'confirmations.discard_draft.edit.cancel',
+ defaultMessage: 'Resume editing',
+ },
+});
+
+const postMessages = defineMessages({
+ title: {
+ id: 'confirmations.discard_draft.post.title',
+ defaultMessage: 'Discard your draft post?',
+ },
+ message: {
+ id: 'confirmations.discard_draft.post.message',
+ defaultMessage:
+ 'Continuing will discard the post you are currently composing.',
+ },
+ cancel: {
+ id: 'confirmations.discard_draft.post.cancel',
+ defaultMessage: 'Resume draft',
+ },
+});
+
+const messages = defineMessages({
+ confirm: {
+ id: 'confirmations.discard_draft.confirm',
+ defaultMessage: 'Discard and continue',
+ },
+});
+
+const DiscardDraftConfirmationModal: React.FC<
+ {
+ onConfirm: () => void;
+ } & BaseConfirmationModalProps
+> = ({ onConfirm, onClose }) => {
+ const intl = useIntl();
+ const isEditing = useAppSelector((state) => !!state.compose.get('id'));
+
+ const contextualMessages = isEditing ? editMessages : postMessages;
+
+ return (
+
+ );
+};
+
+export const ConfirmReplyModal: React.FC<
+ {
+ status: Status;
+ } & BaseConfirmationModalProps
+> = ({ status, onClose }) => {
+ const dispatch = useAppDispatch();
+
+ const onConfirm = useCallback(() => {
+ dispatch(replyCompose(status));
+ }, [dispatch, status]);
+
+ return (
+
+ );
+};
+
+export const ConfirmEditStatusModal: React.FC<
+ {
+ statusId: string;
+ } & BaseConfirmationModalProps
+> = ({ statusId, onClose }) => {
+ const dispatch = useAppDispatch();
+
+ const onConfirm = useCallback(() => {
+ dispatch(editStatus(statusId));
+ }, [dispatch, statusId]);
+
+ return (
+
+ );
+};
diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx
deleted file mode 100644
index 4a7e56c2a1..0000000000
--- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/edit_status.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-import { editStatus } from 'flavours/glitch/actions/statuses';
-import { useAppDispatch } from 'flavours/glitch/store';
-
-import type { BaseConfirmationModalProps } from './confirmation_modal';
-import { ConfirmationModal } from './confirmation_modal';
-
-const messages = defineMessages({
- editTitle: {
- id: 'confirmations.edit.title',
- defaultMessage: 'Overwrite post?',
- },
- editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
- editMessage: {
- id: 'confirmations.edit.message',
- defaultMessage:
- 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?',
- },
-});
-
-export const ConfirmEditStatusModal: React.FC<
- {
- statusId: string;
- } & BaseConfirmationModalProps
-> = ({ statusId, onClose }) => {
- const intl = useIntl();
- const dispatch = useAppDispatch();
-
- const onConfirm = useCallback(() => {
- dispatch(editStatus(statusId));
- }, [dispatch, statusId]);
-
- return (
-
- );
-};
diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts
index 4893fb096a..25ffb3b629 100644
--- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts
+++ b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/index.ts
@@ -1,8 +1,10 @@
export { ConfirmationModal } from './confirmation_modal';
export { ConfirmDeleteStatusModal } from './delete_status';
export { ConfirmDeleteListModal } from './delete_list';
-export { ConfirmReplyModal } from './reply';
-export { ConfirmEditStatusModal } from './edit_status';
+export {
+ ConfirmReplyModal,
+ ConfirmEditStatusModal,
+} from './discard_draft_confirmation';
export { ConfirmUnfollowModal } from './unfollow';
export { ConfirmClearNotificationsModal } from './clear_notifications';
export { ConfirmLogOutModal } from './log_out';
diff --git a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx b/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx
deleted file mode 100644
index 415a453954..0000000000
--- a/app/javascript/flavours/glitch/features/ui/components/confirmation_modals/reply.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useCallback } from 'react';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-import { replyCompose } from 'flavours/glitch/actions/compose';
-import type { Status } from 'flavours/glitch/models/status';
-import { useAppDispatch } from 'flavours/glitch/store';
-
-import type { BaseConfirmationModalProps } from './confirmation_modal';
-import { ConfirmationModal } from './confirmation_modal';
-
-const messages = defineMessages({
- replyTitle: {
- id: 'confirmations.reply.title',
- defaultMessage: 'Overwrite post?',
- },
- replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
- replyMessage: {
- id: 'confirmations.reply.message',
- defaultMessage:
- 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?',
- },
-});
-
-export const ConfirmReplyModal: React.FC<
- {
- status: Status;
- } & BaseConfirmationModalProps
-> = ({ status, onClose }) => {
- const intl = useIntl();
- const dispatch = useAppDispatch();
-
- const onConfirm = useCallback(() => {
- dispatch(replyCompose(status));
- }, [dispatch, status]);
-
- return (
-
- );
-};