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

frontend/src/components/UnifiedShareModal.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react';
 import { User, Team, UnifiedShare } from '../lib/types';
 import { UserAutocomplete } from '../features/UserAutocomplete';
+import { UserAvatar } from './UserAvatar';
 
 export interface UnifiedShareModalProps {
   isOpen: boolean;
@@ -284,15 +285,18 @@ export const UnifiedShareModal: React.FC<UnifiedShareModalProps> = ({
                     className="p-2.5 bg-canvas border border-border rounded-btn flex items-center justify-between gap-3 text-xs hover:border-border/80 transition-colors"
                   >
                     <div className="flex items-center gap-2.5 min-w-0">
-                      <div
-                        className={`w-7 h-7 rounded-btn flex items-center justify-center shrink-0 ${
-                          isTeam
-                            ? 'bg-accent/15 text-accent'
-                            : 'bg-surface-2 text-main border border-border'
-                        }`}
-                      >
-                        {isTeam ? <Users className="w-3.5 h-3.5" /> : <UserIcon className="w-3.5 h-3.5" />}
-                      </div>
+                      {isTeam ? (
+                        <div className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 bg-accent/15 text-accent border border-accent/25">
+                          <Users className="w-3.5 h-3.5" />
+                        </div>
+                      ) : (
+                        <UserAvatar
+                          avatarUrl={sh.avatarUrl || collaborators.find((c) => c.id === sh.targetId)?.avatarUrl}
+                          name={sh.targetName || sh.targetEmail}
+                          size="sm"
+                          className="border border-border/80"
+                        />
+                      )}
                       <div className="truncate">
                         <div className="font-medium text-main truncate flex items-center gap-1.5">
                           <span className="truncate">{sh.targetName || (isTeam ? 'Gruppe' : sh.targetEmail || 'Benutzer')}</span>