feat: avatars for humans (#273)

* implement avatar backend functionality

* add avatar endpoints

* typo

* implement client side avatar upload and handling

* fixes

* Update go/internal/handler/handler.go

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* Update js/desktop/src/lib/avatar-image.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* bug in order

* remove unused component

* fix invalid migration

* fix syntax errors

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

js/desktop/src/features/particles/particle-list-view.tsx

@@ -26,7 +26,7 @@ import { useAuthStore } from '@/stores/auth-store';
 import { particlePath } from '@/lib/particle-path';
 import { resolveHumanDisplay } from '@/lib/humans';
 import { RelativeTimestamp } from '@/components/relative-timestamp';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { HumanAvatar } from '@/components/human-avatar';
 import { Separator } from '@/components/ui/separator';
 import { Progress } from '@/components/ui/progress';
 import { Small } from '@/components/ui/typography';
@@ -150,7 +150,7 @@ const StreamRow = memo(function StreamRow({
     particle.visible_to.length === 2 &&
     particle.visible_to.every((v) => v.startsWith('human:'));
 
-  const initials = useMemo(() => {
+  const avatar = useMemo(() => {
     if (isDM) {
       const otherEntry = particle.visible_to.find(
         (v) => v !== `human:${userId}`,
@@ -158,7 +158,12 @@ const StreamRow = memo(function StreamRow({
       if (otherEntry) {
         const otherId = otherEntry.replace('human:', '');
         const otherHuman = network?.humans?.find((h) => h.id === otherId);
-        if (otherHuman) return getInitials(otherHuman.email);
+        if (otherHuman) {
+          return {
+            initials: getInitials(otherHuman.email),
+            avatarObjectId: otherHuman.avatar_object_id ?? null,
+          };
+        }
       }
     }
 
@@ -166,10 +171,18 @@ const StreamRow = memo(function StreamRow({
       const creator = network?.humans?.find(
         (h) => h.id === latestChild.created_by_human_id,
       );
-      if (creator) return getInitials(creator.email);
+      if (creator) {
+        return {
+          initials: getInitials(creator.email),
+          avatarObjectId: creator.avatar_object_id ?? null,
+        };
+      }
     }
 
-    return particle.properties.name.slice(0, 2).toUpperCase();
+    return {
+      initials: particle.properties.name.slice(0, 2).toUpperCase(),
+      avatarObjectId: null,
+    };
   }, [
     isDM,
     particle.visible_to,
@@ -242,11 +255,12 @@ const StreamRow = memo(function StreamRow({
       {videoThumbObjectId ? (
         <VideoThumbnail objectId={videoThumbObjectId} isUnseen={!!isUnseen} />
       ) : (
-        <Avatar className={cn(isUnseen && 'ring-2 ring-primary')}>
-          <AvatarFallback className="bg-primary/10 text-primary font-medium">
-            {initials}
-          </AvatarFallback>
-        </Avatar>
+        <HumanAvatar
+          className={cn(isUnseen && 'ring-2 ring-primary')}
+          avatarObjectId={avatar.avatarObjectId}
+          initials={avatar.initials}
+          fallbackClassName="bg-primary/10 text-primary font-medium"
+        />
       )}
       <div className="min-w-0 flex-1">
         <div className="flex items-center justify-between gap-2">

js/desktop/src/features/particles/playback-page-indicator.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { HumanAvatar } from '@/components/human-avatar';
 import {
   Tooltip,
   TooltipContent,
@@ -161,18 +161,16 @@ function SegmentPresenceAvatars({
       {visible.map((human) => (
         <Tooltip key={human.humanId}>
           <TooltipTrigger asChild>
-            <Avatar
+            <HumanAvatar
               size="xs"
               className={
                 onlineHumanIds?.has(human.humanId)
                   ? 'ring-2 ring-green-500'
                   : 'ring-1 ring-black/50'
               }
-            >
-              <AvatarFallback>
-                {human.emailPrefix.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
+              avatarObjectId={human.avatarObjectId}
+              initials={human.emailPrefix.slice(0, 2).toUpperCase()}
+            />
           </TooltipTrigger>
           <TooltipContent side="top" className="text-xs">
             {human.email}

js/desktop/src/features/particles/reaction-bar.tsx

@@ -5,7 +5,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { HumanAvatar } from '@/components/human-avatar';
 import { REACTION_EMOJIS, type Reactions, type Human } from '@/api/types';
 import { cn } from '@/lib/utils';
 import { resolveHumanDisplay } from '@/lib/humans';
@@ -113,11 +113,13 @@ export function ReactionBar({
                     : 'bg-black/40 hover:bg-black/50',
                 )}
               >
-                <Avatar size="xs" className="shrink-0">
-                  <AvatarFallback className="bg-white/15 text-[9px] font-medium text-white">
-                    {firstReactor.initials}
-                  </AvatarFallback>
-                </Avatar>
+                <HumanAvatar
+                  size="xs"
+                  className="shrink-0"
+                  avatarObjectId={firstReactor.avatarObjectId}
+                  initials={firstReactor.initials}
+                  fallbackClassName="bg-white/15 text-[9px] font-medium text-white"
+                />
                 <span className="truncate text-white/90">{text}</span>
                 {reactors.length > 1 && (
                   <span className="shrink-0 text-white/60">

js/desktop/src/features/particles/stream-card.tsx

@@ -1,179 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-import { Headphones } from 'lucide-react';
-import { cn, getInitials } from '@/lib/utils';
-import { useLiveLatestChild } from '@/hooks/use-particle';
-import { useAuthStore } from '@/stores/auth-store';
-import { particlePath } from '@/lib/particle-path';
-import type { Particle, StreamProperties } from '@/api/types';
-import { useStreamAutoplay } from '@/hooks/use-stream-autoplay';
-import { ParticlePreview } from '@/features/particles/particle-preview';
-import { useNetwork } from '@/hooks/use-networks';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { RelativeTimestamp } from '@/components/relative-timestamp';
-import { Small } from '@/components/ui/typography';
-
-interface StreamCardProps {
-  particle: Particle & { type: 'stream'; properties: StreamProperties };
-  networkId: string;
-  onClick: () => void;
-  isSelected?: boolean;
-  shortcutKey?: number;
-}
-
-export const StreamCard = forwardRef<HTMLDivElement, StreamCardProps>(
-  function StreamCard(
-    { particle, networkId, onClick, isSelected, shortcutKey },
-    ref,
-  ) {
-    const streamPath = particlePath(networkId, [particle.id]);
-    const { latestChild } = useLiveLatestChild(streamPath);
-    const userId = useAuthStore((s) => s.user?.id) ?? '';
-    const network = useNetwork(networkId);
-
-    useStreamAutoplay(latestChild, particle, networkId, network ?? undefined);
-
-    const hasActiveHuddle =
-      particle.huddle_active_participants &&
-      particle.huddle_active_participants.length > 0;
-    const huddleCount = particle.huddle_active_participants?.length ?? 0;
-
-    const isDM =
-      particle.visible_to.length === 2 &&
-      particle.visible_to.every((v) => v.startsWith('human:'));
-
-    const initials = useMemo(() => {
-      if (isDM) {
-        const otherEntry = particle.visible_to.find(
-          (v) => v !== `human:${userId}`,
-        );
-        if (otherEntry) {
-          const otherId = otherEntry.replace('human:', '');
-          const otherHuman = network?.humans?.find((h) => h.id === otherId);
-          if (otherHuman) return getInitials(otherHuman.email);
-        }
-      }
-
-      if (latestChild) {
-        const creator = network?.humans?.find(
-          (h) => h.id === latestChild.created_by_human_id,
-        );
-        if (creator) return getInitials(creator.email);
-      }
-
-      return particle.properties.name.slice(0, 2).toUpperCase();
-    }, [
-      isDM,
-      particle.visible_to,
-      particle.properties.name,
-      userId,
-      latestChild,
-      network,
-    ]);
-
-    const isUnseen = useMemo(() => {
-      if (!latestChild) return false;
-      const latestChildTimestamp = latestChild.created_at.getTime();
-      const userPlaybackPosition =
-        particle.playback_markers?.[userId]?.getTime() ?? 0;
-      return latestChildTimestamp > userPlaybackPosition;
-    }, [latestChild, particle.playback_markers, userId]);
-
-    // For media particles with a transcript, show it as an overlay on the preview
-    const transcript =
-      latestChild?.type === 'media'
-        ? latestChild.properties.transcript?.transcript
-        : undefined;
-
-    return (
-      <div
-        ref={ref}
-        role="button"
-        tabIndex={0}
-        onClick={onClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') onClick();
-        }}
-        className={cn(
-          'cursor-pointer overflow-hidden rounded-xl ring-1 ring-foreground/10 transition-all hover:ring-foreground/20',
-          isUnseen && 'ring-2 ring-primary',
-          isSelected && 'ring-2 ring-ring',
-          hasActiveHuddle && 'ring-2 ring-red-500/70',
-        )}
-      >
-        {/* Preview area */}
-        <div className="relative aspect-[4/3] overflow-hidden bg-muted">
-          {hasActiveHuddle && (
-            <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-b from-red-500/15 to-transparent" />
-          )}
-          {shortcutKey && (
-            <kbd className="absolute top-1.5 left-1.5 z-10 flex size-5 items-center justify-center rounded bg-black/50 font-mono text-xs text-white/70">
-              {shortcutKey}
-            </kbd>
-          )}
-          {latestChild ? (
-            <ParticlePreview particle={latestChild} />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center">
-              <p className="text-muted-foreground text-xs italic">
-                No messages yet
-              </p>
-            </div>
-          )}
-
-          {/* Transcript overlay for media with transcripts */}
-          {transcript && (
-            <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 to-transparent px-2.5 pt-6 pb-2">
-              <p className="line-clamp-2 text-md leading-snug text-white/90">
-                {transcript}
-              </p>
-            </div>
-          )}
-        </div>
-
-        {/* Info bar */}
-        <div className="flex items-center gap-2 px-2.5 py-2">
-          <Avatar
-            className={cn('size-6 shrink-0', isUnseen && 'ring-2 ring-primary')}
-          >
-            <AvatarFallback className="bg-primary/10 text-primary text-[10px] font-medium">
-              {initials}
-            </AvatarFallback>
-          </Avatar>
-          <Small
-            className={cn(
-              'min-w-0 truncate',
-              isUnseen
-                ? 'font-semibold text-foreground'
-                : 'font-medium text-muted-foreground',
-            )}
-          >
-            {particle.properties.name}
-          </Small>
-          <div className="ml-auto flex shrink-0 items-center gap-1.5">
-            {hasActiveHuddle && (
-              <span className="flex items-center gap-1 rounded-full bg-red-500/15 px-1.5 py-0.5">
-                <Headphones className="size-3 text-red-400" />
-                <span className="text-[10px] font-medium text-red-400">
-                  {huddleCount}
-                </span>
-              </span>
-            )}
-            {latestChild && (
-              <Small
-                className={cn(
-                  'text-[10px]',
-                  isUnseen ? 'text-primary' : 'text-muted-foreground',
-                )}
-              >
-                <RelativeTimestamp date={latestChild.created_at} />
-              </Small>
-            )}
-            {isUnseen && (
-              <span className="size-2 shrink-0 rounded-full bg-primary" />
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);

js/desktop/src/features/particles/stream-members-overlay.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { X, UserPlus, Globe, Users, Lock } from 'lucide-react';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { HumanAvatar } from '@/components/human-avatar';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { KeyHint } from '@/components/key-hint';
 import {
@@ -170,11 +170,12 @@ export function StreamMembersOverlay({
                     key={id}
                     className="group flex items-center gap-2.5 rounded px-2 py-1.5 text-sm text-white/70"
                   >
-                    <Avatar size="sm">
-                      <AvatarFallback className="text-[10px]">
-                        {display.initials}
-                      </AvatarFallback>
-                    </Avatar>
+                    <HumanAvatar
+                      size="sm"
+                      avatarObjectId={display.avatarObjectId}
+                      initials={display.initials}
+                      fallbackClassName="text-[10px]"
+                    />
                     <span
                       className={cn(
                         'flex-1 truncate',
@@ -225,11 +226,12 @@ export function StreamMembersOverlay({
                           'flex w-full items-center gap-2.5 rounded px-2 py-1.5 text-left text-sm text-white/70 transition-colors hover:bg-white/5',
                         )}
                       >
-                        <Avatar size="sm">
-                          <AvatarFallback className="text-[10px]">
-                            {getInitials(human.email)}
-                          </AvatarFallback>
-                        </Avatar>
+                        <HumanAvatar
+                          size="sm"
+                          avatarObjectId={human.avatar_object_id}
+                          initials={getInitials(human.email)}
+                          fallbackClassName="text-[10px]"
+                        />
                         <span className="flex-1 truncate">
                           {human.email_prefix}
                         </span>

js/desktop/src/features/particles/stream-top-bar.tsx

@@ -4,7 +4,8 @@ import { useAuthStore } from '@/stores/auth-store';
 import { apiClient } from '@/api/client';
 import { isParticleDeleted, type Particle } from '@/api/types';
 import { particlePath, toFirestoreDocPath } from '@/lib/particle-path';
-import { Avatar, AvatarFallback, AvatarGroup } from '@/components/ui/avatar';
+import { AvatarGroup } from '@/components/ui/avatar';
+import { HumanAvatar } from '@/components/human-avatar';
 import {
   Tooltip,
   TooltipContent,
@@ -147,11 +148,12 @@ export function TopBar({ networkId, particle, streamParticle }: TopBarProps) {
               return (
                 <Tooltip key={humanId}>
                   <TooltipTrigger asChild>
-                    <Avatar size="sm">
-                      <AvatarFallback className="bg-red-500/30 text-[8px] text-red-200">
-                        {display.initials}
-                      </AvatarFallback>
-                    </Avatar>
+                    <HumanAvatar
+                      size="sm"
+                      avatarObjectId={display.avatarObjectId}
+                      initials={display.initials}
+                      fallbackClassName="bg-red-500/30 text-[8px] text-red-200"
+                    />
                   </TooltipTrigger>
                   <TooltipContent>{display.email}</TooltipContent>
                 </Tooltip>
@@ -313,11 +315,13 @@ function MembersIndicator({
             <>
               <AvatarGroup>
                 {shownMembers.map((human) => (
-                  <Avatar key={human.id} size="sm">
-                    <AvatarFallback className="text-[8px]">
-                      {resolveHumanDisplay(human.id, humans).initials}
-                    </AvatarFallback>
-                  </Avatar>
+                  <HumanAvatar
+                    key={human.id}
+                    size="sm"
+                    avatarObjectId={human.avatar_object_id}
+                    initials={resolveHumanDisplay(human.id, humans).initials}
+                    fallbackClassName="text-[8px]"
+                  />
                 ))}
               </AvatarGroup>
               {overflow > 0 && (
@@ -355,9 +359,12 @@ function ParticleBreadcrumbContent({
 
   return (
     <span className="flex items-center gap-1.5">
-      <Avatar size="sm" className={isOnline ? 'ring-2 ring-green-500' : ''}>
-        <AvatarFallback>{display.initials}</AvatarFallback>
-      </Avatar>
+      <HumanAvatar
+        size="sm"
+        className={isOnline ? 'ring-2 ring-green-500' : ''}
+        avatarObjectId={display.avatarObjectId}
+        initials={display.initials}
+      />
       {display.displayName} - <RelativeTimestamp date={particle.created_at} />
     </span>
   );