show reviewers group

apps/web/src/lib/components/branches/BranchIndexCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import BranchStatusBadge from '../review/BranchStatusBadge.svelte';
 	import CommitsGraph from '../review/CommitsGraph.svelte';
 	import { BranchService } from '@gitbutler/shared/branches/branchService';
 	import {
@@ -18,7 +19,6 @@
 	import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
-	import BranchStatusBadge from '../review/BranchStatusBadge.svelte';
 
 	dayjs.extend(relativeTime);
 

apps/web/src/lib/components/changes/ChangeIndexCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import PatchReviewersGroup from '../review/PatchReviewersGroup.svelte';
 	import { PatchService } from '@gitbutler/shared/branches/patchService';
 	import { getPatch } from '@gitbutler/shared/branches/patchesPreview.svelte';
 	import {
@@ -73,7 +74,7 @@
 					{/await}
 				</div>
 			</td>
-			<td><div></div></td>
+			<td><div><PatchReviewersGroup {patch} /></div></td>
 			<td><div></div></td>
 		</tr>
 	{/snippet}

apps/web/src/lib/components/review/PatchReviewersGroup.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
+	import { gravatarUrlFromEmail } from '@gitbutler/ui/avatar/gravatar';
+	import type { Patch } from '@gitbutler/shared/branches/types';
+
+	type Props = {
+		patch: Patch;
+	};
+
+	const { patch }: Props = $props();
+
+	async function getContributorsWithAvatars(patch: Patch) {
+		return await Promise.all(
+			patch.reviewAll.viewed.map(async (contributor) => {
+				return {
+					srcUrl: await gravatarUrlFromEmail(contributor),
+					name: contributor
+				};
+			})
+		);
+	}
+	const avatars = $derived(getContributorsWithAvatars(patch));
+</script>
+
+{#await avatars then avatars}
+	<div class="container"><AvatarGroup {avatars} /></div>
+{/await}