Improve reviewing PR UX

routers/web/repo/pull.go

@@ -752,11 +752,30 @@ func ViewPullFiles(ctx *context.Context) {
 	if ctx.Written() {
 		return
 	}
-	ctx.Data["CurrentReview"], err = models.GetCurrentReview(ctx.Doer, issue)
+
+	currentReview, err := models.GetCurrentReview(ctx.Doer, issue)
 	if err != nil && !models.IsErrReviewNotExist(err) {
 		ctx.ServerError("GetCurrentReview", err)
 		return
 	}
+	numPendingCodeComments := int64(0)
+	if currentReview != nil {
+		numPendingCodeComments, err = models.CountComments(&models.FindCommentsOptions{
+			Type:     models.CommentTypeCode,
+			ReviewID: currentReview.ID,
+			IssueID:  issue.ID,
+		})
+		if err != nil {
+			ctx.ServerError("CountComments", err)
+			return
+		}
+	}
+	ctx.Data["CurrentReview"] = currentReview
+	ctx.Data["PendingCodeComments"] = numPendingCodeComments
+	ctx.PageData["prReview"] = map[string]interface{}{
+		"pendingCodeComments": numPendingCodeComments,
+	}
+
 	getBranchData(ctx, issue)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.Doer.ID)
 	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)

templates/repo/diff/comments.tmpl

@@ -37,7 +37,7 @@
 			<div class="comment-header-right actions df ac">
 				{{if and .Review}}
 					{{if eq .Review.Type 0}}
-						<div class="ui label basic small yellow">
+						<div class="ui label basic small yellow pending-label">
 						{{$.root.i18n.Tr "repo.issues.review.pending"}}
 						</div>
 					{{else}}

templates/repo/diff/new_review.tmpl

@@ -1,6 +1,7 @@
 <div class="ui top right pointing dropdown custom" id="review-box">
 	<div class="ui tiny green button btn-review">
 		{{.i18n.Tr "repo.diff.review"}}
+		<span class="ui small label review-comments-counter" {{if eq .PendingCodeComments 0}}style="display: none"{{end}}>{{if gt .PendingCodeComments 0}}{{.PendingCodeComments}}{{end}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</div>
 	<div class="menu review-box">

web_src/js/features/repo-diff.js

@@ -3,11 +3,36 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 
-const {csrfToken} = window.config;
+const {csrfToken, pageData} = window.config;
+const prReview = pageData.prReview || {};
 
 export function initRepoDiffReviewButton() {
+  const reviewBox = document.querySelector('#review-box');
   $(document).on('click', 'button[name="is_review"]', (e) => {
     $(e.target).closest('form').append('<input type="hidden" name="is_review" value="true">');
+
+    // Watch for the form's submit event.
+    e.target.closest('form').addEventListener('submit', () => {
+      // Set a zero-timeout, so this would be executed after the network request has finished.
+      setTimeout(() => {
+        const commentCounter = document.querySelector('#review-box .review-comments-counter');
+        // Remove the display: none.
+        commentCounter.style.display = '';
+        // Increase counter by one, in case it's the first review, `pendingCodeComments` will
+        // return undefined so it will default to '1'.
+        prReview.pendingCodeComments = prReview.pendingCodeComments + 1 || 1;
+        commentCounter.textContent = String(prReview.pendingCodeComments);
+
+        // Make the review-box to do a little pulse.
+        reviewBox.classList.remove('pulse');
+        // Force the browser to reflow the DOM. This is to ensure that the browser.
+        // Actually removes the 'pulse' class from the DOM. Otherwise the browser
+        // is smart enough to de-duplicate these two requests.
+        const _ = reviewBox.offsetWidth;
+        // Add the class again.
+        reviewBox.classList.add('pulse');
+      });
+    });
   });
 }
 

web_src/js/features/repo-issue.js

@@ -5,7 +5,8 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initCompImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
-const {appSubUrl, csrfToken} = window.config;
+const {appSubUrl, csrfToken, pageData} = window.config;
+const prReview = pageData.prReview || {};
 
 export function initRepoIssueTimeTracking() {
   $(document).on('click', '.issue-add-time', () => {
@@ -160,6 +161,20 @@ export function initRepoIssueCommentDelete() {
         _csrf: csrfToken,
       }).done(() => {
         const $conversationHolder = $this.closest('.conversation-holder');
+
+        // Check if this was a pending comment.
+        if ($conversationHolder.find('.pending-label').length) {
+          // This is a pending comment.
+          const commentCounter = document.querySelector('#review-box .review-comments-counter');
+          // Decrease the counter by one.
+          prReview.pendingCodeComments -= 1;
+          commentCounter.textContent = String(prReview.pendingCodeComments);
+          // If no pending comments remains, don't show the counter.
+          if (commentCounter.textContent === '0') {
+            commentCounter.style.display = 'none';
+          }
+        }
+
         $(`#${$this.data('comment-id')}`).remove();
         if ($conversationHolder.length && !$conversationHolder.find('.comment').length) {
           const path = $conversationHolder.data('path');

web_src/less/_review.less

@@ -242,6 +242,15 @@ a.blob-excerpt:hover {
   border: none !important;
 }
 
+#review-box .review-comments-counter {
+  background-color: var(--color-primary-light-4);
+  color: #fff;
+}
+
+#review-box:hover .review-comments-counter {
+  background-color: var(--color-primary-light-5);
+}
+
 .pull.files.diff [id] {
   scroll-margin-top: 99px;
 

web_src/less/animations.less

@@ -50,3 +50,19 @@
     opacity: 0;
   }
 }
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.pulse {
+  animation: pulse 2s linear;
+}