Show number of comments on cards, tab

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html

@@ -18,6 +18,14 @@
       </div>
     </div>
 
+    <div *ngIf="document.n_comments" class="document-card-comments pe-none py-2 px-1">
+    <span class="badge rounded-pill bg-light border text-primary">
+      <svg class="metadata-icon ms-1 me-1" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#chat-left-text"/>
+      </svg>
+      {{document.n_comments}}</span>
+    </div>
+
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -34,6 +34,12 @@
   display: block;
 }
 
+.document-card-comments {
+  position: absolute;
+  right: 0;
+  bottom: 170px;
+}
+
 .card-selected {
   border-color:var(--bs-primary);
 
@@ -58,12 +64,12 @@
       color: var(--bs-primary);
     }
   }
+}
 
-  .metadata-icon {
-    width: 0.9rem;
-    height: 0.9rem;
-    padding: 0.05rem;
-  }
+.metadata-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  padding: 0.05rem;
 }
 
 .card-footer .btn {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -74,11 +74,12 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
   }
 
   getTagsLimited$() {
+    const limit = this.document.n_comments > 0 ? 6 : 7
     return this.document.tags$.pipe(
       map((tags) => {
-        if (tags.length > 7) {
-          this.moreTags = tags.length - 6
-          return tags.slice(0, 6)
+        if (tags.length > limit) {
+          this.moreTags = tags.length - (limit - 1)
+          return tags.slice(0, limit - 1)
         } else {
           return tags
         }