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

frontend/src/features/UserAutocomplete.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Search, X, Check } from 'lucide-react';
 import { User } from '../lib/types';
+import { UserAvatar } from '../components/UserAvatar';
 
 interface UserAutocompleteProps {
   users: User[];
@@ -101,9 +102,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
       {selectedUser ? (
         <div className="h-8 px-2.5 bg-panel-elevated border border-accent/40 rounded-btn flex items-center justify-between gap-2 text-xs">
           <div className="flex items-center gap-2 min-w-0">
-            <div className="w-5 h-5 rounded-full bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center shrink-0">
-              {(selectedUser.displayName || selectedUser.email || '?')[0].toUpperCase()}
-            </div>
+            <UserAvatar user={selectedUser} size="xs" />
             <span className="font-semibold text-main truncate">
               {selectedUser.displayName || selectedUser.email}
             </span>
@@ -170,9 +169,7 @@ export const UserAutocomplete: React.FC<UserAutocompleteProps> = ({
                       }`}
                     >
                       <div className="flex items-center gap-2 min-w-0">
-                        <div className="w-5 h-5 rounded-full bg-accent/20 text-accent font-bold text-[10px] flex items-center justify-center shrink-0">
-                          {(u.displayName || u.email || '?')[0].toUpperCase()}
-                        </div>
+                        <UserAvatar user={u} size="xs" />
                         <div className="truncate">
                           <span className="font-semibold text-main">
                             {u.displayName || u.email}