fix: add failure notifications to GoalTracker deletion rollback #745

[SatyamPandey-07]

[BUG / UX] Add failure notifications to GoalTracker deletion rollback #745

📖 Summary

This Pull Request addresses the issue of silent failures when deleting goals. DevTrack uses optimistic UI updates to instantly delete goals from the interface. However, if the deletion fetch request failed on the backend (due to server errors, authentication expiry, or network drops), the goal was silently rolled back and re-appended to the goals list without informing the user.

This PR adds a dedicated deleteError warning banner below the widget header, providing elegant visual feedback and error messaging when an optimistic deletion has to be rolled back.

Closes #745

---

🚀 Type of Change

• Bug fix (non-breaking change which fixes an issue)
• UX/UI improvement

---

🛠️ Changes Made

• src/components/GoalTracker.tsx:
  • Added a deleteError state variable.
  • Reset deleteError state when launching a deletion.
  • Refactored handleDelete to populate deleteError with a user-facing error message inside !res.ok and catch blocks.
  • Added an auto-dismiss timer that clears the delete error banner after 5 seconds.
  • Rendered a beautifully themed warning banner with an error icon, error details, and an interactive Dismiss button directly under the Weekly Goals heading.

---

🧪 How to Test

1. Check out the branch: git checkout fix/issue-745-goal-deletion-feedback.
2. Run the development server: npm run dev.
3. Open the dashboard and locate the Weekly Goals widget.
4. Test Error & Rollback State:
   • Open browser Developer Tools, switch to the Network tab, and manually block or throttle the DELETE API requests for /api/goals/* (or mock a 500 server response).
   • Try to delete any goal in the tracker.
   • The goal will immediately vanish (optimistic update), and then suddenly reappear on the list accompanied by a beautiful warning banner: "Failed to delete goal. Please try again.".
   • Verify the error banner auto-dismisses after 5 seconds, or manually dismiss it by clicking Dismiss.

---

✅ Checklist

• My code follows the code style of this project
• I have self-reviewed my changes
• All existing/new tests pass locally
• No TypeScript or build compilation errors

[vercel]

@SatyamPandey-07 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!