This commit enhances the UI by displaying group icons.

- The groups list now shows an icon for each group, with a fallback to the group's first initial.
- The group details screen also displays the icon in its header for a consistent user experience.

Author: google-labs-jules[bot]

frontend/screens/GroupDetailsScreen.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { View, StyleSheet, FlatList, Alert, ScrollView } from 'react-native';
-import { Button, Text, Card, ActivityIndicator, Appbar, FAB, Title, Paragraph } from 'react-native-paper';
+import { Button, Text, Card, ActivityIndicator, Appbar, FAB, Title, Paragraph, Avatar } from 'react-native-paper';
 import { AuthContext } from '../context/AuthContext';
 import { getGroupMembers, getGroupExpenses, getOptimizedSettlements } from '../api/groups';
 
 const GroupDetailsScreen = ({ route, navigation }) => {
-  const { groupId, groupName } = route.params;
+  const { groupId, groupName, groupIcon } = route.params;
   const { token, user } = useContext(AuthContext);
   const [members, setMembers] = useState([]);
   const [expenses, setExpenses] = useState([]);
@@ -120,7 +120,8 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     <View style={styles.container}>
         <Appbar.Header>
             <Appbar.BackAction onPress={() => navigation.goBack()} />
-            <Appbar.Content title={groupName} />
+            <Avatar.Text size={36} label={groupIcon || groupName.charAt(0)} style={{marginLeft: 8}} />
+            <Appbar.Content title={groupName} titleStyle={{marginLeft: 8}}/>
         </Appbar.Header>
 
         <ScrollView style={styles.contentContainer}>

frontend/screens/HomeScreen.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { View, StyleSheet, FlatList, Alert } from 'react-native';
-import { Button, Text, Card, ActivityIndicator, Appbar, Modal, Portal, TextInput } from 'react-native-paper';
+import { Button, Text, Card, ActivityIndicator, Appbar, Modal, Portal, TextInput, Avatar } from 'react-native-paper';
 import { AuthContext } from '../context/AuthContext';
 import { getGroups, createGroup } from '../api/groups';
 
@@ -56,8 +56,11 @@ const HomeScreen = ({ navigation }) => {
   };
 
   const renderGroup = ({ item }) => (
-    <Card style={styles.card} onPress={() => navigation.navigate('GroupDetails', { groupId: item._id, groupName: item.name })}>
-      <Card.Title title={item.name} />
+    <Card style={styles.card} onPress={() => navigation.navigate('GroupDetails', { groupId: item._id, groupName: item.name, groupIcon: item.icon })}>
+      <Card.Title
+        title={item.name}
+        left={(props) => <Avatar.Text {...props} label={item.icon || item.name.charAt(0)} />}
+      />
       <Card.Content>
         <Text>Join Code: {item.joinCode}</Text>
         <Text>You are settled up.</Text>