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} onSaveDraft={saveCurrentDraft}
onDiscard={handleClearComposer} onDiscard={handleClearComposer}
isEmpty={isComposerEmpty} isEmpty={isComposerEmpty}
isDirty={composerState.isDirty}> isDirty={composerState.isDirty}
isEditingDraft={!!composerState.draftId}>
{missingAltError && <AltTextReminder error={missingAltError} />} {missingAltError && <AltTextReminder error={missingAltError} />}
<ErrorBanner <ErrorBanner
error={error} error={error}
@@ -900,14 +901,24 @@ export const ComposePost = ({
control={discardPromptControl} control={discardPromptControl}
webOptions={{vertical: true}}> webOptions={{vertical: true}}>
<Prompt.TitleText> <Prompt.TitleText>
<Trans>Save draft?</Trans>{' '} {composerState.draftId ? (
<Trans>Save changes?</Trans>
) : (
<Trans>Save draft?</Trans>
)}
</Prompt.TitleText> </Prompt.TitleText>
<Prompt.DescriptionText> <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.DescriptionText>
<Prompt.Actions> <Prompt.Actions>
<Prompt.Action <Prompt.Action
cta={_(msg`Save Draft`)} cta={
composerState.draftId
? _(msg`Save changes`)
: _(msg`Save draft`)
}
onPress={handleSaveDraft} onPress={handleSaveDraft}
color="primary" color="primary"
/> />
@@ -1142,6 +1153,7 @@ function ComposerTopBar({
onDiscard, onDiscard,
isEmpty, isEmpty,
isDirty, isDirty,
isEditingDraft,
topBarAnimatedStyle, topBarAnimatedStyle,
children, children,
}: { }: {
@@ -1158,6 +1170,7 @@ function ComposerTopBar({
onDiscard: () => void onDiscard: () => void
isEmpty: boolean isEmpty: boolean
isDirty: boolean isDirty: boolean
isEditingDraft: boolean
topBarAnimatedStyle: StyleProp<ViewStyle> topBarAnimatedStyle: StyleProp<ViewStyle>
children?: React.ReactNode children?: React.ReactNode
}) { }) {
@@ -1192,6 +1205,7 @@ function ComposerTopBar({
onDiscard={onDiscard} onDiscard={onDiscard}
isEmpty={isEmpty} isEmpty={isEmpty}
isDirty={isDirty} isDirty={isDirty}
isEditingDraft={isEditingDraft}
/> />
)} )}
{isPublishing ? ( {isPublishing ? (
+18 -6
View File
@@ -14,12 +14,14 @@ export function DraftsButton({
onDiscard, onDiscard,
isEmpty, isEmpty,
isDirty, isDirty,
isEditingDraft,
}: { }: {
onSelectDraft: (draft: DraftSummary) => void onSelectDraft: (draft: DraftSummary) => void
onSaveDraft: () => Promise<void> onSaveDraft: () => Promise<void>
onDiscard: () => void onDiscard: () => void
isEmpty: boolean isEmpty: boolean
isDirty: boolean isDirty: boolean
isEditingDraft: boolean
}) { }) {
const {_} = useLingui() const {_} = useLingui()
const draftsDialogControl = Dialog.useDialogControl() const draftsDialogControl = Dialog.useDialogControl()
@@ -69,17 +71,27 @@ export function DraftsButton({
<Prompt.Outer control={savePromptControl} webOptions={{vertical: true}}> <Prompt.Outer control={savePromptControl} webOptions={{vertical: true}}>
<Prompt.TitleText> <Prompt.TitleText>
<Trans>Save current draft?</Trans> {isEditingDraft ? (
<Trans>Save changes?</Trans>
) : (
<Trans>Save draft?</Trans>
)}
</Prompt.TitleText> </Prompt.TitleText>
<Prompt.DescriptionText> <Prompt.DescriptionText>
<Trans> {isEditingDraft ? (
You have unsaved changes. Would you like to save them before viewing <Trans>
your drafts? You have unsaved changes. Would you like to save them before
</Trans> viewing your drafts?
</Trans>
) : (
<Trans>
Would you like to save this as a draft before viewing your drafts?
</Trans>
)}
</Prompt.DescriptionText> </Prompt.DescriptionText>
<Prompt.Actions> <Prompt.Actions>
<Prompt.Action <Prompt.Action
cta={_(msg`Save changes`)} cta={isEditingDraft ? _(msg`Save changes`) : _(msg`Save draft`)}
onPress={handleSaveAndOpen} onPress={handleSaveAndOpen}
color="primary" color="primary"
/> />