fix(notification-bell): improve notification API error handling

[S-MOHAMMED-ISMAIL]

Summary

Fixes #1659

Improves NotificationBell error handling by preventing notification-related API failures from being silently ignored.

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)

---

What Changed

• Added a toast notification when mark-as-read requests fail
• Added a dedicated error state for failed notification fetch requests
• Added a Retry button to allow users to reload notifications after a failure
• Displayed the underlying error message for better debugging and visibility
• Preserved existing notification functionality and unread count recovery behavior

---

How to Test

1. Open the NotificationBell component
2. Simulate a failed /api/notifications request
3. Verify the error state is displayed with a Retry button
4. Simulate a failed mark-as-read (PATCH) request
5. Verify an error toast is shown and unread count is restored

Expected result:

• Users receive clear feedback when notification requests fail
• Failed mark-as-read actions display an error toast
• Notification loading, empty state, and error state are clearly distinguished

---

Screenshots / Recordings

N/A

---

Checklist

• Linked the related issue above
• Self-reviewed my own diff
• No unnecessary console.log, debug code, or commented-out blocks
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Added or updated tests where applicable
• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly
• ARIA labels / roles added where needed
• Tested on mobile / responsive layout

---

Additional Context

The repository currently has unrelated TypeScript and environment issues on the latest upstream branch that prevent a clean local type-check run. This change is isolated to src/components/NotificationBell.tsx and directly addresses Issue #1659 by surfacing notification API failures to users instead of silently ignoring them.

[vercel]

@S-MOHAMMED-ISMAIL 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

[S-MOHAMMED-ISMAIL]

The failing CI checks appear unrelated to this change.

This PR only modifies src/components/NotificationBell.tsx to improve notification API error handling and user feedback.

The failing tests are in:

• e2e/settings.spec.js
• e2e/streak.spec.ts
• Visual regression snapshots for landing page and public profile

No changes were made to those areas in this PR.

[Priyanshu-byte-coder]

The error handling logic is good, but the indentation is broken throughout the new code — it's flush-left instead of matching surrounding indentation. Please fix the formatting and resubmit.