@wordpress/editor 14.32.0 → 14.32.1-next.ff1cebbba.0

package/src/components/collab-sidebar/comments.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML, useRef } from '@wordpress/element';
+import { useState, RawHTML, useEffect, useCallback } from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
@@ -33,7 +33,8 @@ import {
 import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
-import { getCommentExcerpt } from './utils';
+import { getCommentExcerpt, focusCommentThread } from './utils';
+import { useFloatingThread } from './hooks';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
@@ -47,6 +48,10 @@ const { Menu } = unlock( componentsPrivateApis );
  * @param {Function} props.onAddReply          - The function to add a reply to a comment.
  * @param {Function} props.onCommentDelete     - The function to delete a comment.
  * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
+ * @param {Ref}      props.commentSidebarRef   - The ref to the comment sidebar.
+ * @param {Function} props.reflowComments      - The function to call indicating a comment is updated.
+ * @param {boolean}  props.isFloating          - Whether the comment thread is floating.
+ * @param {number}   props.commentLastUpdated  - Timestamp of the last comment update.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -55,16 +60,132 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	setShowCommentBoard,
+	commentSidebarRef,
+	reflowComments,
+	isFloating = false,
+	commentLastUpdated,
 } ) {
-	const blockCommentId = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } =
-			select( blockEditorStore );
-		const clientId = getSelectedBlockClientId();
-		return clientId
-			? getBlockAttributes( clientId )?.metadata?.commentId
-			: null;
+	const [ heights, setHeights ] = useState( {} );
+	const [ selectedThread, setSelectedThread ] = useState( null );
+	const [ boardOffsets, setBoardOffsets ] = useState( {} );
+	const [ blockRefs, setBlockRefs ] = useState( {} );
+
+	const { blockCommentId, selectedBlockClientId, blockIds } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getBlockOrder,
+			} = select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockCommentId: clientId
+					? getBlockAttributes( clientId )?.metadata?.commentId
+					: null,
+				selectedBlockClientId: clientId,
+				blockIds: getBlockOrder(),
+			};
+		},
+		[]
+	);
+
+	const relatedBlockElement = useBlockElement( selectedBlockClientId );
+
+	const handleDelete = async ( comment ) => {
+		const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
+		const nextThread = threads[ currentIndex + 1 ];
+		const prevThread = threads[ currentIndex - 1 ];
+
+		await onCommentDelete( comment );
+
+		if ( comment.parent !== 0 ) {
+			// Move focus to the parent thread when a reply was deleted.
+			setSelectedThread( comment.parent );
+			focusCommentThread( comment.parent, commentSidebarRef.current );
+			return;
+		}
+
+		if ( nextThread ) {
+			setSelectedThread( nextThread.id );
+			focusCommentThread( nextThread.id, commentSidebarRef.current );
+		} else if ( prevThread ) {
+			setSelectedThread( prevThread.id );
+			focusCommentThread( prevThread.id, commentSidebarRef.current );
+		} else {
+			setSelectedThread( null );
+			setShowCommentBoard( false );
+			// Move focus to the related block.
+			relatedBlockElement?.focus();
+		}
+	};
+
+	// Auto-select the related comment thread when a block is selected.
+	useEffect( () => {
+		setSelectedThread( blockCommentId ?? undefined );
+	}, [ blockCommentId ] );
+
+	const setBlockRef = useCallback( ( id, blockRef ) => {
+		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
 	}, [] );
-	const [ selectedThread = blockCommentId, setSelectedThread ] = useState();
+
+	// Recalculate floating comment thread offsets whenever the heights change.
+	useEffect( () => {
+		/**
+		 * Calculate the y offsets for all comment threads. Account for potentially
+		 * overlapping threads and adjust their positions accordingly.
+		 */
+		const calculateAllOffsets = () => {
+			const offsets = {};
+			let previousThreadData = null;
+
+			if ( ! isFloating ) {
+				return;
+			}
+
+			// Go through the comment threads from top to bottom.
+			threads.forEach( ( thread ) => {
+				if ( ! blockRefs[ thread.id ] ) {
+					return;
+				}
+				// The thread's starting top position is determined by its
+				// associated block's position.
+				const blockElement = blockRefs[ thread.id ];
+				const blockRect = blockElement?.getBoundingClientRect();
+				const threadTop = blockRect?.top || 0;
+
+				// Heights are tracked by the comment threads themselves.
+				const threadHeight = heights[ thread.id ] || 0;
+
+				// By default, remove the top margin by shifting the block up
+				// so it more precisely aligns with the block.
+				let additionalOffset = -16;
+
+				// The first block never needs to be adjusted.
+				if ( previousThreadData ) {
+					// Check if the thread overlaps with the previous one.
+					const previousBottom =
+						previousThreadData.threadTop +
+						previousThreadData.threadHeight;
+					if ( threadTop < previousBottom ) {
+						// Shift down by the difference plus a margin to avoid overlap.
+						additionalOffset = previousBottom - threadTop + 20;
+					}
+				}
+
+				// Store the current thread's position and height for the next iteration.
+				previousThreadData = {
+					threadTop: threadTop + additionalOffset,
+					threadHeight,
+				};
+
+				offsets[ thread.id ] = additionalOffset;
+			} );
+
+			return offsets;
+		};
+		const newOffsets = calculateAllOffsets();
+		setBoardOffsets( newOffsets );
+	}, [ heights, blockIds, blockRefs, isFloating, threads ] );
 
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	if ( ! hasThreads ) {
@@ -73,28 +194,44 @@ export function Comments( {
 				alignment="left"
 				className="editor-collab-sidebar-panel__thread"
 				justify="flex-start"
-				spacing="2"
+				spacing="3"
 			>
-				{
-					// translators: message displayed when there are no comments available
-					__( 'No comments available' )
-				}
+				{ __( 'No notes available.' ) }
 			</VStack>
 		);
 	}
 
-	return threads.map( ( thread ) => (
-		<Thread
-			key={ thread.id }
-			thread={ thread }
-			onAddReply={ onAddReply }
-			onCommentDelete={ onCommentDelete }
-			onEditComment={ onEditComment }
-			isSelected={ selectedThread === thread.id }
-			setSelectedThread={ setSelectedThread }
-			setShowCommentBoard={ setShowCommentBoard }
-		/>
-	) );
+	return (
+		<VStack spacing="3">
+			{ ! isFloating && (
+				<Text as="p" variant="muted">
+					{ __( 'Only logged in users can see Notes' ) }
+				</Text>
+			) }
+			{ threads.map( ( thread ) => (
+				<Thread
+					key={ thread.id }
+					thread={ thread }
+					onAddReply={ onAddReply }
+					onCommentDelete={ handleDelete }
+					onEditComment={ onEditComment }
+					isSelected={ selectedThread === thread.id }
+					setSelectedThread={ setSelectedThread }
+					setShowCommentBoard={ setShowCommentBoard }
+					commentSidebarRef={ commentSidebarRef }
+					reflowComments={ reflowComments }
+					isFloating={ isFloating }
+					calculatedOffset={
+						boardOffsets ? boardOffsets[ thread.id ] : 0
+					}
+					setHeights={ setHeights }
+					setBlockRef={ setBlockRef }
+					selectedThread={ selectedThread }
+					commentLastUpdated={ commentLastUpdated }
+				/>
+			) ) }
+		</VStack>
+	);
 }
 
 function Thread( {
@@ -103,16 +240,33 @@ function Thread( {
 	onAddReply,
 	onCommentDelete,
 	isSelected,
-	setSelectedThread,
 	setShowCommentBoard,
+	commentSidebarRef,
+	reflowComments,
+	isFloating,
+	calculatedOffset,
+	setHeights,
+	setBlockRef,
+	setSelectedThread,
+	selectedThread,
+	commentLastUpdated,
 } ) {
-	const threadRef = useRef( null );
-	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
+	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const relatedBlockElement = useBlockElement( thread.blockClientId );
 	const debouncedToggleBlockHighlight = useDebounce(
 		toggleBlockHighlight,
 		50
 	);
+	const { y, refs } = useFloatingThread( {
+		thread,
+		calculatedOffset,
+		setHeights,
+		setBlockRef,
+		selectedThread,
+		commentLastUpdated,
+	} );
 
 	const onMouseEnter = () => {
 		debouncedToggleBlockHighlight( thread.blockClientId, true );
@@ -122,31 +276,25 @@ function Thread( {
 		debouncedToggleBlockHighlight( thread.blockClientId, false );
 	};
 
-	const handleCommentSelect = ( { id, blockClientId } ) => {
+	const handleCommentSelect = () => {
 		setShowCommentBoard( false );
-		setSelectedThread( id );
-		if ( blockClientId && relatedBlockElement ) {
-			relatedBlockElement.scrollIntoView( {
-				behavior: 'instant',
-				block: 'center',
-			} );
-		}
-	};
-
-	const focusThread = () => {
-		threadRef.current?.focus();
+		setSelectedThread( thread.id );
+		// pass `null` as the second parameter to prevent focusing the block.
+		selectBlock( thread.blockClientId, null );
+		toggleBlockSpotlight( thread.blockClientId, true );
 	};
 
 	const unselectThread = () => {
 		setSelectedThread( null );
 		setShowCommentBoard( false );
+		toggleBlockSpotlight( thread.blockClientId, false );
 	};
 
-	const replies = thread?.reply;
-	const lastReply = !! replies.length
-		? replies[ replies.length - 1 ]
-		: undefined;
-	const restReplies = !! replies.length ? replies.slice( 0, -1 ) : [];
+	const allReplies = thread?.reply || [];
+
+	const lastReply =
+		allReplies.length > 0 ? allReplies[ allReplies.length - 1 ] : undefined;
+	const restReplies = allReplies.length > 0 ? allReplies.slice( 0, -1 ) : [];
 
 	const commentExcerpt = getCommentExcerpt(
 		stripHTML( thread.content.rendered ),
@@ -154,13 +302,13 @@ function Thread( {
 	);
 	const ariaLabel = relatedBlockElement
 		? sprintf(
-				// translators: %s: comment excerpt
-				__( 'Comment: %s' ),
+				// translators: %s: note excerpt
+				__( 'Note: %s' ),
 				commentExcerpt
 		  )
 		: sprintf(
-				// translators: %s: comment excerpt
-				__( 'Original block deleted. Comment: %s' ),
+				// translators: %s: note excerpt
+				__( 'Original block deleted. Note: %s' ),
 				commentExcerpt
 		  );
 
@@ -170,10 +318,11 @@ function Thread( {
 		<VStack
 			className={ clsx( 'editor-collab-sidebar-panel__thread', {
 				'is-selected': isSelected,
+				'is-floating': isFloating,
 			} ) }
-			id={ `thread-${ thread.id }` }
-			spacing="2"
-			onClick={ () => handleCommentSelect( thread ) }
+			id={ `comment-thread-${ thread.id }` }
+			spacing="3"
+			onClick={ handleCommentSelect }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			onFocus={ onMouseEnter }
@@ -187,21 +336,36 @@ function Thread( {
 					if ( isSelected ) {
 						unselectThread();
 					} else {
-						handleCommentSelect( thread );
+						handleCommentSelect();
 					}
 				}
 				// Collapse thread and focus the thread.
 				if ( event.key === 'Escape' ) {
 					unselectThread();
-					focusThread();
+					focusCommentThread( thread.id, commentSidebarRef.current );
 				}
 			} }
 			tabIndex={ 0 }
 			role="listitem"
-			ref={ threadRef }
 			aria-label={ ariaLabel }
 			aria-expanded={ isSelected }
+			ref={ isFloating ? refs.setFloating : undefined }
+			style={ isFloating ? { top: y } : undefined }
 		>
+			<Button
+				className="editor-collab-sidebar-panel__skip-to-comment"
+				variant="secondary"
+				size="compact"
+				onClick={ () => {
+					focusCommentThread(
+						thread.id,
+						commentSidebarRef.current,
+						'textarea'
+					);
+				} }
+			>
+				{ __( 'Add new note' ) }
+			</Button>
 			{ ! relatedBlockElement && (
 				<Text as="p" weight={ 500 } variant="muted">
 					{ __( 'Original block deleted.' ) }
@@ -209,39 +373,32 @@ function Thread( {
 			) }
 			<CommentBoard
 				thread={ thread }
+				isExpanded={ isSelected }
 				onEdit={ ( params = {} ) => {
 					const { status } = params;
 					onEditComment( params );
 					if ( status === 'approved' ) {
 						unselectThread();
-						focusThread();
+						focusCommentThread(
+							thread.id,
+							commentSidebarRef.current
+						);
 					}
 				} }
 				onDelete={ onCommentDelete }
-				status={ thread.status }
+				reflowComments={ reflowComments }
 			/>
 			{ isSelected &&
-				replies.map( ( reply ) => (
-					<VStack
+				allReplies.map( ( reply ) => (
+					<CommentBoard
 						key={ reply.id }
-						className="editor-collab-sidebar-panel__child-thread"
-						id={ reply.id }
-						spacing="2"
-					>
-						<CommentBoard
-							thread={ reply }
-							onEdit={
-								'approved' !== thread.status
-									? onEditComment
-									: undefined
-							}
-							onDelete={
-								'approved' !== thread.status
-									? onCommentDelete
-									: undefined
-							}
-						/>
-					</VStack>
+						thread={ reply }
+						parent={ thread }
+						isExpanded={ isSelected }
+						onEdit={ onEditComment }
+						onDelete={ onCommentDelete }
+						reflowComments={ reflowComments }
+					/>
 				) ) }
 			{ ! isSelected && restReplies.length > 0 && (
 				<HStack className="editor-collab-sidebar-panel__more-reply-separator">
@@ -249,7 +406,13 @@ function Thread( {
 						size="compact"
 						variant="tertiary"
 						className="editor-collab-sidebar-panel__more-reply-button"
-						onClick={ () => setSelectedThread( thread.id ) }
+						onClick={ () => {
+							setSelectedThread( thread.id );
+							focusCommentThread(
+								thread.id,
+								commentSidebarRef.current
+							);
+						} }
 					>
 						{ sprintf(
 							// translators: %s: number of replies.
@@ -266,21 +429,15 @@ function Thread( {
 			{ ! isSelected && lastReply && (
 				<CommentBoard
 					thread={ lastReply }
-					onEdit={
-						'approved' !== thread.status ? onEditComment : undefined
-					}
-					onDelete={
-						'approved' !== thread.status
-							? onCommentDelete
-							: undefined
-					}
+					parent={ thread }
+					isExpanded={ isSelected }
+					onEdit={ onEditComment }
+					onDelete={ onCommentDelete }
+					reflowComments={ reflowComments }
 				/>
 			) }
 			{ isSelected && (
-				<VStack
-					className="editor-collab-sidebar-panel__child-thread"
-					spacing="2"
-				>
+				<VStack spacing="2">
 					<HStack alignment="left" spacing="3" justify="flex-start">
 						<CommentAuthorInfo />
 					</HStack>
@@ -288,20 +445,28 @@ function Thread( {
 						<CommentForm
 							onSubmit={ ( inputComment ) => {
 								if ( 'approved' === thread.status ) {
+									// For reopening, include the content in the reopen action.
 									onEditComment( {
 										id: thread.id,
 										status: 'hold',
+										content: inputComment,
+									} );
+								} else {
+									// For regular replies, add as separate comment.
+									onAddReply( {
+										content: inputComment,
+										parent: thread.id,
 									} );
 								}
-								onAddReply( {
-									content: inputComment,
-									parent: thread.id,
-								} );
 							} }
 							onCancel={ ( event ) => {
-								threadRef.current?.focus();
-								event.stopPropagation(); // Prevent the parent onClick from being triggered
+								// Prevent the parent onClick from being triggered.
+								event.stopPropagation();
 								unselectThread();
+								focusCommentThread(
+									thread.id,
+									commentSidebarRef.current
+								);
 							} }
 							submitButtonText={
 								'approved' === thread.status
@@ -310,20 +475,39 @@ function Thread( {
 							}
 							rows={ 'approved' === thread.status ? 2 : 4 }
 							labelText={ sprintf(
-								// translators: %1$s: comment identifier, %2$s: author name
-								__( 'Reply to Comment %1$s by %2$s' ),
+								// translators: %1$s: note identifier, %2$s: author name
+								__( 'Reply to Note %1$s by %2$s' ),
 								thread.id,
 								thread?.author_name || 'Unknown'
 							) }
+							reflowComments={ reflowComments }
 						/>
 					</VStack>
 				</VStack>
 			) }
+			<Button
+				className="editor-collab-sidebar-panel__skip-to-block"
+				variant="secondary"
+				size="compact"
+				onClick={ ( event ) => {
+					event.stopPropagation();
+					relatedBlockElement?.focus();
+				} }
+			>
+				{ __( 'Back to block' ) }
+			</Button>
 		</VStack>
 	);
 }
 
-const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
+const CommentBoard = ( {
+	thread,
+	parent,
+	isExpanded,
+	onEdit,
+	onDelete,
+	reflowComments,
+} ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 
@@ -338,38 +522,49 @@ const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
 		setShowConfirmDialog( false );
 	};
 
+	// Check if this is a resolution comment by checking metadata.
+	const isResolutionComment =
+		thread.type === 'note' &&
+		thread.meta &&
+		( thread.meta._wp_note_status === 'resolved' ||
+			thread.meta._wp_note_status === 'reopen' );
+
 	const actions = [
-		onEdit &&
-			status !== 'approved' && {
-				id: 'edit',
-				title: _x( 'Edit', 'Edit comment' ),
-				onClick: () => {
-					setActionState( 'edit' );
-				},
+		{
+			id: 'edit',
+			title: __( 'Edit' ),
+			isEligible: ( { status } ) => status !== 'approved',
+			onClick: () => {
+				setActionState( 'edit' );
 			},
-		onDelete && {
+		},
+		{
+			id: 'reopen',
+			title: _x( 'Reopen', 'Reopen note' ),
+			isEligible: ( { status } ) => status === 'approved',
+			onClick: () => {
+				onEdit( { id: thread.id, status: 'hold' } );
+			},
+		},
+		{
 			id: 'delete',
-			title: _x( 'Delete', 'Delete comment' ),
+			title: __( 'Delete' ),
+			isEligible: () => true,
 			onClick: () => {
 				setActionState( 'delete' );
 				setShowConfirmDialog( true );
 			},
 		},
-		onEdit &&
-			status === 'approved' && {
-				id: 'reopen',
-				title: _x( 'Reopen', 'Reopen comment' ),
-				onClick: () => {
-					onEdit( { id: thread.id, status: 'hold' } );
-				},
-			},
 	];
 
-	const canResolve = thread?.parent === 0;
-	const moreActions = actions.filter( ( item ) => item?.onClick );
+	const canResolve = thread.parent === 0;
+	const moreActions =
+		parent?.status !== 'approved'
+			? actions.filter( ( item ) => item.isEligible( thread ) )
+			: [];
 
 	return (
-		<>
+		<VStack spacing="2">
 			<HStack alignment="left" spacing="3" justify="flex-start">
 				<CommentAuthorInfo
 					avatar={ thread?.author_avatar_urls?.[ 48 ] }
@@ -377,59 +572,63 @@ const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
 					date={ thread?.date }
 					userId={ thread?.author }
 				/>
-				<FlexItem
-					className="editor-collab-sidebar-panel__comment-status"
-					onClick={ ( event ) => {
-						// Prevent the thread from being selected.
-						event.stopPropagation();
-					} }
-				>
-					<HStack spacing="0">
-						{ canResolve && (
-							<Button
-								label={ _x(
-									'Resolve',
-									'Mark comment as resolved'
-								) }
-								size="small"
-								icon={ published }
-								disabled={ status === 'approved' }
-								accessibleWhenDisabled={ status === 'approved' }
-								onClick={ () => {
-									onEdit( {
-										id: thread.id,
-										status: 'approved',
-									} );
-								} }
-							/>
-						) }
-						<Menu placement="bottom-end">
-							<Menu.TriggerButton
-								render={
-									<Button
-										size="small"
-										icon={ moreVertical }
-										label={ __( 'Actions' ) }
-										disabled={ ! moreActions.length }
-										accessibleWhenDisabled
-									/>
-								}
-							/>
-							<Menu.Popover>
-								{ moreActions.map( ( action ) => (
-									<Menu.Item
-										key={ action.id }
-										onClick={ () => action.onClick() }
-									>
-										<Menu.ItemLabel>
-											{ action.title }
-										</Menu.ItemLabel>
-									</Menu.Item>
-								) ) }
-							</Menu.Popover>
-						</Menu>
-					</HStack>
-				</FlexItem>
+				{ isExpanded && (
+					<FlexItem
+						className="editor-collab-sidebar-panel__comment-status"
+						onClick={ ( event ) => {
+							// Prevent the thread from being selected.
+							event.stopPropagation();
+						} }
+					>
+						<HStack spacing="0">
+							{ canResolve && (
+								<Button
+									label={ _x(
+										'Resolve',
+										'Mark note as resolved'
+									) }
+									size="small"
+									icon={ published }
+									disabled={ thread.status === 'approved' }
+									accessibleWhenDisabled={
+										thread.status === 'approved'
+									}
+									onClick={ () => {
+										onEdit( {
+											id: thread.id,
+											status: 'approved',
+										} );
+									} }
+								/>
+							) }
+							<Menu placement="bottom-end">
+								<Menu.TriggerButton
+									render={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __( 'Actions' ) }
+											disabled={ ! moreActions.length }
+											accessibleWhenDisabled
+										/>
+									}
+								/>
+								<Menu.Popover>
+									{ moreActions.map( ( action ) => (
+										<Menu.Item
+											key={ action.id }
+											onClick={ () => action.onClick() }
+										>
+											<Menu.ItemLabel>
+												{ action.title }
+											</Menu.ItemLabel>
+										</Menu.Item>
+									) ) }
+								</Menu.Popover>
+							</Menu>
+						</HStack>
+					</FlexItem>
+				) }
 			</HStack>
 			{ 'edit' === actionState ? (
 				<CommentForm
@@ -444,15 +643,47 @@ const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
 					thread={ thread }
 					submitButtonText={ _x( 'Update', 'verb' ) }
 					labelText={ sprintf(
-						// translators: %1$s: comment identifier, %2$s: author name.
-						__( 'Edit Comment %1$s by %2$s' ),
+						// translators: %1$s: note identifier, %2$s: author name.
+						__( 'Edit note %1$s by %2$s' ),
 						thread.id,
 						thread?.author_name || 'Unknown'
 					) }
+					reflowComments={ reflowComments }
 				/>
 			) : (
-				<RawHTML className="editor-collab-sidebar-panel__user-comment">
-					{ thread?.content?.rendered }
+				<RawHTML
+					className={ clsx(
+						'editor-collab-sidebar-panel__user-comment',
+						{
+							'editor-collab-sidebar-panel__resolution-text':
+								isResolutionComment,
+						}
+					) }
+				>
+					{ isResolutionComment
+						? ( () => {
+								const actionText =
+									thread.meta._wp_note_status === 'resolved'
+										? __( 'Marked as resolved' )
+										: __( 'Reopened' );
+								const content = thread?.content?.raw;
+
+								if (
+									content &&
+									typeof content === 'string' &&
+									content.trim() !== ''
+								) {
+									return sprintf(
+										// translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+										__( '%1$s: %2$s' ),
+										actionText,
+										content
+									);
+								}
+								// If no content, just show the action.
+								return actionText;
+						  } )()
+						: thread?.content?.rendered }
 				</RawHTML>
 			) }
 			{ 'delete' === actionState && (
@@ -462,12 +693,11 @@ const CommentBoard = ( { thread, onEdit, onDelete, status } ) => {
 					onCancel={ handleCancel }
 					confirmButtonText={ __( 'Delete' ) }
 				>
-					{
-						// translators: message displayed when confirming an action
-						__( 'Are you sure you want to delete this comment?' )
-					}
+					{ __( 'Are you sure you want to delete this note?' ) }
 				</ConfirmDialog>
 			) }
-		</>
+		</VStack>
 	);
 };
+
+export default Comments;