POWR/docs/features/profile/profile_overview.md

# Profile Tab Overview

**Last Updated:** 2025-04-02  
**Status:** Implemented  
**Related To:** [Nostr Integration](../../technical/nostr/index.md), [Analytics](../../technical/analytics/index.md)

## 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:

```jsx
// 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`:

```typescript
<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](./tabs/overview_tab.md) - User profile information and social feed
- [Activity Tab](./tabs/activity_tab.md) - User activity summary and recent workouts
- [Progress Tab](./tabs/progress_tab.md) - Detailed analytics and charts
- [Settings Tab](./tabs/settings_tab.md) - Application and account settings

## Technical Documentation

- [Authentication Patterns](./authentication_patterns.md) - Technical details about authentication implementation
- [Progress Tracking](./progress_tracking.md) - How workout progress is tracked and visualized
- [Follower Statistics](./follower_stats.md) - NostrBand integration for follower counts

## Related Documentation

- [Nostr Integration](../../technical/nostr/index.md) - How Nostr is used throughout the application
- [Analytics Service](../../technical/analytics/index.md) - Workout analytics implementation details