Fix comment counter

src/app/components/shared/comment-list/comment-list.component.html

@@ -14,8 +14,8 @@
   <div class="button-bar" fxLayoutAlign="center center">
     <div *ngIf="comments && comments.length > 0">
       <mat-chip-list>
-        <mat-chip class="comment-counter" *ngIf="(!filteredComments) || (comments.length === filteredComments.length)">{{comments.length}}</mat-chip>
-        <mat-chip class="comment-counter" *ngIf="(filteredComments) && (comments.length > filteredComments.length)">{{filteredComments.length}}</mat-chip>
+        <mat-chip class="counter" *ngIf="comments && !hideCommentsList">{{comments.length}}</mat-chip>
+        <mat-chip class="counter counter-filtered" *ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</mat-chip>
       </mat-chip-list>
     </div>
 
@@ -67,7 +67,7 @@
         <mat-icon [ngClass]="{unread: 'unread-icon'}[currentFilter]">visibility_off</mat-icon>
       </button>
 
-      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort)">
+      <button mat-icon-button (focus)="hideCommentsList=false" (click)="sortComments(currentSort); filterComments('')">
         <mat-icon>close</mat-icon>
       </button>
     </div>

src/app/components/shared/comment-list/comment-list.component.scss

@@ -80,8 +80,15 @@ h4  {
   color: var(--yellow);
 }
 
-.comment-counter {
+.counter {
   font-size: 18pt;
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.counter-filtered {
+  background-color: var(--secondary);
+  color: var(--on-secondary);
 }
 
 .up {

src/app/components/shared/comment-list/comment-list.component.ts

@@ -182,6 +182,10 @@ export class CommentListComponent implements OnInit {
 
   filterComments(type: string): void {
     this.currentFilter = type;
+    if (type === '') {
+      this.filteredComments = this.comments;
+      return;
+    }
     this.filteredComments = this.comments.filter(c => {
       switch (type) {
         case this.correct: