POWR/docs/features/profile/profile_overview.md

Profile Tab Overview

Last Updated: 2025-04-02
Status: Implemented
Related To: Nostr Integration, Analytics

Introduction

The Profile tab provides users with a comprehensive interface for managing their personal information, viewing their activity, analyzing their progress, and configuring application settings. This section is deeply integrated with Nostr for cross-device synchronization and includes advanced analytics capabilities for tracking workout progress.

Features

The Profile tab is organized into four main sections, each implemented as a tab within a material top tab navigator:

Tab	Purpose	Key Features
Profile	User profile display and social feed	User metadata, follower statistics, personal social feed
Activity	User activity summary	Workout statistics, recent workouts, personal records
Progress	Detailed analytics and progress tracking	Workout analytics, charts, period-based filtering
Settings	Application and account configuration	Theme settings, units selection, Terms of Service, logout

Technical Architecture

The Profile tab is built with a consistent architecture throughout all its components:

• Authentication Integration: Each tab properly handles both authenticated and unauthenticated states
• Nostr Integration: User profiles, social feeds, and cross-device synchronization via the Nostr protocol
• React Hook Management: Carefully crafted component structure to ensure consistent hook ordering
• Analytics: Integration with AnalyticsService for workout progress tracking
• Offline Support: Detection and handling of offline states across all tabs

Authentication Pattern

The profile section implements a consistent authentication pattern:

// Pattern used across all profile tab components
if (!isAuthenticated) {
  return <NostrProfileLogin message="Login-specific message" />;
}

// Main component content for authenticated users
return (
  <Component>
    {/* Tab content */}
  </Component>
);

This pattern ensures that unauthenticated users are presented with a login interface while maintaining React hook ordering consistency.

Implementation Challenges

Several key technical challenges were addressed in the implementation:

1. React Hook Consistency: The codebase uses careful component structuring to ensure React hooks are called in the same order for every render, preventing the "rendered fewer hooks than expected" error
2. Authentication State Management: Login state is handled consistently across all tabs
3. NostrBand Integration: Real-time follower statistics via the NostrBand API
4. Feed Entry Format Transformation: Complex transformation between different social feed entry formats

Tab Structure

The Tab navigator is implemented in app/(tabs)/profile/_layout.tsx:

<Tab.Navigator
  initialRouteName="overview"
  screenOptions={{
    tabBarActiveTintColor: theme.colors.tabIndicator,
    tabBarInactiveTintColor: theme.colors.tabInactive,
    tabBarLabelStyle: {
      fontSize: 14,
      textTransform: 'capitalize',
      fontWeight: 'bold',
    },
    tabBarIndicatorStyle: {
      backgroundColor: theme.colors.tabIndicator,
      height: 2,
    },
    tabBarStyle: { 
      backgroundColor: theme.colors.background,
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 1,
      borderBottomColor: theme.colors.border,
    },
    tabBarPressColor: theme.colors.primary,
  }}
>
  <Tab.Screen
    name="overview"
    component={OverviewScreen}
    options={{ title: 'Profile' }}
  />
  
  <Tab.Screen
    name="activity"
    component={ActivityScreen}
    options={{ title: 'Activity' }}
  />
  
  <Tab.Screen
    name="progress"
    component={ProgressScreen}
    options={{ title: 'Progress' }}
  />
  
  <Tab.Screen
    name="settings"
    component={SettingsScreen}
    options={{ title: 'Settings' }}
  />
</Tab.Navigator>

Individual Tab Documentation

• Profile Tab - User profile information and social feed
• Activity Tab - User activity summary and recent workouts
• Progress Tab - Detailed analytics and charts
• Settings Tab - Application and account settings

Technical Documentation

• Authentication Patterns - Technical details about authentication implementation
• Progress Tracking - How workout progress is tracked and visualized
• Follower Statistics - NostrBand integration for follower counts

Related Documentation

• Nostr Integration - How Nostr is used throughout the application
• Analytics Service - Workout analytics implementation details