Add a little warning for empty zones

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.html

@@ -7,12 +7,18 @@
         <span class="p-2 rounded flex-shrink-0" [style.background-color]="zoneColor(i)" aria-hidden="true"></span>
         <div class="flex-grow-1 text-truncate">
           <button type="button" class="btn btn-link p-0 fw-semibold text-reset text-decoration-none text-truncate mw-100 stretched-link" (click)="zoneSelected.emit(i)">{{ zone.name }}</button>
-          <div class="small text-muted text-truncate">
-            {{ getZoneTargetName(zone) }}
-            @if (isCombined(zone)) {
-              <i-bs name="braces" class="ms-1" title="Combined with other zones" i18n-title></i-bs>
-            }
-          </div>
+          @if (!hasField(zone)) {
+            <div class="small text-warning text-truncate">
+              <i-bs name="exclamation-triangle" class="me-1" aria-hidden="true"></i-bs><span i18n>No field selected</span>
+            </div>
+          } @else {
+            <div class="small text-muted text-truncate">
+              {{ getZoneTargetName(zone) }}
+              @if (isCombined(zone)) {
+                <i-bs name="braces" class="ms-1" title="Combined with other zones" i18n-title></i-bs>
+              }
+            </div>
+          }
         </div>
         <small class="text-muted text-nowrap">
           @if (zone.page === -1) {

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.spec.ts

@@ -73,6 +73,25 @@ describe('OcrTemplateEditorZoneListComponent', () => {
     ).toBe(2)
   })
 
+  it('warns only for zones without a field and clears the warning when assigned', () => {
+    component.zones = [
+      zone({ custom_field: null }),
+      zone({ target: 'title', custom_field: null }),
+      zone(),
+    ]
+    fixture.detectChanges()
+
+    const warnings = () =>
+      fixture.nativeElement.querySelectorAll('.text-warning')
+    expect(warnings()).toHaveLength(1)
+    expect(warnings()[0].textContent).toContain('No field selected')
+
+    component.zones[0].custom_field = 7
+    fixture.componentRef.setInput('zones', [...component.zones])
+    fixture.detectChanges()
+    expect(warnings()).toHaveLength(0)
+  })
+
   it('emits select and remove events', () => {
     component.zones = [zone()]
     const selectSpy = jest.spyOn(component.zoneSelected, 'emit')

src-ui/src/app/components/manage/ocr-templates/ocr-template-editor/ocr-template-editor-zone-list/ocr-template-editor-zone-list.component.ts

@@ -22,6 +22,10 @@ export class OcrTemplateEditorZoneListComponent {
 
   readonly zoneColor = getZoneColor
 
+  hasField(zone: OcrTemplateZone): boolean {
+    return getZoneFieldKey(zone) !== null
+  }
+
   isCombined(zone: OcrTemplateZone): boolean {
     const key = getZoneFieldKey(zone)
     return (