POWR/docs/features/profile/tabs/settings_tab.md

Settings Tab

Last Updated: 2025-04-02
Status: Implemented
Related To: Profile Tab Overview

Introduction

The Settings tab provides users with configuration options for their account and application preferences. It allows customization of the app appearance, functionality settings, and offers account management options including logout functionality.

Features

Feature	Status	Notes
Account Settings	✅ Implemented	Display of Nostr publishing status and local storage options
App Settings	✅ Implemented	Theme toggle, notifications, and units selection
Dark Mode Toggle	✅ Implemented	Switch between light and dark theme
Terms of Service	✅ Implemented	Access to legal documents
Logout Functionality	✅ Implemented	Option to log out of Nostr account
Authentication Detection	✅ Implemented	Login prompt for unauthenticated users
Version Information	✅ Implemented	Display of current app version

Implementation Details

The Settings tab is implemented in app/(tabs)/profile/settings.tsx. It integrates with the NDK authentication system for account management and the app's theme system for appearance customization.

Account Settings Implementation

The tab displays account-related settings:

{/* Account Settings */}
<Card className="mx-4 mt-4 mb-4">
  <CardContent className="p-4">
    <Text className="text-lg font-semibold mb-4">Account Settings</Text>
    
    <View className="flex-row justify-between items-center py-2 border-b border-border">
      <Text>Nostr Publishing</Text>
      <Text className="text-muted-foreground">Public</Text>
    </View>
    
    <View className="flex-row justify-between items-center py-2 border-b border-border">
      <Text>Local Storage</Text>
      <Text className="text-muted-foreground">Enabled</Text>
    </View>
    
    <View className="flex-row justify-between items-center py-2">
      <Text>Connected Relays</Text>
      <Text className="text-muted-foreground">5</Text>
    </View>
  </CardContent>
</Card>

App Settings Implementation

The tab provides application-specific settings like theme and notifications:

{/* App Settings */}
<Card className="mx-4 mb-4">
  <CardContent className="p-4">
    <Text className="text-lg font-semibold mb-4">App Settings</Text>
    
    <View className="flex-row justify-between items-center py-2 border-b border-border">
      <Text>Dark Mode</Text>
      <Switch
        value={colorScheme === 'dark'}
        onValueChange={toggleColorScheme}
        trackColor={{ false: '#767577', true: theme.colors.primary }}
      />
    </View>
    
    <View className="flex-row justify-between items-center py-2 border-b border-border">
      <Text>Notifications</Text>
      <Switch
        value={true}
        trackColor={{ false: '#767577', true: theme.colors.primary }}
      />
    </View>
    
    <View className="flex-row justify-between items-center py-2">
      <Text>Units</Text>
      <Text className="text-muted-foreground">Metric (kg)</Text>
    </View>
  </CardContent>
</Card>

Theme Integration

The Settings tab integrates with the app's theme system to toggle between light and dark modes:

const { colorScheme, toggleColorScheme } = useColorScheme();

// Used in the Dark Mode toggle
<Switch
  value={colorScheme === 'dark'}
  onValueChange={toggleColorScheme}
  trackColor={{ false: '#767577', true: theme.colors.primary }}
/>

Terms of Service Modal

The tab provides access to the Terms of Service:

<TouchableOpacity 
  className="flex-row justify-between items-center py-2"
  onPress={() => setIsTermsModalVisible(true)}
>
  <Text>Terms of Service</Text>
  <View className="flex-row items-center">
    <Text className="text-primary mr-1">View</Text>
    <ChevronRight size={16} color={theme.colors.primary} />
  </View>
</TouchableOpacity>

{/* Terms of Service Modal */}
<TermsOfServiceModal 
  visible={isTermsModalVisible}
  onClose={() => setIsTermsModalVisible(false)}
/>

Logout Implementation

The tab includes a logout button that uses the NDK authentication system:

{/* Logout Button */}
<View className="mx-4 mt-4">
  <Button 
    variant="destructive"
    onPress={logout}
    className="w-full"
  >
    <Text className="text-white">Logout</Text>
  </Button>
</View>

Technical Considerations

Authentication Handling

Like other profile tabs, the Settings tab handles authentication with a consistent pattern:

// Show different UI when not authenticated
if (!isAuthenticated) {
  return <NostrProfileLogin message="Login with your Nostr private key to access settings." />;
}

Theme Integration

The tab uses the app's theme system for consistent styling and for the dark mode toggle:

const theme = useTheme() as CustomTheme;
const { colorScheme, toggleColorScheme } = useColorScheme();

NDK Authentication

The tab integrates with NDK for authentication management:

const { currentUser, isAuthenticated } = useNDKCurrentUser();
const { logout } = useNDKAuth();

User Experience Flow

1. Authentication Check:

   • If user is not authenticated, display NostrProfileLogin component
   • If authenticated, proceed to display settings

2. Settings Categories:

   • Account Settings: View and manage Nostr-related settings
   • App Settings: Control appearance and behavior of the app
   • About: Access app information and legal documents

3. Theme Toggle:

   • Switch between light and dark mode with immediate visual feedback
   • Theme preference is persisted between app sessions

4. Terms of Service:

   • View legal documents in a modal overlay
   • Close modal to return to settings

5. Logout:

   • Log out of Nostr account
   • Return to unauthenticated state across the app

Future Enhancements

1. Profile Editing: Add dedicated profile editing screen
2. Advanced Relay Management: Enhanced UI for relay configuration
3. Additional Units Options: More measurement units (imperial/metric)
4. Privacy Controls: Granular privacy settings for social sharing
5. Notification Management: Per-feature notification settings
6. Data Management: Import/export and backup options

Related Documentation

• Profile Overview - General overview of the Profile tab
• Authentication Patterns - Technical details about authentication implementation
• Theme System - Documentation for the app's theming system
• Terms of Service - Legal documentation