Actually at this point lets split the dialogs

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.html

@@ -0,0 +1,52 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
+</div>
+<div class="modal-body">
+  <p>{{message}}</p>
+  <div class="form-group">
+    <label class="form-label" i18n>Versions:</label>
+    <ul class="list-group"
+        cdkDropList
+        [cdkDropListData]="draggableDocumentIDs()"
+        (cdkDropListDropped)="onDrop($event)">
+      @for (documentID of draggableDocumentIDs(); track documentID) {
+        @let document = getDocument(documentID);
+        @if (document) {
+          <li class="list-group-item d-flex align-items-center" cdkDrag>
+            <i-bs name="grip-vertical" class="me-2"></i-bs>
+            <div class="d-flex flex-column">
+              <div>
+                @if (document.correspondent) {
+                  <b>{{document.correspondent | correspondentName | async}}: </b>
+                }{{document.title}}
+              </div>
+              <small class="text-muted">
+                {{document.created | customDate:'mediumDate'}}
+                @if (document.page_count) {
+                  | {document.page_count, plural, =1 {One page} other {{{document.page_count}} pages}}
+                }
+              </small>
+            </div>
+          </li>
+        }
+      }
+    </ul>
+  </div>
+  <div class="form-group mt-4">
+    <label class="form-label" for="rootDocumentID" i18n>Root document:</label>
+    <select id="rootDocumentID" class="form-select" [ngModel]="rootDocumentID()" (ngModelChange)="rootDocumentID.set($event)">
+      @for (document of documents(); track document.id) {
+        <option [ngValue]="document.id">{{document.title}}</option>
+      }
+    </select>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+    <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+  </button>
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+    {{btnCaption}}
+  </button>
+</div>

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.scss

@@ -0,0 +1,3 @@
+.list-group-item {
+    cursor: move;
+}

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.spec.ts

@@ -0,0 +1,70 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { MergeAsVersionsConfirmDialogComponent } from './merge-as-versions-confirm-dialog.component'
+
+describe('MergeAsVersionsConfirmDialogComponent', () => {
+  let component: MergeAsVersionsConfirmDialogComponent
+  let fixture: ComponentFixture<MergeAsVersionsConfirmDialogComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        MergeAsVersionsConfirmDialogComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MergeAsVersionsConfirmDialogComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should fetch selected documents', () => {
+    const documents = [
+      { id: 1, title: 'Document 1' },
+      { id: 2, title: 'Document 2' },
+    ]
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: [1, 2],
+        count: 2,
+        results: documents,
+      })
+    )
+    component.documentIDs.set([1, 2])
+
+    component.ngOnInit()
+
+    expect(component.documents()).toEqual(documents)
+    expect(documentService.getFew).toHaveBeenCalledWith([1, 2])
+  })
+
+  it('should exclude the root from the draggable documents', () => {
+    component.documentIDs.set([1, 2, 3])
+    component.rootDocumentID.set(2)
+
+    expect(component.draggableDocumentIDs()).toEqual([1, 3])
+  })
+
+  it('should move draggable documents while keeping the root fixed', () => {
+    component.documentIDs.set([1, 2, 3])
+    component.rootDocumentID.set(1)
+
+    component.onDrop({ previousIndex: 1, currentIndex: 0 } as any)
+
+    expect(component.documentIDs()).toEqual([1, 3, 2])
+    expect(component.draggableDocumentIDs()).toEqual([3, 2])
+  })
+})

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.ts

@@ -0,0 +1,73 @@
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { AsyncPipe } from '@angular/common'
+import { Component, OnInit, computed, inject, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { takeUntil } from 'rxjs'
+import { Document } from 'src/app/data/document'
+import { CorrespondentNamePipe } from 'src/app/pipes/correspondent-name.pipe'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-merge-as-versions-confirm-dialog',
+  templateUrl: './merge-as-versions-confirm-dialog.component.html',
+  styleUrl: './merge-as-versions-confirm-dialog.component.scss',
+  imports: [
+    AsyncPipe,
+    CorrespondentNamePipe,
+    CustomDatePipe,
+    DragDropModule,
+    FormsModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class MergeAsVersionsConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  private documentService = inject(DocumentService)
+
+  readonly documentIDs = signal<number[]>([])
+  readonly documents = signal<Document[]>([])
+  readonly rootDocumentID = signal(-1)
+  readonly draggableDocumentIDs = computed(() =>
+    this.documentIDs().filter(
+      (documentID) => documentID !== this.rootDocumentID()
+    )
+  )
+
+  ngOnInit() {
+    this.documentService
+      .getFew(this.documentIDs())
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((response) => this.documents.set(response.results))
+  }
+
+  onDrop(event: CdkDragDrop<number[]>) {
+    const draggableDocumentIDs = this.draggableDocumentIDs().concat()
+    moveItemInArray(
+      draggableDocumentIDs,
+      event.previousIndex,
+      event.currentIndex
+    )
+
+    let draggableIndex = 0
+    this.documentIDs.update((documentIDs) =>
+      documentIDs.map((documentID) =>
+        documentID === this.rootDocumentID()
+          ? documentID
+          : draggableDocumentIDs[draggableIndex++]
+      )
+    )
+  }
+
+  getDocument(documentID: number): Document {
+    return this.documents().find((document) => document.id === documentID)
+  }
+}

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.html

@@ -9,9 +9,9 @@
         <label class="form-label" for="metadataDocumentID" i18n>Documents:</label>
         <ul class="list-group"
             cdkDropList
-            [cdkDropListData]="draggableDocumentIDs()"
+            [cdkDropListData]="documentIDs()"
             (cdkDropListDropped)="onDrop($event)">
-            @for (documentID of draggableDocumentIDs(); track documentID) {
+            @for (documentID of documentIDs(); track documentID) {
               @let document = getDocument(documentID);
               @if (document) {
                 <li class="list-group-item d-flex align-items-center" cdkDrag>
@@ -34,36 +34,25 @@
             }
         </ul>
         </div>
-    @if (mergeAsVersions) {
-      <div class="form-group mt-4">
-        <label class="form-label" for="rootDocumentID" i18n>Root document:</label>
-        <select id="rootDocumentID" class="form-select" [ngModel]="rootDocumentID()" (ngModelChange)="rootDocumentID.set($event)">
-          @for (document of documents(); track document.id) {
-            <option [ngValue]="document.id">{{document.title}}</option>
-          }
+    <div class="form-group mt-4">
+        <label class="form-label" for="metadataDocumentID" i18n>Use metadata from:</label>
+        <select id="metadataDocumentID" class="form-select" [ngModel]="metadataDocumentID()" (ngModelChange)="metadataDocumentID.set($event)">
+            <option [ngValue]="-1" i18n>Regenerate all metadata</option>
+            @for (document of documents(); track document.id) {
+              <option [ngValue]="document.id">{{document.title}}</option>
+            }
         </select>
-      </div>
-    } @else {
-      <div class="form-group mt-4">
-          <label class="form-label" for="metadataDocumentID" i18n>Use metadata from:</label>
-          <select id="metadataDocumentID" class="form-select" [ngModel]="metadataDocumentID()" (ngModelChange)="metadataDocumentID.set($event)">
-              <option [ngValue]="-1" i18n>Regenerate all metadata</option>
-              @for (document of documents(); track document.id) {
-                <option [ngValue]="document.id">{{document.title}}</option>
-              }
-          </select>
-      </div>
-      <div class="form-check form-switch mt-4">
-        <input class="form-check-input" type="checkbox" role="switch" id="archiveFallbackSwitch" [ngModel]="archiveFallback()" (ngModelChange)="archiveFallback.set($event)">
-        <label class="form-check-label" for="archiveFallbackSwitch" i18n>Try to include archive version in merge for non-PDF files</label>
-      </div>
-      <div class="form-check form-switch mt-2">
-        <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalsSwitch" [ngModel]="deleteOriginals()" (ngModelChange)="deleteOriginals.set($event)" [disabled]="!userOwnsAllDocuments">
-        <label class="form-check-label" for="deleteOriginalsSwitch" i18n>Delete original documents after successful merge</label>
-      </div>
-      @if (!archiveFallback()) {
-        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be included.</p>
-      }
+    </div>
+    <div class="form-check form-switch mt-4">
+      <input class="form-check-input" type="checkbox" role="switch" id="archiveFallbackSwitch" [ngModel]="archiveFallback()" (ngModelChange)="archiveFallback.set($event)">
+      <label class="form-check-label" for="archiveFallbackSwitch" i18n>Try to include archive version in merge for non-PDF files</label>
+    </div>
+    <div class="form-check form-switch mt-2">
+      <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalsSwitch" [ngModel]="deleteOriginals()" (ngModelChange)="deleteOriginals.set($event)" [disabled]="!userOwnsAllDocuments">
+      <label class="form-check-label" for="deleteOriginalsSwitch" i18n>Delete original documents after successful merge</label>
+    </div>
+    @if (!archiveFallback()) {
+      <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be included.</p>
     }
 </div>
 <div class="modal-footer">

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts

@@ -66,20 +66,6 @@ describe('MergeConfirmDialogComponent', () => {
     expect(component.documentIDs()).toEqual([1, 3, 2])
   })
 
-  it('should move draggable documents while keeping the root fixed', () => {
-    component.documentIDs.set([1, 2, 3])
-    component.rootDocumentID.set(1)
-    const event = {
-      previousIndex: 1,
-      currentIndex: 0,
-    }
-
-    component.onDrop(event as any)
-
-    expect(component.documentIDs()).toEqual([1, 3, 2])
-    expect(component.draggableDocumentIDs()).toEqual([3, 2])
-  })
-
   it('should get document by ID', () => {
     const documents = [
       { id: 1, name: 'Document 1' },

src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.ts

@@ -4,14 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { AsyncPipe } from '@angular/common'
-import {
-  Component,
-  Input,
-  OnInit,
-  computed,
-  inject,
-  signal,
-} from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
@@ -48,15 +41,6 @@ export class MergeConfirmDialogComponent
   readonly deleteOriginals = signal(false)
   readonly documents = signal<Document[]>([])
   readonly metadataDocumentID = signal(-1)
-  readonly rootDocumentID = signal(-1)
-  readonly draggableDocumentIDs = computed(() =>
-    this.documentIDs().filter(
-      (documentID) => documentID !== this.rootDocumentID()
-    )
-  )
-
-  @Input()
-  mergeAsVersions = false
 
   constructor() {
     super()
@@ -72,21 +56,9 @@ export class MergeConfirmDialogComponent
   }
 
   onDrop(event: CdkDragDrop<number[]>) {
-    const draggableDocumentIDs = this.draggableDocumentIDs().concat()
-    moveItemInArray(
-      draggableDocumentIDs,
-      event.previousIndex,
-      event.currentIndex
-    )
-
-    let draggableIndex = 0
-    this.documentIDs.update((documentIDs) =>
-      documentIDs.map((documentID) =>
-        documentID === this.rootDocumentID()
-          ? documentID
-          : draggableDocumentIDs[draggableIndex++]
-      )
-    )
+    const documentIDs = this.documentIDs().concat()
+    moveItemInArray(documentIDs, event.previousIndex, event.currentIndex)
+    this.documentIDs.set(documentIDs)
   }
 
   getDocument(documentID: number): Document {

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -1281,7 +1281,6 @@ describe('BulkEditorComponent', () => {
 
     component.mergeSelectedAsVersions()
     expect(modal).not.toBeUndefined()
-    expect(modal.componentInstance.mergeAsVersions).toBe(true)
     modal.componentInstance.rootDocumentID.set(4)
     modal.componentInstance.confirm()
 

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -50,6 +50,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { flattenTags } from 'src/app/utils/flatten-tags'
 import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
+import { MergeAsVersionsConfirmDialogComponent } from '../../common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
@@ -1003,15 +1004,15 @@ export class BulkEditorComponent
   }
 
   mergeSelectedAsVersions() {
-    let modal = this.modalService.open(MergeConfirmDialogComponent, {
+    let modal = this.modalService.open(MergeAsVersionsConfirmDialogComponent, {
       backdrop: 'static',
     })
-    const mergeDialog = modal.componentInstance as MergeConfirmDialogComponent
+    const mergeDialog =
+      modal.componentInstance as MergeAsVersionsConfirmDialogComponent
     const documentIDs = Array.from(this.list.selected)
     mergeDialog.title = $localize`Merge as versions`
     mergeDialog.message = $localize`The selected documents will become versions of the root document.`
     mergeDialog.btnCaption = $localize`Proceed`
-    mergeDialog.mergeAsVersions = true
     mergeDialog.documentIDs.set(documentIDs)
     mergeDialog.rootDocumentID.set(documentIDs[0])
     mergeDialog.confirmClicked