feat: integrate user profile pictures with circular avatar display and upload in settings

frontend/src/features/teams/GroupsView.tsx

@@ -15,6 +15,7 @@ import {
 import { Team, User } from '../../lib/types';
 import { api, triggerHaptic } from '../../lib/api';
 import { UserAutocomplete } from '../UserAutocomplete';
+import { UserAvatar } from '../../components/UserAvatar';
 
 interface GroupsViewProps {
   currentUser: User;
@@ -487,9 +488,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) =
                                 className="p-2.5 bg-panel border border-border rounded-btn flex items-center justify-between gap-2 text-xs"
                               >
                                 <div className="flex items-center gap-2 min-w-0">
-                                  <div className="w-6 h-6 rounded-full bg-accent/20 text-accent text-[10px] font-bold flex items-center justify-center flex-shrink-0">
-                                    {(m.displayName || 'U').slice(0, 1).toUpperCase()}
-                                  </div>
+                                  <UserAvatar user={{ displayName: m.displayName, email: m.email, avatarUrl: m.avatarUrl }} size="xs" />
                                   <div className="min-w-0">
                                     <p className="text-main font-medium truncate text-xs">
                                       {m.displayName} {isSelf && <span className="text-faint">(Du)</span>}