[Feature] Integrate 'Sonner' for standardized user notifications (Toast)

### Is your feature request related to a problem? Please describe.
The application currently lacks a consistent mechanism for feedback. We have a toast component defined at `./frontend/src/components/toast.tsx`, but it is not utilized in the main application flow. Instead, user feedback relies on disparate methods like `console.log` or native `window.alert`, resulting in a fragmented User Experience (UX).

### Describe the solution you'd like
I propose strictly integrating the existing `toast.tsx` component into the global application layout. This will standardize all success, error, and info notifications, ensuring they are non-blocking and visually consistent with the design system.

### Technical Implementation Strategy
1. **Context Injection:** Wrap the root application component (in `App.tsx` or `layout.tsx`) with the `` provider exported from the component file.
2. **Global Availability:** Ensure the toast hook is accessible throughout the component tree without prop drilling.
3. **Refactoring:** Audit existing API calls (login, registration, data fetching) and replace `catch(err => console.error(err))` blocks with `toast.error()`.

### Acceptance Criteria
- [ ] **Global Provider:** The application renders the Toast provider at the root level, ensuring notifications can appear on top of any route.
- [ ] **Error Handling:** Network errors and failed form submissions trigger a red/error variant toast.
- [ ] **Success Feedback:** Successful actions (e.g., "Profile Updated") trigger a green/success variant toast.
- [ ] **Legacy Removal:** All instances of `window.alert()` are removed from the codebase.

### Priority
Medium - Impacts UX and error visibility.