Suggest mode 6/9: review UI (Apply / Reject sidebar and summary)

packages/editor/src/components/collab-sidebar/note.jsx

@@ -10,6 +10,10 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { moreVertical, published } from '@wordpress/icons';
 import { NoteCard } from './note-card';
 import { NoteForm } from './note-form';
+import SuggestionActions, {
+	SuggestionActionButtons,
+	useSuggestionDecision,
+} from './suggestion-actions';
 
 function NoteActionsMenu( { items, buttonRef } ) {
 	return (
@@ -76,7 +80,14 @@ export function Note( {
 		}
 	}, [ rawContent ] );
 
-	const canResolve = note.parent === 0;
+	// Suggestion threads expose their own Accept/Reject affordance in the
+	// header; the generic "Resolve" button would duplicate that action with
+	// a confusingly similar checkmark icon, so hide it for suggestion notes.
+	const hasSuggestionPayload = !! note?.meta?._wp_suggestion;
+	const suggestionDecision = useSuggestionDecision(
+		hasSuggestionPayload ? note : null
+	);
+	const canResolve = note.parent === 0 && ! hasSuggestionPayload;
 	const metaStatus = note.meta?._wp_note_status;
 	const isResolutionNote =
 		metaStatus === 'resolved' || metaStatus === 'reopen';
@@ -187,9 +198,13 @@ export function Note( {
 		);
 	}
 
-	const actions = isSelected ? (
+	const showActions = isSelected || hasSuggestionPayload;
+	const actions = showActions ? (
 		<>
-			{ canResolve && onResolve && (
+			{ hasSuggestionPayload && (
+				<SuggestionActionButtons decision={ suggestionDecision } />
+			) }
+			{ isSelected && canResolve && onResolve && (
 				<Button
 					label={ _x( 'Resolve', 'Mark note as resolved' ) }
 					size="small"
@@ -199,10 +214,12 @@ export function Note( {
 					onClick={ onResolve }
 				/>
 			) }
-			<NoteActionsMenu
-				items={ availableItems }
-				buttonRef={ actionButtonRef }
-			/>
+			{ isSelected && (
+				<NoteActionsMenu
+					items={ availableItems }
+					buttonRef={ actionButtonRef }
+				/>
+			) }
 		</>
 	) : null;
 
@@ -213,6 +230,12 @@ export function Note( {
 			role={ note.parent !== 0 ? 'treeitem' : undefined }
 		>
 			{ body }
+			{ hasSuggestionPayload && (
+				<SuggestionActions
+					thread={ note }
+					decision={ suggestionDecision }
+				/>
+			) }
 			{ actionState === 'delete' && (
 				<ConfirmDialog
 					isOpen