Merge pull request #6085 from gitbutlerapp/e-branch-12

Display the users that commented on a review

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

@@ -1,22 +1,42 @@
 <script lang="ts">
 	import ChangeStatus from '../changes/ChangeStatus.svelte';
 	import {
+		getCommentersWithAvatars,
 		getPatchContributorsWithAvatars,
 		getPatchReviewersWithAvatars,
 		type Patch
 	} from '@gitbutler/shared/branches/types';
+	import { getChatChannelParticipants } from '@gitbutler/shared/chat/chatChannelsPreview.svelte';
+	import { ChatChannelsService } from '@gitbutler/shared/chat/chatChannelsService';
+	import { getContext } from '@gitbutler/shared/context';
+	import { AppState } from '@gitbutler/shared/redux/store.svelte';
 	import AvatarGroup from '@gitbutler/ui/avatar/AvatarGroup.svelte';
 
 	const NO_REVIEWERS = 'Not reviewed yet';
 	const NO_CONTRIBUTORS = 'No contributors';
 	const NO_COMMENTS = 'No comments yet';
 
 	interface Props {
+		projectId: string;
 		patch: Patch;
 	}
 
-	const { patch }: Props = $props();
+	const { patch, projectId }: Props = $props();
+	const appState = getContext(AppState);
+	const chatChannelService = getContext(ChatChannelsService);
 
+	const chatParticipants = getChatChannelParticipants(
+		appState,
+		chatChannelService,
+		projectId,
+		patch.changeId
+	);
+
+	const commenters = $derived(
+		chatParticipants.current === undefined
+			? Promise.resolve([])
+			: getCommentersWithAvatars(chatParticipants.current)
+	);
 	const contributors = $derived(getPatchContributorsWithAvatars(patch));
 	const reviewers = $derived(getPatchReviewersWithAvatars(patch));
 </script>
@@ -42,7 +62,13 @@
 
 	<div class="review-main-content-info__entry">
 		<p class="review-main-content-info__header">Commented by:</p>
-		<p class="review-main-content-info__value">{NO_COMMENTS}</p>
+		{#await commenters then commentors}
+			{#if commentors.length === 0}
+				<p class="review-main-content-info__value">{NO_COMMENTS}</p>
+			{:else}
+				<AvatarGroup avatars={commentors}></AvatarGroup>
+			{/if}
+		{/await}
 	</div>
 
 	<div class="review-main-content-info__entry">

apps/web/src/lib/diffParsing.ts

@@ -51,7 +51,6 @@ function lineType(line: string): SectionType {
 
 export function parsePatch(patch: string) {
 	const lines = patch.trim().split('\n');
-	console.log(lines);
 
 	const hunks = [];
 	let currentHunk: Hunk | undefined;
@@ -104,6 +103,5 @@ export function parsePatch(patch: string) {
 		}
 	}
 
-	console.log(hunks);
 	return hunks;
 }

apps/web/src/routes/[ownerSlug]/[projectSlug]/reviews/[branchId]/commit/[changeId]/+page.svelte

@@ -112,7 +112,7 @@
 					<Markdown content={patch.description?.trim() || DESCRIPTION_PLACE_HOLDER} />
 				</p>
 
-				<ReviewInfo {patch} />
+				<ReviewInfo projectId={repositoryId} {patch} />
 				<ReviewSections {patch} patchSections={patchSections?.current} />
 			</div>
 

packages/shared/src/lib/branches/types.ts

@@ -210,6 +210,23 @@ async function getUsersWithAvatars(userEmails: string[]) {
 	);
 }
 
+export type Commenter = {
+	avatarUrl: string | undefined;
+	name: string | undefined;
+};
+
+export async function getCommentersWithAvatars(commenters: Commenter[]) {
+	return await Promise.all(
+		commenters.map(async (commenter) => {
+			const name = commenter.name ?? 'unknown';
+			return {
+				srcUrl: commenter.avatarUrl ?? (await gravatarUrlFromEmail(name)),
+				name
+			};
+		})
+	);
+}
+
 export async function getPatchContributorsWithAvatars(patch: Patch) {
 	return await getUsersWithAvatars(patch.contributors);
 }

packages/shared/src/lib/chat/chatChannelsPreview.svelte.ts

@@ -1,6 +1,8 @@
 import { chatChannelsSelectors } from './chatChannelsSlice';
-import { createChannelKey, type LoadableChatChannel } from '$lib/chat/types';
+import { createChannelKey, type ChatMessageUser, type LoadableChatChannel } from '$lib/chat/types';
 import { registerInterest, type InView } from '$lib/interest/registerInterestFunction.svelte';
+import { map } from '$lib/network/loadable';
+import { deduplicateBy } from '$lib/utils/array';
 import type { ChatChannelsService } from '$lib/chat/chatChannelsService';
 import type { AppChatChannelsState } from '$lib/redux/store.svelte';
 import type { Reactive } from '$lib/storeUtils';
@@ -26,3 +28,31 @@ export function getChatChannel(
 		}
 	};
 }
+
+export function getChatChannelParticipants(
+	appState: AppChatChannelsState,
+	chatMessagesService: ChatChannelsService,
+	projectId: string,
+	changeId: string,
+	inView?: InView
+): Reactive<ChatMessageUser[] | undefined> {
+	const chatMessagesInterest = chatMessagesService.getChatChannelInterest(projectId, changeId);
+	registerInterest(chatMessagesInterest, inView);
+
+	const chatChannelKey = createChannelKey(projectId, changeId);
+	const chatChannelParticipants = $derived.by(() => {
+		const channel = chatChannelsSelectors.selectById(appState.chatChannels, chatChannelKey);
+		return map(channel, (channel) =>
+			deduplicateBy(
+				channel.messages.map((message) => message.user),
+				'id'
+			)
+		);
+	});
+
+	return {
+		get current() {
+			return chatChannelParticipants;
+		}
+	};
+}

packages/shared/src/lib/utils/array.ts

@@ -1,3 +1,18 @@
 export function deduplicate<T>(array: T[]): T[] {
 	return Array.from(new Set(array));
 }
+
+export function deduplicateBy<T, K extends keyof T>(array: T[], key: K): T[] {
+	const seen = new Set();
+	const result: T[] = [];
+
+	for (const item of array) {
+		const value = item[key];
+		if (!seen.has(value)) {
+			seen.add(value);
+			result.push(item);
+		}
+	}
+
+	return result;
+}