Add reusable ApiError component for prediction and upload failures

[liascope]

Summary

Added a reusable ApiError component for displaying API-related errors in the UI instead of failing silently or showing only toast notifications.

Fixes #19

Changes

• Created reusable ApiError component in frontend/src/components/ui/
• Added responsive error banner styling with Tailwind CSS
• Added dismiss button using lucide-react
• Integrated error handling into:
  • NewAnalysis.tsx
  • Upload.tsx
• Improved API error propagation to display backend error messages

[Oshgig]

Clean, focused, and exactly what issue #19 needed. The ApiError component is in the right place (frontend/src/components/ui/), the Tailwind styling is consistent with the rest of the UI, the dismiss button via lucide-react is a nice touch, and wiring it into both NewAnalysis.tsx and Upload.tsx closes the gap properly. Error propagation from the backend (e.response?.data?.detail) is the correct pattern.

Approving and merging. Thank you @liascope!

Note to @S-Garvit: closing #31 in favour of this PR — see comment there.

[Oshgig]

Thanks @liascope! Close to merge but a few things to address first:

(1) Blocker: Upload.tsx has g disabled={...} on the upload button — the stray g will break the build.

(2) Blocker: Please verify useState is imported in both NewAnalysis.tsx and Upload.tsx (the diff adds useState calls but doesn't show the import being added).

(3) The error message path reads e?.response?.data?.message, but our FastAPI backend returns errors under detail. Could you switch to detail (or check both)?

(4) Brace placement in the Upload.tsx catch/finally block is off (setUploadProgress(null)} on the same line as the closing brace) — please reformat.

(5) Small a11y polish on ApiError.tsx: add type="button" and aria-label="Dismiss" on the close button, and add a trailing newline to the file.

(6) The required ci check still needs to come back green before merge.

Once those are in I'll merge. Thanks for tackling this!

[Oshgig]

👋 Friendly ping, @liascope — any chance you can pick up the two small fixes from the review above? Specifically (1) the stray g disabled={...} typo on the upload button and (2) confirming useState is imported in both pages. Once those are in I'll re-review and we can land this. Happy to pair on it if you're stuck — just drop a comment.

[liascope]

Thanks for the detailed review!

• Confirmed useState is already imported in both NewAnalysis.tsx and Upload.tsx
• Addressed all remaining points (error handling, formatting, a11y, and stray typo)
  Everything should now be up to date — ready for re-review 👍

[Goldokpa]

📢 Heads-up: repo history was rewritten today (2026-05-18)

We force-pushed a cleaned history across all branches to remove an internal directory from past commits. Your code and this PR are unaffected — only the commit SHAs underneath have shifted. GitHub will re-render the diff against the new base automatically.

If you have a local clone, please bring it back in sync before pushing anything else:

# Option A (simplest): fresh start
git clone https://github.com/Climate-Vision/ClimateVision.git

# Option B: rebase the existing PR branch in your fork
git fetch origin
git checkout <your-branch>
git rebase origin/main          # likely no conflicts
git push --force-with-lease

Do not git pull on an existing clone — it will produce a messy non-fast-forward state. Either re-clone, or rebase explicitly as above.

Apologies for the interruption — really appreciate your patience here. If anything looks off after rebasing, leave a comment and I'll help unblock right away. Thanks for contributing 🙏