fix: update save prompt copy when editing existing draft

When editing an existing draft (vs creating a new one), use "Save
changes" instead of "Save draft" in the save/discard prompts. This
provides clearer context to the user about what action they're taking.

Add isEditingDraft prop to DraftsButton and ComposerTopBar, and
update both prompts (in DraftsButton and Composer) with conditional
copy based on whether we're editing an existing draft.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samuel Newman
2026-01-16 11:31:31 +02:00
parent 7c129c0aec
commit 095ce2865d
2 changed files with 36 additions and 10 deletions
+18 -4
View File
@@ -845,7 +845,8 @@ export const ComposePost = ({
onSaveDraft={saveCurrentDraft}
onDiscard={handleClearComposer}
isEmpty={isComposerEmpty}
isDirty={composerState.isDirty}>
isDirty={composerState.isDirty}
isEditingDraft={!!composerState.draftId}>
{missingAltError && <AltTextReminder error={missingAltError} />}
<ErrorBanner
error={error}
@@ -900,14 +901,24 @@ export const ComposePost = ({
control={discardPromptControl}
webOptions={{vertical: true}}>
<Prompt.TitleText>
<Trans>Save draft?</Trans>{' '}
{composerState.draftId ? (
<Trans>Save changes?</Trans>
) : (
<Trans>Save draft?</Trans>
)}
</Prompt.TitleText>
<Prompt.DescriptionText>
{_(msg`You can save this draft to continue later.`)}
{composerState.draftId
? _(msg`You have unsaved changes to this draft.`)
: _(msg`You can save this draft to continue later.`)}
</Prompt.DescriptionText>
<Prompt.Actions>
<Prompt.Action
cta={_(msg`Save Draft`)}
cta={
composerState.draftId
? _(msg`Save changes`)
: _(msg`Save draft`)
}
onPress={handleSaveDraft}
color="primary"
/>
@@ -1142,6 +1153,7 @@ function ComposerTopBar({
onDiscard,
isEmpty,
isDirty,
isEditingDraft,
topBarAnimatedStyle,
children,
}: {
@@ -1158,6 +1170,7 @@ function ComposerTopBar({
onDiscard: () => void
isEmpty: boolean
isDirty: boolean
isEditingDraft: boolean
topBarAnimatedStyle: StyleProp<ViewStyle>
children?: React.ReactNode
}) {
@@ -1192,6 +1205,7 @@ function ComposerTopBar({
onDiscard={onDiscard}
isEmpty={isEmpty}
isDirty={isDirty}
isEditingDraft={isEditingDraft}
/>
)}
{isPublishing ? (
+18 -6
View File
@@ -14,12 +14,14 @@ export function DraftsButton({
onDiscard,
isEmpty,
isDirty,
isEditingDraft,
}: {
onSelectDraft: (draft: DraftSummary) => void
onSaveDraft: () => Promise<void>
onDiscard: () => void
isEmpty: boolean
isDirty: boolean
isEditingDraft: boolean
}) {
const {_} = useLingui()
const draftsDialogControl = Dialog.useDialogControl()
@@ -69,17 +71,27 @@ export function DraftsButton({
<Prompt.Outer control={savePromptControl} webOptions={{vertical: true}}>
<Prompt.TitleText>
<Trans>Save current draft?</Trans>
{isEditingDraft ? (
<Trans>Save changes?</Trans>
) : (
<Trans>Save draft?</Trans>
)}
</Prompt.TitleText>
<Prompt.DescriptionText>
<Trans>
You have unsaved changes. Would you like to save them before viewing
your drafts?
</Trans>
{isEditingDraft ? (
<Trans>
You have unsaved changes. Would you like to save them before
viewing your drafts?
</Trans>
) : (
<Trans>
Would you like to save this as a draft before viewing your drafts?
</Trans>
)}
</Prompt.DescriptionText>
<Prompt.Actions>
<Prompt.Action
cta={_(msg`Save changes`)}
cta={isEditingDraft ? _(msg`Save changes`) : _(msg`Save draft`)}
onPress={handleSaveAndOpen}
color="primary"
/>