From 55c5d9121f02ed5bfffad0ead534acaf4c562e5b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 20 Oct 2026 15:31:48 -0700
Subject: [PATCH] Yes, cute little split button that opens the dialog

---
 .../document-detail.component.html            | 23 ++++++++++------
 .../document-detail.component.spec.ts         | 27 ++++++++++++++-----
 .../document-detail.component.ts              | 27 +++++++++++++++++++
 src-ui/src/main.ts                            |  2 ++
 4 files changed, 64 insertions(+), 15 deletions(-)

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 37dcd7b6b..78d0cf631 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
@@ -61,14 +61,21 @@
         <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
       </button>
 
-      <button
-        ngbDropdownItem
-        (click)="runZoneOcr()"
-        [disabled]="!userCanEdit || networkActive()"
-        *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }"
-      >
-        <i-bs width="1em" height="1em" name="file-earmark-ruled" class="me-1"></i-bs><span i18n>Run Zone OCR</span>
-      </button>
+      <div class="d-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.OcrTemplate }">
+        <button ngbDropdownItem (click)="runZoneOcr()" [disabled]="!userCanEdit || networkActive()">
+          <i-bs width="1em" height="1em" name="file-earmark-ruled" class="me-1"></i-bs><span i18n>Run Zone OCR</span>
+        </button>
+        <button
+          ngbDropdownItem
+          class="w-auto flex-shrink-0 px-2"
+          (click)="runZoneOcrWithOptions()"
+          [disabled]="!userCanEdit || networkActive()"
+          title="Choose OCR template"
+          i18n-title
+        >
+          <i-bs width="1em" height="1em" name="sliders2"></i-bs>
+        </button>
+      </div>
 
       @if (userIsOwner && (requiresPassword || password)) {
         <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
index f918b5954..e858ddc66 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -1918,7 +1918,7 @@ describe('DocumentDetailComponent', () => {
     const toastSpy = jest.spyOn(toastService, 'showInfo')
     const modalSpy = jest.spyOn(modalService, 'open')
 
-    component.runZoneOcr()
+    component.runZoneOcrWithOptions()
     const dialog = modalSpy.mock.results[0].value.componentInstance
     expect(dialog.message).toBe(
       'Fields filled by the template will be overwritten.'
@@ -1948,7 +1948,7 @@ describe('DocumentDetailComponent', () => {
 
     runSpy.mockReturnValueOnce(of({ status: 'completed', results: [] }))
     component.runZoneOcr()
-    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
+    expect(modalSpy).not.toHaveBeenCalled()
     expect(runSpy).toHaveBeenCalledWith(doc.id, null)
     expect(toastSpy).toHaveBeenLastCalledWith(
       'Zone OCR found no fields to fill.'
@@ -1964,7 +1964,6 @@ describe('DocumentDetailComponent', () => {
       })
     )
     component.runZoneOcr()
-    modalSpy.mock.results[1].value.componentInstance.confirmClicked.emit()
     expect(toastSpy).toHaveBeenLastCalledWith('Filled 1 of 1 fields.')
   })
 
@@ -1988,6 +1987,24 @@ describe('DocumentDetailComponent', () => {
     expect(component.zoneOcrRunning()).toBe(false)
   })
 
+  it('should warn about unsaved changes in the zone OCR options dialog', () => {
+    component.documentId.set(doc.id)
+    component.document.set({ ...doc, __changedFields: ['title'] })
+    const runSpy = jest.spyOn(documentService, 'runZoneOcr')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    component.runZoneOcrWithOptions()
+
+    const dialog = modalSpy.mock.results[0].value.componentInstance
+    expect(dialog.message).toBe('Running Zone OCR will discard them.')
+    expect(dialog.btnClass).toBe('btn-warning')
+    dialog.cancel()
+    expect(runSpy).not.toHaveBeenCalled()
+    component.networkActive.set(true)
+    component.runZoneOcrWithOptions()
+    expect(modalSpy).toHaveBeenCalledTimes(1)
+  })
+
   it('should not allow saving or a second zone OCR run while one is running', () => {
     component.documentId.set(doc.id)
     component.document.set({ ...doc, __changedFields: ['title'] })
@@ -2021,10 +2038,8 @@ describe('DocumentDetailComponent', () => {
     const pending = new Subject<any>()
     jest.spyOn(documentService, 'runZoneOcr').mockReturnValue(pending)
     const loadSpy = jest.spyOn(component as any, 'loadDocument')
-    const modalSpy = jest.spyOn(modalService, 'open')
 
     component.runZoneOcr()
-    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
     component.documentId.set(99)
     pending.next({ results: [] })
 
@@ -2063,10 +2078,8 @@ describe('DocumentDetailComponent', () => {
       .mockReturnValue(throwError(() => new Error('nope')))
     const loadSpy = jest.spyOn(component as any, 'loadDocument')
     const errorSpy = jest.spyOn(toastService, 'showError')
-    const modalSpy = jest.spyOn(modalService, 'open')
 
     component.runZoneOcr()
-    modalSpy.mock.results[0].value.componentInstance.confirmClicked.emit()
 
     expect(errorSpy).toHaveBeenCalledWith(
       'Error running zone OCR.',
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 6d3078c6a..d40eb238a 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -1563,7 +1563,34 @@ export class DocumentDetailComponent
     })
   }
 
+  /** Runs every template that matches, confirming only over unsaved changes. */
   runZoneOcr() {
+    if (this.networkActive()) return
+    const documentId = this.documentId()
+    if (!this.hasLocalEdits(this.document())) {
+      this.executeZoneOcr(documentId, null)
+      return
+    }
+    const modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Run Zone OCR`
+    modal.componentInstance.messageBold = $localize`You have unsaved changes.`
+    modal.componentInstance.message = $localize`Running Zone OCR will discard them.`
+    modal.componentInstance.btnClass = 'btn-warning'
+    modal.componentInstance.btnCaption = $localize`Run Zone OCR`
+    modal.componentInstance.confirmClicked
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.close()
+        if (this.documentId() === documentId && !this.networkActive()) {
+          this.executeZoneOcr(documentId, null)
+        }
+      })
+  }
+
+  /** Opens the dialog to pick which template to run. */
+  runZoneOcrWithOptions() {
     if (this.networkActive()) return
     const documentId = this.documentId()
     const modal = this.modalService.open(ZoneOcrConfirmDialogComponent, {
diff --git a/src-ui/src/main.ts b/src-ui/src/main.ts
index 93878fc1c..c2678330a 100644
--- a/src-ui/src/main.ts
+++ b/src-ui/src/main.ts
@@ -156,6 +156,7 @@ import {
   send,
   shop,
   slashCircle,
+  sliders2,
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
@@ -413,6 +414,7 @@ const icons = {
   send,
   slashCircle,
   shop,
+  sliders2,
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,