Tweakhancement: add ID badge to doc details page

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -1,7 +1,10 @@
 <div class="row pt-3 pb-3 pb-md-2 align-items-center">
   <div class="col-md text-truncate">
-    <h3 class="text-truncate" style="line-height: 1.4">
+    <h3 class="text-truncate d-flex align-items-center" style="line-height: 1.4">
       {{title}}
+      @if (id) {
+        <span class="badge bg-primary text-primary-text-contrast ms-2 small fs-normal">ID: {{id}}</span>
+      }
       @if (subTitle) {
         <span class="h6 mb-0 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
       }

src-ui/src/app/components/common/page-header/page-header.component.scss

@@ -1,5 +1,10 @@
 h3 {
     min-height: calc(1.325rem + 0.9vw);
+
+    .badge {
+        font-size: 0.65rem;
+        line-height: 1;
+    }
 }
 
 @media (min-width: 1200px) {

src-ui/src/app/components/common/page-header/page-header.component.ts

@@ -26,6 +26,9 @@ export class PageHeaderComponent {
     return this._title
   }
 
+  @Input()
+  id: number
+
   @Input()
   subTitle: string = ''
 

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

@@ -1,4 +1,4 @@
-<pngx-page-header [(title)]="title">
+<pngx-page-header [(title)]="title" [id]="documentId">
   @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
     @if (previewNumPages) {
       <div class="input-group input-group-sm d-none d-md-flex">