feat: show avatars in recipient autocomplete suggestions

components/calendar/participant-input.tsx

@@ -4,6 +4,7 @@ import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHand
 import { useTranslations } from "next-intl";
 import { X } from "lucide-react";
 import { Input } from "@/components/ui/input";
+import { Avatar } from "@/components/ui/avatar";
 import { useContactStore } from "@/stores/contact-store";
 
 interface Participant {
@@ -144,14 +145,17 @@ export const ParticipantInput = forwardRef<ParticipantInputHandle, ParticipantIn
                 role="option"
                 aria-selected={i === activeIndex}
                 onMouseDown={(e) => { e.preventDefault(); addParticipant(s); }}
-                className={`px-3 py-2 text-sm cursor-pointer transition-colors ${
+                className={`px-3 py-2 text-sm cursor-pointer transition-colors flex items-center gap-2 ${
                   i === activeIndex ? "bg-accent text-accent-foreground" : "hover:bg-muted"
                 }`}
               >
-                <div className="font-medium truncate">{s.name || s.email}</div>
+                <Avatar name={s.name} email={s.email} size="sm" className="shrink-0 w-7 h-7 text-[10px]" />
-                {s.name && (
+                <div className="min-w-0">
-                  <div className="text-xs text-muted-foreground truncate">{s.email}</div>
+                  <div className="font-medium truncate">{s.name || s.email}</div>
-                )}
+                  {s.name && (
+                    <div className="text-xs text-muted-foreground truncate">{s.email}</div>
+                  )}
+                </div>
               </li>
             ))}
           </ul>

components/email/email-composer.tsx

@@ -28,6 +28,7 @@ import { buildMimeMessage, wrapCmsAsSmimeMessage } from "@/lib/smime/mime-builde
 import type { MimeAttachment } from "@/lib/smime/mime-builder";
 import { smimeSign } from "@/lib/smime/smime-sign";
 import { PluginSlot } from "@/components/plugins/plugin-slot";
+import { Avatar } from "@/components/ui/avatar";
 import { FilePreviewModal } from "@/components/files/file-preview-modal";
 import { smimeEncrypt } from "@/lib/smime/smime-encrypt";
 import { useContactStore } from "@/stores/contact-store";
@@ -2702,6 +2703,7 @@ const AutocompleteDropdown = React.forwardRef<HTMLDivElement, {
             onSelect(r);
           }}
         >
+          <Avatar name={r.name} email={r.email} size="sm" className="shrink-0 w-6 h-6 text-[10px]" />
           <span className="font-medium truncate">{r.name || r.email}</span>
           {r.name && (
             <span className="text-muted-foreground truncate">&lt;{r.email}&gt;</span>