From 6495e6d00418792d642be321c5d5a811a331cc55 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Thu, 5 May 2022 00:14:07 +0200
Subject: [PATCH 1/8] Add pulse

---
 web_src/js/features/repo-diff.js |  6 ++++++
 web_src/less/animations.less     | 16 ++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 45dad52fb1e22..3f0e0b6933448 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -8,6 +8,12 @@ const {csrfToken} = window.config;
 export function initRepoDiffReviewButton() {
   $(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(() => document.querySelector('#review-box').classList.add('pulse'));
+    });
   });
 }
 
diff --git a/web_src/less/animations.less b/web_src/less/animations.less
index 083e10089d15c..92a3052a1f36b 100644
--- a/web_src/less/animations.less
+++ b/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;
+}

From e9c9179fbe1ceee0ed014f057e9eff7b8e67788d Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Thu, 5 May 2022 01:23:57 +0200
Subject: [PATCH 2/8] Add number of pending comments

---
 routers/web/repo/pull.go            | 18 +++++++++++++++++-
 templates/repo/diff/comments.tmpl   |  2 +-
 templates/repo/diff/new_review.tmpl |  1 +
 web_src/js/features/repo-diff.js    | 14 +++++++++++++-
 web_src/js/features/repo-issue.js   | 13 +++++++++++++
 web_src/less/_review.less           |  9 +++++++++
 6 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
index 6cda560f3ca90..1d28b2708a059 100644
--- a/routers/web/repo/pull.go
+++ b/routers/web/repo/pull.go
@@ -753,11 +753,27 @@ 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
+
 	getBranchData(ctx, issue)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.Doer.ID)
 	ctx.Data["HasIssuesOrPullsWritePermission"] = ctx.Repo.CanWriteIssuesOrPulls(issue.IsPull)
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index 3b8f1c2a9c59d..863e295862854 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/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}}
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index cbaabe255e21b..feea436ddf083 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/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">
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 3f0e0b6933448..eb21ba1005496 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -12,7 +12,19 @@ export function initRepoDiffReviewButton() {
     // 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(() => document.querySelector('#review-box').classList.add('pulse'));
+      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, parseInt will return `NaN`
+        // and default back to '1'.
+        commentCounter.textContent = parseInt(commentCounter.textContent) + 1 || '1';
+
+        // Make the review-box to do a little pulse.
+        document.querySelector('#review-box').classList.add('pulse');
+        // Remove the pulse class once it's done.
+        setTimeout(() => document.querySelector('#review-box').classList.remove('pulse'), 2500);
+      });
     });
   });
 }
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index a39a704f4793a..8148df62097d5 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -160,6 +160,19 @@ 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.
+          commentCounter.textContent = parseInt(commentCounter.textContent) - 1;
+          // 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');
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index eddd32fa66d5f..5e9fb8f5e1e92 100644
--- a/web_src/less/_review.less
+++ b/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;
 

From 5946f3f5b21ac898c5f1588685650f83a6a77bc5 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Thu, 5 May 2022 22:23:58 +0000
Subject: [PATCH 3/8] Use string type

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/js/features/repo-issue.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 8148df62097d5..ba9e74ed82b75 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -166,7 +166,7 @@ export function initRepoIssueCommentDelete() {
           // This is a pending comment.
           const commentCounter = document.querySelector('#review-box .review-comments-counter');
           // Decrease the counter by one.
-          commentCounter.textContent = parseInt(commentCounter.textContent) - 1;
+          commentCounter.textContent = String(parseInt(commentCounter.textContent) - 1);
           // If no pending comments remains, don't show the counter.
           if (commentCounter.textContent === '0') {
             commentCounter.style.display = 'none';

From c6cf831adb41134ff792eda5780252288452fc3a Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Thu, 5 May 2022 22:25:00 +0000
Subject: [PATCH 4/8] Use string type

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/js/features/repo-diff.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index eb21ba1005496..7346f5126c545 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -18,7 +18,7 @@ export function initRepoDiffReviewButton() {
         commentCounter.style.display = '';
         // Increase counter by one, in case it's the first review, parseInt will return `NaN`
         // and default back to '1'.
-        commentCounter.textContent = parseInt(commentCounter.textContent) + 1 || '1';
+        commentCounter.textContent = String(parseInt(commentCounter.textContent) + 1 || 1);
 
         // Make the review-box to do a little pulse.
         document.querySelector('#review-box').classList.add('pulse');

From f2e8d3a68bfffc13664f33b685c9d5df129932c7 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 6 May 2022 00:33:03 +0200
Subject: [PATCH 5/8] Remove class before adding it again.

---
 web_src/js/features/repo-diff.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 7346f5126c545..de4a99619ce4e 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -6,6 +6,7 @@ import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 const {csrfToken} = window.config;
 
 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">');
 
@@ -21,9 +22,13 @@ export function initRepoDiffReviewButton() {
         commentCounter.textContent = String(parseInt(commentCounter.textContent) + 1 || 1);
 
         // Make the review-box to do a little pulse.
-        document.querySelector('#review-box').classList.add('pulse');
-        // Remove the pulse class once it's done.
-        setTimeout(() => document.querySelector('#review-box').classList.remove('pulse'), 2500);
+        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.
+        reviewBox.offsetWidth;
+        // Add the class again.
+        reviewBox.classList.add('pulse');
       });
     });
   });

From f7f91386d08077148870acbf901ee9a8a6ecbb8e Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 6 May 2022 00:37:44 +0200
Subject: [PATCH 6/8] Make linter happy

---
 web_src/js/features/repo-diff.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index de4a99619ce4e..0bd448b5846af 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -26,7 +26,7 @@ export function initRepoDiffReviewButton() {
         // 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.
-        reviewBox.offsetWidth;
+        const _ = reviewBox.offsetWidth;
         // Add the class again.
         reviewBox.classList.add('pulse');
       });

From feef2d6a9a437ae003ff9fdb03feede6caadcb7f Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 6 May 2022 00:52:00 +0200
Subject: [PATCH 7/8] Use `PageData`

---
 routers/web/repo/pull.go          |  3 +++
 web_src/js/features/repo-diff.js  | 10 ++++++----
 web_src/js/features/repo-issue.js |  6 ++++--
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
index 1d28b2708a059..8499d24e3ff9b 100644
--- a/routers/web/repo/pull.go
+++ b/routers/web/repo/pull.go
@@ -773,6 +773,9 @@ func ViewPullFiles(ctx *context.Context) {
 	}
 	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)
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 0bd448b5846af..930c4c1fb93da 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,7 +3,8 @@ 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');
@@ -17,9 +18,10 @@ export function initRepoDiffReviewButton() {
         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, parseInt will return `NaN`
-        // and default back to '1'.
-        commentCounter.textContent = String(parseInt(commentCounter.textContent) + 1 || 1);
+        // 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');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index ba9e74ed82b75..77a1c2c4bc020 100644
--- a/web_src/js/features/repo-issue.js
+++ b/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', () => {
@@ -166,7 +167,8 @@ export function initRepoIssueCommentDelete() {
           // This is a pending comment.
           const commentCounter = document.querySelector('#review-box .review-comments-counter');
           // Decrease the counter by one.
-          commentCounter.textContent = String(parseInt(commentCounter.textContent) - 1);
+          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';

From 27cdfcc6d6a7b72890d42162fa53d4dd3457132e Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 7 May 2022 00:55:43 +0800
Subject: [PATCH 8/8] Refactor (#3)

---
 routers/web/repo/pull.go            |  5 +---
 templates/repo/diff/new_review.tmpl |  2 +-
 web_src/js/features/repo-diff.js    | 38 +++++++++++------------------
 web_src/js/features/repo-issue.js   | 17 +++++--------
 web_src/less/_review.less           |  4 +++
 5 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
index 68d85e0b7d90f..7cedeec10e821 100644
--- a/routers/web/repo/pull.go
+++ b/routers/web/repo/pull.go
@@ -771,10 +771,7 @@ func ViewPullFiles(ctx *context.Context) {
 		}
 	}
 	ctx.Data["CurrentReview"] = currentReview
-	ctx.Data["PendingCodeComments"] = numPendingCodeComments
-	ctx.PageData["prReview"] = map[string]interface{}{
-		"pendingCodeComments": numPendingCodeComments,
-	}
+	ctx.Data["PendingCodeCommentNumber"] = numPendingCodeComments
 
 	getBranchData(ctx, issue)
 	ctx.Data["IsIssuePoster"] = ctx.IsSigned && issue.IsPoster(ctx.Doer.ID)
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
index feea436ddf083..e4110b50ed022 100644
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -1,7 +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>
+		<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
 		{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 	</div>
 	<div class="menu review-box">
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 930c4c1fb93da..013b8d3fa06e2 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,35 +3,25 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 
-const {csrfToken, pageData} = window.config;
-const prReview = pageData.prReview || {};
+const {csrfToken} = window.config;
 
 export function initRepoDiffReviewButton() {
-  const reviewBox = document.querySelector('#review-box');
+  const $reviewBox = $('#review-box');
+  const $counter = $reviewBox.find('.review-comments-counter');
+
   $(document).on('click', 'button[name="is_review"]', (e) => {
-    $(e.target).closest('form').append('<input type="hidden" name="is_review" value="true">');
+    const $form = $(e.target).closest('form');
+    $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');
-      });
+    $form.on('submit', () => {
+      const num = parseInt($counter.attr('data-pending-comment-number')) + 1 || 1;
+      $counter.attr('data-pending-comment-number', num);
+      $counter.text(num);
+      // Force the browser to reflow the DOM. This is to ensure that the browser replay the animation
+      $reviewBox.removeClass('pulse');
+      $reviewBox.width();
+      $reviewBox.addClass('pulse');
     });
   });
 }
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 77a1c2c4bc020..4e077c14e2e69 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -5,8 +5,7 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initCompImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
-const {appSubUrl, csrfToken, pageData} = window.config;
-const prReview = pageData.prReview || {};
+const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoIssueTimeTracking() {
   $(document).on('click', '.issue-add-time', () => {
@@ -164,15 +163,11 @@ export function initRepoIssueCommentDelete() {
 
         // 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';
-          }
+          const $counter = $('#review-box .review-comments-counter');
+          let num = parseInt($counter.attr('data-pending-comment-number')) - 1 || 0;
+          num = Math.max(num, 0);
+          $counter.attr('data-pending-comment-number', num);
+          $counter.text(num);
         }
 
         $(`#${$this.data('comment-id')}`).remove();
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 5e9fb8f5e1e92..8bc41b9736280 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -251,6 +251,10 @@ a.blob-excerpt:hover {
   background-color: var(--color-primary-light-5);
 }
 
+#review-box .review-comments-counter[data-pending-comment-number="0"] {
+  display: none;
+}
+
 .pull.files.diff [id] {
   scroll-margin-top: 99px;