Make user avatar dynamic instead of showing old icon (#890)

apps/mobile-app/app/(tabs)/credentials/index.tsx

@@ -2,7 +2,7 @@ import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import * as Haptics from 'expo-haptics';
 import { useRouter, useLocalSearchParams } from 'expo-router';
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { StyleSheet, Text, FlatList, TouchableOpacity, TextInput, RefreshControl, Platform, Animated, Alert } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Toast from 'react-native-toast-message';

apps/mobile-app/app/unlock.tsx

@@ -2,17 +2,17 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import { useState, useEffect, useCallback } from 'react';
-import { StyleSheet, View, TextInput, TouchableOpacity, Alert, Image, KeyboardAvoidingView, Platform, ScrollView, Dimensions, TouchableWithoutFeedback, Keyboard, Text } from 'react-native';
+import { StyleSheet, View, TextInput, TouchableOpacity, Alert, KeyboardAvoidingView, Platform, ScrollView, Dimensions, TouchableWithoutFeedback, Keyboard, Text } from 'react-native';
 
 import EncryptionUtility from '@/utils/EncryptionUtility';
 
 import { useColors } from '@/hooks/useColorScheme';
 
-import avatarImage from '@/assets/images/avatar.webp';
 import Logo from '@/assets/images/logo.svg';
 import LoadingIndicator from '@/components/LoadingIndicator';
 import { ThemedText } from '@/components/themed/ThemedText';
 import { ThemedView } from '@/components/themed/ThemedView';
+import { Avatar } from '@/components/ui/Avatar';
 import { useAuth } from '@/context/AuthContext';
 import { useDb } from '@/context/DbContext';
 import { useWebApi } from '@/context/WebApiContext';
@@ -139,12 +139,6 @@ export default function UnlockScreen() : React.ReactNode {
       fontWeight: 'bold',
       textAlign: 'center',
     },
-    avatar: {
-      borderRadius: 20,
-      height: 40,
-      marginRight: 12,
-      width: 40,
-    },
     avatarContainer: {
       alignItems: 'center',
       flexDirection: 'row',
@@ -292,10 +286,7 @@ export default function UnlockScreen() : React.ReactNode {
                 </View>
                 <View style={styles.content}>
                   <View style={styles.avatarContainer}>
-                    <Image
-                      source={avatarImage}
-                      style={styles.avatar}
-                    />
+                    <Avatar />
                     <ThemedText style={styles.username}>{username}</ThemedText>
                   </View>
                   <ThemedText style={styles.subtitle}>Enter your password to unlock your vault</ThemedText>

apps/mobile-app/components/ui/Avatar.tsx

@@ -0,0 +1,40 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useColors } from '@/hooks/useColorScheme';
+
+import { useAuth } from '@/context/AuthContext';
+
+import { ThemedText } from '../themed/ThemedText';
+
+/**
+ * Avatar component that displays the first letter of the username.
+ */
+export function Avatar(): React.ReactNode {
+  const colors = useColors();
+  const { username } = useAuth();
+
+  const styles = StyleSheet.create({
+    avatar: {
+      alignItems: 'center',
+      backgroundColor: colors.primary + 80,
+      borderRadius: 20,
+      height: 40,
+      justifyContent: 'center',
+      marginRight: 12,
+      width: 40,
+    },
+    avatarText: {
+      color: colors.primarySurfaceText,
+      fontSize: 18,
+      fontWeight: '600',
+    },
+  });
+
+  return (
+    <View style={styles.avatar}>
+      <ThemedText style={styles.avatarText}>
+        {username?.[0]?.toUpperCase() ?? '?'}
+      </ThemedText>
+    </View>
+  );
+}

apps/mobile-app/components/ui/UsernameDisplay.tsx

@@ -1,25 +1,20 @@
-import { StyleSheet, View, Image } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { useColors } from '@/hooks/useColorScheme';
 
-import avatarImage from '@/assets/images/avatar.webp';
 import { ThemedText } from '@/components/themed/ThemedText';
 import { useAuth } from '@/context/AuthContext';
 
+import { Avatar } from './Avatar';
+
 /**
- * Username display component.
+ * Username display component that shows the avatar and "Logged in as" text.
  */
 export function UsernameDisplay(): React.ReactNode {
   const colors = useColors();
   const { username } = useAuth();
 
   const styles = StyleSheet.create({
-    avatar: {
-      borderRadius: 20,
-      height: 40,
-      marginRight: 12,
-      width: 40,
-    },
     userInfoContainer: {
       alignItems: 'center',
       backgroundColor: colors.background,
@@ -31,15 +26,11 @@ export function UsernameDisplay(): React.ReactNode {
       fontSize: 16,
       fontWeight: '600',
     },
-
   });
 
   return (
     <View style={styles.userInfoContainer}>
-      <Image
-        source={avatarImage}
-        style={styles.avatar}
-      />
+      <Avatar />
       <ThemedText style={styles.usernameText}>Logged in as: {username}</ThemedText>
     </View>
   );