Improve error handling and user feedback mechanisms

[SahilKumar75]

Problem

Error states are inconsistent across the app, and users don't always receive clear feedback about what went wrong or how to fix it.

Issues Identified

1. Generic error messages - Not actionable or specific
2. No error recovery options - Users stuck after errors
3. Inconsistent error UI - Different patterns across screens
4. Missing validation feedback - Forms don't show field-level errors
5. No offline state handling - App doesn't gracefully handle network issues
6. Status messages disappear - Auto-hide without user control

Proposed Solutions

1. Standardized Error Component

Create a reusable ErrorState component with:

• Clear error icon
• Descriptive title
• Actionable message
• Retry/dismiss buttons
• Optional support link

2. Form Validation

• Real-time field validation
• Inline error messages below inputs
• Clear error states (red border, error icon)
• Helpful hints (e.g., 'Phone must include country code')

3. Network Error Handling

• Detect offline state
• Show offline banner at top
• Queue actions for retry when online
• Clear messaging: 'No internet connection'

4. Toast Notifications

Implement the new Toast component for:

• Success confirmations (green)
• Error alerts (red)
• Info messages (blue)
• Warnings (orange)
• User-dismissible
• Auto-hide after 4-5 seconds

5. Contextual Error Recovery

• Upload failed: Show retry button with same file
• Join room failed: Suggest checking room code
• Search no results: Offer to clear filters or add item
• Auth failed: Link to password reset

Affected Screens

• HomeScreen: Upload errors, timetable fetch failures
• MyspaceScreen: Search errors, capture failures
• CalorieScreen: Form validation, save errors
• HangoutScreen: Room creation/join errors, connection issues
• AuthScreen: Login/signup validation, OTP errors

Implementation Plan

1. Create ErrorState component in components folder
2. Integrate Toast component (already created)
3. Add form validation utilities
4. Implement offline detection hook
5. Update all screens to use new error patterns

Priority

High - Poor error handling frustrates users

Acceptance Criteria

• All error states have clear, actionable messages
• Forms show field-level validation errors
• Network errors are handled gracefully
• Users can retry failed actions
• Toast notifications work consistently
• Offline state is clearly communicated