Skip to content

Undo after deleting a card #5

Description

@qapitall

What

Deleting a card should show a short "Card deleted — Undo" toast for a few seconds instead of removing it irreversibly on the spot.

Why

The delete button is one click and there is no confirmation. One slip and the card (title, description, category) is gone. A confirm dialog would slow down the common case; undo is the friendlier pattern.

Suggested approach

Simplest version keeps the server untouched: delay the actual DELETE call.

  • public/app.js — on delete, remove the card from the UI immediately, show a small toast with an Undo button, and only call DELETE /api/cards/:id (see the existing handler around the api("DELETE", ...) call) after ~5s. If Undo is clicked, cancel the timer and re-render — nothing was ever deleted server-side, so the card keeps its id and position.
  • public/style.css — a fixed-position toast at the bottom, styled for both themes.

Edge case worth handling: if the user deletes a second card while a toast is pending, flush the first delete right away.

Acceptance criteria

  • Deleting shows a toast with an Undo button for ~5 seconds.
  • Undo restores the card exactly (same id, same position).
  • Without Undo, the card is deleted and stays deleted after reload.
  • Deleting a second card doesn't lose the first pending delete.

Good first issue — frontend only, no server changes.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions