handle errors on goal deletion and show user feedback

[mrdeyroy]

Summary

This PR fixes a bug where failing API requests during goal deletion were being silently swallowed. Previously, if the DELETE /api/goals/{id} request failed (e.g., due to a network issue), the optimistic UI would revert the goal list but provide no error message to the user, causing confusion.

This change introduces a deleteError state to catch the failure and display a dismissible error banner.

Closes #582

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Added a deleteError state in GoalTracker.tsx.
• Updated handleDelete to catch unsuccessful API responses and set the appropriate error message.
• Added a dismissible error banner in the UI above the goal list that renders when a deletion fails.
• Adhered to the CONTRIBUTING.md branch naming and conventional commit guidelines.

How to Test

Steps for the reviewer to verify this works:

1. Run the development server locally using npm run dev.
2. Navigate to the dashboard and open the Goal Tracker.
3. Use your browser's Developer Tools (Network tab) to throttle your connection to "Offline" or block the /api/goals request endpoint.
4. Attempt to delete a goal.
5. Verify that the goal momentarily disappears (optimistic update), reappears, and a red error banner is displayed reading: "Failed to delete goal. Please check your connection."
6. Verify the error banner can be dismissed via the '✕' button.

Screenshots (if UI change)

N/A

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

@mrdeyroy 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

[mrdeyroy]

Hi, @Priyanshu-byte-coder
please review this PR

[Priyanshu-byte-coder]

PR #577 (mobile responsiveness fixes) was already merged into main. This PR includes the same responsive grid changes to CIAnalytics, FriendComparison, IssueMetrics, LanguageBreakdown, PRMetrics, and StreakTracker — causing conflicts.

Please rebase on main and remove the duplicate responsive grid changes. Keep only the GoalTracker deletion error handling, which is the new value this PR adds.

[mrdeyroy]

PR #577 (mobile responsiveness fixes) was already merged into main. This PR includes the same responsive grid changes to CIAnalytics, FriendComparison, IssueMetrics, LanguageBreakdown, PRMetrics, and StreakTracker — causing conflicts.

Please rebase on main and remove the duplicate responsive grid changes. Keep only the GoalTracker deletion error handling, which is the new value this PR adds.

I have removed the duplicate responsive grid changes and only kept the GoalTracker deletion error handling part. Can you please check now!

[Priyanshu-byte-coder]

Hardcoded Tailwind red classes — replace with CSS vars:

• border-red-500/20, bg-red-500/10, text-red-400, hover:text-red-300 → border-[var(--destructive)]/20, bg-[var(--destructive)]/10, text-[var(--destructive)]