Notes: Fix block toolbar indicator logic (#72736)

Mamaduka · jasmussen · t-hamano · gutenbergplugin · commit 35c20639922c · 2025-10-28T08:54:48.000Z
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: jasmussen &lt;joen@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: adamsilverstein &lt;adamsilverstein@git.wordpress.org&gt;
diff --git a/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-indicator-toolbar.js
@@ -6,11 +6,6 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * Internal dependencies
  */
@@ -19,7 +14,7 @@ import { getAvatarBorderColor } from './utils';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
+const CommentAvatarIndicator = ( { onClick, thread } ) => {
 	const threadParticipants = useMemo( () => {
 		if ( ! thread ) {
 			return [];
@@ -34,15 +29,13 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		allComments.forEach( ( comment ) => {
 			// Track thread participants (original commenter + repliers).
 			if ( comment.author_name && comment.author_avatar_urls ) {
-				const authorKey = `${ comment.author }-${ comment.author_name }`;
-				if ( ! participantsMap.has( authorKey ) ) {
-					participantsMap.set( authorKey, {
+				if ( ! participantsMap.has( comment.author ) ) {
+					participantsMap.set( comment.author, {
 						name: comment.author_name,
 						avatar:
 							comment.author_avatar_urls?.[ '48' ] ||
 							comment.author_avatar_urls?.[ '96' ],
 						id: comment.author,
-						isOriginalCommenter: comment.id === thread.id,
 						date: comment.date,
 					} );
 				}
@@ -52,14 +45,6 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 		return Array.from( participantsMap.values() );
 	}, [ thread ] );
 
-	const hasUnresolved = thread?.status !== 'approved';
-
-	// Check if this specific thread has more participants due to pagination.
-	// If we have pagination AND this thread + its replies equals or exceeds the API limit,
-	// then this thread likely has more participants that weren't loaded.
-	const threadHasMoreParticipants =
-		hasMoreComments && thread?.reply && 1 + thread.reply.length >= 100;
-
 	if ( ! threadParticipants.length ) {
 		return null;
 	}
@@ -68,6 +53,7 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	const maxAvatars = 3;
 	const visibleParticipants = threadParticipants.slice( 0, maxAvatars );
 	const overflowCount = Math.max( 0, threadParticipants.length - maxAvatars );
+	const threadHasMoreParticipants = threadParticipants.length > 100;
 
 	// If we hit the comment limit, show "100+" instead of exact overflow count.
 	const overflowText =
@@ -95,17 +81,15 @@ const CommentAvatarIndicator = ( { onClick, thread, hasMoreComments } ) => {
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className={ clsx( 'comment-avatar-indicator', {
-					'has-unresolved': hasUnresolved,
-				} ) }
+				className="comment-avatar-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ onClick }
 				showTooltip
 			>
 				<div className="comment-avatar-stack">
 					{ visibleParticipants.map( ( participant, index ) => (
 						<img
-							key={ participant.name + index }
+							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
 							className="comment-avatar"
diff --git a/packages/editor/src/components/collab-sidebar/hooks.js b/packages/editor/src/components/collab-sidebar/hooks.js
@@ -53,7 +53,7 @@ export function useBlockComments( postId ) {
 		per_page: -1,
 	};
 
-	const { records: threads, totalPages } = useEntityRecords(
+	const { records: threads } = useEntityRecords(
 		'root',
 		'comment',
 		queryArgs,
@@ -160,7 +160,6 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	};
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -97,7 +97,6 @@ function NotesSidebar( { postId, mode } ) {
 	const {
 		resultComments,
 		unresolvedSortedThreads,
-		totalPages,
 		reflowComments,
 		commentLastUpdated,
 	} = useBlockComments( postId );
@@ -106,8 +105,6 @@ function NotesSidebar( { postId, mode } ) {
 			( unresolvedSortedThreads.length > 0 || showCommentBoard )
 	);
 
-	const hasMoreComments = totalPages && totalPages > 1;
-
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
@@ -152,7 +149,6 @@ function NotesSidebar( { postId, mode } ) {
 			{ blockCommentId && (
 				<CommentAvatarIndicator
 					thread={ currentThread }
-					hasMoreComments={ hasMoreComments }
 					onClick={ openTheSidebar }
 				/>
 			) }
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
@@ -161,27 +161,6 @@
 	min-width: auto;
 	background: transparent;
 	border: none;
-
-	&:hover::before {
-		background: rgba(0, 0, 0, 0.04);
-	}
-
-	&.has-unresolved {
-		.comment-avatar-stack {
-			&::after {
-				content: "";
-				position: absolute;
-				top: -2px;
-				right: -2px;
-				width: $grid-unit-10;
-				height: $grid-unit-10;
-				background: #d63638;
-				border-radius: $radius-round;
-				border: $border-width solid $white;
-				z-index: 10;
-			}
-		}
-	}
 }
 
 .comment-avatar-stack {
