Skip to content

feat(settings): Replace static email with dynamic Supabase user email and add iOS subscription management link #9

@iamhenry

Description

@iamhenry

Task Description

Replace the hardcoded email "[email protected]" in the settings screen with the dynamic email address from the authenticated Supabase user. Update the avatar to display the first letter of the user's email address. Add a FlatList section containing a single deep link item that navigates users to iOS Settings for subscription management.

Existing Context

  • settings.tsx currently displays static user profile with hardcoded email "[email protected]" and avatar text "Z"
  • useSupabase() hook already provides access to authenticated user data via user and session objects
  • SupabaseProvider manages authentication state with initialization tracking
  • Pro badge component is already implemented and should remain static
  • Existing UI components (Avatar, Badge, Button, Text) are available for reuse

Acceptance Criteria

  • Settings screen displays the authenticated user's actual email address instead of "[email protected]"
  • Avatar shows the first letter of the user's email address (e.g., "j" for "[email protected]")
  • Pro badge remains static as "Pro"
  • FlatList contains exactly one item: "Manage Subscription" with deep link to iOS Settings
  • Graceful handling when user email is not available (fallback display)
  • No loading state required - use existing SupabaseProvider initialization

Scope and Constraints

  • Modify only app/(app)/(protected)/settings.tsx
  • Use existing useSupabase() hook - no new context or state management
  • Leverage existing UI components from /components/ui/
  • Follow KISS principle - minimal code changes
  • Maintain all existing functionality (signOut, styling, layout)
  • iOS-specific deep link implementation only

Dependencies

  • context/supabase-provider.tsx - provides user authentication data
  • components/ui/avatar.tsx - for user avatar display
  • components/ui/badge.tsx - for Pro badge (unchanged)
  • components/ui/button.tsx - for Sign Out button (unchanged)
  • components/ui/text.tsx - for text display
  • React Native Linking API for iOS Settings deep link

Resources and References

Deliverables

  • Modified app/(app)/(protected)/settings.tsx with dynamic email display
  • Updated Avatar component to show first letter of user email
  • Added FlatList with iOS Settings deep link for subscription management
  • Proper error handling for missing user email data

Risks or Challenges

  • User email might be null/undefined during authentication state transitions
  • iOS Settings deep link behavior varies across iOS versions
  • Avatar logic needs proper email validation and fallback handling
  • FlatList integration should maintain consistent styling with existing layout

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions