From 44d25f72b78d9280cb5e1fa56daf3e4de0fd0dab Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 9 Oct 2025 12:24:16 -0700
Subject: [PATCH] Tweakhancement: add ID badge to doc details page

---
 .../components/common/page-header/page-header.component.html | 5 ++++-
 .../components/common/page-header/page-header.component.scss | 5 +++++
 .../components/common/page-header/page-header.component.ts   | 3 +++
 .../document-detail/document-detail.component.html           | 2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/page-header/page-header.component.html b/src-ui/src/app/components/common/page-header/page-header.component.html
index 283218219..3f0194c78 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/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>
       }
diff --git a/src-ui/src/app/components/common/page-header/page-header.component.scss b/src-ui/src/app/components/common/page-header/page-header.component.scss
index ee373a8e2..d8d3311bb 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.scss
+++ b/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) {
diff --git a/src-ui/src/app/components/common/page-header/page-header.component.ts b/src-ui/src/app/components/common/page-header/page-header.component.ts
index d5d397641..55161761a 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.ts
+++ b/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 = ''
 
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index d8cd2d756..35d1066ab 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/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">