Q438: Implementation Drill Saved Snippets Conflict and Delete UX

What Interviewers Want To Evaluate

This drill tests whether you protect user work in small destructive workflows.

Saved snippets introduce two risky actions:

loading a snippet can replace current code
deleting a snippet removes stored work

A good first version does not need fancy modals.

It does need clear confirmation and recovery expectations.

Short Interview Answer

I would confirm before loading a snippet if the editor has unsaved changes, and confirm before deleting a snippet because deletion is permanent in the local first slice.

The confirmation text should name the action and the snippet.

After load or delete, the UI should show a local status message so the user knows what happened.

Load Conflict

Loading a snippet is not harmless.

It replaces editor content.

If the learner wrote new code after the last loaded state, the app should ask:

Load this snippet and replace the current editor code?

This is simple.

It prevents accidental loss.

It can be upgraded later to a custom compare flow.

Last Loaded Reference

Track a reference:

last loaded or initial code
current editor code

If they differ, the editor has unsaved changes.

This is not perfect document management.

It is enough for a first local practice tool.

Delete Confirmation

Delete should ask:

Delete "Closure example"? This cannot be undone.

The snippet title makes the action specific.

The warning explains permanence.

Avoid vague confirmations such as:

Are you sure?

Specific confirmation reduces mistakes.

Status Messages

After actions, show:

"Promise chain" saved.
"Promise chain" loaded.
"Promise chain" deleted.
Could not update saved snippets in this browser.

These messages should stay near the snippet panel.

They should not replace global app feedback unless the product has a shared toast system.

Focus Behavior

After loading a snippet, focus can return to the editor.

This helps the learner continue:

load
edit
run
inspect

Do not auto-run the snippet.

The user should control execution.

Delete Empty State

If deleting the last snippet for that language, return to the empty state.

This confirms the list is intentionally empty.

The user should not see a blank area.

The empty state should still explain how to save again.

Testing Plan

Verify:

load unchanged editor
load changed editor and cancel
load changed editor and confirm
delete and cancel
delete and confirm
delete last item shows empty state
status messages update
focus returns after load

These are workflow tests.

They protect user trust.

Common Mistakes

• Loading snippets without conflict check.
• Auto-running loaded snippets.
• Deleting without naming the snippet.
• Showing vague feedback.
• Leaving a blank panel after deleting the last item.
• Treating localStorage deletion as reversible when it is not.

Final Mental Model

Snippet conflict and delete UX should be:

specific
confirming
non-destructive by default
status-rich
workflow-friendly

Small confirmations are enough for the first version when the scope is local.