POWR/docs/design/ProfileTab/ProfileTabEnhancementDesignDoc.md

Profile Tab Enhancement Design Document

Overview

This document outlines the design and implementation of the enhanced Profile tab for the POWR app. The enhancement includes a tabbed interface with separate screens for profile overview, activity feed, progress analytics, and settings.

Motivation

The original Profile tab was limited to displaying basic user information. With the growing social and analytics features of the app, we need a more comprehensive profile experience that:

1. Showcases the user's identity and achievements
2. Displays workout activity in a social feed format
3. Provides analytics and progress tracking
4. Offers easy access to settings and preferences

By moving analytics and progress tracking to the Profile tab, we create a more cohesive user experience that focuses on personal growth and achievement.

Design

Tab Structure

The enhanced Profile tab is organized into four sub-tabs:

1. Overview: Displays user profile information, stats summary, and quick access to recent records and activity
2. Activity: Shows a chronological feed of the user's workout posts
3. Progress: Provides analytics and progress tracking with charts and personal records
4. Settings: Contains profile editing, privacy controls, and app preferences

Navigation

The tabs are implemented using Expo Router's Tabs component, with appropriate icons for each tab:

• Overview: User icon
• Activity: Activity icon
• Progress: BarChart2 icon
• Settings: Settings icon

Data Flow

The Profile tab components interact with several services:

1. NDK Services: For user profile data and authentication
2. WorkoutService: For accessing workout history
3. AnalyticsService: For calculating statistics and progress metrics

Implementation Details

New Components and Files

1. Tab Layout:

   • app/(tabs)/profile/_layout.tsx: Defines the tab structure and navigation

2. Tab Screens:

   • app/(tabs)/profile/overview.tsx: Profile information and summary
   • app/(tabs)/profile/activity.tsx: Workout activity feed
   • app/(tabs)/profile/progress.tsx: Analytics and progress tracking
   • app/(tabs)/profile/settings.tsx: User settings and preferences

3. Services:

   • lib/services/AnalyticsService.ts: Service for calculating workout statistics and progress data
   • lib/hooks/useAnalytics.ts: React hook for accessing the analytics service

Analytics Service

The AnalyticsService provides methods for:

1. Workout Statistics: Calculate aggregate statistics like total workouts, duration, volume, etc.
2. Exercise Progress: Track progress for specific exercises over time
3. Personal Records: Identify and track personal records for exercises

The service is designed to work with both local and Nostr-based workout data, providing a unified view of the user's progress.

Authentication Integration

The Profile tab is integrated with the Nostr authentication system:

• Unauthenticated users see a login prompt in the Overview tab
• All tabs show appropriate UI for unauthenticated users
• The NostrLoginSheet is accessible from the Overview tab

User Experience

Overview Tab

The Overview tab provides a comprehensive view of the user's profile:

• Profile picture and banner image
• Display name and username
• About/bio text
• Summary statistics (workouts, templates, programs)
• Recent personal records
• Recent activity
• Quick actions for profile management

Activity Tab

The Activity tab displays the user's workout posts in a chronological feed:

• Each post shows the workout details
• Posts are formatted similar to the social feed
• Empty state for users with no activity

Progress Tab

The Progress tab visualizes the user's fitness journey:

• Period selector (week, month, year, all-time)
• Workout summary statistics
• Workout frequency chart
• Exercise distribution chart
• Personal records list
• Empty states for users with no data

Settings Tab

The Settings tab provides access to user preferences:

• Profile information editing
• Privacy settings
• Notification preferences
• Account management

Future Enhancements

1. Workout Streaks: Track and display workout consistency
2. Goal Setting: Allow users to set and track fitness goals
3. Comparison Analytics: Compare current performance with past periods
4. Social Integration: Show followers/following counts and management
5. Achievement Badges: Gamification elements for workout milestones

Technical Considerations

Performance

• The AnalyticsService uses caching to minimize recalculations
• Data is loaded asynchronously to keep the UI responsive
• Charts and visualizations use efficient rendering techniques

Data Privacy

• Analytics are calculated locally on the device
• Sharing controls allow users to decide what data is public
• Personal records can be selectively shared

Conclusion

The enhanced Profile tab transforms the user experience by providing a comprehensive view of the user's identity, activity, and progress. By centralizing these features in the Profile tab, we create a more intuitive and engaging experience that encourages users to track their fitness journey and celebrate their achievements.