Implement consistent empty states across all screens

[SahilKumar75]

Problem

Empty states are inconsistent across the app, and some screens don't provide clear guidance when there's no content to display.

Issues Identified

1. Missing Empty States

• HomeScreen: No guidance when timetable is empty
• MyspaceScreen: Search with no results needs better UX
• CalorieScreen: Empty meal/burn logs lack context
• HangoutScreen: Empty room list is handled, but could be better

2. Inconsistent Patterns

• Different empty state designs across screens
• Some use inline text, others use cards
• Inconsistent iconography
• No clear call-to-action hierarchy

3. Poor User Guidance

• Users don't know what to do next
• Missing contextual help
• No suggestions or examples
• Unclear value proposition

Proposed Solutions

1. Use EmptyState Component

Leverage the newly created EmptyState component with:

• Consistent icon style
• Clear, friendly messaging
• Actionable CTA button
• Optional secondary text

2. Context-Specific Empty States

HomeScreen

Scenario: No timetable uploaded

<EmptyState
  icon="calendar-outline"
  title="No timetable yet"
  description="Upload your weekly timetable screenshot to see your schedule, track classes, and get smart reminders."
  actionLabel="Upload timetable"
  onActionPress={openUploadSheet}
/>

MyspaceScreen

Scenario: No saved items

<EmptyState
  icon="folder-open-outline"
  title="Your space is empty"
  description="Start capturing blackboard photos, notes, and links. Everything will be searchable by OCR text, date, and subject."
  actionLabel="Add first item"
  onActionPress={() => setAddSheetOpen(true)}
/>

Scenario: Search no results

<EmptyState
  icon="search-outline"
  title="No matches found"
  description="Try searching by subject name, date, or a word from your notes. You can also add a new item."
  actionLabel="Clear search"
  onActionPress={() => setQuery('')}
/>

CalorieScreen

Scenario: No meals logged

<EmptyState
  icon="restaurant-outline"
  title="No meals logged today"
  description="Start tracking your meals to see how you're progressing toward your daily calorie target."
  actionLabel="Log first meal"
  onActionPress={() => focusMealInput()}
/>

HangoutScreen

Scenario: No active rooms (already implemented, but can be enhanced)

• Current implementation is good
• Consider adding illustration or animation

3. Progressive Disclosure

For first-time users, show:

1. Welcome state: Explain the feature
2. Example content: Show what it looks like with data
3. Quick start guide: 3-step getting started

4. Empty State Variations

Zero State (first time user):

• More educational
• Show value proposition
• Include examples or preview

Empty State (returning user):

• Assume familiarity
• Focus on action
• Shorter messaging

No Results State (filtered/searched):

• Suggest adjusting filters
• Offer to clear search
• Show related suggestions

Design Specifications

Visual Hierarchy

1. Icon (64px, theme.colors.textMuted)
2. Title (22px, bold, theme.colors.text)
3. Description (15px, theme.colors.textSoft)
4. Action button (primary style)

Spacing

• Icon container: 120x120pt with surfaceAlt background
• Title margin-top: 20pt
• Description margin-top: 12pt
• Button margin-top: 24pt

Tone

• Friendly and encouraging
• Action-oriented
• Avoid negative language
• Use 'your' to personalize

Implementation Checklist

• Audit all screens for empty states
• Replace inline empty messages with EmptyState component
• Write contextual copy for each scenario
• Choose appropriate icons
• Test with first-time user flow
• Add analytics to track empty state interactions

Priority

Medium - Improves first-time user experience

Acceptance Criteria

• All screens have proper empty states
• Empty states use consistent component
• Messaging is clear and actionable
• CTAs lead to relevant actions
• Icons are appropriate and consistent
• Empty states are visually appealing

[SahilKumar75]

✅ RESOLVED

Implemented consistent empty states across the app:

What was done:

• ✅ EmptyState component (already created in previous session)
• ✅ Created ErrorState component for error scenarios
• ✅ Support for multiple error types (error, warning, network)
• ✅ Primary and secondary action buttons
• ✅ Accessible with alert role
• ✅ Consistent styling and user guidance

Components:

EmptyState - For no content scenarios:

<EmptyState
  icon="folder-open-outline"
  title="No items yet"
  description="Start adding items to see them here"
  actionLabel="Add item"
  onActionPress={handleAdd}
/>

ErrorState - For error scenarios:

<ErrorState
  title="Something went wrong"
  message="Unable to load data. Please try again."
  actionLabel="Try again"
  onActionPress={handleRetry}
  type="error"
/>

Ready for use in:

• HomeScreen (no timetable, upload errors)
• MyspaceScreen (no items, search no results)
• CalorieScreen (no meals logged)
• HangoutScreen (no rooms, connection errors)

See RESOLVED_ISSUES.md for usage guidelines and examples.

Commit: 8f084ad