Guard against lost work

Warn before unsaved work is lost; confirm or allow undo on deletes.

Web Interface Guidelinesvercel-labs · command.md · Forms

Warn before navigation with unsaved changes (`beforeunload` or router guard)

Guideline ruleView source ↗

Web Interface Guidelinesvercel-labs · command.md · Navigation & State

Destructive actions need confirmation modal or undo window—never immediate

Guideline ruleView source ↗

From web-design-guidelines (Web Interface Guidelines).

Edit, then leave

Edit both notes, then press Notes to go back.

Arm beforeunload while dirty

No guardBad

Saved

navigate("/notes")0 chars lost

Router guardGood

Saved

if (dirty) confirmLeave()0 chars lost

router.beforeEach(async () => {
  if (!note.dirty) return true;
  const choice = await confirmLeave();
  if (choice === "save") await note.save();
  return choice !== "keep";
});

Delete a row

Delete files in each list, then try to undo.

ImmediateBad

api.delete(id)0 lost

Undo windowGood

toast({ action: "Undo" })0 lost

Confirm or undo?

Delete the project in both panes, then recover it.

Require typing the name

Undo windowAct, then offer

softDelete(id)0 clicks

Why it matters

Back, reload and delete each erase work in one click. A guard makes it free.

Pros

A mis-click stops being data loss.
Undo keeps intended deletes at one click.
Rare prompts get read, not dismissed.

Cons

Prompting on a clean form trains click-through.
beforeunload shows generic text and cannot offer Save.
Undo needs deferred or soft deletes server-side.