← react-native-pre-2026

Mobile App Feature Parity Plan

Overview

This document outlines the plan to bring the React Native mobile app to feature parity with the web application. The plan covers all features added since the last mobile app push, including DreamPro, Encouragement Drops, Badge System, and WorkoutWindow enhancements.

Current Mobile App Status

✅ Already Implemented

  • Authentication (Sign In/Sign Up)
  • Dashboard with journal entries
  • Entry editor and detail views
  • Notebooks (list, detail, editor)
  • Goals (list, detail, editor)
  • Stream view
  • Settings screen
  • WorkoutWindow setup screen
  • WorkoutWindow check-in screen
  • Action button (floating)
  • Satisfaction slider (floating)
  • Positive note display (floating)

❌ Missing Features (Need Implementation)

Phase 1: DreamPro System

1.1 Dream Management Screens

Priority: High

  • Dream List Screen (screens/dreampro/DreamsScreen.tsx)

    • Display all user dreams in a list/grid
    • Show progress bars, status badges, category icons
    • Pull-to-refresh
    • Filter by status (active, paused, completed, abandoned)
    • Navigation to dream detail

  • Dream Detail Screen (screens/dreampro/DreamDetailScreen.tsx)

    • Display dream information (title, description, category, target date)
    • Progress visualization (percentage, steps completed/total)
    • Next step highlight card
    • Steps list with status indicators
    • Actions: Edit, Delete, Add Step, Complete Step
    • Integration buttons: Add to WorkoutWindow, Add as Action

  • Dream Editor Screen (screens/dreampro/DreamEditorScreen.tsx)

    • Create/Edit dream form
    • Title, description inputs
    • Category picker (with icons)
    • Target date picker
    • Visibility selector (private, public, team)
    • Status selector

1.2 Step Management

Priority: High

  • Step Editor Component (components/dreampro/StepEditor.tsx)

    • Add/Edit step form
    • Title, description inputs
    • Estimated hours input
    • Dependency selector (other steps)
    • Step order management

  • Step List Component (components/dreampro/StepList.tsx)

    • Display steps in order
    • Status indicators (not_started, in_progress, completed, blocked)
    • Drag-to-reorder (optional)
    • Quick actions: Complete, Add to WorkoutWindow

1.3 Navigation Integration

Priority: Medium

  • Add DreamPro routes to MainNavigator.tsx

    • Dreams list screen
    • Dream detail screen
    • Dream editor screen

  • Add DreamPro link to Settings screen

  • Add DreamPro tab or section in Dashboard (optional)

1.4 Action Button Integration

Priority: Medium

  • Update ActionPanel.tsx to show DreamPro next steps

    • Fetch active dreams and next steps
    • Display next steps section
    • Allow quick selection to add as action
    • Auto-populate description from step

  • Add "dreampro" category to action categories

Phase 2: Encouragement Drops System

2.1 Drop Management

Priority: High

  • Drop Sender Component (components/drops/DropSender.tsx)

    • Modal/sheet for sending drops
    • Drop type selector (encouragement, media, science)
    • Template library browser
    • Custom drop input
    • Remaining drops counter
    • Recipient selection (from Stream or user search)

  • Drop Templates Screen (screens/drops/DropTemplatesScreen.tsx)

    • Browse approved templates
    • Filter by type
    • Search functionality
    • Usage count display

  • Drops Received Screen (screens/drops/DropsReceivedScreen.tsx)

    • List of drops received
    • Filter by type
    • Sender information
    • Timestamp
    • Link to associated entry (if any)

2.2 Stream Integration

Priority: High

  • Update StreamScreen.tsx to show drop sending option

    • Add drop button to entry cards
    • Show drop sender modal on tap
    • Display badge indicators on entries

  • Add drop received notifications

    • Show badge when new drops received
    • Notification banner or badge count

2.3 Drop Status Display

Priority: Medium

  • Drop Counter Component (components/drops/DropCounter.tsx)
    • Display remaining drops for today
    • Show in navigation or header
    • Update in real-time

Phase 3: Badge System

3.1 Badge Display Components

Priority: Medium

  • Badge Display Component (components/badges/BadgeDisplay.tsx)

    • Show user badge (emoji, name, level)
    • Progress bar to next level
    • Tooltip/modal with badge details
    • Badge colors and styling

  • Badge Leaderboard Component (components/badges/BadgeLeaderboard.tsx)

    • Top users by badge level
    • User's current rank
    • Progress to next badge

3.2 Integration Points

Priority: Medium

  • Add badge display to Stream entry cards
  • Add badge display to user profiles
  • Add badge section to Settings screen
  • Show badge in navigation/header (optional)

Phase 4: WorkoutWindow Enhancements

4.1 Additional Screens

Priority: High

  • WorkoutWindow Dashboard Screen (screens/workout-window/WorkoutWindowDashboardScreen.tsx)

    • Today's check-in status
    • Team stats (Red vs Blue)
    • Quick actions (Check In, View Chain, View Mosaic, View Battle)
    • Recent activity

  • Chain View Screen (screens/workout-window/ChainViewScreen.tsx)

    • Display chain (before, current, after users)
    • Squad information
    • Team color indicator
    • Check-in status for each person
    • Pass baton visualization

  • Mosaic View Screen (screens/workout-window/MosaicViewScreen.tsx)

    • Display daily low-poly mosaic SVG
    • Interactive (tap sections to see user details)
    • Stats display (completion rate, etc.)
    • Date selector

  • Battle View Screen (screens/workout-window/BattleViewScreen.tsx)

    • Current week battle
    • Team robot stats (Attack, Defense, Speed, Special)
    • Bad guy power
    • Battle outcome
    • Battle log
    • Battle history

4.2 WorkoutWindow Setup Enhancements

Priority: Medium

  • Update WorkoutWindowSetupScreen.tsx to show DreamPro steps
    • Display available dream steps
    • One-tap add to workout window
    • Link to DreamPro detail

4.3 Navigation Updates

Priority: Medium

  • Add WorkoutWindow routes to MainNavigator.tsx

    • Dashboard
    • Chain view
    • Mosaic view
    • Battle view

  • Update Settings screen to link to WorkoutWindow dashboard

Phase 5: Stream Enhancements

5.1 WorkoutWindow Status Integration

Priority: High

  • Update StreamScreen.tsx to fetch and display workout window statuses
    • Bulk fetch statuses for all users in stream
    • Display status badges on entry cards
    • Green for resolved, yellow for pending
    • Tap to view workout window details

5.2 Badge Integration

Priority: Medium

  • Display badges on entry cards in Stream
    • Show badge emoji/icon
    • Badge name on hover/tap
    • Badge level indicator

5.3 DreamPro Integration

Priority: Low

  • Show public dreams in Stream (optional)
    • Fixed panel or section
    • Progress indicators
    • Link to dream detail

Phase 6: Action Button Enhancements

6.1 DreamPro Next Steps

Priority: Medium

  • Update ActionPanel.tsx to show DreamPro next steps
    • Fetch active dreams and next steps
    • Display in collapsible section
    • Quick selection to add as action
    • Visual distinction (purple theme)

6.2 Enhanced Action Categories

Priority: Low

  • Add "dreampro" category to action categories
  • Update category icons/emojis

Phase 7: API Integration

7.1 API Service Updates

Priority: High

  • Update services/api.ts with new endpoints:
    • DreamPro endpoints (/api/dreampro/*)
    • Encouragement Drops endpoints (/api/encouragement-drops/*)
    • Badge endpoints (/api/encouragement-drops/badges/*)
    • WorkoutWindow enhanced endpoints

7.2 Type Definitions

Priority: High

  • Add TypeScript types for:
    • Dream and DreamStep interfaces
    • Drop interfaces (DropTemplate, DropSent, UserDrops)
    • Badge interfaces (Badge, BadgeDefinition, BadgeMilestone)
    • WorkoutWindow enhanced types (Chain, Squad, Mosaic, Battle)

Phase 8: UI/UX Enhancements

8.1 Component Library

Priority: Medium

  • Create reusable components:
    • ProgressBar component
    • StatusBadge component
    • CategoryPicker component
    • DatePicker component (if not exists)
    • ImagePicker component (for check-ins)

8.2 Navigation Improvements

Priority: Medium

  • Add bottom tab for WorkoutWindow (optional)
  • Add bottom tab for DreamPro (optional)
  • Or add to Settings/Dashboard as sections

8.3 Visual Consistency

Priority: Low

  • Match web app color schemes:
    • DreamPro: Purple theme
    • WorkoutWindow: Orange/Red theme
    • Badges: Color-coded by level
    • Drops: Type-specific colors

Implementation Order

Sprint 1: Core DreamPro (Week 1-2)

  1. Dream list screen
  2. Dream detail screen
  3. Dream editor screen
  4. Step management components
  5. Navigation integration
  6. API integration

Sprint 2: WorkoutWindow Enhancements (Week 2-3)

  1. WorkoutWindow dashboard screen
  2. Chain view screen
  3. Mosaic view screen
  4. Battle view screen
  5. DreamPro integration in setup

Sprint 3: Encouragement Drops (Week 3-4)

  1. Drop sender component
  2. Drop templates screen
  3. Drops received screen
  4. Stream integration
  5. Drop counter component

Sprint 4: Badge System & Stream Enhancements (Week 4-5)

  1. Badge display components
  2. Badge leaderboard
  3. Stream workout window statuses
  4. Stream badge display
  5. Action button DreamPro integration

Sprint 5: Polish & Testing (Week 5-6)

  1. UI/UX refinements
  2. Performance optimization
  3. Error handling
  4. Testing on iOS and Android
  5. Bug fixes

Technical Considerations

Dependencies

  • Verify all required packages are installed:
    • react-native-svg (for mosaic display)
    • @react-native-community/datetimepicker (for date/time pickers)
    • expo-image-picker (for photo uploads in check-ins)
    • react-native-gesture-handler (for drag-to-reorder, if implemented)

Performance

  • Implement pagination for long lists (dreams, steps, drops)
  • Use React Query for caching and optimistic updates
  • Optimize image loading in Stream
  • Lazy load components where appropriate

Offline Support

  • Consider offline-first approach for viewing data
  • Queue actions when offline
  • Sync when connection restored

Testing

  • Unit tests for new components
  • Integration tests for API calls
  • E2E tests for critical flows
  • Test on both iOS and Android
  • Test on different screen sizes

File Structure

apps/mobile/src/
├── screens/
│   ├── dreampro/
│   │   ├── DreamsScreen.tsx
│   │   ├── DreamDetailScreen.tsx
│   │   └── DreamEditorScreen.tsx
│   ├── drops/
│   │   ├── DropTemplatesScreen.tsx
│   │   └── DropsReceivedScreen.tsx
│   └── workout-window/
│       ├── WorkoutWindowDashboardScreen.tsx
│       ├── ChainViewScreen.tsx
│       ├── MosaicViewScreen.tsx
│       └── BattleViewScreen.tsx
├── components/
│   ├── dreampro/
│   │   ├── StepEditor.tsx
│   │   ├── StepList.tsx
│   │   └── DreamCard.tsx
│   ├── drops/
│   │   ├── DropSender.tsx
│   │   └── DropCounter.tsx
│   └── badges/
│       ├── BadgeDisplay.tsx
│       └── BadgeLeaderboard.tsx
└── services/
    └── api.ts (updated with new endpoints)

Success Criteria

  • All DreamPro features available on mobile
  • All Encouragement Drops features available on mobile
  • Badge system fully integrated
  • WorkoutWindow enhancements complete
  • Stream shows all status indicators
  • Action button includes DreamPro integration
  • UI/UX matches web app quality
  • Performance is acceptable on both iOS and Android
  • All features tested and working

Notes

  • Prioritize features based on user feedback and usage patterns
  • Consider mobile-specific UX improvements (e.g., swipe gestures, pull-to-refresh)
  • Ensure accessibility (screen readers, keyboard navigation)
  • Follow React Native best practices and design patterns
  • Maintain consistency with existing mobile app design language
MOBILE FEATURE PARITY PLAN — Docs | HiveJournal