Ok lets make duplicates a tab, nice

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -145,24 +145,6 @@
           <a ngbNavLink i18n>Details</a>
           <ng-template ngbNavContent>
             <div>
-              @if (document?.duplicate_documents?.length) {
-                <div class="alert alert-warning">
-                  <div class="fw-semibold" i18n>Duplicate content detected.</div>
-                  <ul class="mb-0 mt-2">
-                    @for (duplicate of document.duplicate_documents; track duplicate.id) {
-                      <li>
-                        <button
-                          type="button"
-                          class="btn btn-link p-0 align-baseline"
-                          (click)="openDuplicateDocument(duplicate.id)"
-                        >
-                          {{ duplicate.title }}
-                        </button>
-                      </li>
-                    }
-                  </ul>
-                </div>
-              }
               <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" [suggestion]="suggestions?.title" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
               <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
               <pngx-input-date i18n-title title="Date created" formControlName="created" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
@@ -388,6 +370,32 @@
             </ng-template>
           </li>
         }
+
+        @if (document?.duplicate_documents?.length) {
+          <li [ngbNavItem]="DocumentDetailNavIDs.Duplicates">
+            <a class="text-nowrap" ngbNavLink i18n>
+              Duplicates
+              <span class="badge text-bg-secondary ms-1">{{ document.duplicate_documents.length }}</span>
+            </a>
+            <ng-template ngbNavContent>
+              <div class="d-flex flex-column gap-2">
+                <div class="fst-italic" i18n>Duplicate documents detected:</div>
+                <div class="list-group">
+                  @for (duplicate of document.duplicate_documents; track duplicate.id) {
+                    <button
+                      type="button"
+                      class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+                      (click)="openDuplicateDocument(duplicate.id)"
+                    >
+                      <span>{{ duplicate.title || ('#' + duplicate.id) }}</span>
+                      <span class="text-secondary">#{{ duplicate.id }}</span>
+                    </button>
+                  }
+                </div>
+              </div>
+            </ng-template>
+          </li>
+        }
       </ul>
 
       <div [ngbNavOutlet]="nav" class="mt-3"></div>

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -301,16 +301,16 @@ describe('DocumentDetailComponent', () => {
       .spyOn(openDocumentsService, 'openDocument')
       .mockReturnValueOnce(of(true))
     fixture.detectChanges()
-    expect(component.activeNavID).toEqual(5) // DocumentDetailNavIDs.Notes
+    expect(component.activeNavID).toEqual(component.DocumentDetailNavIDs.Notes)
   })
 
   it('should change url on tab switch', () => {
     initNormally()
     const navigateSpy = jest.spyOn(router, 'navigate')
-    component.nav.select(5)
+    component.nav.select(component.DocumentDetailNavIDs.Notes)
     component.nav.navChange.next({
       activeId: 1,
-      nextId: 5,
+      nextId: component.DocumentDetailNavIDs.Notes,
       preventDefault: () => {},
     })
     fixture.detectChanges()

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -124,6 +124,7 @@ enum DocumentDetailNavIDs {
   Notes = 5,
   Permissions = 6,
   History = 7,
+  Duplicates = 8,
 }
 
 enum ContentRenderType {
@@ -704,6 +705,13 @@ export class DocumentDetailComponent
     }
     this.title = this.documentTitlePipe.transform(doc.title)
     this.prepareForm(doc)
+
+    if (
+      this.activeNavID === DocumentDetailNavIDs.Duplicates &&
+      !doc?.duplicate_documents?.length
+    ) {
+      this.activeNavID = DocumentDetailNavIDs.Details
+    }
   }
 
   openDuplicateDocument(documentId: number) {