feat(web): add /api/avatar resolver

CHANGELOG.md

@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added collapsible file diffs in the commit diff panel. [#1157](https://github.com/sourcebot-dev/sourcebot/pull/1157)
 - Added `/api/blame` to the public API to fetch per-line blame information for a file at a given revision. [#1158](https://github.com/sourcebot-dev/sourcebot/pull/1158)
 
+### Changed
+- `UserAvatar` now resolves profile pictures via a new `/api/avatar` endpoint, automatically displaying a user's profile image when their email matches a Sourcebot user. Falls back to a minidenticon otherwise. [#1159](https://github.com/sourcebot-dev/sourcebot/pull/1159)
+
 ### Fixed
 - Bumped `postcss` to `8.5.10`. [#1155](https://github.com/sourcebot-dev/sourcebot/pull/1155)
 

packages/web/src/app/(app)/browse/components/commitParts.tsx

@@ -24,6 +24,7 @@ export const AuthorsAvatarGroup = ({ authors, className }: AuthorsAvatarGroupPro
                 <UserAvatar
                     key={a.email}
                     email={a.email}
+                    title={a.email}
                     className="h-5 w-5"
                 />
             ))}

packages/web/src/app/api/(server)/avatar/route.ts

@@ -0,0 +1,51 @@
+'use server';
+
+import { minidenticon } from 'minidenticons';
+import { NextRequest } from 'next/server';
+import { apiHandler } from '@/lib/apiHandler';
+import { isServiceError } from '@/lib/utils';
+import { withOptionalAuth } from '@/middleware/withAuth';
+
+// Resolves an email to an avatar image. If the email belongs to a Sourcebot
+// user in the requester's org and that user has a profile image set, the
+// request is redirected to that URL. Otherwise a minidenticon SVG is returned.
+//
+// We never 4xx on this endpoint — even if the requester is unauthenticated or
+// the user isn't found, we serve the identicon so the avatar visually renders.
+export const GET = apiHandler(async (request: NextRequest) => {
+    const email = request.nextUrl.searchParams.get('email');
+    if (!email) {
+        return new Response('Missing email parameter', { status: 400 });
+    }
+
+    const lookup = await withOptionalAuth(async ({ org, prisma }) => {
+        return prisma.user.findFirst({
+            where: {
+                email,
+                orgs: { some: { orgId: org.id } },
+            },
+            select: { image: true },
+        });
+    });
+
+    if (!isServiceError(lookup) && lookup?.image) {
+        return new Response(null, {
+            status: 302,
+            headers: {
+                'Location': lookup.image,
+                'Cache-Control': 'public, max-age=300',
+            },
+        });
+    }
+
+    // Fallback: identicons are deterministic from the email so they can be
+    // cached aggressively.
+    const svg = minidenticon(email, 50, 50);
+    return new Response(svg, {
+        status: 200,
+        headers: {
+            'Content-Type': 'image/svg+xml',
+            'Cache-Control': 'public, max-age=31536000, immutable',
+        },
+    });
+}, { track: false });

packages/web/src/components/userAvatar.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { minidenticon } from 'minidenticons';
 import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
-import { Avatar, AvatarImage } from '@/components/ui/avatar';
+import { Avatar } from '@/components/ui/avatar';
 import { cn } from '@/lib/utils';
 
 interface UserAvatarProps extends ComponentPropsWithoutRef<typeof Avatar> {
@@ -12,16 +11,31 @@ interface UserAvatarProps extends ComponentPropsWithoutRef<typeof Avatar> {
 
 export const UserAvatar = forwardRef<HTMLSpanElement, UserAvatarProps>(
     ({ email, imageUrl, className, ...rest }, ref) => {
-        const identiconUri = useMemo(() => {
+        const resolverUri = useMemo(() => {
             if (!email) {
                 return undefined;
             }
-            return 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(email, 50, 50));
+            return `/api/avatar?email=${encodeURIComponent(email)}`;
         }, [email]);
 
+        const src = imageUrl ?? resolverUri;
+
         return (
             <Avatar ref={ref} className={cn("bg-muted", className)} {...rest}>
-                <AvatarImage src={imageUrl ?? identiconUri} />
+                {/*
+                  We render a raw <img> instead of Radix's <AvatarImage>. AvatarImage
+                  delays painting until its internal `new Image().onload` fires —
+                  which is async even when the URL is in HTTP cache — and that
+                  one-frame gap manifests as a flicker every time a marker mounts
+                  (e.g., on scroll). The browser paints cached <img> synchronously.
+                */}
+                {src && (
+                    <img
+                        src={src}
+                        alt=""
+                        className="aspect-square h-full w-full"
+                    />
+                )}
             </Avatar>
         );
     }