Make Comment the primary action in review dropdown with proper ordering and styling

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/components/comment.tsx

@@ -349,8 +349,8 @@ export function AddComment({
 	isIssue,
 	isAuthor,
 	continueOnGitHub,
-	currentUserReviewState,
-	lastReviewType,
+	currentUserReviewState: _currentUserReviewState,
+	lastReviewType: _lastReviewType,
 	busy,
 	hasReviewDraft,
 }: PullRequest) {
@@ -372,7 +372,8 @@ export function AddComment({
 		close(value);
 	};
 
-	let currentSelection: ReviewType = lastReviewType ?? (currentUserReviewState === 'APPROVED' ? ReviewType.Approve : (currentUserReviewState === 'CHANGES_REQUESTED' ? ReviewType.RequestChanges : ReviewType.Comment));
+	// Always use Comment as the primary action
+	let currentSelection: ReviewType = ReviewType.Comment;
 
 	async function submitAction(action: ReviewType): Promise<void> {
 		const { value } = textareaRef.current!;
@@ -460,12 +461,13 @@ export function AddComment({
 					defaultOptionValue={() => currentSelection}
 					allOptions={() => {
 						const actions: { label: string; value: string; optionDisabled: boolean; action: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void }[] = [];
-						if (availableActions.approve) {
-							actions.push({ label: availableActions[ReviewType.Approve]!, value: ReviewType.Approve, action: () => submitAction(ReviewType.Approve), optionDisabled: shouldDisableApproveButton });
-						}
+						// Comment is always the primary action and should appear first
 						if (availableActions.comment) {
 							actions.push({ label: availableActions[ReviewType.Comment]!, value: ReviewType.Comment, action: () => submitAction(ReviewType.Comment), optionDisabled: shouldDisableNonApproveButtons });
 						}
+						if (availableActions.approve) {
+							actions.push({ label: availableActions[ReviewType.Approve]!, value: ReviewType.Approve, action: () => submitAction(ReviewType.Approve), optionDisabled: shouldDisableApproveButton });
+						}
 						if (availableActions.requestChanges) {
 							actions.push({ label: availableActions[ReviewType.RequestChanges]!, value: ReviewType.RequestChanges, action: () => submitAction(ReviewType.RequestChanges), optionDisabled: shouldDisableNonApproveButtons });
 						}
@@ -475,6 +477,7 @@ export function AddComment({
 					disabled={isBusy || busy}
 					hasSingleAction={Object.keys(availableActions).length === 1}
 					spreadable={true}
+					primaryOptionValue={ReviewType.Comment}
 				/>
 			</div>
 		</form>
@@ -532,7 +535,8 @@ export const AddCommentSimple = (pr: PullRequest) => {
 	const { updatePR, requestChanges, approve, submit, openOnGitHub } = useContext(PullRequestContext);
 	const [isBusy, setBusy] = useState(false);
 	const textareaRef = useRef<HTMLTextAreaElement>();
-	let currentSelection: ReviewType = pr.lastReviewType ?? (pr.currentUserReviewState === 'APPROVED' ? ReviewType.Approve : (pr.currentUserReviewState === 'CHANGES_REQUESTED' ? ReviewType.RequestChanges : ReviewType.Comment));
+	// Always use Comment as the primary action
+	let currentSelection: ReviewType = ReviewType.Comment;
 
 	async function submitAction(action: ReviewType): Promise<void> {
 		const { value } = textareaRef.current!;
@@ -608,12 +612,13 @@ export const AddCommentSimple = (pr: PullRequest) => {
 					defaultOptionValue={() => currentSelection}
 					allOptions={() => {
 						const actions: { label: string; value: string; optionDisabled: boolean; action: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void }[] = [];
-						if (availableActions.approve) {
-							actions.push({ label: availableActions[ReviewType.Approve]!, value: ReviewType.Approve, action: () => submitAction(ReviewType.Approve), optionDisabled: shouldDisableApproveButton });
-						}
+						// Comment is always the primary action and should appear first
 						if (availableActions.comment) {
 							actions.push({ label: availableActions[ReviewType.Comment]!, value: ReviewType.Comment, action: () => submitAction(ReviewType.Comment), optionDisabled: shouldDisableNonApproveButtons });
 						}
+						if (availableActions.approve) {
+							actions.push({ label: availableActions[ReviewType.Approve]!, value: ReviewType.Approve, action: () => submitAction(ReviewType.Approve), optionDisabled: shouldDisableApproveButton });
+						}
 						if (availableActions.requestChanges) {
 							actions.push({ label: availableActions[ReviewType.RequestChanges]!, value: ReviewType.RequestChanges, action: () => submitAction(ReviewType.RequestChanges), optionDisabled: shouldDisableNonApproveButtons });
 						}
@@ -623,6 +628,7 @@ export const AddCommentSimple = (pr: PullRequest) => {
 					disabled={isBusy || pr.busy}
 					hasSingleAction={Object.keys(availableActions).length === 1}
 					spreadable={true}
+					primaryOptionValue={ReviewType.Comment}
 				/>
 			</div>
 		</span>

webviews/components/contextDropdown.tsx

@@ -17,6 +17,7 @@ interface ContextDropdownProps {
 	hasSingleAction?: boolean;
 	spreadable: boolean;
 	isSecondary?: boolean;
+	primaryOptionValue?: string;
 }
 
 function useWindowSize() {
@@ -32,7 +33,7 @@ function useWindowSize() {
 	return size;
 }
 
-export const ContextDropdown = ({ optionsContext, defaultOptionLabel, defaultOptionValue, defaultAction, allOptions: options, optionsTitle, disabled, hasSingleAction, spreadable, isSecondary }: ContextDropdownProps) => {
+export const ContextDropdown = ({ optionsContext, defaultOptionLabel, defaultOptionValue, defaultAction, allOptions: options, optionsTitle, disabled, hasSingleAction, spreadable, isSecondary, primaryOptionValue }: ContextDropdownProps) => {
 	const [expanded, setExpanded] = useState(false);
 	const onHideAction = (e: MouseEvent | KeyboardEvent) => {
 		if (e.target instanceof HTMLElement && e.target.classList.contains('split-right')) {
@@ -56,7 +57,9 @@ export const ContextDropdown = ({ optionsContext, defaultOptionLabel, defaultOpt
 
 	return <div className={`dropdown-container${spreadable ? ' spreadable' : ''}`} ref={divRef}>
 		{divRef.current && spreadable && (divRef.current.clientWidth > 375) && options && !hasSingleAction ? options().map(({ label, value, action, optionDisabled }) => {
-			return <button className='inlined-dropdown' key={value} title={label} disabled={optionDisabled || disabled} onClick={action} value={value}>{label}</button>;
+			// Only the primary option should use the primary (blue) button style when expanded
+			const isPrimary = primaryOptionValue && value === primaryOptionValue;
+			return <button className={`inlined-dropdown${isPrimary ? '' : ' secondary'}`} key={value} title={label} disabled={optionDisabled || disabled} onClick={action} value={value}>{label}</button>;
 		})
 			:
 			<div className='primary-split-button'>