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:
@@ -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 ? (
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user