Increase efficiency of starting a review: Review panel

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Proposal

Use a drawer to combine pending comments, review status, and summary comment in one view.

Button for "Your review"	Submit review panel

• 🗣️ Design feedback
• 🕹️ Prototype
• 🎨 Figma
• 📺 Video walkthrough starts at 00:30

Functionality

• When a comment added via "Add to review"
  • If a review has not been started
    • the "Your review" button appears
    • Count in button is 1
  • If a review exists
    • Count increments by 1
    • (optional tbd) Animation such as number rolling over will help draw attention and provide visual feedback.

Functional changes

• Leaving a review as a "Comment only" implies that all of the comments are do not need to be resolved
• Used to be icons to distinguish between a comment and inline code. This is replaced with status-waiting icon to imply that these are unresolved threads and the fact that the code has a link to a file and the line number should be enough to infer that's code.
• Since a summary comment is optional it is hidden by default or when empty (in case of reopeninng). This allows for space for the list of comments in a review. To display the comment box, the user clicks on "Add summary comment". There is no way to hide the summary comment besides opening and closing the drawer.

Initial drawer	After clicking on "Add summary comment"

Background

The current area for a pending review is at the bottom of the page is an area that can be missed. Moving the button to the top of the page makes it more visible and remains visible when scrolling.

Most critically, the "Finish review" button is really hidden right at the bottom of the screen in the place where nobody looks because there's never anything useful there.

Finish Review button UX is very confusing (#391602 - closed)

The flow to finish a review can be improved. It requires a click on "Finish review" and then "Submit review". This proximity of two primary action buttons is confusing because of the misclick on "Finish review" when you are required to click on "Submit review". Also this is a regression of interaction because the copy around "Finish review" could be assume to be the final action.

During a live coding session, @sytses ran into an issue with the two green buttons that appear when you resolve a group of comments. See video 📺 https://youtu.be/ymUqM82wj6Y?t=375

Fix the "two button submit" on the MR when comp... (#212334 - closed)