Merge branch 'dev' into feature-document-versions-1218

src-ui/src/app/components/admin/config/config.component.html

@@ -35,8 +35,12 @@
                                                     @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
                                                     @case (ConfigOptionType.JSON) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
                                                     @case (ConfigOptionType.File) { <pngx-input-file [formControlName]="option.key" (upload)="uploadFile($event, option.key)" [error]="errors[option.key]"></pngx-input-file> }
+                                                    @case (ConfigOptionType.Password) { <pngx-input-password [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-password> }
                                                 }
                                             </div>
+                                            @if (option.note) {
+                                                <div class="form-text fst-italic">{{option.note}}</div>
+                                            }
                                         </div>
                                     </div>
                                 </div>

src-ui/src/app/components/admin/config/config.component.ts

@@ -29,6 +29,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { FileComponent } from '../../common/input/file/file.component'
 import { NumberComponent } from '../../common/input/number/number.component'
+import { PasswordComponent } from '../../common/input/password/password.component'
 import { SelectComponent } from '../../common/input/select/select.component'
 import { SwitchComponent } from '../../common/input/switch/switch.component'
 import { TextComponent } from '../../common/input/text/text.component'
@@ -46,6 +47,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
     TextComponent,
     NumberComponent,
     FileComponent,
+    PasswordComponent,
     AsyncPipe,
     NgbNavModule,
     FormsModule,

src-ui/src/app/components/admin/logs/logs.component.html

@@ -3,9 +3,23 @@
   i18n-title
   info="Review the log files for the application and for email checking."
   i18n-info>
-  <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
-    <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+  <div class="input-group input-group-sm align-items-center">
+    <div class="input-group input-group-sm me-3">
+      <span class="input-group-text text-muted" i18n>Show</span>
+      <input
+        class="form-control"
+        type="number"
+        min="100"
+        step="100"
+        [(ngModel)]="limit"
+        (ngModelChange)="onLimitChange($event)"
+        style="width: 100px;">
+      <span class="input-group-text text-muted" i18n>lines</span>
+    </div>
+    <div class="form-check form-switch mt-1">
+      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
+      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+    </div>
   </div>
 </pngx-page-header>
 
@@ -27,16 +41,23 @@
   }
 </ul>
 
-<div [ngbNavOutlet]="nav" class="mt-2"></div>
-
-<div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  @if (loading && logFiles.length) {
+<div #logContainer class="bg-dark text-light font-monospace log-container p-3" (scroll)="onScroll()">
+  @if (loading && !logFiles.length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </div>
-  }
-  @for (log of logs; track $index) {
-    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
+  } @else {
+    @for (log of logs; track log) {
+      <p class="m-0 p-0" [ngClass]="'log-entry-' + log.level">{{log.message}}</p>
+    }
   }
 </div>
+<button
+  type="button"
+  class="btn btn-sm btn-secondary jump-to-bottom position-fixed bottom-0 end-0 m-5"
+  [class.visible]="showJumpToBottom"
+  (click)="scrollToBottom()"
+>
+  ↓ <span i18n>Jump to bottom</span>
+</button>

src-ui/src/app/components/admin/logs/logs.component.scss

@@ -16,11 +16,21 @@
 }
 
 .log-container {
-  overflow-y: scroll;
-  height: calc(100vh - 200px);
-  top: 70px;
+  height: calc(100vh - 190px);
+  overflow-y: auto;
 
   p {
     white-space: pre-wrap;
   }
 }
+
+.jump-to-bottom {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease-in-out;
+}
+
+.jump-to-bottom.visible {
+  opacity: 1;
+  pointer-events: auto;
+}

src-ui/src/app/components/admin/logs/logs.component.spec.ts

@@ -1,3 +1,8 @@
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+} from '@angular/cdk/scrolling'
+import { CommonModule } from '@angular/common'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
@@ -38,6 +43,9 @@ describe('LogsComponent', () => {
         NgxBootstrapIconsModule.pick(allIcons),
         LogsComponent,
         PageHeaderComponent,
+        CommonModule,
+        CdkVirtualScrollViewport,
+        ScrollingModule,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -54,13 +62,12 @@ describe('LogsComponent', () => {
     fixture = TestBed.createComponent(LogsComponent)
     component = fixture.componentInstance
     reloadSpy = jest.spyOn(component, 'reloadLogs')
-    window.HTMLElement.prototype.scroll = function () {} // mock scroll
     jest.useFakeTimers()
     fixture.detectChanges()
   })
 
   it('should display logs with first log initially', () => {
-    expect(logSpy).toHaveBeenCalledWith('paperless')
+    expect(logSpy).toHaveBeenCalledWith('paperless', 5000)
     fixture.detectChanges()
     expect(fixture.debugElement.nativeElement.textContent).toContain(
       paperless_logs[0]
@@ -71,7 +78,7 @@ describe('LogsComponent', () => {
     fixture.debugElement
       .queryAll(By.directive(NgbNavLink))[1]
       .nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(logSpy).toHaveBeenCalledWith('mail')
+    expect(logSpy).toHaveBeenCalledWith('mail', 5000)
   })
 
   it('should handle error with no logs', () => {
@@ -83,6 +90,10 @@ describe('LogsComponent', () => {
   })
 
   it('should auto refresh, allow toggle', () => {
+    jest
+      .spyOn(CdkVirtualScrollViewport.prototype, 'scrollToIndex')
+      .mockImplementation(() => undefined)
+
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
 
@@ -90,4 +101,20 @@ describe('LogsComponent', () => {
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })
+
+  it('should debounce limit changes before reloading logs', () => {
+    const initialCalls = reloadSpy.mock.calls.length
+    component.onLimitChange(6000)
+    jest.advanceTimersByTime(299)
+    expect(reloadSpy).toHaveBeenCalledTimes(initialCalls)
+    jest.advanceTimersByTime(1)
+    expect(reloadSpy).toHaveBeenCalledTimes(initialCalls + 1)
+  })
+
+  it('should update jump to bottom visibility on scroll', () => {
+    component.showJumpToBottom = false
+    jest.spyOn(component as any, 'isNearBottom').mockReturnValue(false)
+    component.onScroll()
+    expect(component.showJumpToBottom).toBe(true)
+  })
 })

src-ui/src/app/components/admin/logs/logs.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectorRef,
   Component,
@@ -9,7 +10,7 @@ import {
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
-import { filter, takeUntil, timer } from 'rxjs'
+import { Subject, debounceTime, filter, takeUntil, timer } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -21,6 +22,7 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
   imports: [
     PageHeaderComponent,
     NgbNavModule,
+    CommonModule,
     FormsModule,
     ReactiveFormsModule,
   ],
@@ -32,7 +34,7 @@ export class LogsComponent
   private logService = inject(LogService)
   private changedetectorRef = inject(ChangeDetectorRef)
 
-  public logs: string[] = []
+  public logs: Array<{ message: string; level: number }> = []
 
   public logFiles: string[] = []
 
@@ -40,9 +42,19 @@ export class LogsComponent
 
   public autoRefreshEnabled: boolean = true
 
-  @ViewChild('logContainer') logContainer: ElementRef
+  public limit: number = 5000
+
+  public showJumpToBottom = false
+
+  private readonly limitChange$ = new Subject<number>()
+
+  @ViewChild('logContainer') logContainer: ElementRef<HTMLElement>
 
   ngOnInit(): void {
+    this.limitChange$
+      .pipe(debounceTime(300), takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => this.reloadLogs())
+
     this.logService
       .list()
       .pipe(takeUntil(this.unsubscribeNotifier))
@@ -68,16 +80,37 @@ export class LogsComponent
     super.ngOnDestroy()
   }
 
+  onLimitChange(limit: number): void {
+    this.limitChange$.next(limit)
+  }
+
   reloadLogs() {
     this.loading = true
+    const shouldStickToBottom = this.isNearBottom()
     this.logService
-      .get(this.activeLog)
+      .get(this.activeLog, this.limit)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
-          this.logs = result
           this.loading = false
-          this.scrollToBottom()
+          const parsed = this.parseLogsWithLevel(result)
+          const hasChanges =
+            parsed.length !== this.logs.length ||
+            parsed.some((log, idx) => {
+              const current = this.logs[idx]
+              return (
+                !current ||
+                current.message !== log.message ||
+                current.level !== log.level
+              )
+            })
+          if (hasChanges) {
+            this.logs = parsed
+            if (shouldStickToBottom) {
+              this.scrollToBottom()
+            }
+            this.showJumpToBottom = !shouldStickToBottom
+          }
         },
         error: () => {
           this.logs = []
@@ -100,12 +133,35 @@ export class LogsComponent
     }
   }
 
+  private parseLogsWithLevel(
+    logs: string[]
+  ): Array<{ message: string; level: number }> {
+    return logs.map((log) => ({
+      message: log,
+      level: this.getLogLevel(log),
+    }))
+  }
+
   scrollToBottom(): void {
+    const viewport = this.logContainer?.nativeElement
+    if (!viewport) {
+      return
+    }
     this.changedetectorRef.detectChanges()
-    this.logContainer?.nativeElement.scroll({
-      top: this.logContainer.nativeElement.scrollHeight,
-      left: 0,
-      behavior: 'auto',
-    })
+    viewport.scrollTop = viewport.scrollHeight
+    this.showJumpToBottom = false
+  }
+
+  private isNearBottom(): boolean {
+    if (!this.logContainer?.nativeElement) return true
+    const distanceFromBottom =
+      this.logContainer.nativeElement.scrollHeight -
+      this.logContainer.nativeElement.scrollTop -
+      this.logContainer.nativeElement.clientHeight
+    return distanceFromBottom <= 40
+  }
+
+  onScroll(): void {
+    this.showJumpToBottom = !this.isNearBottom()
   }
 }

src-ui/src/app/components/admin/settings/settings.component.html

@@ -103,22 +103,6 @@
             </div>
 
             <div class="row mb-3">
-              <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Items per page</span>
-              </div>
-              <div class="col">
-
-                <select class="form-select" formControlName="documentListItemPerPage">
-                  <option [ngValue]="10">10</option>
-                  <option [ngValue]="25">25</option>
-                  <option [ngValue]="50">50</option>
-                  <option [ngValue]="100">100</option>
-                </select>
-
-              </div>
-            </div>
-
-            <div class="row">
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Sidebar</span>
               </div>
@@ -153,8 +137,28 @@
                 </button>
               </div>
             </div>
+          </div>
+          <div class="col-xl-6 ps-xl-5">
+            <h5 class="mt-3 mt-md-0" i18n>Global search</h5>
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
+              </div>
+            </div>
 
-            <h5 class="mt-3" id="update-checking" i18n>Update checking</h5>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Full search links to</span>
+              </div>
+              <div class="col mb-3">
+                <select class="form-select" formControlName="searchLink">
+                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
+                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
+                </select>
+              </div>
+            </div>
+
+            <h5 class="mt-3 mt-md-0" id="update-checking" i18n>Update checking</h5>
             <div class="row mb-3">
               <div class="col d-flex flex-row align-items-start">
                 <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
@@ -179,11 +183,33 @@
                 <pngx-input-check i18n-title title="Show document counts in sidebar saved views" formControlName="sidebarViewsShowCount"></pngx-input-check>
               </div>
             </div>
-
           </div>
-          <div class="col-xl-6 ps-xl-5">
-            <h5 class="mt-3 mt-md-0" i18n>Document editing</h5>
+        </div>
 
+      </ng-template>
+    </li>
+
+    <li [ngbNavItem]="SettingsNavIDs.Documents">
+      <a ngbNavLink i18n>Documents</a>
+      <ng-template ngbNavContent>
+        <div class="row">
+          <div class="col-xl-6 pe-xl-5">
+            <h5 i18n>Documents</h5>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Items per page</span>
+              </div>
+              <div class="col">
+                <select class="form-select" formControlName="documentListItemPerPage">
+                  <option [ngValue]="10">10</option>
+                  <option [ngValue]="25">25</option>
+                  <option [ngValue]="50">50</option>
+                  <option [ngValue]="100">100</option>
+                </select>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Document editing</h5>
             <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
@@ -196,8 +222,8 @@
               </div>
               <div class="col">
                 <select class="form-select" formControlName="pdfViewerDefaultZoom">
-                  <option [ngValue]="ZoomSetting.PageWidth" i18n>Fit width</option>
-                  <option [ngValue]="ZoomSetting.PageFit" i18n>Fit page</option>
+                  <option [ngValue]="PdfZoomScale.PageWidth" i18n>Fit width</option>
+                  <option [ngValue]="PdfZoomScale.PageFit" i18n>Fit page</option>
                 </select>
                 <p class="small text-muted mt-1" i18n>Only applies to the Paperless-ngx PDF viewer.</p>
               </div>
@@ -209,31 +235,32 @@
               </div>
             </div>
 
-            <div class="row mb-3">
+            <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
               </div>
             </div>
 
-            <h5 class="mt-3" i18n>Global search</h5>
-            <div class="row">
-              <div class="col">
-                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
-              </div>
-            </div>
-
             <div class="row mb-3">
-              <div class="col-md-3 col-form-label pt-0">
-                <span i18n>Full search links to</span>
-              </div>
-              <div class="col mb-3">
-                <select class="form-select" formControlName="searchLink">
-                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
-                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
-                </select>
+              <div class="col">
+                <p class="mb-2" i18n>Built-in fields to show:</p>
+                @for (option of documentDetailFieldOptions; track option.id) {
+                  <div class="form-check ms-3">
+                    <input class="form-check-input" type="checkbox"
+                      [id]="'documentDetailField-' + option.id"
+                      [checked]="isDocumentDetailFieldShown(option.id)"
+                      (change)="toggleDocumentDetailField(option.id, $event.target.checked)" />
+                    <label class="form-check-label" [for]="'documentDetailField-' + option.id">
+                      {{ option.label }}
+                    </label>
+                  </div>
+                }
+                <p class="small text-muted mt-1" i18n>Uncheck fields to hide them on the document details page.</p>
               </div>
             </div>
+          </div>
 
+          <div class="col-xl-6 ps-xl-5">
             <h5 class="mt-3" i18n>Bulk editing</h5>
             <div class="row mb-3">
               <div class="col">
@@ -242,16 +269,27 @@
               </div>
             </div>
 
+            <h5 class="mt-3" i18n>PDF Editor</h5>
+            <div class="row">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Default editing mode</span>
+              </div>
+              <div class="col">
+                <select class="form-select" formControlName="pdfEditorDefaultEditMode">
+                  <option [ngValue]="PdfEditorEditMode.Create" i18n>Create new document(s)</option>
+                  <option [ngValue]="PdfEditorEditMode.Update" i18n>Update existing document</option>
+                </select>
+              </div>
+            </div>
+
             <h5 class="mt-3" i18n>Notes</h5>
             <div class="row mb-3">
               <div class="col">
                 <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
               </div>
             </div>
-
           </div>
         </div>
-
       </ng-template>
     </li>
 

src-ui/src/app/components/admin/settings/settings.component.spec.ts

@@ -16,6 +16,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
@@ -28,7 +29,6 @@ import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
@@ -92,6 +92,9 @@ const status: SystemStatus = {
     sanity_check_status: SystemStatusItemStatus.ERROR,
     sanity_check_last_run: new Date().toISOString(),
     sanity_check_error: 'Error running sanity check.',
+    llmindex_status: SystemStatusItemStatus.DISABLED,
+    llmindex_last_modified: new Date().toISOString(),
+    llmindex_error: null,
   },
 }
 
@@ -129,7 +132,6 @@ describe('SettingsComponent', () => {
         ConfirmDialogComponent,
         CheckComponent,
         ColorComponent,
-        SafeHtmlPipe,
         SelectComponent,
         TextComponent,
         NumberComponent,
@@ -146,6 +148,7 @@ describe('SettingsComponent', () => {
         PermissionsGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 
@@ -200,9 +203,9 @@ describe('SettingsComponent', () => {
     const navigateSpy = jest.spyOn(router, 'navigate')
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
     tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'documents'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
 
     const initSpy = jest.spyOn(component, 'initialize')
     component.isDirty = true // mock dirty
@@ -212,8 +215,8 @@ describe('SettingsComponent', () => {
     expect(initSpy).not.toHaveBeenCalled()
 
     navigateSpy.mockResolvedValueOnce(true) // nav accepted even though dirty
-    tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     expect(initSpy).toHaveBeenCalled()
   })
 
@@ -225,7 +228,7 @@ describe('SettingsComponent', () => {
     activatedRoute.snapshot.fragment = '#notifications'
     const scrollSpy = jest.spyOn(viewportScroller, 'scrollToAnchor')
     component.ngOnInit()
-    expect(component.activeNavID).toEqual(3) // Notifications
+    expect(component.activeNavID).toEqual(4) // Notifications
     component.ngAfterViewInit()
     expect(scrollSpy).toHaveBeenCalledWith('#notifications')
   })
@@ -250,7 +253,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(30)
+    expect(setSpy).toHaveBeenCalledTimes(32)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))
@@ -365,4 +368,22 @@ describe('SettingsComponent', () => {
     settingsService.settingsSaved.emit(true)
     expect(maybeRefreshSpy).toHaveBeenCalled()
   })
+
+  it('should support toggling document detail fields', () => {
+    completeSetup()
+    const field = 'storage_path'
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(0)
+    component.toggleDocumentDetailField(field, false)
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(1)
+    expect(component.isDocumentDetailFieldShown(field)).toBeFalsy()
+    component.toggleDocumentDetailField(field, true)
+    expect(
+      component.settingsForm.get('documentDetailsHiddenFields').value.length
+    ).toEqual(0)
+    expect(component.isDocumentDetailFieldShown(field)).toBeTruthy()
+  })
 })

src-ui/src/app/components/admin/settings/settings.component.ts

@@ -64,15 +64,16 @@ import { PermissionsGroupComponent } from '../../common/input/permissions/permis
 import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
 import { SelectComponent } from '../../common/input/select/select.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PdfEditorEditMode } from '../../common/pdf-editor/pdf-editor-edit-mode'
+import { PdfZoomScale } from '../../common/pdf-viewer/pdf-viewer.types'
 import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
-import { ZoomSetting } from '../../document-detail/document-detail.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 enum SettingsNavIDs {
   General = 1,
-  Permissions = 2,
-  Notifications = 3,
-  SavedViews = 4,
+  Documents = 2,
+  Permissions = 3,
+  Notifications = 4,
 }
 
 const systemLanguage = { code: '', name: $localize`Use system language` }
@@ -81,6 +82,25 @@ const systemDateFormat = {
   name: $localize`Use date format of display language`,
 }
 
+export enum DocumentDetailFieldID {
+  ArchiveSerialNumber = 'archive_serial_number',
+  Correspondent = 'correspondent',
+  DocumentType = 'document_type',
+  StoragePath = 'storage_path',
+  Tags = 'tags',
+}
+
+const documentDetailFieldOptions = [
+  {
+    id: DocumentDetailFieldID.ArchiveSerialNumber,
+    label: $localize`Archive serial number`,
+  },
+  { id: DocumentDetailFieldID.Correspondent, label: $localize`Correspondent` },
+  { id: DocumentDetailFieldID.DocumentType, label: $localize`Document type` },
+  { id: DocumentDetailFieldID.StoragePath, label: $localize`Storage path` },
+  { id: DocumentDetailFieldID.Tags, label: $localize`Tags` },
+]
+
 @Component({
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
@@ -144,8 +164,10 @@ export class SettingsComponent
     defaultPermsEditGroups: new FormControl(null),
     useNativePdfViewer: new FormControl(null),
     pdfViewerDefaultZoom: new FormControl(null),
+    pdfEditorDefaultEditMode: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
     documentEditingOverlayThumbnail: new FormControl(null),
+    documentDetailsHiddenFields: new FormControl([]),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
@@ -174,7 +196,11 @@ export class SettingsComponent
 
   public readonly GlobalSearchType = GlobalSearchType
 
-  public readonly ZoomSetting = ZoomSetting
+  public readonly PdfZoomScale = PdfZoomScale
+
+  public readonly PdfEditorEditMode = PdfEditorEditMode
+
+  public readonly documentDetailFieldOptions = documentDetailFieldOptions
 
   get systemStatusHasErrors(): boolean {
     return (
@@ -292,6 +318,9 @@ export class SettingsComponent
       pdfViewerDefaultZoom: this.settings.get(
         SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING
       ),
+      pdfEditorDefaultEditMode: this.settings.get(
+        SETTINGS_KEYS.PDF_EDITOR_DEFAULT_EDIT_MODE
+      ),
       displayLanguage: this.settings.getLanguage(),
       dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
       dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
@@ -336,6 +365,9 @@ export class SettingsComponent
       documentEditingOverlayThumbnail: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
       ),
+      documentDetailsHiddenFields: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS
+      ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
       searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
     }
@@ -458,6 +490,10 @@ export class SettingsComponent
       SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING,
       this.settingsForm.value.pdfViewerDefaultZoom
     )
+    this.settings.set(
+      SETTINGS_KEYS.PDF_EDITOR_DEFAULT_EDIT_MODE,
+      this.settingsForm.value.pdfEditorDefaultEditMode
+    )
     this.settings.set(
       SETTINGS_KEYS.DATE_LOCALE,
       this.settingsForm.value.dateLocale
@@ -526,6 +562,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
       this.settingsForm.value.documentEditingOverlayThumbnail
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS,
+      this.settingsForm.value.documentDetailsHiddenFields
+    )
     this.settings.set(
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
@@ -587,6 +627,26 @@ export class SettingsComponent
     this.settingsForm.get('themeColor').patchValue('')
   }
 
+  isDocumentDetailFieldShown(fieldId: string): boolean {
+    const hiddenFields =
+      this.settingsForm.value.documentDetailsHiddenFields || []
+    return !hiddenFields.includes(fieldId)
+  }
+
+  toggleDocumentDetailField(fieldId: string, checked: boolean) {
+    const hiddenFields = new Set(
+      this.settingsForm.value.documentDetailsHiddenFields || []
+    )
+    if (checked) {
+      hiddenFields.delete(fieldId)
+    } else {
+      hiddenFields.add(fieldId)
+    }
+    this.settingsForm
+      .get('documentDetailsHiddenFields')
+      .setValue(Array.from(hiddenFields))
+  }
+
   showSystemStatus() {
     const modal: NgbModalRef = this.modalService.open(
       SystemStatusDialogComponent,

src-ui/src/app/components/admin/tasks/tasks.component.html

@@ -97,6 +97,12 @@
                   <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
                 }
               </ng-template>
+              @if (task.duplicate_documents?.length > 0) {
+                <div class="small text-warning-emphasis d-flex align-items-center gap-1">
+                  <i-bs class="lh-1" width="1em" height="1em" name="exclamation-triangle"></i-bs>
+                  <span i18n>Duplicate(s) detected</span>
+                </div>
+              }
             </td>
           }
           <td class="d-lg-none">

src-ui/src/app/components/admin/tasks/tasks.component.spec.ts

@@ -16,6 +16,7 @@ import {
   NgbNavItem,
 } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
   PaperlessTask,
@@ -28,6 +29,7 @@ import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
@@ -123,6 +125,7 @@ describe('TasksComponent', () => {
   let router: Router
   let httpTestingController: HttpTestingController
   let reloadSpy
+  let toastService: ToastService
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -157,6 +160,7 @@ describe('TasksComponent', () => {
     httpTestingController = TestBed.inject(HttpTestingController)
     modalService = TestBed.inject(NgbModal)
     router = TestBed.inject(Router)
+    toastService = TestBed.inject(ToastService)
     fixture = TestBed.createComponent(TasksComponent)
     component = fixture.componentInstance
     jest.useFakeTimers()
@@ -249,6 +253,42 @@ describe('TasksComponent', () => {
     expect(dismissSpy).toHaveBeenCalledWith(selected)
   })
 
+  it('should show an error and re-enable modal buttons when dismissing multiple tasks fails', () => {
+    component.selectedTasks = new Set([tasks[0].id, tasks[1].id])
+    const error = new Error('dismiss failed')
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    const dismissSpy = jest
+      .spyOn(tasksService, 'dismissTasks')
+      .mockReturnValue(throwError(() => error))
+
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+
+    component.dismissTasks()
+    expect(modal).not.toBeUndefined()
+
+    modal.componentInstance.confirmClicked.emit()
+
+    expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id, tasks[1].id]))
+    expect(toastSpy).toHaveBeenCalledWith('Error dismissing tasks', error)
+    expect(modal.componentInstance.buttonsEnabled).toBe(true)
+    expect(component.selectedTasks.size).toBe(0)
+  })
+
+  it('should show an error when dismissing a single task fails', () => {
+    const error = new Error('dismiss failed')
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    const dismissSpy = jest
+      .spyOn(tasksService, 'dismissTasks')
+      .mockReturnValue(throwError(() => error))
+
+    component.dismissTask(tasks[0])
+
+    expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id]))
+    expect(toastSpy).toHaveBeenCalledWith('Error dismissing task', error)
+    expect(component.selectedTasks.size).toBe(0)
+  })
+
   it('should support dismiss all tasks', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))

src-ui/src/app/components/admin/tasks/tasks.component.ts

@@ -24,6 +24,7 @@ import { PaperlessTask } from 'src/app/data/paperless-task'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -72,6 +73,7 @@ export class TasksComponent
   tasksService = inject(TasksService)
   private modalService = inject(NgbModal)
   private readonly router = inject(Router)
+  private readonly toastService = inject(ToastService)
 
   public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
@@ -154,11 +156,19 @@ export class TasksComponent
       modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
         modal.componentInstance.buttonsEnabled = false
         modal.close()
-        this.tasksService.dismissTasks(tasks)
+        this.tasksService.dismissTasks(tasks).subscribe({
+          error: (e) => {
+            this.toastService.showError($localize`Error dismissing tasks`, e)
+            modal.componentInstance.buttonsEnabled = true
+          },
+        })
         this.clearSelection()
       })
     } else {
-      this.tasksService.dismissTasks(tasks)
+      this.tasksService.dismissTasks(tasks).subscribe({
+        error: (e) =>
+          this.toastService.showError($localize`Error dismissing task`, e),
+      })
       this.clearSelection()
     }
   }

src-ui/src/app/components/admin/trash/trash.component.spec.ts

@@ -11,7 +11,6 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
@@ -53,7 +52,6 @@ describe('TrashComponent', () => {
         TrashComponent,
         PageHeaderComponent,
         ConfirmDialogComponent,
-        SafeHtmlPipe,
       ],
     }).compileComponents()
 

src-ui/src/app/components/admin/users-groups/users-groups.component.html

@@ -7,7 +7,7 @@
   >
 </pngx-page-header>
 
-@if (users) {
+@if (canViewUsers && users) {
   <h4 class="d-flex">
     <ng-container i18n>Users</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
@@ -26,7 +26,7 @@
     @for (user of users; track user) {
       <li class="list-group-item">
         <div class="row">
-          <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
+          <div class="col d-flex align-items-center" [class.opacity-50]="!user.is_active"><button class="btn btn-link p-0 text-start" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
           <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
           <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
           <div class="col">
@@ -45,7 +45,7 @@
   </ul>
 }
 
-@if (groups) {
+@if (canViewGroups && groups) {
   <h4 class="mt-4 d-flex">
     <ng-container i18n>Groups</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
@@ -86,7 +86,7 @@
   </ul>
 }
 
-@if (!users || !groups) {
+@if ((canViewUsers && !users) || (canViewGroups && !groups)) {
   <div>
     <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
     <div class="visually-hidden" i18n>Loading...</div>

src-ui/src/app/components/admin/users-groups/users-groups.component.ts

@@ -5,7 +5,11 @@ import { Subject, first, takeUntil } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -44,30 +48,48 @@ export class UsersAndGroupsComponent
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
-  ngOnInit(): void {
-    this.usersService
-      .listAll(null, null, { full_perms: true })
-      .pipe(first(), takeUntil(this.unsubscribeNotifier))
-      .subscribe({
-        next: (r) => {
-          this.users = r.results
-        },
-        error: (e) => {
-          this.toastService.showError($localize`Error retrieving users`, e)
-        },
-      })
+  public get canViewUsers(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.View,
+      PermissionType.User
+    )
+  }
 
-    this.groupsService
-      .listAll(null, null, { full_perms: true })
-      .pipe(first(), takeUntil(this.unsubscribeNotifier))
-      .subscribe({
-        next: (r) => {
-          this.groups = r.results
-        },
-        error: (e) => {
-          this.toastService.showError($localize`Error retrieving groups`, e)
-        },
-      })
+  public get canViewGroups(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.View,
+      PermissionType.Group
+    )
+  }
+
+  ngOnInit(): void {
+    if (this.canViewUsers) {
+      this.usersService
+        .listAll(null, null, { full_perms: true })
+        .pipe(first(), takeUntil(this.unsubscribeNotifier))
+        .subscribe({
+          next: (r) => {
+            this.users = r.results
+          },
+          error: (e) => {
+            this.toastService.showError($localize`Error retrieving users`, e)
+          },
+        })
+    }
+
+    if (this.canViewGroups) {
+      this.groupsService
+        .listAll(null, null, { full_perms: true })
+        .pipe(first(), takeUntil(this.unsubscribeNotifier))
+        .subscribe({
+          next: (r) => {
+            this.groups = r.results
+          },
+          error: (e) => {
+            this.toastService.showError($localize`Error retrieving groups`, e)
+          },
+        })
+    }
   }
 
   ngOnDestroy() {

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -30,6 +30,9 @@
     </div>
   </div>
   <ul ngbNav class="order-sm-3">
+    @if (aiEnabled) {
+      <pngx-chat></pngx-chat>
+    }
     <pngx-toasts-dropdown></pngx-toasts-dropdown>
     <li ngbDropdown class="nav-item dropdown">
       <button class="btn ps-1 border-0" id="userDropdown" ngbDropdownToggle>
@@ -68,13 +71,15 @@
     <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
       [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
       [ngbCollapse]="isMenuCollapsed">
-      <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
-        @if (slimSidebarEnabled) {
-          <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
-        } @else {
-          <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
-        }
-      </button>
+      @if (canSaveSettings) {
+        <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
+          @if (slimSidebarEnabled) {
+            <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
+          } @else {
+            <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
+          }
+        </button>
+      }
       <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
         <ul class="nav flex-column">
           <li class="nav-item app-link">

src-ui/src/app/components/app-frame/app-frame.component.scss

@@ -248,7 +248,7 @@ main {
   }
 }
 
-@media screen and (min-width: 366px) and (max-width: 768px) {
+@media screen and (min-width: 376px) and (max-width: 768px) {
   .navbar-toggler {
     // compensate for 2 buttons on the right
     margin-right: 45px;

src-ui/src/app/components/app-frame/app-frame.component.spec.ts

@@ -16,6 +16,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { SavedView } from 'src/app/data/saved-view'
@@ -157,6 +158,7 @@ describe('AppFrameComponent', () => {
         PermissionsGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -16,7 +16,7 @@ import {
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
@@ -44,6 +44,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
+import { ChatComponent } from '../chat/chat/chat.component'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
 import { DocumentDetailComponent } from '../document-detail/document-detail.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
@@ -59,6 +60,7 @@ import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.compo
     DocumentTitlePipe,
     IfPermissionsDirective,
     ToastsDropdownComponent,
+    ChatComponent,
     RouterModule,
     NgClass,
     NgbDropdownModule,
@@ -67,7 +69,7 @@ import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.compo
     NgbNavModule,
     NgxBootstrapIconsModule,
     DragDropModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
   ],
 })
 export class AppFrameComponent
@@ -152,6 +154,19 @@ export class AppFrameComponent
     return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }
 
+  get canSaveSettings(): boolean {
+    return (
+      this.permissionsService.currentUserCan(
+        PermissionAction.Change,
+        PermissionType.UISettings
+      ) &&
+      this.permissionsService.currentUserCan(
+        PermissionAction.Add,
+        PermissionType.UISettings
+      )
+    )
+  }
+
   get slimSidebarEnabled(): boolean {
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
@@ -171,6 +186,10 @@ export class AppFrameComponent
       })
   }
 
+  get aiEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
+  }
+
   closeMenu() {
     this.isMenuCollapsed = true
   }

src-ui/src/app/components/app-frame/global-search/global-search.component.ts

@@ -411,6 +411,9 @@ export class GlobalSearchComponent implements OnInit {
     const ruleType = this.useAdvancedForFullSearch
       ? FILTER_FULLTEXT_QUERY
       : FILTER_TITLE_CONTENT
+    this.documentService.searchQuery = this.useAdvancedForFullSearch
+      ? this.query
+      : ''
     this.documentListViewService.quickFilter([
       { rule_type: ruleType, value: this.query },
     ])

src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html

@@ -1,5 +1,5 @@
 
-<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
+<li ngbDropdown class="nav-item mx-1" (openChange)="onOpenChange($event)">
   @if (toasts.length) {
     <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts.length }}</span>
   }

src-ui/src/app/components/chat/chat/chat.component.html

@@ -0,0 +1,35 @@
+
+<li ngbDropdown class="nav-item me-n2" (openChange)="onOpenChange($event)">
+  <button class="btn border-0" id="chatDropdown" ngbDropdownToggle>
+    <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
+  </button>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">
+    <div class="chat-container bg-light p-2">
+      <div class="chat-messages font-monospace small">
+        @for (message of messages; track message) {
+          <div class="message d-flex flex-row small" [class.justify-content-end]="message.role === 'user'">
+            <span class="p-2 m-2" [class.bg-dark]="message.role === 'user'">
+              {{ message.content }}
+              @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
+            </span>
+          </div>
+        }
+        <div #scrollAnchor></div>
+      </div>
+
+      <form class="chat-input">
+        <div class="input-group">
+          <input
+            #chatInput
+            class="form-control form-control-sm" name="chatInput" type="text"
+            [placeholder]="placeholder"
+            [disabled]="loading"
+            [(ngModel)]="input"
+            (keydown)="searchInputKeyDown($event)"
+            />
+          <button class="btn btn-sm btn-secondary" type="button" (click)="sendMessage()" [disabled]="loading">Send</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</li>

src-ui/src/app/components/chat/chat/chat.component.scss

@@ -0,0 +1,37 @@
+.dropdown-menu {
+  width: var(--pngx-toast-max-width);
+}
+
+.chat-messages {
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-item {
+  white-space: initial;
+}
+
+@media screen and (max-width: 400px) {
+  :host ::ng-deep .dropdown-menu-end {
+    right: -3rem;
+  }
+}
+
+.blinking-cursor {
+  font-weight: bold;
+  font-size: 1.2em;
+  animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+  from, to {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

src-ui/src/app/components/chat/chat/chat.component.spec.ts

@@ -0,0 +1,132 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NavigationEnd, Router } from '@angular/router'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import { ChatService } from 'src/app/services/chat.service'
+import { ChatComponent } from './chat.component'
+
+describe('ChatComponent', () => {
+  let component: ChatComponent
+  let fixture: ComponentFixture<ChatComponent>
+  let chatService: ChatService
+  let router: Router
+  let routerEvents$: Subject<NavigationEnd>
+  let mockStream$: Subject<string>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [NgxBootstrapIconsModule.pick(allIcons), ChatComponent],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ChatComponent)
+    router = TestBed.inject(Router)
+    routerEvents$ = new Subject<any>()
+    jest
+      .spyOn(router, 'events', 'get')
+      .mockReturnValue(routerEvents$.asObservable())
+    chatService = TestBed.inject(ChatService)
+    mockStream$ = new Subject<string>()
+    jest
+      .spyOn(chatService, 'streamChat')
+      .mockReturnValue(mockStream$.asObservable())
+    component = fixture.componentInstance
+
+    jest.useFakeTimers()
+
+    fixture.detectChanges()
+
+    component.scrollAnchor.nativeElement.scrollIntoView = jest.fn()
+  })
+
+  it('should update documentId on initialization', () => {
+    jest.spyOn(router, 'url', 'get').mockReturnValue('/documents/123')
+    component.ngOnInit()
+    expect(component.documentId).toBe(123)
+  })
+
+  it('should update documentId on navigation', () => {
+    component.ngOnInit()
+    routerEvents$.next(new NavigationEnd(1, '/documents/456', '/documents/456'))
+    expect(component.documentId).toBe(456)
+  })
+
+  it('should return correct placeholder based on documentId', () => {
+    component.documentId = 123
+    expect(component.placeholder).toBe('Ask a question about this document...')
+    component.documentId = undefined
+    expect(component.placeholder).toBe('Ask a question about a document...')
+  })
+
+  it('should send a message and handle streaming response', () => {
+    component.input = 'Hello'
+    component.sendMessage()
+
+    expect(component.messages.length).toBe(2)
+    expect(component.messages[0].content).toBe('Hello')
+    expect(component.loading).toBe(true)
+
+    mockStream$.next('Hi')
+    expect(component.messages[1].content).toBe('H')
+    mockStream$.next('Hi there')
+    // advance time to process the typewriter effect
+    jest.advanceTimersByTime(1000)
+    expect(component.messages[1].content).toBe('Hi there')
+
+    mockStream$.complete()
+    expect(component.loading).toBe(false)
+    expect(component.messages[1].isStreaming).toBe(false)
+  })
+
+  it('should handle errors during streaming', () => {
+    component.input = 'Hello'
+    component.sendMessage()
+
+    mockStream$.error('Error')
+    expect(component.messages[1].content).toContain(
+      '⚠️ Error receiving response.'
+    )
+    expect(component.loading).toBe(false)
+  })
+
+  it('should enqueue typewriter chunks correctly', () => {
+    const message = { content: '', role: 'assistant', isStreaming: true }
+    component.enqueueTypewriter(null, message as any) // coverage for null
+    component.enqueueTypewriter('Hello', message as any)
+    expect(component['typewriterBuffer'].length).toBe(4)
+  })
+
+  it('should scroll to bottom after sending a message', () => {
+    const scrollSpy = jest.spyOn(
+      ChatComponent.prototype as any,
+      'scrollToBottom'
+    )
+    component.input = 'Test'
+    component.sendMessage()
+    expect(scrollSpy).toHaveBeenCalled()
+  })
+
+  it('should focus chat input when dropdown is opened', () => {
+    const focus = jest.fn()
+    component.chatInput = {
+      nativeElement: { focus: focus },
+    } as unknown as ElementRef<HTMLInputElement>
+
+    component.onOpenChange(true)
+    jest.advanceTimersByTime(15)
+    expect(focus).toHaveBeenCalled()
+  })
+
+  it('should send message on Enter key press', () => {
+    jest.spyOn(component, 'sendMessage')
+    const event = new KeyboardEvent('keydown', { key: 'Enter' })
+    component.searchInputKeyDown(event)
+    expect(component.sendMessage).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/chat/chat/chat.component.ts

@@ -0,0 +1,140 @@
+import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NavigationEnd, Router } from '@angular/router'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { filter, map } from 'rxjs'
+import { ChatMessage, ChatService } from 'src/app/services/chat.service'
+
+@Component({
+  selector: 'pngx-chat',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+  ],
+  templateUrl: './chat.component.html',
+  styleUrl: './chat.component.scss',
+})
+export class ChatComponent implements OnInit {
+  public messages: ChatMessage[] = []
+  public loading = false
+  public input: string = ''
+  public documentId!: number
+
+  private chatService: ChatService = inject(ChatService)
+  private router: Router = inject(Router)
+
+  @ViewChild('scrollAnchor') scrollAnchor!: ElementRef<HTMLDivElement>
+  @ViewChild('chatInput') chatInput!: ElementRef<HTMLInputElement>
+
+  private typewriterBuffer: string[] = []
+  private typewriterActive = false
+
+  public get placeholder(): string {
+    return this.documentId
+      ? $localize`Ask a question about this document...`
+      : $localize`Ask a question about a document...`
+  }
+
+  ngOnInit(): void {
+    this.updateDocumentId(this.router.url)
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        map((event) => (event as NavigationEnd).url)
+      )
+      .subscribe((url) => {
+        this.updateDocumentId(url)
+      })
+  }
+
+  private updateDocumentId(url: string): void {
+    const docIdRe = url.match(/^\/documents\/(\d+)/)
+    this.documentId = docIdRe ? +docIdRe[1] : undefined
+  }
+
+  sendMessage(): void {
+    if (!this.input.trim()) return
+
+    const userMessage: ChatMessage = { role: 'user', content: this.input }
+    this.messages.push(userMessage)
+    this.scrollToBottom()
+
+    const assistantMessage: ChatMessage = {
+      role: 'assistant',
+      content: '',
+      isStreaming: true,
+    }
+    this.messages.push(assistantMessage)
+    this.loading = true
+
+    let lastPartialLength = 0
+
+    this.chatService.streamChat(this.documentId, this.input).subscribe({
+      next: (chunk) => {
+        const delta = chunk.substring(lastPartialLength)
+        lastPartialLength = chunk.length
+        this.enqueueTypewriter(delta, assistantMessage)
+      },
+      error: () => {
+        assistantMessage.content += '\n\n⚠️ Error receiving response.'
+        assistantMessage.isStreaming = false
+        this.loading = false
+      },
+      complete: () => {
+        assistantMessage.isStreaming = false
+        this.loading = false
+        this.scrollToBottom()
+      },
+    })
+
+    this.input = ''
+  }
+
+  enqueueTypewriter(chunk: string, message: ChatMessage): void {
+    if (!chunk) return
+
+    this.typewriterBuffer.push(...chunk.split(''))
+
+    if (!this.typewriterActive) {
+      this.typewriterActive = true
+      this.playTypewriter(message)
+    }
+  }
+
+  playTypewriter(message: ChatMessage): void {
+    if (this.typewriterBuffer.length === 0) {
+      this.typewriterActive = false
+      return
+    }
+
+    const nextChar = this.typewriterBuffer.shift()
+    message.content += nextChar
+    this.scrollToBottom()
+
+    setTimeout(() => this.playTypewriter(message), 10) // 10ms per character
+  }
+
+  private scrollToBottom(): void {
+    setTimeout(() => {
+      this.scrollAnchor?.nativeElement?.scrollIntoView({ behavior: 'smooth' })
+    }, 50)
+  }
+
+  public onOpenChange(open: boolean): void {
+    if (open) {
+      setTimeout(() => {
+        this.chatInput.nativeElement.focus()
+      }, 10)
+    }
+  }
+
+  public searchInputKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.sendMessage()
+    }
+  }
+}

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

@@ -8,7 +8,7 @@
     <p><b>{{messageBold}}</b></p>
   }
   @if (message) {
-    <p class="mb-0" [innerHTML]="message | safeHtml"></p>
+    <p class="mb-0" [innerHTML]="message"></p>
   }
 </div>
 <div class="modal-footer">

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

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ConfirmDialogComponent } from './confirm-dialog.component'
 
 describe('ConfirmDialogComponent', () => {
@@ -11,8 +10,8 @@ describe('ConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      providers: [NgbActiveModal, SafeHtmlPipe],
-      imports: [ConfirmDialogComponent, SafeHtmlPipe],
+      providers: [NgbActiveModal],
+      imports: [ConfirmDialogComponent],
     }).compileComponents()
 
     modal = TestBed.inject(NgbActiveModal)

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

@@ -2,14 +2,13 @@ import { DecimalPipe } from '@angular/common'
 import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
   styleUrls: ['./confirm-dialog.component.scss'],
-  imports: [DecimalPipe, SafeHtmlPipe],
+  imports: [DecimalPipe],
 })
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   activeModal = inject(NgbActiveModal)

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

@@ -0,0 +1,75 @@
+<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">
+  @if (message) {
+    <p class="mb-3" [innerHTML]="message"></p>
+  }
+  <div class="btn-group mb-3" role="group">
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeReplace"
+      [(ngModel)]="updateDocument"
+      [value]="true"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeReplace">
+      <i-bs name="pencil"></i-bs>
+      <span class="ms-2" i18n>Replace current document</span>
+    </label>
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeCreate"
+      [(ngModel)]="updateDocument"
+      [value]="false"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeCreate">
+      <i-bs name="plus"></i-bs>
+      <span class="ms-2" i18n>Create new document</span>
+    </label>
+  </div>
+  @if (!updateDocument) {
+    <div class="d-flex flex-column flex-md-row w-100 gap-3 align-items-center">
+      <div class="form-group d-flex">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" id="copyMetaRemove" [(ngModel)]="includeMetadata" />
+          <label class="form-check-label" for="copyMetaRemove" i18n> Copy metadata
+          </label>
+        </div>
+        <div class="form-check ms-3">
+          <input class="form-check-input" type="checkbox" id="deleteOriginalRemove" [(ngModel)]="deleteOriginal" />
+          <label class="form-check-label" for="deleteOriginalRemove" i18n> Delete original</label>
+        </div>
+      </div>
+    </div>
+  }
+</div>
+<div class="modal-footer flex-nowrap gap-2">
+  <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/password-removal-confirm-dialog/password-removal-confirm-dialog.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { PasswordRemovalConfirmDialogComponent } from './password-removal-confirm-dialog.component'
+
+describe('PasswordRemovalConfirmDialogComponent', () => {
+  let component: PasswordRemovalConfirmDialogComponent
+  let fixture: ComponentFixture<PasswordRemovalConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [NgbActiveModal],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PasswordRemovalConfirmDialogComponent,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PasswordRemovalConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should default to replacing the document', () => {
+    expect(component.updateDocument).toBe(true)
+    expect(
+      fixture.debugElement.query(By.css('#removeReplace')).nativeElement.checked
+    ).toBe(true)
+  })
+
+  it('should allow creating a new document with metadata and delete toggle', () => {
+    component.onUpdateDocumentChange(false)
+    fixture.detectChanges()
+
+    expect(component.updateDocument).toBe(false)
+    expect(fixture.debugElement.query(By.css('#copyMetaRemove'))).not.toBeNull()
+
+    component.includeMetadata = false
+    component.deleteOriginal = true
+    component.onUpdateDocumentChange(true)
+    expect(component.updateDocument).toBe(true)
+    expect(component.includeMetadata).toBe(true)
+    expect(component.deleteOriginal).toBe(false)
+  })
+
+  it('should emit confirm when confirmed', () => {
+    let confirmed = false
+    component.confirmClicked.subscribe(() => (confirmed = true))
+    component.confirm()
+    expect(confirmed).toBe(true)
+  })
+})

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

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-password-removal-confirm-dialog',
+  templateUrl: './password-removal-confirm-dialog.component.html',
+  styleUrls: ['./password-removal-confirm-dialog.component.scss'],
+  imports: [FormsModule, NgxBootstrapIconsModule],
+})
+export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponent {
+  updateDocument: boolean = true
+  includeMetadata: boolean = true
+  deleteOriginal: boolean = false
+
+  @Input()
+  override title = $localize`Remove password protection`
+
+  @Input()
+  override message =
+    $localize`Create an unprotected copy or replace the existing file.`
+
+  @Input()
+  override btnCaption = $localize`Start`
+
+  constructor() {
+    super()
+  }
+
+  onUpdateDocumentChange(updateDocument: boolean) {
+    this.updateDocument = updateDocument
+    if (this.updateDocument) {
+      this.deleteOriginal = false
+      this.includeMetadata = true
+    }
+  }
+}

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

@@ -28,10 +28,10 @@
 <div class="modal-footer flex-nowrap">
     <div class="col">
         @if (message) {
-            <p [innerHTML]="message | safeHtml"></p>
+            <p>{{message}}</p>
         }
         @if (messageBold) {
-          <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+          <p class="mb-0 small"><b>{{messageBold}}</b></p>
         }
     </div>
     <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">

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

@@ -3,7 +3,6 @@ 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 { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
 
 describe('RotateConfirmDialogComponent', () => {
@@ -15,11 +14,9 @@ describe('RotateConfirmDialogComponent', () => {
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         RotateConfirmDialogComponent,
-        SafeHtmlPipe,
       ],
       providers: [
         NgbActiveModal,
-        SafeHtmlPipe,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],

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

@@ -1,7 +1,6 @@
 import { NgStyle } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
@@ -9,7 +8,7 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
   selector: 'pngx-rotate-confirm-dialog',
   templateUrl: './rotate-confirm-dialog.component.html',
   styleUrl: './rotate-confirm-dialog.component.scss',
-  imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
+  imports: [NgStyle, NgxBootstrapIconsModule],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   documentService = inject(DocumentService)

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html

@@ -1,7 +1,7 @@
-<div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions" placement="bottom-end">
-    <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
+<div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions">
+    <button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
       <i-bs name="ui-radios"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
+      <div class="d-none d-lg-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
         <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html

@@ -1,28 +1,36 @@
-<div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
-  <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
-    <i-bs name="{{icon}}"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
-    @if (isActive) {
-      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
-    }
-  </button>
-  <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
-    <div class="list-group list-group-flush">
-      @for (element of selectionModel.queries; track element.id; let i = $index) {
-        <div class="list-group-item px-0 d-flex flex-nowrap">
-          @switch (element.type) {
-            @case (CustomFieldQueryComponentType.Atom) {
-              <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
-            }
-            @case (CustomFieldQueryComponentType.Expression) {
-              <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
-            }
-          }
-        </div>
+@if (useDropdown) {
+  <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
+    <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
+      <i-bs name="{{icon}}"></i-bs>
+      <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+      @if (isActive) {
+        <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
       }
+    </button>
+    <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
+      <ng-container *ngTemplateOutlet="list; context: { queries: selectionModel.queries }"></ng-container>
     </div>
   </div>
-</div>
+} @else {
+  <ng-container *ngTemplateOutlet="list; context: { queries: selectionModel.queries }"></ng-container>
+}
+
+<ng-template #list let-queries="queries">
+  <div class="list-group list-group-flush">
+    @for (element of queries; track element.id; let i = $index) {
+      <div class="list-group-item px-0 d-flex flex-nowrap">
+        @switch (element.type) {
+          @case (CustomFieldQueryComponentType.Atom) {
+            <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
+          }
+          @case (CustomFieldQueryComponentType.Expression) {
+            <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
+          }
+        }
+      </div>
+    }
+  </div>
+</ng-template>
 
 <ng-template #comparisonValueTemplate let-atom="atom">
   @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
@@ -55,6 +63,7 @@
       bindValue="id"
       [(ngModel)]="atom.value"
       [disabled]="disabled"
+      [virtualScroll]="getSelectOptionsForField(atom.field)?.length > 100"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss

@@ -41,9 +41,3 @@
     min-width: 140px;
   }
 }
-
-.btn-group-xs {
-  > .btn {
-    border-radius: 0.15rem;
-  }
-}

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.spec.ts

@@ -354,5 +354,13 @@ describe('CustomFieldsQueryDropdownComponent', () => {
       model.removeElement(atom)
       expect(completeSpy).toHaveBeenCalled()
     })
+
+    it('should subscribe to existing elements when queries are assigned', () => {
+      const expression = new CustomFieldQueryExpression()
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.queries = [expression]
+      expression.changed.next(expression)
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
   })
 })

src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { first, Subject, takeUntil } from 'rxjs'
+import { first, Subject, Subscription, takeUntil } from 'rxjs'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
   CUSTOM_FIELD_QUERY_MAX_ATOMS,
@@ -41,10 +41,27 @@ import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.comp
 import { DocumentLinkComponent } from '../input/document-link/document-link.component'
 
 export class CustomFieldQueriesModel {
-  public queries: CustomFieldQueryElement[] = []
+  private _queries: CustomFieldQueryElement[] = []
+  private rootSubscriptions: Subscription[] = []
 
   public readonly changed = new Subject<CustomFieldQueriesModel>()
 
+  public get queries(): CustomFieldQueryElement[] {
+    return this._queries
+  }
+
+  public set queries(value: CustomFieldQueryElement[]) {
+    this.teardownRootSubscriptions()
+    this._queries = value ?? []
+    for (const element of this._queries) {
+      this.rootSubscriptions.push(
+        element.changed.subscribe(() => {
+          this.changed.next(this)
+        })
+      )
+    }
+  }
+
   public clear(fireEvent = true) {
     this.queries = []
     if (fireEvent) {
@@ -107,19 +124,25 @@ export class CustomFieldQueriesModel {
   public addExpression(
     expression: CustomFieldQueryExpression = new CustomFieldQueryExpression()
   ) {
-    if (this.queries.length > 0) {
-      ;(
-        (this.queries[0] as CustomFieldQueryExpression)
-          .value as CustomFieldQueryElement[]
-      ).push(expression)
-    } else {
-      this.queries.push(expression)
+    if (this.queries.length === 0) {
+      this.queries = [expression]
+      return
     }
+    ;(
+      (this.queries[0] as CustomFieldQueryExpression)
+        .value as CustomFieldQueryElement[]
+    ).push(expression)
     expression.changed.subscribe(() => {
       this.changed.next(this)
     })
   }
 
+  addInitialAtom() {
+    this.addAtom(
+      new CustomFieldQueryAtom([null, CustomFieldQueryOperator.Exists, 'true'])
+    )
+  }
+
   private findElement(
     queryElement: CustomFieldQueryElement,
     elements: any[]
@@ -160,6 +183,13 @@ export class CustomFieldQueriesModel {
       this.changed.next(this)
     }
   }
+
+  private teardownRootSubscriptions() {
+    for (const subscription of this.rootSubscriptions) {
+      subscription.unsubscribe()
+    }
+    this.rootSubscriptions = []
+  }
 }
 
 @Component({
@@ -206,6 +236,9 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
   @Input()
   applyOnClose = false
 
+  @Input()
+  useDropdown: boolean = true
+
   get name(): string {
     return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
   }
@@ -258,13 +291,7 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
   public onOpenChange(open: boolean) {
     if (open) {
       if (this.selectionModel.queries.length === 0) {
-        this.selectionModel.addAtom(
-          new CustomFieldQueryAtom([
-            null,
-            CustomFieldQueryOperator.Exists,
-            'true',
-          ])
-        )
+        this.selectionModel.addInitialAtom()
       }
       if (
         this.selectionModel.queries.length === 1 &&

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html

@@ -26,7 +26,7 @@
           i18n-placeholder
           (change)="onSetCreatedRelativeDate($event)">
           <ng-template ng-option-tmp let-item="item">
-            <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+            <ng-container [ngTemplateOutlet]="relativeDateOptionTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
           </ng-template>
           </ng-select>
         </div>
@@ -102,7 +102,7 @@
             i18n-placeholder
             (change)="onSetAddedRelativeDate($event)">
             <ng-template ng-option-tmp let-item="item">
-              <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+              <ng-container [ngTemplateOutlet]="relativeDateOptionTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
             </ng-template>
           </ng-select>
         </div>
@@ -158,3 +158,18 @@
     </div>
   </div>
 </div>
+
+<ng-template #relativeDateOptionTemplate let-item>
+  <div class="d-flex">
+    {{ item.name }}
+    <span class="ms-auto text-muted small">
+      @if (item.dateEnd) {
+        {{ item.date | customDate:'mediumDate' }} &ndash; {{ item.dateEnd | customDate:'mediumDate' }}
+      } @else if (item.dateTilNow) {
+        {{ item.dateTilNow | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
+      } @else {
+        {{ item.date | customDate:'mediumDate' }}
+      }
+    </span>
+  </div>
+</ng-template>

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.ts

@@ -1,4 +1,4 @@
-import { NgClass } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import {
   Component,
   EventEmitter,
@@ -42,6 +42,10 @@ export enum RelativeDate {
   THIS_MONTH = 6,
   TODAY = 7,
   YESTERDAY = 8,
+  PREVIOUS_WEEK = 9,
+  PREVIOUS_MONTH = 10,
+  PREVIOUS_QUARTER = 11,
+  PREVIOUS_YEAR = 12,
 }
 
 @Component({
@@ -59,6 +63,7 @@ export enum RelativeDate {
     FormsModule,
     ReactiveFormsModule,
     NgClass,
+    NgTemplateOutlet,
   ],
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
@@ -74,32 +79,34 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
     {
       id: RelativeDate.WITHIN_1_WEEK,
       name: $localize`Within 1 week`,
-      date: new Date().setDate(new Date().getDate() - 7),
+      dateTilNow: new Date().setDate(new Date().getDate() - 7),
     },
     {
       id: RelativeDate.WITHIN_1_MONTH,
       name: $localize`Within 1 month`,
-      date: new Date().setMonth(new Date().getMonth() - 1),
+      dateTilNow: new Date().setMonth(new Date().getMonth() - 1),
     },
     {
       id: RelativeDate.WITHIN_3_MONTHS,
       name: $localize`Within 3 months`,
-      date: new Date().setMonth(new Date().getMonth() - 3),
+      dateTilNow: new Date().setMonth(new Date().getMonth() - 3),
     },
     {
       id: RelativeDate.WITHIN_1_YEAR,
       name: $localize`Within 1 year`,
-      date: new Date().setFullYear(new Date().getFullYear() - 1),
+      dateTilNow: new Date().setFullYear(new Date().getFullYear() - 1),
     },
     {
       id: RelativeDate.THIS_YEAR,
       name: $localize`This year`,
       date: new Date('1/1/' + new Date().getFullYear()),
+      dateEnd: new Date('12/31/' + new Date().getFullYear()),
     },
     {
       id: RelativeDate.THIS_MONTH,
       name: $localize`This month`,
       date: new Date().setDate(1),
+      dateEnd: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
     },
     {
       id: RelativeDate.TODAY,
@@ -111,6 +118,46 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
       name: $localize`Yesterday`,
       date: new Date().setDate(new Date().getDate() - 1),
     },
+    {
+      id: RelativeDate.PREVIOUS_WEEK,
+      name: $localize`Previous week`,
+      date: new Date(
+        new Date().getFullYear(),
+        new Date().getMonth(),
+        new Date().getDate() - new Date().getDay() - 6
+      ),
+      dateEnd: new Date(
+        new Date().getFullYear(),
+        new Date().getMonth(),
+        new Date().getDate() - new Date().getDay()
+      ),
+    },
+    {
+      id: RelativeDate.PREVIOUS_MONTH,
+      name: $localize`Previous month`,
+      date: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
+      dateEnd: new Date(new Date().getFullYear(), new Date().getMonth(), 0),
+    },
+    {
+      id: RelativeDate.PREVIOUS_QUARTER,
+      name: $localize`Previous quarter`,
+      date: new Date(
+        new Date().getFullYear(),
+        Math.floor(new Date().getMonth() / 3) * 3 - 3,
+        1
+      ),
+      dateEnd: new Date(
+        new Date().getFullYear(),
+        Math.floor(new Date().getMonth() / 3) * 3,
+        0
+      ),
+    },
+    {
+      id: RelativeDate.PREVIOUS_YEAR,
+      name: $localize`Previous year`,
+      date: new Date('1/1/' + (new Date().getFullYear() - 1)),
+      dateEnd: new Date('12/31/' + (new Date().getFullYear() - 1)),
+    },
   ]
 
   datePlaceHolder: string

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html

@@ -38,9 +38,6 @@
               size="sm"
             ></ngb-pagination>
           }
-          @if (object?.id) {
-            <small class="d-block mt-2" i18n>Warning: existing instances of this field will retain their current value index (e.g. option #1, #2, #3) after editing the options here</small>
-          }
         }
         @case (CustomFieldDataType.Monetary) {
           <div class="my-3">

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.spec.ts

@@ -10,7 +10,6 @@ import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -35,7 +34,6 @@ describe('CustomFieldEditDialogComponent', () => {
         IfOwnerDirective,
         SelectComponent,
         TextComponent,
-        SafeHtmlPipe,
       ],
       providers: [
         NgbActiveModal,

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts

@@ -177,10 +177,16 @@ export class CustomFieldEditDialogComponent
   }
 
   public removeSelectOption(index: number) {
-    this.selectOptions.removeAt(index)
-    this._allSelectOptions.splice(
-      index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE,
-      1
+    const globalIndex =
+      index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE
+    this._allSelectOptions.splice(globalIndex, 1)
+
+    const totalPages = Math.max(
+      1,
+      Math.ceil(this._allSelectOptions.length / SELECT_OPTION_PAGE_SIZE)
     )
+    const targetPage = Math.min(this.selectOptionsPage, totalPages)
+
+    this.selectOptionsPage = targetPage
   }
 }

src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.spec.ts

@@ -11,7 +11,6 @@ import {
 } from 'src/app/data/mail-rule'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
@@ -46,7 +45,6 @@ describe('MailRuleEditDialogComponent', () => {
         PermissionsFormComponent,
         NumberComponent,
         TagsComponent,
-        SafeHtmlPipe,
         CheckComponent,
         SwitchComponent,
       ],

src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts

@@ -14,6 +14,7 @@ import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
 import { PasswordComponent } from '../../input/password/password.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
@@ -28,6 +29,7 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
     SelectComponent,
     TextComponent,
     PasswordComponent,
+    ConfirmButtonComponent,
     FormsModule,
     ReactiveFormsModule,
   ],

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html

@@ -77,9 +77,11 @@
               </div>
               <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
                 @for (action of object?.actions; track action; let i = $index){
-                  <div ngbAccordionItem cdkDrag [formGroup]="actionFields.controls[i]">
-                    <div ngbAccordionHeader>
-                      <button ngbAccordionButton>{{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
+                  <div ngbAccordionItem [formGroup]="actionFields.controls[i]">
+                    <div ngbAccordionHeader cdkDrag>
+                      <button ngbAccordionButton>
+                        <i-bs name="grip-vertical" class="ms-n3 pe-1"></i-bs>
+                        {{i + 1}}. {{getActionTypeOptionName(actionFields.controls[i].value.type)}}
                         @if(action.id) {
                           <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{action.id}}</span>
                         }
@@ -156,31 +158,97 @@
     <p class="small" i18n>Trigger for documents that match <em>all</em> filters specified below.</p>
     <div class="row">
       <div class="col">
-        <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" horizontal="true" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
         @if (formGroup.get('type').value === WorkflowTriggerType.Consumption) {
-          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
-          <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case-normalized.</a>" [error]="error?.filter_path"></pngx-input-text>
-          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
+          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" horizontal="true" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
+          <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" horizontal="true" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case-normalized." [error]="error?.filter_path"></pngx-input-text>
+          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" horizontal="true" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
         }
         @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated || formGroup.get('type').value === WorkflowTriggerType.Scheduled) {
-          <pngx-input-select i18n-title title="Content matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-          @if (patternRequired) {
-            <pngx-input-text i18n-title title="Content matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+          <pngx-input-select i18n-title title="Content matching algorithm" horizontal="true" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+          @if (matchingPatternRequired(formGroup)) {
+            <pngx-input-text i18n-title title="Content matching pattern" horizontal="true" formControlName="match" [error]="error?.match"></pngx-input-text>
           }
-          @if (patternRequired) {
-            <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+          @if (matchingPatternRequired(formGroup)) {
+            <pngx-input-check i18n-title title="Case insensitive" horizontal="true" formControlName="is_insensitive"></pngx-input-check>
           }
         }
       </div>
-      @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated || formGroup.get('type').value === WorkflowTriggerType.Scheduled) {
-        <div class="col-md-6">
-          <pngx-input-tags [allowCreate]="false" i18n-title title="Has any of tags" formControlName="filter_has_tags"></pngx-input-tags>
-          <pngx-input-select i18n-title title="Has correspondent" [items]="correspondents" [allowNull]="true" formControlName="filter_has_correspondent"></pngx-input-select>
-          <pngx-input-select i18n-title title="Has document type" [items]="documentTypes" [allowNull]="true" formControlName="filter_has_document_type"></pngx-input-select>
-          <pngx-input-select i18n-title title="Has storage path" [items]="storagePaths" [allowNull]="true" formControlName="filter_has_storage_path"></pngx-input-select>
-        </div>
-      }
     </div>
+    @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated || formGroup.get('type').value === WorkflowTriggerType.Scheduled) {
+      <div class="row mt-3">
+        <div class="col">
+          <div class="trigger-filters mb-3">
+            <div class="d-flex align-items-center">
+              <label class="form-label mb-0" i18n>Advanced Filters</label>
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-primary ms-auto"
+                (click)="addFilter(formGroup)"
+                [disabled]="!canAddFilter(formGroup)"
+              >
+                <i-bs name="plus-circle"></i-bs>&nbsp;<span i18n>Add filter</span>
+              </button>
+            </div>
+            <ul class="mt-2 list-group filters" formArrayName="filters">
+              @if (getFiltersFormArray(formGroup).length === 0) {
+                <p class="text-muted small" i18n>No advanced workflow filters defined.</p>
+              }
+              @for (filter of getFiltersFormArray(formGroup).controls; track filter; let filterIndex = $index) {
+                <li [formGroupName]="filterIndex" class="list-group-item">
+                  <div class="d-flex align-items-center gap-2">
+                    <div class="w-25">
+                      <pngx-input-select
+                        i18n-title
+                        [items]="getFilterTypeOptions(formGroup, filterIndex)"
+                        formControlName="type"
+                        [allowNull]="false"
+                      ></pngx-input-select>
+                    </div>
+                    <div class="flex-grow-1">
+                      @if (isTagsFilter(filter.get('type').value)) {
+                        <pngx-input-tags
+                          [allowCreate]="false"
+                          [title]="null"
+                          formControlName="values"
+                        ></pngx-input-tags>
+                      } @else if (
+                        isCustomFieldQueryFilter(filter.get('type').value)
+                      ) {
+                        <pngx-custom-fields-query-dropdown
+                          [selectionModel]="getCustomFieldQueryModel(filter)"
+                          (selectionModelChange)="onCustomFieldQuerySelectionChange(filter, $event)"
+                          [useDropdown]="false"
+                        ></pngx-custom-fields-query-dropdown>
+                        @if (!isCustomFieldQueryValid(filter)) {
+                          <div class="text-danger small" i18n>
+                            Complete the custom field query configuration.
+                          </div>
+                        }
+                      } @else {
+                        <pngx-input-select
+                          [items]="getFilterSelectItems(filter.get('type').value)"
+                          [allowNull]="true"
+                          [multiple]="isSelectMultiple(filter.get('type').value)"
+                          formControlName="values"
+                        ></pngx-input-select>
+                      }
+                    </div>
+                    <button
+                      type="button"
+                      class="btn btn-link text-danger p-0"
+                      (click)="removeFilter(formGroup, filterIndex)"
+                    >
+                      <i-bs name="trash"></i-bs><span class="ms-1" i18n>Delete</span>
+                    </button>
+                  </div>
+                </li>
+              }
+            </ul>
+          </div>
+        </div>
+      </div>
+    }
   </div>
 </ng-template>
 
@@ -362,6 +430,24 @@
           </div>
         </div>
       }
+      @case (WorkflowActionType.PasswordRemoval) {
+        <div class="row">
+          <div class="col">
+            <p class="small" i18n>
+              One password per line. The workflow will try them in order until one succeeds.
+            </p>
+            <pngx-input-textarea
+              i18n-title
+              title="Passwords"
+              formControlName="passwords"
+              rows="4"
+              [error]="error?.actions?.[i]?.passwords"
+              hint="Passwords are stored in plain text. Use with caution."
+              i18n-hint
+            ></pngx-input-textarea>
+          </div>
+        </div>
+      }
     }
   </div>
 </ng-template>

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.scss

@@ -7,3 +7,11 @@
 .accordion-button {
     font-size: 1rem;
 }
+
+:host ::ng-deep .filters .paperless-input-select.mb-3 {
+    margin-bottom: 0 !important;
+}
+
+.ms-n3 {
+    margin-left: -1rem !important;
+}

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts

@@ -3,6 +3,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
+  FormArray,
   FormControl,
   FormGroup,
   FormsModule,
@@ -11,8 +12,14 @@ import {
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of } from 'rxjs'
+import { CustomFieldQueriesModel } from 'src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
 import { CustomFieldDataType } from 'src/app/data/custom-field'
-import { MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model'
+import { CustomFieldQueryLogicalOperator } from 'src/app/data/custom-field-query'
+import {
+  MATCHING_ALGORITHMS,
+  MATCH_AUTO,
+  MATCH_NONE,
+} from 'src/app/data/matching-model'
 import { Workflow } from 'src/app/data/workflow'
 import {
   WorkflowAction,
@@ -24,13 +31,13 @@ import {
 } from 'src/app/data/workflow-trigger'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CustomFieldQueryExpression } from 'src/app/utils/custom-field-query-element'
 import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
 import { NumberComponent } from '../../input/number/number.component'
 import { PermissionsGroupComponent } from '../../input/permissions/permissions-group/permissions-group.component'
@@ -43,6 +50,7 @@ import { EditDialogMode } from '../edit-dialog.component'
 import {
   DOCUMENT_SOURCE_OPTIONS,
   SCHEDULE_DATE_FIELD_OPTIONS,
+  TriggerFilterType,
   WORKFLOW_ACTION_OPTIONS,
   WORKFLOW_TYPE_OPTIONS,
   WorkflowEditDialogComponent,
@@ -97,7 +105,6 @@ describe('WorkflowEditDialogComponent', () => {
         TagsComponent,
         PermissionsUserComponent,
         PermissionsGroupComponent,
-        SafeHtmlPipe,
         ConfirmButtonComponent,
       ],
       providers: [
@@ -246,7 +253,7 @@ describe('WorkflowEditDialogComponent', () => {
     expect(component.object.actions.length).toEqual(2)
   })
 
-  it('should update order and remove ids from actions on drag n drop', () => {
+  it('should update order on drag n drop', () => {
     const action1 = workflow.actions[0]
     const action2 = workflow.actions[1]
     component.object = workflow
@@ -255,8 +262,6 @@ describe('WorkflowEditDialogComponent', () => {
       WorkflowAction[]
     >)
     expect(component.object.actions).toEqual([action2, action1])
-    expect(action1.id).toBeNull()
-    expect(action2.id).toBeNull()
   })
 
   it('should not include auto matching in algorithms', () => {
@@ -375,6 +380,607 @@ describe('WorkflowEditDialogComponent', () => {
     expect(component.objectForm.get('actions').value[0].webhook).toBeNull()
   })
 
+  it('should require matching pattern when algorithm is not none', () => {
+    const triggerGroup = new FormGroup({
+      matching_algorithm: new FormControl(MATCH_AUTO),
+      match: new FormControl(''),
+    })
+    expect(component.matchingPatternRequired(triggerGroup)).toBe(true)
+    triggerGroup.get('matching_algorithm').setValue(MATCHING_ALGORITHMS[0].id)
+    expect(component.matchingPatternRequired(triggerGroup)).toBe(true)
+    triggerGroup.get('matching_algorithm').setValue(MATCH_NONE)
+    expect(component.matchingPatternRequired(triggerGroup)).toBe(false)
+  })
+
+  it('should map filter builder values into trigger filters on save', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0)
+    component.addFilter(triggerGroup as FormGroup)
+    component.addFilter(triggerGroup as FormGroup)
+    component.addFilter(triggerGroup as FormGroup)
+
+    const filters = component.getFiltersFormArray(triggerGroup as FormGroup)
+    expect(filters.length).toBe(3)
+
+    filters.at(0).get('values').setValue([1])
+    filters.at(1).get('values').setValue([2, 3])
+    filters.at(2).get('values').setValue([4])
+
+    const addFilterOfType = (type: TriggerFilterType) => {
+      const newFilter = component.addFilter(triggerGroup as FormGroup)
+      newFilter.get('type').setValue(type)
+      return newFilter
+    }
+
+    const correspondentAny = addFilterOfType(TriggerFilterType.CorrespondentAny)
+    correspondentAny.get('values').setValue([11])
+
+    const correspondentIs = addFilterOfType(TriggerFilterType.CorrespondentIs)
+    correspondentIs.get('values').setValue(1)
+
+    const correspondentNot = addFilterOfType(TriggerFilterType.CorrespondentNot)
+    correspondentNot.get('values').setValue([1])
+
+    const documentTypeIs = addFilterOfType(TriggerFilterType.DocumentTypeIs)
+    documentTypeIs.get('values').setValue(1)
+
+    const documentTypeAny = addFilterOfType(TriggerFilterType.DocumentTypeAny)
+    documentTypeAny.get('values').setValue([12])
+
+    const documentTypeNot = addFilterOfType(TriggerFilterType.DocumentTypeNot)
+    documentTypeNot.get('values').setValue([1])
+
+    const storagePathIs = addFilterOfType(TriggerFilterType.StoragePathIs)
+    storagePathIs.get('values').setValue(1)
+
+    const storagePathAny = addFilterOfType(TriggerFilterType.StoragePathAny)
+    storagePathAny.get('values').setValue([13])
+
+    const storagePathNot = addFilterOfType(TriggerFilterType.StoragePathNot)
+    storagePathNot.get('values').setValue([1])
+
+    const customFieldFilter = addFilterOfType(
+      TriggerFilterType.CustomFieldQuery
+    )
+    const customFieldQuery = JSON.stringify(['AND', [[1, 'exact', 'test']]])
+    customFieldFilter.get('values').setValue(customFieldQuery)
+
+    const formValues = component['getFormValues']()
+
+    expect(formValues.triggers[0].filter_has_tags).toEqual([1])
+    expect(formValues.triggers[0].filter_has_all_tags).toEqual([2, 3])
+    expect(formValues.triggers[0].filter_has_not_tags).toEqual([4])
+    expect(formValues.triggers[0].filter_has_any_correspondents).toEqual([11])
+    expect(formValues.triggers[0].filter_has_correspondent).toEqual(1)
+    expect(formValues.triggers[0].filter_has_not_correspondents).toEqual([1])
+    expect(formValues.triggers[0].filter_has_any_document_types).toEqual([12])
+    expect(formValues.triggers[0].filter_has_document_type).toEqual(1)
+    expect(formValues.triggers[0].filter_has_not_document_types).toEqual([1])
+    expect(formValues.triggers[0].filter_has_any_storage_paths).toEqual([13])
+    expect(formValues.triggers[0].filter_has_storage_path).toEqual(1)
+    expect(formValues.triggers[0].filter_has_not_storage_paths).toEqual([1])
+    expect(formValues.triggers[0].filter_custom_field_query).toEqual(
+      customFieldQuery
+    )
+    expect(formValues.triggers[0].filters).toBeUndefined()
+  })
+
+  it('should ignore empty and null filter values when mapping filters', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    const tagsFilter = component.addFilter(triggerGroup)
+    tagsFilter.get('type').setValue(TriggerFilterType.TagsAny)
+    tagsFilter.get('values').setValue([])
+
+    const correspondentFilter = component.addFilter(triggerGroup)
+    correspondentFilter.get('type').setValue(TriggerFilterType.CorrespondentIs)
+    correspondentFilter.get('values').setValue(null)
+
+    const formValues = component['getFormValues']()
+
+    expect(formValues.triggers[0].filter_has_tags).toEqual([])
+    expect(formValues.triggers[0].filter_has_correspondent).toBeNull()
+  })
+
+  it('should derive single select filters from array values', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    const addFilterOfType = (type: TriggerFilterType, value: any) => {
+      const filter = component.addFilter(triggerGroup)
+      filter.get('type').setValue(type)
+      filter.get('values').setValue(value)
+    }
+
+    addFilterOfType(TriggerFilterType.CorrespondentIs, [5])
+    addFilterOfType(TriggerFilterType.DocumentTypeIs, [6])
+    addFilterOfType(TriggerFilterType.StoragePathIs, [7])
+
+    const formValues = component['getFormValues']()
+
+    expect(formValues.triggers[0].filter_has_correspondent).toEqual(5)
+    expect(formValues.triggers[0].filter_has_document_type).toEqual(6)
+    expect(formValues.triggers[0].filter_has_storage_path).toEqual(7)
+  })
+
+  it('should convert multi-value filter values when aggregating filters', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    const setFilter = (type: TriggerFilterType, value: number): void => {
+      const filter = component.addFilter(triggerGroup) as FormGroup
+      filter.get('type').setValue(type)
+      filter.get('values').setValue(value)
+    }
+
+    setFilter(TriggerFilterType.TagsAll, 11)
+    setFilter(TriggerFilterType.TagsNone, 12)
+    setFilter(TriggerFilterType.CorrespondentAny, 16)
+    setFilter(TriggerFilterType.CorrespondentNot, 13)
+    setFilter(TriggerFilterType.DocumentTypeAny, 17)
+    setFilter(TriggerFilterType.DocumentTypeNot, 14)
+    setFilter(TriggerFilterType.StoragePathAny, 18)
+    setFilter(TriggerFilterType.StoragePathNot, 15)
+
+    const formValues = component['getFormValues']()
+
+    expect(formValues.triggers[0].filter_has_all_tags).toEqual([11])
+    expect(formValues.triggers[0].filter_has_not_tags).toEqual([12])
+    expect(formValues.triggers[0].filter_has_any_correspondents).toEqual([16])
+    expect(formValues.triggers[0].filter_has_not_correspondents).toEqual([13])
+    expect(formValues.triggers[0].filter_has_any_document_types).toEqual([17])
+    expect(formValues.triggers[0].filter_has_not_document_types).toEqual([14])
+    expect(formValues.triggers[0].filter_has_any_storage_paths).toEqual([18])
+    expect(formValues.triggers[0].filter_has_not_storage_paths).toEqual([15])
+  })
+
+  it('should reuse filter type options and update disabled state', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+    component.addFilter(triggerGroup)
+
+    const optionsFirst = component.getFilterTypeOptions(triggerGroup, 0)
+    const optionsSecond = component.getFilterTypeOptions(triggerGroup, 0)
+    expect(optionsFirst).toBe(optionsSecond)
+
+    // to force disabled flag
+    component.addFilter(triggerGroup)
+    const filterArray = component.getFiltersFormArray(triggerGroup)
+    const firstFilter = filterArray.at(0)
+    firstFilter.get('type').setValue(TriggerFilterType.CorrespondentIs)
+
+    component.addFilter(triggerGroup)
+    const updatedFilters = component.getFiltersFormArray(triggerGroup)
+    const secondFilter = updatedFilters.at(1)
+    const options = component.getFilterTypeOptions(triggerGroup, 1)
+    const correspondentIsOption = options.find(
+      (option) => option.id === TriggerFilterType.CorrespondentIs
+    )
+    expect(correspondentIsOption.disabled).toBe(true)
+
+    firstFilter.get('type').setValue(TriggerFilterType.DocumentTypeNot)
+    secondFilter.get('type').setValue(TriggerFilterType.TagsAll)
+    const postChangeOptions = component.getFilterTypeOptions(triggerGroup, 1)
+    const correspondentOptionAfter = postChangeOptions.find(
+      (option) => option.id === TriggerFilterType.CorrespondentIs
+    )
+    expect(correspondentOptionAfter.disabled).toBe(false)
+  })
+
+  it('should keep multi-entry filter options enabled and allow duplicates', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    component.filterDefinitions = [
+      {
+        id: TriggerFilterType.TagsAny,
+        name: 'Any tags',
+        inputType: 'tags',
+        allowMultipleEntries: true,
+        allowMultipleValues: true,
+      } as any,
+      {
+        id: TriggerFilterType.CorrespondentIs,
+        name: 'Correspondent is',
+        inputType: 'select',
+        allowMultipleEntries: false,
+        allowMultipleValues: false,
+        selectItems: 'correspondents',
+      } as any,
+    ]
+
+    const firstFilter = component.addFilter(triggerGroup)
+    firstFilter.get('type').setValue(TriggerFilterType.TagsAny)
+
+    const secondFilter = component.addFilter(triggerGroup)
+    expect(secondFilter).not.toBeNull()
+
+    const options = component.getFilterTypeOptions(triggerGroup, 1)
+    const multiEntryOption = options.find(
+      (option) => option.id === TriggerFilterType.TagsAny
+    )
+
+    expect(multiEntryOption.disabled).toBe(false)
+    expect(component.canAddFilter(triggerGroup)).toBe(true)
+  })
+
+  it('should return null when no filter definitions remain available', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    component.filterDefinitions = [
+      {
+        id: TriggerFilterType.TagsAny,
+        name: 'Any tags',
+        inputType: 'tags',
+        allowMultipleEntries: false,
+        allowMultipleValues: true,
+      } as any,
+      {
+        id: TriggerFilterType.CorrespondentIs,
+        name: 'Correspondent is',
+        inputType: 'select',
+        allowMultipleEntries: false,
+        allowMultipleValues: false,
+        selectItems: 'correspondents',
+      } as any,
+    ]
+
+    const firstFilter = component.addFilter(triggerGroup)
+    firstFilter.get('type').setValue(TriggerFilterType.TagsAny)
+    const secondFilter = component.addFilter(triggerGroup)
+    secondFilter.get('type').setValue(TriggerFilterType.CorrespondentIs)
+
+    expect(component.canAddFilter(triggerGroup)).toBe(false)
+    expect(component.addFilter(triggerGroup)).toBeNull()
+  })
+
+  it('should skip filter definitions without handlers when building form array', () => {
+    const originalDefinitions = component.filterDefinitions
+    component.filterDefinitions = [
+      {
+        id: 999,
+        name: 'Unsupported',
+        inputType: 'text',
+        allowMultipleEntries: false,
+        allowMultipleValues: false,
+      } as any,
+    ]
+
+    const trigger = {
+      filter_has_tags: [],
+      filter_has_all_tags: [],
+      filter_has_not_tags: [],
+      filter_has_any_correspondents: [],
+      filter_has_not_correspondents: [],
+      filter_has_any_document_types: [],
+      filter_has_not_document_types: [],
+      filter_has_any_storage_paths: [],
+      filter_has_not_storage_paths: [],
+      filter_has_correspondent: null,
+      filter_has_document_type: null,
+      filter_has_storage_path: null,
+      filter_custom_field_query: null,
+    } as any
+
+    const filters = component['buildFiltersFormArray'](trigger)
+    expect(filters.length).toBe(0)
+
+    component.filterDefinitions = originalDefinitions
+  })
+
+  it('should return null when adding filter for unknown trigger form group', () => {
+    expect(component.addFilter(new FormGroup({}) as any)).toBeNull()
+  })
+
+  it('should ignore remove filter calls for unknown trigger form group', () => {
+    expect(() =>
+      component.removeFilter(new FormGroup({}) as any, 0)
+    ).not.toThrow()
+  })
+
+  it('should teardown custom field query model when removing a custom field filter', () => {
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    component.addFilter(triggerGroup)
+    const filters = component.getFiltersFormArray(triggerGroup)
+    const filterGroup = filters.at(0) as FormGroup
+    filterGroup.get('type').setValue(TriggerFilterType.CustomFieldQuery)
+
+    const model = component.getCustomFieldQueryModel(filterGroup)
+    expect(model).toBeDefined()
+    expect(
+      component['getStoredCustomFieldQueryModel'](filterGroup as any)
+    ).toBe(model)
+
+    component.removeFilter(triggerGroup, 0)
+    expect(
+      component['getStoredCustomFieldQueryModel'](filterGroup as any)
+    ).toBeNull()
+  })
+
+  it('should return readable filter names', () => {
+    expect(component.getFilterName(TriggerFilterType.TagsAny)).toBe(
+      'Has any of these tags'
+    )
+    expect(component.getFilterName(999 as any)).toBe('')
+  })
+
+  it('should build filter form array from existing trigger filters', () => {
+    const trigger = workflow.triggers[0]
+    trigger.filter_has_tags = [1]
+    trigger.filter_has_all_tags = [2, 3]
+    trigger.filter_has_not_tags = [4]
+    trigger.filter_has_any_correspondents = [10] as any
+    trigger.filter_has_correspondent = 5 as any
+    trigger.filter_has_not_correspondents = [6] as any
+    trigger.filter_has_document_type = 7 as any
+    trigger.filter_has_any_document_types = [11] as any
+    trigger.filter_has_not_document_types = [8] as any
+    trigger.filter_has_storage_path = 9 as any
+    trigger.filter_has_any_storage_paths = [12] as any
+    trigger.filter_has_not_storage_paths = [10] as any
+    trigger.filter_custom_field_query = JSON.stringify([
+      'AND',
+      [[1, 'exact', 'value']],
+    ]) as any
+
+    component.object = workflow
+    component.ngOnInit()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+    const filters = component.getFiltersFormArray(triggerGroup)
+    expect(filters.length).toBe(13)
+    const customFieldFilter = filters.at(12) as FormGroup
+    expect(customFieldFilter.get('type').value).toBe(
+      TriggerFilterType.CustomFieldQuery
+    )
+    const model = component.getCustomFieldQueryModel(customFieldFilter)
+    expect(model.isValid()).toBe(true)
+  })
+
+  it('should expose select metadata helpers', () => {
+    expect(component.isSelectMultiple(TriggerFilterType.CorrespondentAny)).toBe(
+      true
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.CorrespondentNot)).toBe(
+      true
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.CorrespondentIs)).toBe(
+      false
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.DocumentTypeAny)).toBe(
+      true
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.DocumentTypeIs)).toBe(
+      false
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.StoragePathAny)).toBe(
+      true
+    )
+    expect(component.isSelectMultiple(TriggerFilterType.StoragePathIs)).toBe(
+      false
+    )
+
+    component.correspondents = [{ id: 1, name: 'C1' } as any]
+    component.documentTypes = [{ id: 2, name: 'DT' } as any]
+    component.storagePaths = [{ id: 3, name: 'SP' } as any]
+
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.CorrespondentIs)
+    ).toEqual(component.correspondents)
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.DocumentTypeIs)
+    ).toEqual(component.documentTypes)
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.DocumentTypeAny)
+    ).toEqual(component.documentTypes)
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.StoragePathIs)
+    ).toEqual(component.storagePaths)
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.StoragePathAny)
+    ).toEqual(component.storagePaths)
+    expect(component.getFilterSelectItems(TriggerFilterType.TagsAll)).toEqual(
+      []
+    )
+
+    expect(
+      component.isCustomFieldQueryFilter(TriggerFilterType.CustomFieldQuery)
+    ).toBe(true)
+  })
+
+  it('should return empty select items when definition is missing', () => {
+    const originalDefinitions = component.filterDefinitions
+    component.filterDefinitions = []
+
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.CorrespondentIs)
+    ).toEqual([])
+
+    component.filterDefinitions = originalDefinitions
+  })
+
+  it('should return empty select items when definition has unknown source', () => {
+    const originalDefinitions = component.filterDefinitions
+    component.filterDefinitions = [
+      {
+        id: TriggerFilterType.CorrespondentIs,
+        name: 'Correspondent is',
+        inputType: 'select',
+        allowMultipleEntries: false,
+        allowMultipleValues: false,
+        selectItems: 'unknown',
+      } as any,
+    ]
+
+    expect(
+      component.getFilterSelectItems(TriggerFilterType.CorrespondentIs)
+    ).toEqual([])
+
+    component.filterDefinitions = originalDefinitions
+  })
+
+  it('should handle custom field query selection change and validation states', () => {
+    const formGroup = new FormGroup({
+      values: new FormControl(null),
+    })
+    const model = new CustomFieldQueriesModel()
+
+    const changeSpy = jest.spyOn(
+      component as any,
+      'onCustomFieldQueryModelChanged'
+    )
+
+    component.onCustomFieldQuerySelectionChange(formGroup, model)
+    expect(changeSpy).toHaveBeenCalledWith(formGroup, model)
+
+    expect(component.isCustomFieldQueryValid(formGroup)).toBe(true)
+    component['setCustomFieldQueryModel'](formGroup as any, model as any)
+
+    const validSpy = jest.spyOn(model, 'isValid').mockReturnValue(false)
+    const emptySpy = jest.spyOn(model, 'isEmpty').mockReturnValue(false)
+    expect(component.isCustomFieldQueryValid(formGroup)).toBe(false)
+    expect(validSpy).toHaveBeenCalled()
+
+    validSpy.mockReturnValue(true)
+    emptySpy.mockReturnValue(true)
+    expect(component.isCustomFieldQueryValid(formGroup)).toBe(true)
+
+    emptySpy.mockReturnValue(false)
+    expect(component.isCustomFieldQueryValid(formGroup)).toBe(true)
+
+    component['clearCustomFieldQueryModel'](formGroup as any)
+  })
+
+  it('should recover from invalid custom field query json and update control on changes', () => {
+    const filterGroup = new FormGroup({
+      values: new FormControl('not-json'),
+    })
+
+    component['ensureCustomFieldQueryModel'](filterGroup, 'not-json')
+
+    const model = component['getStoredCustomFieldQueryModel'](
+      filterGroup as any
+    )
+    expect(model).toBeDefined()
+    expect(model.queries.length).toBeGreaterThan(0)
+
+    const valuesControl = filterGroup.get('values')
+    expect(valuesControl.value).toBeNull()
+
+    const expression = new CustomFieldQueryExpression([
+      CustomFieldQueryLogicalOperator.And,
+      [[1, 'exact', 'value']],
+    ])
+    model.queries = [expression]
+
+    jest.spyOn(model, 'isValid').mockReturnValue(true)
+    jest.spyOn(model, 'isEmpty').mockReturnValue(false)
+
+    model.changed.next(model)
+
+    expect(valuesControl.value).toEqual(JSON.stringify(expression.serialize()))
+
+    component['clearCustomFieldQueryModel'](filterGroup as any)
+  })
+
+  it('should handle custom field query model change edge cases', () => {
+    const groupWithoutControl = new FormGroup({})
+    const dummyModel = {
+      isValid: jest.fn().mockReturnValue(true),
+      isEmpty: jest.fn().mockReturnValue(false),
+    }
+
+    expect(() =>
+      component['onCustomFieldQueryModelChanged'](
+        groupWithoutControl as any,
+        dummyModel as any
+      )
+    ).not.toThrow()
+
+    const groupWithControl = new FormGroup({
+      values: new FormControl('initial'),
+    })
+    const emptyModel = {
+      isValid: jest.fn().mockReturnValue(true),
+      isEmpty: jest.fn().mockReturnValue(true),
+    }
+
+    component['onCustomFieldQueryModelChanged'](
+      groupWithControl as any,
+      emptyModel as any
+    )
+
+    expect(groupWithControl.get('values').value).toBeNull()
+  })
+
+  it('should normalize filter values for single and multi selects', () => {
+    expect(
+      component['normalizeFilterValue'](TriggerFilterType.TagsAny)
+    ).toEqual([])
+    expect(
+      component['normalizeFilterValue'](TriggerFilterType.TagsAny, 5)
+    ).toEqual([5])
+    expect(
+      component['normalizeFilterValue'](TriggerFilterType.TagsAny, [5, 6])
+    ).toEqual([5, 6])
+    expect(
+      component['normalizeFilterValue'](TriggerFilterType.CorrespondentIs, [7])
+    ).toEqual(7)
+    expect(
+      component['normalizeFilterValue'](TriggerFilterType.CorrespondentIs, 8)
+    ).toEqual(8)
+    const customFieldJson = JSON.stringify(['AND', [[1, 'exact', 'test']]])
+    expect(
+      component['normalizeFilterValue'](
+        TriggerFilterType.CustomFieldQuery,
+        customFieldJson
+      )
+    ).toEqual(customFieldJson)
+
+    const customFieldObject = ['AND', [[1, 'exact', 'other']]]
+    expect(
+      component['normalizeFilterValue'](
+        TriggerFilterType.CustomFieldQuery,
+        customFieldObject
+      )
+    ).toEqual(JSON.stringify(customFieldObject))
+
+    expect(
+      component['normalizeFilterValue'](
+        TriggerFilterType.CustomFieldQuery,
+        false
+      )
+    ).toBeNull()
+  })
+
+  it('should add and remove filter form groups', () => {
+    component['changeDetector'] = { detectChanges: jest.fn() } as any
+    component.object = undefined
+    component.addTrigger()
+    const triggerGroup = component.triggerFields.at(0) as FormGroup
+
+    component.addFilter(triggerGroup)
+
+    component.removeFilter(triggerGroup, 0)
+    expect(component.getFiltersFormArray(triggerGroup).length).toBe(0)
+
+    component.addFilter(triggerGroup)
+    const filterArrayAfterAdd = component.getFiltersFormArray(triggerGroup)
+    filterArrayAfterAdd.at(0).get('type').setValue(TriggerFilterType.TagsAll)
+    expect(component.getFiltersFormArray(triggerGroup).length).toBe(1)
+  })
+
   it('should remove selected custom field from the form group', () => {
     const formGroup = new FormGroup({
       assign_custom_fields: new FormControl([1, 2, 3]),
@@ -389,4 +995,32 @@ describe('WorkflowEditDialogComponent', () => {
     component.removeSelectedCustomField(3, formGroup)
     expect(formGroup.get('assign_custom_fields').value).toEqual([])
   })
+
+  it('should handle parsing of passwords from array to string and back on save', () => {
+    const passwordAction: WorkflowAction = {
+      id: 1,
+      type: WorkflowActionType.PasswordRemoval,
+      passwords: ['pass1', 'pass2'],
+    }
+    component.object = {
+      name: 'Workflow with Passwords',
+      id: 1,
+      order: 1,
+      enabled: true,
+      triggers: [],
+      actions: [passwordAction],
+    }
+    component.ngOnInit()
+
+    const formActions = component.objectForm.get('actions') as FormArray
+    expect(formActions.value[0].passwords).toBe('pass1\npass2')
+    formActions.at(0).get('passwords').setValue('pass1\npass2\npass3')
+    component.save()
+
+    expect(component.objectForm.get('actions').value[0].passwords).toEqual([
+      'pass1',
+      'pass2',
+      'pass3',
+    ])
+  })
 })

src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts

@@ -6,6 +6,7 @@ import {
 import { NgTemplateOutlet } from '@angular/common'
 import { Component, OnInit, inject } from '@angular/core'
 import {
+  AbstractControl,
   FormArray,
   FormControl,
   FormGroup,
@@ -14,7 +15,7 @@ import {
 } from '@angular/forms'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { first } from 'rxjs'
+import { Subscription, first, takeUntil } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentType } from 'src/app/data/document-type'
@@ -45,7 +46,12 @@ import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { WorkflowService } from 'src/app/services/rest/workflow.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { CustomFieldQueryExpression } from 'src/app/utils/custom-field-query-element'
 import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
+import {
+  CustomFieldQueriesModel,
+  CustomFieldsQueryDropdownComponent,
+} from '../../custom-fields-query-dropdown/custom-fields-query-dropdown.component'
 import { CheckComponent } from '../../input/check/check.component'
 import { CustomFieldsValuesComponent } from '../../input/custom-fields-values/custom-fields-values.component'
 import { EntriesComponent } from '../../input/entries/entries.component'
@@ -133,12 +139,298 @@ export const WORKFLOW_ACTION_OPTIONS = [
     id: WorkflowActionType.Webhook,
     name: $localize`Webhook`,
   },
+  {
+    id: WorkflowActionType.PasswordRemoval,
+    name: $localize`Password removal`,
+  },
+]
+
+export enum TriggerFilterType {
+  TagsAny = 'tags_any',
+  TagsAll = 'tags_all',
+  TagsNone = 'tags_none',
+  CorrespondentAny = 'correspondent_any',
+  CorrespondentIs = 'correspondent_is',
+  CorrespondentNot = 'correspondent_not',
+  DocumentTypeAny = 'document_type_any',
+  DocumentTypeIs = 'document_type_is',
+  DocumentTypeNot = 'document_type_not',
+  StoragePathAny = 'storage_path_any',
+  StoragePathIs = 'storage_path_is',
+  StoragePathNot = 'storage_path_not',
+  CustomFieldQuery = 'custom_field_query',
+}
+
+interface TriggerFilterDefinition {
+  id: TriggerFilterType
+  name: string
+  inputType: 'tags' | 'select' | 'customFieldQuery'
+  allowMultipleEntries: boolean
+  allowMultipleValues: boolean
+  selectItems?: 'correspondents' | 'documentTypes' | 'storagePaths'
+  disabled?: boolean
+}
+
+type TriggerFilterOption = TriggerFilterDefinition & {
+  disabled?: boolean
+}
+
+type TriggerFilterAggregate = {
+  filter_has_tags: number[]
+  filter_has_all_tags: number[]
+  filter_has_not_tags: number[]
+  filter_has_any_correspondents: number[]
+  filter_has_not_correspondents: number[]
+  filter_has_any_document_types: number[]
+  filter_has_not_document_types: number[]
+  filter_has_any_storage_paths: number[]
+  filter_has_not_storage_paths: number[]
+  filter_has_correspondent: number | null
+  filter_has_document_type: number | null
+  filter_has_storage_path: number | null
+  filter_custom_field_query: string | null
+}
+
+interface FilterHandler {
+  apply: (aggregate: TriggerFilterAggregate, values: any) => void
+  extract: (trigger: WorkflowTrigger) => any
+  hasValue: (value: any) => boolean
+}
+
+const CUSTOM_FIELD_QUERY_MODEL_KEY = Symbol('customFieldQueryModel')
+const CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY = Symbol(
+  'customFieldQuerySubscription'
+)
+
+type CustomFieldFilterGroup = FormGroup & {
+  [CUSTOM_FIELD_QUERY_MODEL_KEY]?: CustomFieldQueriesModel
+  [CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY]?: Subscription
+}
+
+const TRIGGER_FILTER_DEFINITIONS: TriggerFilterDefinition[] = [
+  {
+    id: TriggerFilterType.TagsAny,
+    name: $localize`Has any of these tags`,
+    inputType: 'tags',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+  },
+  {
+    id: TriggerFilterType.TagsAll,
+    name: $localize`Has all of these tags`,
+    inputType: 'tags',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+  },
+  {
+    id: TriggerFilterType.TagsNone,
+    name: $localize`Does not have these tags`,
+    inputType: 'tags',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+  },
+  {
+    id: TriggerFilterType.CorrespondentAny,
+    name: $localize`Has any of these correspondents`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'correspondents',
+  },
+  {
+    id: TriggerFilterType.CorrespondentIs,
+    name: $localize`Has correspondent`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: false,
+    selectItems: 'correspondents',
+  },
+  {
+    id: TriggerFilterType.CorrespondentNot,
+    name: $localize`Does not have correspondents`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'correspondents',
+  },
+  {
+    id: TriggerFilterType.DocumentTypeIs,
+    name: $localize`Has document type`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: false,
+    selectItems: 'documentTypes',
+  },
+  {
+    id: TriggerFilterType.DocumentTypeAny,
+    name: $localize`Has any of these document types`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'documentTypes',
+  },
+  {
+    id: TriggerFilterType.DocumentTypeNot,
+    name: $localize`Does not have document types`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'documentTypes',
+  },
+  {
+    id: TriggerFilterType.StoragePathIs,
+    name: $localize`Has storage path`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: false,
+    selectItems: 'storagePaths',
+  },
+  {
+    id: TriggerFilterType.StoragePathAny,
+    name: $localize`Has any of these storage paths`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'storagePaths',
+  },
+  {
+    id: TriggerFilterType.StoragePathNot,
+    name: $localize`Does not have storage paths`,
+    inputType: 'select',
+    allowMultipleEntries: false,
+    allowMultipleValues: true,
+    selectItems: 'storagePaths',
+  },
+  {
+    id: TriggerFilterType.CustomFieldQuery,
+    name: $localize`Matches custom field query`,
+    inputType: 'customFieldQuery',
+    allowMultipleEntries: false,
+    allowMultipleValues: false,
+  },
 ]
 
 const TRIGGER_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
   (a) => a.id !== MATCH_AUTO
 )
 
+const FILTER_HANDLERS: Record<TriggerFilterType, FilterHandler> = {
+  [TriggerFilterType.TagsAny]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_tags = Array.isArray(values) ? [...values] : [values]
+    },
+    extract: (trigger) => trigger.filter_has_tags,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.TagsAll]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_all_tags = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_all_tags,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.TagsNone]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_not_tags = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_not_tags,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.CorrespondentAny]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_any_correspondents = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_any_correspondents,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.CorrespondentIs]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_correspondent = Array.isArray(values)
+        ? (values[0] ?? null)
+        : values
+    },
+    extract: (trigger) => trigger.filter_has_correspondent,
+    hasValue: (value) => value !== null && value !== undefined,
+  },
+  [TriggerFilterType.CorrespondentNot]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_not_correspondents = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_not_correspondents,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.DocumentTypeIs]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_document_type = Array.isArray(values)
+        ? (values[0] ?? null)
+        : values
+    },
+    extract: (trigger) => trigger.filter_has_document_type,
+    hasValue: (value) => value !== null && value !== undefined,
+  },
+  [TriggerFilterType.DocumentTypeAny]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_any_document_types = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_any_document_types,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.DocumentTypeNot]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_not_document_types = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_not_document_types,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.StoragePathIs]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_storage_path = Array.isArray(values)
+        ? (values[0] ?? null)
+        : values
+    },
+    extract: (trigger) => trigger.filter_has_storage_path,
+    hasValue: (value) => value !== null && value !== undefined,
+  },
+  [TriggerFilterType.StoragePathAny]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_any_storage_paths = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_any_storage_paths,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.StoragePathNot]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_has_not_storage_paths = Array.isArray(values)
+        ? [...values]
+        : [values]
+    },
+    extract: (trigger) => trigger.filter_has_not_storage_paths,
+    hasValue: (value) => Array.isArray(value) && value.length > 0,
+  },
+  [TriggerFilterType.CustomFieldQuery]: {
+    apply: (aggregate, values) => {
+      aggregate.filter_custom_field_query = values as string
+    },
+    extract: (trigger) => trigger.filter_custom_field_query,
+    hasValue: (value) =>
+      typeof value === 'string' && value !== null && value.trim().length > 0,
+  },
+}
+
 @Component({
   selector: 'pngx-workflow-edit-dialog',
   templateUrl: './workflow-edit-dialog.component.html',
@@ -153,6 +445,7 @@ const TRIGGER_MATCHING_ALGORITHMS = MATCHING_ALGORITHMS.filter(
     TextAreaComponent,
     TagsComponent,
     CustomFieldsValuesComponent,
+    CustomFieldsQueryDropdownComponent,
     PermissionsGroupComponent,
     PermissionsUserComponent,
     ConfirmButtonComponent,
@@ -170,6 +463,8 @@ export class WorkflowEditDialogComponent
 {
   public WorkflowTriggerType = WorkflowTriggerType
   public WorkflowActionType = WorkflowActionType
+  public TriggerFilterType = TriggerFilterType
+  public filterDefinitions = TRIGGER_FILTER_DEFINITIONS
 
   private correspondentService: CorrespondentService
   private documentTypeService: DocumentTypeService
@@ -189,6 +484,11 @@ export class WorkflowEditDialogComponent
 
   private allowedActionTypes = []
 
+  private readonly triggerFilterOptionsMap = new WeakMap<
+    FormArray,
+    TriggerFilterOption[]
+  >()
+
   constructor() {
     super()
     this.service = inject(WorkflowService)
@@ -390,6 +690,428 @@ export class WorkflowEditDialogComponent
     return this.objectForm.get('actions') as FormArray
   }
 
+  protected override getFormValues(): any {
+    const formValues = super.getFormValues()
+
+    if (formValues?.triggers?.length) {
+      formValues.triggers = formValues.triggers.map(
+        (trigger: any, index: number) => {
+          const triggerFormGroup = this.triggerFields.at(index) as FormGroup
+          const filters = this.getFiltersFormArray(triggerFormGroup)
+
+          const aggregate: TriggerFilterAggregate = {
+            filter_has_tags: [],
+            filter_has_all_tags: [],
+            filter_has_not_tags: [],
+            filter_has_any_correspondents: [],
+            filter_has_not_correspondents: [],
+            filter_has_any_document_types: [],
+            filter_has_not_document_types: [],
+            filter_has_any_storage_paths: [],
+            filter_has_not_storage_paths: [],
+            filter_has_correspondent: null,
+            filter_has_document_type: null,
+            filter_has_storage_path: null,
+            filter_custom_field_query: null,
+          }
+
+          for (const control of filters.controls) {
+            const type = control.get('type').value as TriggerFilterType
+            const values = control.get('values').value
+
+            if (values === null || values === undefined) {
+              continue
+            }
+
+            if (Array.isArray(values) && values.length === 0) {
+              continue
+            }
+
+            const handler = FILTER_HANDLERS[type]
+            handler?.apply(aggregate, values)
+          }
+
+          trigger.filter_has_tags = aggregate.filter_has_tags
+          trigger.filter_has_all_tags = aggregate.filter_has_all_tags
+          trigger.filter_has_not_tags = aggregate.filter_has_not_tags
+          trigger.filter_has_any_correspondents =
+            aggregate.filter_has_any_correspondents
+          trigger.filter_has_not_correspondents =
+            aggregate.filter_has_not_correspondents
+          trigger.filter_has_any_document_types =
+            aggregate.filter_has_any_document_types
+          trigger.filter_has_not_document_types =
+            aggregate.filter_has_not_document_types
+          trigger.filter_has_any_storage_paths =
+            aggregate.filter_has_any_storage_paths
+          trigger.filter_has_not_storage_paths =
+            aggregate.filter_has_not_storage_paths
+          trigger.filter_has_correspondent =
+            aggregate.filter_has_correspondent ?? null
+          trigger.filter_has_document_type =
+            aggregate.filter_has_document_type ?? null
+          trigger.filter_has_storage_path =
+            aggregate.filter_has_storage_path ?? null
+          trigger.filter_custom_field_query =
+            aggregate.filter_custom_field_query ?? null
+
+          delete trigger.filters
+
+          return trigger
+        }
+      )
+    }
+
+    return formValues
+  }
+
+  public matchingPatternRequired(formGroup: FormGroup): boolean {
+    return formGroup.get('matching_algorithm').value !== MATCH_NONE
+  }
+
+  private createFilterFormGroup(
+    type: TriggerFilterType,
+    initialValue?: any
+  ): FormGroup {
+    const group = new FormGroup({
+      type: new FormControl(type),
+      values: new FormControl(this.normalizeFilterValue(type, initialValue)),
+    })
+
+    group.get('type').valueChanges.subscribe((newType: TriggerFilterType) => {
+      if (newType === TriggerFilterType.CustomFieldQuery) {
+        this.ensureCustomFieldQueryModel(group)
+      } else {
+        this.clearCustomFieldQueryModel(group)
+        group.get('values').setValue(this.getDefaultFilterValue(newType), {
+          emitEvent: false,
+        })
+      }
+    })
+
+    if (type === TriggerFilterType.CustomFieldQuery) {
+      this.ensureCustomFieldQueryModel(group, initialValue)
+    }
+
+    return group
+  }
+
+  private buildFiltersFormArray(trigger: WorkflowTrigger): FormArray {
+    const filters = new FormArray([])
+
+    for (const definition of this.filterDefinitions) {
+      const handler = FILTER_HANDLERS[definition.id]
+      if (!handler) {
+        continue
+      }
+
+      const value = handler.extract(trigger)
+      if (!handler.hasValue(value)) {
+        continue
+      }
+
+      filters.push(this.createFilterFormGroup(definition.id, value))
+    }
+
+    return filters
+  }
+
+  getFiltersFormArray(formGroup: FormGroup): FormArray {
+    return formGroup.get('filters') as FormArray
+  }
+
+  getFilterTypeOptions(formGroup: FormGroup, filterIndex: number) {
+    const filters = this.getFiltersFormArray(formGroup)
+    const options = this.getFilterTypeOptionsForArray(filters)
+    const currentType = filters.at(filterIndex).get('type')
+      .value as TriggerFilterType
+    const usedTypes = new Set(
+      filters.controls.map(
+        (control) => control.get('type').value as TriggerFilterType
+      )
+    )
+
+    for (const option of options) {
+      if (option.allowMultipleEntries) {
+        option.disabled = false
+        continue
+      }
+
+      option.disabled = usedTypes.has(option.id) && option.id !== currentType
+    }
+
+    return options
+  }
+
+  canAddFilter(formGroup: FormGroup): boolean {
+    const filters = this.getFiltersFormArray(formGroup)
+    const usedTypes = new Set(
+      filters.controls.map(
+        (control) => control.get('type').value as TriggerFilterType
+      )
+    )
+
+    return this.filterDefinitions.some((definition) => {
+      if (definition.allowMultipleEntries) {
+        return true
+      }
+      return !usedTypes.has(definition.id)
+    })
+  }
+
+  addFilter(triggerFormGroup: FormGroup): FormGroup | null {
+    const triggerIndex = this.triggerFields.controls.indexOf(triggerFormGroup)
+    if (triggerIndex === -1) {
+      return null
+    }
+
+    const filters = this.getFiltersFormArray(triggerFormGroup)
+
+    const availableDefinition = this.filterDefinitions.find((definition) => {
+      if (definition.allowMultipleEntries) {
+        return true
+      }
+      return !filters.controls.some(
+        (control) => control.get('type').value === definition.id
+      )
+    })
+
+    if (!availableDefinition) {
+      return null
+    }
+
+    filters.push(this.createFilterFormGroup(availableDefinition.id))
+    triggerFormGroup.markAsDirty()
+    triggerFormGroup.markAsTouched()
+
+    return filters.at(-1) as FormGroup
+  }
+
+  removeFilter(triggerFormGroup: FormGroup, filterIndex: number) {
+    const triggerIndex = this.triggerFields.controls.indexOf(triggerFormGroup)
+    if (triggerIndex === -1) {
+      return
+    }
+
+    const filters = this.getFiltersFormArray(triggerFormGroup)
+    const filterGroup = filters.at(filterIndex) as FormGroup
+    if (filterGroup?.get('type').value === TriggerFilterType.CustomFieldQuery) {
+      this.clearCustomFieldQueryModel(filterGroup)
+    }
+    filters.removeAt(filterIndex)
+    triggerFormGroup.markAsDirty()
+    triggerFormGroup.markAsTouched()
+  }
+
+  getFilterDefinition(
+    type: TriggerFilterType
+  ): TriggerFilterDefinition | undefined {
+    return this.filterDefinitions.find((definition) => definition.id === type)
+  }
+
+  getFilterName(type: TriggerFilterType): string {
+    return this.getFilterDefinition(type)?.name ?? ''
+  }
+
+  isTagsFilter(type: TriggerFilterType): boolean {
+    return this.getFilterDefinition(type)?.inputType === 'tags'
+  }
+
+  isCustomFieldQueryFilter(type: TriggerFilterType): boolean {
+    return this.getFilterDefinition(type)?.inputType === 'customFieldQuery'
+  }
+
+  isMultiValueFilter(type: TriggerFilterType): boolean {
+    switch (type) {
+      case TriggerFilterType.TagsAny:
+      case TriggerFilterType.TagsAll:
+      case TriggerFilterType.TagsNone:
+      case TriggerFilterType.CorrespondentAny:
+      case TriggerFilterType.CorrespondentNot:
+      case TriggerFilterType.DocumentTypeAny:
+      case TriggerFilterType.DocumentTypeNot:
+      case TriggerFilterType.StoragePathAny:
+      case TriggerFilterType.StoragePathNot:
+        return true
+      default:
+        return false
+    }
+  }
+
+  isSelectMultiple(type: TriggerFilterType): boolean {
+    return !this.isTagsFilter(type) && this.isMultiValueFilter(type)
+  }
+
+  getFilterSelectItems(type: TriggerFilterType) {
+    const definition = this.getFilterDefinition(type)
+    if (!definition || definition.inputType !== 'select') {
+      return []
+    }
+
+    switch (definition.selectItems) {
+      case 'correspondents':
+        return this.correspondents
+      case 'documentTypes':
+        return this.documentTypes
+      case 'storagePaths':
+        return this.storagePaths
+      default:
+        return []
+    }
+  }
+
+  getCustomFieldQueryModel(control: AbstractControl): CustomFieldQueriesModel {
+    return this.ensureCustomFieldQueryModel(control as FormGroup)
+  }
+
+  onCustomFieldQuerySelectionChange(
+    control: AbstractControl,
+    model: CustomFieldQueriesModel
+  ) {
+    this.onCustomFieldQueryModelChanged(control as FormGroup, model)
+  }
+
+  isCustomFieldQueryValid(control: AbstractControl): boolean {
+    const model = this.getStoredCustomFieldQueryModel(control as FormGroup)
+    if (!model) {
+      return true
+    }
+
+    return model.isEmpty() || model.isValid()
+  }
+
+  private getFilterTypeOptionsForArray(
+    filters: FormArray
+  ): TriggerFilterOption[] {
+    let cached = this.triggerFilterOptionsMap.get(filters)
+    if (!cached) {
+      cached = this.filterDefinitions.map((definition) => ({
+        ...definition,
+        disabled: false,
+      }))
+      this.triggerFilterOptionsMap.set(filters, cached)
+    }
+    return cached
+  }
+
+  private ensureCustomFieldQueryModel(
+    filterGroup: FormGroup,
+    initialValue?: any
+  ): CustomFieldQueriesModel {
+    const existingModel = this.getStoredCustomFieldQueryModel(filterGroup)
+    if (existingModel) {
+      return existingModel
+    }
+
+    const model = new CustomFieldQueriesModel()
+    this.setCustomFieldQueryModel(filterGroup, model)
+
+    const rawValue =
+      typeof initialValue === 'string'
+        ? initialValue
+        : (filterGroup.get('values').value as string)
+
+    if (rawValue) {
+      try {
+        const parsed = JSON.parse(rawValue)
+        const expression = new CustomFieldQueryExpression(parsed)
+        model.queries = [expression]
+      } catch {
+        model.clear(false)
+        model.addInitialAtom()
+      }
+    }
+
+    const subscription = model.changed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.onCustomFieldQueryModelChanged(filterGroup, model)
+      })
+    filterGroup[CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY]?.unsubscribe()
+    filterGroup[CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY] = subscription
+
+    this.onCustomFieldQueryModelChanged(filterGroup, model)
+
+    return model
+  }
+
+  private clearCustomFieldQueryModel(filterGroup: FormGroup) {
+    const group = filterGroup as CustomFieldFilterGroup
+    group[CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY]?.unsubscribe()
+    delete group[CUSTOM_FIELD_QUERY_SUBSCRIPTION_KEY]
+    delete group[CUSTOM_FIELD_QUERY_MODEL_KEY]
+  }
+
+  private getStoredCustomFieldQueryModel(
+    filterGroup: FormGroup
+  ): CustomFieldQueriesModel | null {
+    return (
+      (filterGroup as CustomFieldFilterGroup)[CUSTOM_FIELD_QUERY_MODEL_KEY] ??
+      null
+    )
+  }
+
+  private setCustomFieldQueryModel(
+    filterGroup: FormGroup,
+    model: CustomFieldQueriesModel
+  ) {
+    const group = filterGroup as CustomFieldFilterGroup
+    group[CUSTOM_FIELD_QUERY_MODEL_KEY] = model
+  }
+
+  private onCustomFieldQueryModelChanged(
+    filterGroup: FormGroup,
+    model: CustomFieldQueriesModel
+  ) {
+    const control = filterGroup.get('values')
+    if (!control) {
+      return
+    }
+
+    if (!model.isValid()) {
+      control.setValue(null, { emitEvent: false })
+      return
+    }
+
+    if (model.isEmpty()) {
+      control.setValue(null, { emitEvent: false })
+      return
+    }
+
+    const serialized = JSON.stringify(model.queries[0].serialize())
+    control.setValue(serialized, { emitEvent: false })
+  }
+
+  private getDefaultFilterValue(type: TriggerFilterType) {
+    if (type === TriggerFilterType.CustomFieldQuery) {
+      return null
+    }
+    return this.isMultiValueFilter(type) ? [] : null
+  }
+
+  private normalizeFilterValue(type: TriggerFilterType, value?: any) {
+    if (value === undefined || value === null) {
+      return this.getDefaultFilterValue(type)
+    }
+
+    if (type === TriggerFilterType.CustomFieldQuery) {
+      if (typeof value === 'string') {
+        return value
+      }
+      return value ? JSON.stringify(value) : null
+    }
+
+    if (this.isMultiValueFilter(type)) {
+      return Array.isArray(value) ? [...value] : [value]
+    }
+
+    if (Array.isArray(value)) {
+      return value.length > 0 ? value[0] : null
+    }
+
+    return value
+  }
+
   private createTriggerField(
     trigger: WorkflowTrigger,
     emitEvent: boolean = false
@@ -405,16 +1127,7 @@ export class WorkflowEditDialogComponent
         matching_algorithm: new FormControl(trigger.matching_algorithm),
         match: new FormControl(trigger.match),
         is_insensitive: new FormControl(trigger.is_insensitive),
-        filter_has_tags: new FormControl(trigger.filter_has_tags),
-        filter_has_correspondent: new FormControl(
-          trigger.filter_has_correspondent
-        ),
-        filter_has_document_type: new FormControl(
-          trigger.filter_has_document_type
-        ),
-        filter_has_storage_path: new FormControl(
-          trigger.filter_has_storage_path
-        ),
+        filters: this.buildFiltersFormArray(trigger),
         schedule_offset_days: new FormControl(trigger.schedule_offset_days),
         schedule_is_recurring: new FormControl(trigger.schedule_is_recurring),
         schedule_recurring_interval_days: new FormControl(
@@ -493,11 +1206,25 @@ export class WorkflowEditDialogComponent
           headers: new FormControl(action.webhook?.headers),
           include_document: new FormControl(!!action.webhook?.include_document),
         }),
+        passwords: new FormControl(
+          this.formatPasswords(action.passwords ?? [])
+        ),
       }),
       { emitEvent }
     )
   }
 
+  private formatPasswords(passwords: string[] = []): string {
+    return passwords.join('\n')
+  }
+
+  private parsePasswords(value: string = ''): string[] {
+    return value
+      .split(/[\n,]+/)
+      .map((entry) => entry.trim())
+      .filter((entry) => entry.length > 0)
+  }
+
   private updateAllTriggerActionFields(emitEvent: boolean = false) {
     this.triggerFields.clear({ emitEvent: false })
     this.object?.triggers.forEach((trigger) => {
@@ -537,6 +1264,15 @@ export class WorkflowEditDialogComponent
       filter_path: null,
       filter_mailrule: null,
       filter_has_tags: [],
+      filter_has_all_tags: [],
+      filter_has_not_tags: [],
+      filter_has_any_correspondents: [],
+      filter_has_not_correspondents: [],
+      filter_has_any_document_types: [],
+      filter_has_not_document_types: [],
+      filter_has_any_storage_paths: [],
+      filter_has_not_storage_paths: [],
+      filter_custom_field_query: null,
       filter_has_correspondent: null,
       filter_has_document_type: null,
       filter_has_storage_path: null,
@@ -613,6 +1349,7 @@ export class WorkflowEditDialogComponent
         headers: null,
         include_document: false,
       },
+      passwords: [],
     }
     this.object.actions.push(action)
     this.createActionField(action)
@@ -637,11 +1374,6 @@ export class WorkflowEditDialogComponent
     const actionField = this.actionFields.at(event.previousIndex)
     this.actionFields.removeAt(event.previousIndex)
     this.actionFields.insert(event.currentIndex, actionField)
-    // removing id will effectively re-create the actions in this order
-    this.object.actions.forEach((a) => (a.id = null))
-    this.actionFields.controls.forEach((c) =>
-      c.get('id').setValue(null, { emitEvent: false })
-    )
   }
 
   save(): void {
@@ -654,6 +1386,7 @@ export class WorkflowEditDialogComponent
         if (action.type !== WorkflowActionType.Email) {
           action.email = null
         }
+        action.passwords = this.parsePasswords(action.passwords as any)
       })
     super.save()
   }

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.html

@@ -1,5 +1,9 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <h4 class="modal-title" id="modal-basic-title" i18n>{
+      documentIds.length,
+      plural,
+      =1 {Email Document} other {Email {{documentIds.length}} Documents}
+    }</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
 <div class="modal-body">
@@ -22,11 +26,14 @@
             <input class="form-check-input mt-0 me-2" type="checkbox" role="switch" id="useArchiveVersion" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
             <label class="form-check-label w-100 text-start" for="useArchiveVersion" i18n>Use archive version</label>
         </div>
-        <button type="submit" class="btn btn-outline-primary" (click)="emailDocument()" [disabled]="loading || emailAddress.length === 0 || emailMessage.length === 0 || emailSubject.length === 0">
+        <button type="submit" class="btn btn-outline-primary" (click)="emailDocuments()" [disabled]="loading || emailAddress.length === 0 || emailMessage.length === 0 || emailSubject.length === 0">
             @if (loading) {
                 <div class="spinner-border spinner-border-sm me-2" role="status"></div>
             }
             <ng-container i18n>Send email</ng-container>
         </button>
     </div>
+    <div class="text-light fst-italic small mt-2">
+        <ng-container i18n>Some email servers may reject messages with large attachments.</ng-container>
+    </div>
 </div>

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts

@@ -36,31 +36,59 @@ describe('EmailDocumentDialogComponent', () => {
     documentService = TestBed.inject(DocumentService)
     toastService = TestBed.inject(ToastService)
     component = fixture.componentInstance
+    component.documentIds = [1]
     fixture.detectChanges()
   })
 
   it('should set hasArchiveVersion and useArchiveVersion', () => {
     expect(component.hasArchiveVersion).toBeTruthy()
+    expect(component.useArchiveVersion).toBeTruthy()
+
     component.hasArchiveVersion = false
     expect(component.hasArchiveVersion).toBeFalsy()
     expect(component.useArchiveVersion).toBeFalsy()
   })
 
-  it('should support sending document via email, showing error if needed', () => {
+  it('should support sending single document via email, showing error if needed', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
+    component.documentIds = [1]
     component.emailAddress = 'hello@paperless-ngx.com'
     component.emailSubject = 'Hello'
     component.emailMessage = 'World'
     jest
-      .spyOn(documentService, 'emailDocument')
+      .spyOn(documentService, 'emailDocuments')
       .mockReturnValue(throwError(() => new Error('Unable to email document')))
-    component.emailDocument()
-    expect(toastErrorSpy).toHaveBeenCalled()
+    component.emailDocuments()
+    expect(toastErrorSpy).toHaveBeenCalledWith(
+      'Error emailing document',
+      expect.any(Error)
+    )
 
-    jest.spyOn(documentService, 'emailDocument').mockReturnValue(of(true))
-    component.emailDocument()
-    expect(toastSuccessSpy).toHaveBeenCalled()
+    jest.spyOn(documentService, 'emailDocuments').mockReturnValue(of(true))
+    component.emailDocuments()
+    expect(toastSuccessSpy).toHaveBeenCalledWith('Email sent')
+  })
+
+  it('should support sending multiple documents via email, showing appropriate messages', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
+    component.documentIds = [1, 2, 3]
+    component.emailAddress = 'hello@paperless-ngx.com'
+    component.emailSubject = 'Hello'
+    component.emailMessage = 'World'
+    jest
+      .spyOn(documentService, 'emailDocuments')
+      .mockReturnValue(throwError(() => new Error('Unable to email documents')))
+    component.emailDocuments()
+    expect(toastErrorSpy).toHaveBeenCalledWith(
+      'Error emailing documents',
+      expect.any(Error)
+    )
+
+    jest.spyOn(documentService, 'emailDocuments').mockReturnValue(of(true))
+    component.emailDocuments()
+    expect(toastSuccessSpy).toHaveBeenCalledWith('Email sent')
   })
 
   it('should close the dialog', () => {

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts

@@ -18,10 +18,7 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
   private toastService = inject(ToastService)
 
   @Input()
-  title = $localize`Email Document`
-
-  @Input()
-  documentId: number
+  documentIds: number[]
 
   private _hasArchiveVersion: boolean = true
 
@@ -46,11 +43,11 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
     this.loading = false
   }
 
-  public emailDocument() {
+  public emailDocuments() {
     this.loading = true
     this.documentService
-      .emailDocument(
-        this.documentId,
+      .emailDocuments(
+        this.documentIds,
         this.emailAddress,
         this.emailSubject,
         this.emailMessage,
@@ -67,7 +64,11 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
         },
         error: (e) => {
           this.loading = false
-          this.toastService.showError($localize`Error emailing document`, e)
+          const errorMessage =
+            this.documentIds.length > 1
+              ? $localize`Error emailing documents`
+              : $localize`Error emailing document`
+          this.toastService.showError(errorMessage, e)
         },
       })
   }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -34,8 +34,8 @@
         </div>
       </div>
       @if (selectionModel.items) {
-        <div class="items" #buttonItems>
-          @for (item of selectionModel.items | filter: filterText:'name'; track item; let i = $index) {
+        <cdk-virtual-scroll-viewport class="items" [itemSize]="FILTERABLE_BUTTON_HEIGHT_PX" #buttonsViewport [style.height.px]="scrollViewportHeight">
+          <div *cdkVirtualFor="let item of selectionModel.items | filter: filterText:'name'; trackBy: trackByItem; let i = index">
             @if (allowSelectNone || item.id) {
               <pngx-toggleable-dropdown-button
                 [item]="item"
@@ -45,12 +45,11 @@
                 [count]="getUpdatedDocumentCount(item.id)"
                 (toggled)="selectionModel.toggle(item.id)"
                 (exclude)="excludeClicked(item.id)"
-                (click)="setButtonItemIndex(i - 1)"
                 [disabled]="disabled">
               </pngx-toggleable-dropdown-button>
             }
-          }
-        </div>
+          </div>
+        </cdk-virtual-scroll-viewport>
       }
       @if (editing) {
         @if ((selectionModel.items | filter: filterText:'name').length === 0 && createRef !== undefined) {

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -1,3 +1,4 @@
+import { ScrollingModule } from '@angular/cdk/scrolling'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
@@ -64,7 +65,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
       ],
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+      imports: [NgxBootstrapIconsModule.pick(allIcons), ScrollingModule],
     }).compileComponents()
 
     hotkeyService = TestBed.inject(HotKeyService)
@@ -265,18 +266,11 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     expect(document.activeElement).toEqual(
       component.listFilterTextInput.nativeElement
     )
-    expect(
-      Array.from(
-        (fixture.nativeElement as HTMLDivElement).querySelectorAll('button')
-      ).filter((b) => b.textContent.includes('Tag'))
-    ).toHaveLength(2)
+    expect(component.buttonsViewport.getRenderedRange().end).toEqual(3) // all items shown
+
     component.filterText = 'Tag2'
     fixture.detectChanges()
-    expect(
-      Array.from(
-        (fixture.nativeElement as HTMLDivElement).querySelectorAll('button')
-      ).filter((b) => b.textContent.includes('Tag'))
-    ).toHaveLength(1)
+    expect(component.buttonsViewport.getRenderedRange().end).toEqual(1) // filtered
     component.dropdown.close()
     expect(component.filterText).toHaveLength(0)
   }))
@@ -331,6 +325,8 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
     tick(100)
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
       component.listFilterTextInput.nativeElement
     expect(document.activeElement).toEqual(filterInputEl)
@@ -376,6 +372,8 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
     tick(100)
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
       component.listFilterTextInput.nativeElement
     expect(document.activeElement).toEqual(filterInputEl)
@@ -412,6 +410,8 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
     tick(100)
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
       component.listFilterTextInput.nativeElement
     expect(document.activeElement).toEqual(filterInputEl)
@@ -564,6 +564,208 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     ])
   })
 
+  it('keeps children with their parent when parent has document count', () => {
+    const parent: Tag = {
+      id: 10,
+      name: 'Parent Tag',
+      orderIndex: 0,
+      document_count: 2,
+    }
+    const child: Tag = {
+      id: 11,
+      name: 'Child Tag',
+      parent: parent.id,
+      orderIndex: 1,
+      document_count: 0,
+    }
+    const otherRoot: Tag = {
+      id: 20,
+      name: 'Other Tag',
+      orderIndex: 2,
+      document_count: 0,
+    }
+
+    component.selectionModel.items = [parent, child, otherRoot]
+    component.selectionModel = selectionModel
+    component.documentCounts = [
+      { id: parent.id, document_count: 2 },
+      { id: otherRoot.id, document_count: 0 },
+    ]
+    selectionModel.apply()
+
+    expect(component.selectionModel.items).toEqual([
+      nullItem,
+      parent,
+      child,
+      otherRoot,
+    ])
+  })
+
+  it('keeps selected branches ahead of document-based ordering', () => {
+    const selectedRoot: Tag = {
+      id: 30,
+      name: 'Selected Root',
+      orderIndex: 0,
+      document_count: 0,
+    }
+    const otherRoot: Tag = {
+      id: 40,
+      name: 'Other Root',
+      orderIndex: 1,
+      document_count: 2,
+    }
+
+    component.selectionModel.items = [selectedRoot, otherRoot]
+    component.selectionModel = selectionModel
+    selectionModel.set(selectedRoot.id, ToggleableItemState.Selected)
+    component.documentCounts = [
+      { id: selectedRoot.id, document_count: 0 },
+      { id: otherRoot.id, document_count: 2 },
+    ]
+    selectionModel.apply()
+
+    expect(component.selectionModel.items).toEqual([
+      nullItem,
+      selectedRoot,
+      otherRoot,
+    ])
+  })
+
+  it('resorts items immediately when document count sorting enabled', () => {
+    const apple: Tag = { id: 55, name: 'Apple' }
+    const zebra: Tag = { id: 56, name: 'Zebra' }
+
+    selectionModel.documentCountSortingEnabled = true
+    selectionModel.items = [apple, zebra]
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      apple.id,
+      zebra.id,
+    ])
+
+    selectionModel.documentCounts = [
+      { id: zebra.id, document_count: 5 },
+      { id: apple.id, document_count: 0 },
+    ]
+
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      zebra.id,
+      apple.id,
+    ])
+  })
+
+  it('does not resort items by default when document counts are set', () => {
+    const first: Tag = { id: 57, name: 'First' }
+    const second: Tag = { id: 58, name: 'Second' }
+
+    selectionModel.items = [first, second]
+    selectionModel.documentCounts = [
+      { id: second.id, document_count: 10 },
+      { id: first.id, document_count: 0 },
+    ]
+
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      first.id,
+      second.id,
+    ])
+  })
+
+  it('uses fallback document counts when selection data is missing', () => {
+    const fallbackRoot: Tag = {
+      id: 50,
+      name: 'Fallback Root',
+      orderIndex: 0,
+      document_count: 3,
+    }
+    const fallbackChild: Tag = {
+      id: 51,
+      name: 'Fallback Child',
+      parent: fallbackRoot.id,
+      orderIndex: 1,
+      document_count: 0,
+    }
+    const otherRoot: Tag = {
+      id: 60,
+      name: 'Other Root',
+      orderIndex: 2,
+      document_count: 0,
+    }
+
+    component.selectionModel = selectionModel
+    selectionModel.items = [fallbackRoot, fallbackChild, otherRoot]
+    component.documentCounts = [{ id: otherRoot.id, document_count: 0 }]
+
+    selectionModel.apply()
+
+    expect(selectionModel.items).toEqual([
+      nullItem,
+      fallbackRoot,
+      fallbackChild,
+      otherRoot,
+    ])
+  })
+
+  it('handles special and non-numeric ids when promoting branches', () => {
+    const rootWithDocs: Tag = {
+      id: 70,
+      name: 'Root With Docs',
+      orderIndex: 0,
+      document_count: 1,
+    }
+    const miscItem: any = { id: 'misc', name: 'Misc Item' }
+
+    component.selectionModel = selectionModel
+    selectionModel.intersection = Intersection.Exclude
+    selectionModel.items = [rootWithDocs, miscItem as any]
+    component.documentCounts = [{ id: rootWithDocs.id, document_count: 1 }]
+
+    selectionModel.apply()
+
+    expect(selectionModel.items.map((item) => item.id)).toEqual([
+      NEGATIVE_NULL_FILTER_VALUE,
+      rootWithDocs.id,
+      'misc',
+    ])
+  })
+
+  it('memoizes root document counts between lookups', () => {
+    const memoRoot: Tag = { id: 80, name: 'Memo Root' }
+    selectionModel.items = [memoRoot]
+    selectionModel.documentCounts = [{ id: memoRoot.id, document_count: 9 }]
+
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+
+    expect(getRootDocCount(memoRoot.id)).toEqual(9)
+    selectionModel.documentCounts = []
+    expect(getRootDocCount(memoRoot.id)).toEqual(9)
+  })
+
+  it('falls back to model stored document counts if selection data missing entry', () => {
+    const rootWithoutSelection: Tag = {
+      id: 90,
+      name: 'Fallback Root',
+      document_count: 4,
+    }
+    selectionModel.items = [rootWithoutSelection]
+    selectionModel.documentCounts = []
+
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+
+    expect(getRootDocCount(rootWithoutSelection.id)).toEqual(4)
+  })
+
+  it('defaults to zero document count when neither selection nor model provide it', () => {
+    const rootWithoutCounts: Tag = { id: 91, name: 'Fallback Zero Root' }
+    selectionModel.items = [rootWithoutCounts]
+    selectionModel.documentCounts = []
+
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+
+    expect(getRootDocCount(rootWithoutCounts.id)).toEqual(0)
+  })
+
   it('should set support create, keep open model and call createRef method', fakeAsync(() => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -1,3 +1,7 @@
+import {
+  CdkVirtualScrollViewport,
+  ScrollingModule,
+} from '@angular/cdk/scrolling'
 import { NgClass } from '@angular/common'
 import {
   Component,
@@ -32,6 +36,14 @@ export interface ChangedItems {
   itemsToRemove: MatchingModel[]
 }
 
+type BranchSummary = {
+  items: MatchingModel[]
+  firstIndex: number
+  special: boolean
+  selected: boolean
+  hasDocs: boolean
+}
+
 export enum LogicalOperator {
   And = 'and',
   Or = 'or',
@@ -53,8 +65,13 @@ export class FilterableDropdownSelectionModel {
   temporaryIntersection: Intersection = this._intersection
 
   private _documentCounts: SelectionDataItem[] = []
+  public documentCountSortingEnabled = false
+
   public set documentCounts(counts: SelectionDataItem[]) {
     this._documentCounts = counts
+    if (this.documentCountSortingEnabled) {
+      this.sortItems()
+    }
   }
 
   private _items: MatchingModel[] = []
@@ -147,6 +164,10 @@ export class FilterableDropdownSelectionModel {
         return a.name.localeCompare(b.name)
       }
     })
+
+    if (this._documentCounts.length) {
+      this.promoteBranchesWithDocumentCounts()
+    }
   }
 
   private selectionStates = new Map<number, ToggleableItemState>()
@@ -380,6 +401,180 @@ export class FilterableDropdownSelectionModel {
     return this._documentCounts.find((c) => c.id === id)?.document_count
   }
 
+  private promoteBranchesWithDocumentCounts() {
+    const parentById = this.buildParentById()
+    const findRootId = this.createRootFinder(parentById)
+    const getRootDocCount = this.createRootDocCounter()
+    const summaries = this.buildBranchSummaries(findRootId, getRootDocCount)
+    const orderedBranches = this.orderBranchesByPriority(summaries)
+
+    this._items = orderedBranches.flatMap((summary) => summary.items)
+  }
+
+  private buildParentById(): Map<number, number | null> {
+    const parentById = new Map<number, number | null>()
+
+    for (const item of this._items) {
+      if (typeof item?.id === 'number') {
+        const parentValue = (item as any)['parent']
+        parentById.set(
+          item.id,
+          typeof parentValue === 'number' ? parentValue : null
+        )
+      }
+    }
+
+    return parentById
+  }
+
+  private createRootFinder(
+    parentById: Map<number, number | null>
+  ): (id: number) => number {
+    const rootMemo = new Map<number, number>()
+
+    const findRootId = (id: number): number => {
+      const cached = rootMemo.get(id)
+      if (cached !== undefined) {
+        return cached
+      }
+
+      const parentId = parentById.get(id)
+      if (parentId === undefined || parentId === null) {
+        rootMemo.set(id, id)
+        return id
+      }
+
+      const rootId = findRootId(parentId)
+      rootMemo.set(id, rootId)
+      return rootId
+    }
+
+    return findRootId
+  }
+
+  private createRootDocCounter(): (rootId: number) => number {
+    const docCountMemo = new Map<number, number>()
+
+    return (rootId: number): number => {
+      const cached = docCountMemo.get(rootId)
+      if (cached !== undefined) {
+        return cached
+      }
+
+      const explicit = this.getDocumentCount(rootId)
+      if (typeof explicit === 'number') {
+        docCountMemo.set(rootId, explicit)
+        return explicit
+      }
+
+      const rootItem = this._items.find((i) => i.id === rootId)
+      const fallback =
+        typeof (rootItem as any)?.['document_count'] === 'number'
+          ? (rootItem as any)['document_count']
+          : 0
+
+      docCountMemo.set(rootId, fallback)
+      return fallback
+    }
+  }
+
+  private buildBranchSummaries(
+    findRootId: (id: number) => number,
+    getRootDocCount: (rootId: number) => number
+  ): Map<string, BranchSummary> {
+    const summaries = new Map<string, BranchSummary>()
+
+    for (const [index, item] of this._items.entries()) {
+      const { key, special, rootId } = this.describeBranchItem(
+        item,
+        index,
+        findRootId
+      )
+
+      let summary = summaries.get(key)
+      if (!summary) {
+        summary = {
+          items: [],
+          firstIndex: index,
+          special,
+          selected: false,
+          hasDocs:
+            special || rootId === null ? false : getRootDocCount(rootId) > 0,
+        }
+        summaries.set(key, summary)
+      }
+
+      summary.items.push(item)
+
+      if (this.shouldMarkSummarySelected(summary, item)) {
+        summary.selected = true
+      }
+    }
+
+    return summaries
+  }
+
+  private describeBranchItem(
+    item: MatchingModel,
+    index: number,
+    findRootId: (id: number) => number
+  ): { key: string; special: boolean; rootId: number | null } {
+    if (item?.id === null) {
+      return { key: 'null', special: true, rootId: null }
+    }
+
+    if (item?.id === NEGATIVE_NULL_FILTER_VALUE) {
+      return { key: 'neg-null', special: true, rootId: null }
+    }
+
+    if (typeof item?.id === 'number') {
+      const rootId = findRootId(item.id)
+      return { key: `root-${rootId}`, special: false, rootId }
+    }
+
+    return { key: `misc-${index}`, special: false, rootId: null }
+  }
+
+  private shouldMarkSummarySelected(
+    summary: BranchSummary,
+    item: MatchingModel
+  ): boolean {
+    if (summary.special) {
+      return false
+    }
+
+    if (typeof item?.id !== 'number') {
+      return false
+    }
+
+    return this.getNonTemporary(item.id) !== ToggleableItemState.NotSelected
+  }
+
+  private orderBranchesByPriority(
+    summaries: Map<string, BranchSummary>
+  ): BranchSummary[] {
+    return Array.from(summaries.values()).sort((a, b) => {
+      const rankDiff = this.branchRank(a) - this.branchRank(b)
+      if (rankDiff !== 0) {
+        return rankDiff
+      }
+      if (a.hasDocs !== b.hasDocs) {
+        return a.hasDocs ? -1 : 1
+      }
+      return a.firstIndex - b.firstIndex
+    })
+  }
+
+  private branchRank(summary: BranchSummary): number {
+    if (summary.special) {
+      return -1
+    }
+    if (summary.selected) {
+      return 0
+    }
+    return 1
+  }
+
   init(map: Map<number, ToggleableItemState>) {
     this.temporarySelectionStates = map
     this.apply()
@@ -436,18 +631,27 @@ export class FilterableDropdownSelectionModel {
     NgxBootstrapIconsModule,
     NgbDropdownModule,
     NgClass,
+    ScrollingModule,
   ],
 })
 export class FilterableDropdownComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
+  public readonly FILTERABLE_BUTTON_HEIGHT_PX = 42
+
   private filterPipe = inject(FilterPipe)
   private hotkeyService = inject(HotKeyService)
 
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
   @ViewChild('dropdown') dropdown: NgbDropdown
-  @ViewChild('buttonItems') buttonItems: ElementRef
+  @ViewChild('buttonsViewport') buttonsViewport: CdkVirtualScrollViewport
+
+  private get renderedButtons(): Array<HTMLButtonElement> {
+    return Array.from(
+      this.buttonsViewport.elementRef.nativeElement.querySelectorAll('button')
+    )
+  }
 
   public popperOptions = pngxPopperOptions
 
@@ -465,8 +669,9 @@ export class FilterableDropdownComponent
       this.selectionModel.changed.complete()
       model.items = this.selectionModel.items
       model.manyToOne = this.selectionModel.manyToOne
-      model.singleSelect = this.editing && !this.selectionModel.manyToOne
+      model.singleSelect = this._editing && !model.manyToOne
     }
+    model.documentCountSortingEnabled = this._editing
     model.changed.subscribe((updatedModel) => {
       this.selectionModelChange.next(updatedModel)
     })
@@ -496,8 +701,21 @@ export class FilterableDropdownComponent
   @Input()
   allowSelectNone: boolean = false
 
+  private _editing = false
+
   @Input()
-  editing = false
+  set editing(value: boolean) {
+    this._editing = value
+    if (this.selectionModel) {
+      this.selectionModel.singleSelect =
+        this._editing && !this.selectionModel.manyToOne
+      this.selectionModel.documentCountSortingEnabled = this._editing
+    }
+  }
+
+  get editing() {
+    return this._editing
+  }
 
   @Input()
   applyOnClose = false
@@ -547,6 +765,14 @@ export class FilterableDropdownComponent
 
   private keyboardIndex: number
 
+  public get scrollViewportHeight(): number {
+    const filteredLength = this.filterPipe.transform(
+      this.items,
+      this.filterText
+    ).length
+    return Math.min(filteredLength * this.FILTERABLE_BUTTON_HEIGHT_PX, 400)
+  }
+
   constructor() {
     super()
     this.selectionModelChange.subscribe((updatedModel) => {
@@ -571,6 +797,10 @@ export class FilterableDropdownComponent
     }
   }
 
+  public trackByItem(index: number, item: MatchingModel) {
+    return item?.id ?? index
+  }
+
   applyClicked() {
     if (this.selectionModel.isDirty()) {
       this.dropdown.close()
@@ -589,6 +819,7 @@ export class FilterableDropdownComponent
     if (open) {
       setTimeout(() => {
         this.listFilterTextInput?.nativeElement.focus()
+        this.buttonsViewport?.checkViewportSize()
       }, 0)
       if (this.editing) {
         this.selectionModel.reset()
@@ -656,12 +887,14 @@ export class FilterableDropdownComponent
             event.preventDefault()
           }
         } else if (event.target instanceof HTMLButtonElement) {
+          this.syncKeyboardIndexFromButton(event.target)
           this.focusNextButtonItem()
           event.preventDefault()
         }
         break
       case 'ArrowUp':
         if (event.target instanceof HTMLButtonElement) {
+          this.syncKeyboardIndexFromButton(event.target)
           if (this.keyboardIndex === 0) {
             this.listFilterTextInput.nativeElement.focus()
           } else {
@@ -698,15 +931,18 @@ export class FilterableDropdownComponent
     if (setFocus) this.setButtonItemFocus()
   }
 
-  setButtonItemFocus() {
-    this.buttonItems.nativeElement.children[
-      this.keyboardIndex
-    ]?.children[0].focus()
+  private syncKeyboardIndexFromButton(button: HTMLButtonElement) {
+    // because of virtual scrolling, re-calculate the index
+    const idx = this.renderedButtons.indexOf(button)
+    if (idx >= 0) {
+      this.keyboardIndex = this.buttonsViewport.getRenderedRange().start + idx
+    }
   }
 
-  setButtonItemIndex(index: number) {
-    // just track the index in case user uses arrows
-    this.keyboardIndex = index
+  setButtonItemFocus() {
+    const offset =
+      this.keyboardIndex - this.buttonsViewport.getRenderedRange().start
+    this.renderedButtons[offset]?.focus()
   }
 
   hideCount(item: ObjectWithPermissions) {

src-ui/src/app/components/common/input/color/color.component.html

@@ -1,19 +1,18 @@
 <div class="mb-3">
   @if (title) {
-    <label [for]="inputId">{{title}}</label>
+    <label class="form-label" [for]="inputId">{{title}}</label>
   }
 
   <div class="input-group" [class.is-invalid]="error">
-    <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
+    <button type="button" class="input-group-text" [style.background-color]="value" (click)="colorPicker.toggle()">&nbsp;&nbsp;&nbsp;</button>
 
     <ng-template #popContent>
       <div style="min-width: 200px;" class="pb-3">
         <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
       </div>
-
     </ng-template>
 
-    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
+    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
 
     <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
       <i-bs name="dice5"></i-bs>

src-ui/src/app/components/common/input/color/color.component.spec.ts

@@ -42,8 +42,8 @@ describe('ColorComponent', () => {
   })
 
   it('should set swatch color', () => {
-    const swatch: HTMLSpanElement = fixture.nativeElement.querySelector(
-      'span.input-group-text'
+    const swatch: HTMLButtonElement = fixture.nativeElement.querySelector(
+      'button.input-group-text'
     )
     expect(swatch.style.backgroundColor).toEqual('')
     component.value = '#ff0000'

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html

@@ -14,7 +14,7 @@
     </div>
 </div>
 <div class="mt-2 align-items-center bg-light p-2">
-    <div class="d-flex flex-wrap flex-row gap-2 w-100"
+    <div class="d-flex flex-wrap flex-row gap-2 w-100" style="min-height: 1em;"
         cdkDropList #unselectedList="cdkDropList"
         cdkDropListOrientation="mixed"
         (cdkDropListDropped)="drop($event)"

src-ui/src/app/components/common/input/entries/entries.component.html

@@ -19,7 +19,7 @@
         </div>
       }
       @if (hint) {
-        <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        <small class="form-text text-muted" [innerHTML]="hint"></small>
       }
       <div class="invalid-feedback position-absolute top-100">
         {{error}}

src-ui/src/app/components/common/input/file/file.component.html

@@ -24,7 +24,7 @@
         }
         <input #inputField type="hidden" class="form-control small" [(ngModel)]="value" [disabled]="true">
         @if (hint) {
-            <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+            <small class="form-text text-muted" [innerHTML]="hint"></small>
         }
         <div class="invalid-feedback position-absolute top-100">
             {{error}}

src-ui/src/app/components/common/input/password/password.component.html

@@ -1,17 +1,24 @@
-<div class="mb-3">
-  <label class="form-label" [for]="inputId">{{title}}</label>
-  <div class="input-group" [class.is-invalid]="error">
-    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
-    @if (showReveal) {
-      <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
-        <i-bs name="eye"></i-bs>
-      </button>
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+    </div>
+  <div class="position-relative" [class.col-md-9]="horizontal">
+    <div class="input-group" [class.is-invalid]="error">
+      <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
+      @if (showReveal) {
+        <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
+          <i-bs name="eye"></i-bs>
+        </button>
+      }
+    </div>
+    <div class="invalid-feedback">
+      {{error}}
+    </div>
+    @if (hint) {
+      <small class="form-text text-muted" [innerHTML]="hint"></small>
     }
   </div>
-  <div class="invalid-feedback">
-    {{error}}
-  </div>
-  @if (hint) {
-    <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
-  }
 </div>

src-ui/src/app/components/common/input/select/select.component.html

@@ -1,66 +1,69 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
   <div class="row">
-    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      @if (title) {
-        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      }
-      @if (removable) {
-        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+    @if (title || removable) {
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        @if (title) {
+          <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        }
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            </button>
+        }
+      </div>
+    }
+    <div [class.col-md-9]="horizontal">
+      <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
+        <ng-select name="inputId" [(ngModel)]="value"
+          [disabled]="disabled"
+          [style.color]="textColor"
+          [style.background]="backgroundColor"
+          [class.private]="isPrivate"
+          [clearable]="allowNull"
+          [items]="items"
+          [addTag]="allowCreateNew && addItemRef"
+          addTagText="Add item"
+          i18n-addTagText="Used for both types, correspondents, storage paths"
+          [placeholder]="placeholder"
+          [notFoundText]="notFoundText"
+          [multiple]="multiple"
+          [bindLabel]="bindLabel"
+          bindValue="id"
+          [virtualScroll]="items?.length > 100"
+          (change)="onChange(value)"
+          (search)="onSearch($event)"
+          (focus)="clearLastSearchTerm()"
+          (clear)="clearLastSearchTerm()"
+          (blur)="onBlur()">
+          <ng-template ng-option-tmp let-item="item">
+              <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
+          </ng-template>
+        </ng-select>
+        @if (allowCreateNew && !hideAddButton) {
+          <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
+            <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
+          </button>
+        }
+        @if (showFilter) {
+          <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
+            <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
           </button>
         }
       </div>
-      <div [class.col-md-9]="horizontal">
-        <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
-          <ng-select name="inputId" [(ngModel)]="value"
-            [disabled]="disabled"
-            [style.color]="textColor"
-            [style.background]="backgroundColor"
-            [class.private]="isPrivate"
-            [clearable]="allowNull"
-            [items]="items"
-            [addTag]="allowCreateNew && addItemRef"
-            addTagText="Add item"
-            i18n-addTagText="Used for both types, correspondents, storage paths"
-            [placeholder]="placeholder"
-            [notFoundText]="notFoundText"
-            [multiple]="multiple"
-            [bindLabel]="bindLabel"
-            bindValue="id"
-            (change)="onChange(value)"
-            (search)="onSearch($event)"
-            (focus)="clearLastSearchTerm()"
-            (clear)="clearLastSearchTerm()"
-            (blur)="onBlur()">
-            <ng-template ng-option-tmp let-item="item">
-                <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
-            </ng-template>
-          </ng-select>
-          @if (allowCreateNew && !hideAddButton) {
-            <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
-              <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
-            </button>
-          }
-          @if (showFilter) {
-            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
-              <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
-            </button>
-          }
-        </div>
-        <div class="invalid-feedback">
-          {{error}}
-        </div>
-        @if (hint) {
-          <small class="form-text text-muted">{{hint}}</small>
-        }
-        @if (getSuggestions().length > 0) {
-          <small>
-            <span i18n>Suggestions:</span>&nbsp;
-            @for (s of getSuggestions(); track s) {
-              <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
-            }
-          </small>
-        }
+      <div class="invalid-feedback">
+        {{error}}
       </div>
+      @if (hint) {
+        <small class="form-text text-muted">{{hint}}</small>
+      }
+      @if (getSuggestions().length > 0) {
+        <small>
+          <span i18n>Suggestions:</span>&nbsp;
+          @for (s of getSuggestions(); track s) {
+            <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
+          }
+        </small>
+      }
     </div>
   </div>
+</div>

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,8 +1,10 @@
 <div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="getSuggestions().length > 0">
   <div class="row">
-    <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
-      <label class="form-label" [class.mb-md-0]="horizontal" for="tags">{{title}}</label>
-    </div>
+    @if (title) {
+      <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
+        <label class="form-label" [class.mb-md-0]="horizontal" for="tags">{{title}}</label>
+      </div>
+    }
     <div class="position-relative" [class.col-md-9]="horizontal">
       <div class="input-group flex-nowrap">
         <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
@@ -26,7 +28,7 @@
             </button>
           </ng-template>
           <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-            <div class="tag-option-row d-flex align-items-center">
+            <div class="tag-option-row d-flex align-items-center" [class.w-auto]="!getTag(item.id)?.parent">
               @if (item.id && tags) {
                 @if (getTag(item.id)?.parent) {
                   <i-bs name="list-nested" class="me-1"></i-bs>

src-ui/src/app/components/common/input/tags/tags.component.scss

@@ -22,8 +22,8 @@
 }
 
 // Dropdown hierarchy reveal for ng-select options
-::ng-deep .ng-dropdown-panel .ng-option {
-  overflow-x: scroll;
+:host ::ng-deep .ng-dropdown-panel .ng-option {
+  overflow-x: auto !important;
 
   .tag-option-row {
     font-size: 1rem;
@@ -41,12 +41,12 @@
   }
 }
 
-::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
-::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+:host ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
   max-width: 1000px;
 }
 
 ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
-::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
   background: transparent;
 }

src-ui/src/app/components/common/input/tags/tags.component.spec.ts

@@ -106,6 +106,7 @@ describe('TagsComponent', () => {
 
     modalService = TestBed.inject(NgbModal)
     settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 1 }
     fixture = TestBed.createComponent(TagsComponent)
     fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
     component = fixture.componentInstance
@@ -138,7 +139,7 @@ describe('TagsComponent', () => {
     settingsService.currentUser = { id: 1 }
     let activeInstances: NgbModalRef[]
     modalService.activeInstances.subscribe((v) => (activeInstances = v))
-    component.select.searchTerm = 'foobar'
+    component.select.filter('foobar')
     component.createTag()
     expect(modalService.hasOpenModals()).toBeTruthy()
     expect(activeInstances[0].componentInstance.object.name).toEqual('foobar')

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -169,7 +169,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     if (name) modal.componentInstance.object = { name: name }
     else if (this.select.searchTerm)
       modal.componentInstance.object = { name: this.select.searchTerm }
-    this.select.searchTerm = null
+    this.select.filter(null)
     this.select.detectChanges()
     return firstValueFrom(
       (modal.componentInstance as TagEditDialogComponent).succeeded.pipe(

src-ui/src/app/components/common/input/text/text.component.html

@@ -13,7 +13,13 @@
       <div class="position-relative" [class.col-md-9]="horizontal">
         <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete" [placeholder]="placeholder">
         @if (hint) {
-          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+          <small class="form-text text-muted" [innerHTML]="hint"></small>
+        }
+        @if (getSuggestion()?.length > 0) {
+          <small>
+            <span i18n>Suggestion:</span>&nbsp;
+            <a (click)="applySuggestion(s)" [routerLink]="[]">{{getSuggestion()}}</a>&nbsp;
+          </small>
         }
         <div class="invalid-feedback position-absolute top-100">
           {{error}}

src-ui/src/app/components/common/input/text/text.component.spec.ts

@@ -26,10 +26,20 @@ describe('TextComponent', () => {
 
   it('should support use of input field', () => {
     expect(component.value).toBeUndefined()
-    // TODO: why doesn't this work?
-    // input.value = 'foo'
-    // input.dispatchEvent(new Event('change'))
-    // fixture.detectChanges()
-    // expect(component.value).toEqual('foo')
+    input.value = 'foo'
+    input.dispatchEvent(new Event('input'))
+    fixture.detectChanges()
+    expect(component.value).toBe('foo')
+  })
+
+  it('should support suggestion', () => {
+    component.value = 'foo'
+    component.suggestion = 'foo'
+    expect(component.getSuggestion()).toBe('')
+    component.value = 'bar'
+    expect(component.getSuggestion()).toBe('foo')
+    component.applySuggestion()
+    fixture.detectChanges()
+    expect(component.value).toBe('foo')
   })
 })

src-ui/src/app/components/common/input/text/text.component.ts

@@ -4,8 +4,8 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
+import { RouterLink } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -22,8 +22,8 @@ import { AbstractInputComponent } from '../abstract-input'
   imports: [
     FormsModule,
     ReactiveFormsModule,
-    SafeHtmlPipe,
     NgxBootstrapIconsModule,
+    RouterLink,
   ],
 })
 export class TextComponent extends AbstractInputComponent<string> {
@@ -33,7 +33,19 @@ export class TextComponent extends AbstractInputComponent<string> {
   @Input()
   placeholder: string = ''
 
+  @Input()
+  suggestion: string = ''
+
   constructor() {
     super()
   }
+
+  getSuggestion() {
+    return this.value !== this.suggestion ? this.suggestion : ''
+  }
+
+  applySuggestion() {
+    this.value = this.suggestion
+    this.onChange(this.value)
+  }
 }

src-ui/src/app/components/common/input/textarea/textarea.component.html

@@ -23,7 +23,7 @@
           rows="4">
         </textarea>
         @if (hint) {
-          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+          <small class="form-text text-muted" [innerHTML]="hint"></small>
         }
         <div class="invalid-feedback position-absolute top-100">
           {{error}}

src-ui/src/app/components/common/input/textarea/textarea.component.ts

@@ -5,7 +5,6 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -19,12 +18,7 @@ import { AbstractInputComponent } from '../abstract-input'
   selector: 'pngx-input-textarea',
   templateUrl: './textarea.component.html',
   styleUrls: ['./textarea.component.scss'],
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    SafeHtmlPipe,
-    NgxBootstrapIconsModule,
-  ],
+  imports: [FormsModule, ReactiveFormsModule, NgxBootstrapIconsModule],
 })
 export class TextAreaComponent extends AbstractInputComponent<string> {
   @Input()

src-ui/src/app/components/common/input/url/url.component.html

@@ -19,7 +19,7 @@
         </div>
       </div>
       @if (hint) {
-        <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        <small class="form-text text-muted" [innerHTML]="hint"></small>
       }
     </div>
   </div>

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

@@ -1,12 +1,21 @@
 <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">
-      {{title}}
+    <h3 class="d-flex align-items-center mb-1" style="line-height: 1.4">
+      <span class="text-truncate">{{title}}</span>
+      @if (id) {
+        <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
+          @if (copied) {
+            <i-bs width="1em" height="1em" name="clipboard-check"></i-bs>&nbsp;<ng-container i18n>Copied!</ng-container>
+          } @else {
+            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>
+        <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
       }
       @if (info) {
-        <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
+        <button class="btn btn-sm btn-link text-muted p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
           <i-bs name="question-circle"></i-bs>
         </button>
         <ng-template #infoPopover>
@@ -17,6 +26,9 @@
           }
         </ng-template>
       }
+      @if (loading) {
+        <output class="spinner-border spinner-border-sm fs-6 fw-normal" aria-hidden="true"><span class="visually-hidden" i18n>Loading...</span></output>
+      }
     </h3>
   </div>
   <div class="btn-toolbar col col-md-auto gap-2">

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.spec.ts

@@ -1,3 +1,4 @@
+import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Title } from '@angular/platform-browser'
 import { environment } from 'src/environments/environment'
@@ -7,6 +8,7 @@ describe('PageHeaderComponent', () => {
   let component: PageHeaderComponent
   let fixture: ComponentFixture<PageHeaderComponent>
   let titleService: Title
+  let clipboard: Clipboard
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -15,6 +17,7 @@ describe('PageHeaderComponent', () => {
     }).compileComponents()
 
     titleService = TestBed.inject(Title)
+    clipboard = TestBed.inject(Clipboard)
     fixture = TestBed.createComponent(PageHeaderComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -24,7 +27,8 @@ describe('PageHeaderComponent', () => {
     component.title = 'Foo'
     component.subTitle = 'Bar'
     fixture.detectChanges()
-    expect(fixture.nativeElement.textContent).toContain('Foo Bar')
+    expect(fixture.nativeElement.textContent).toContain('Foo')
+    expect(fixture.nativeElement.textContent).toContain('Bar')
   })
 
   it('should set html title', () => {
@@ -32,4 +36,16 @@ describe('PageHeaderComponent', () => {
     component.title = 'Foo Bar'
     expect(titleSpy).toHaveBeenCalledWith(`Foo Bar - ${environment.appTitle}`)
   })
+
+  it('should copy id to clipboard, reset after 3 seconds', () => {
+    jest.useFakeTimers()
+    component.id = 42 as any
+    jest.spyOn(clipboard, 'copy').mockReturnValue(true)
+    component.copyID()
+    expect(clipboard.copy).toHaveBeenCalledWith('42')
+    expect(component.copied).toBe(true)
+
+    jest.advanceTimersByTime(3000)
+    expect(component.copied).toBe(false)
+  })
 })

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

@@ -1,20 +1,24 @@
+import { Clipboard } from '@angular/cdk/clipboard'
 import { Component, Input, inject } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'pngx-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss'],
-  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrapModule],
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrap],
 })
 export class PageHeaderComponent {
   private titleService = inject(Title)
+  private clipboard = inject(Clipboard)
 
-  _title = ''
+  private _title = ''
+  public copied: boolean = false
+  private copyTimeout: any
 
   @Input()
   set title(title: string) {
@@ -26,6 +30,9 @@ export class PageHeaderComponent {
     return this._title
   }
 
+  @Input()
+  id: number
+
   @Input()
   subTitle: string = ''
 
@@ -34,4 +41,15 @@ export class PageHeaderComponent {
 
   @Input()
   infoLink: string
+
+  @Input()
+  loading: boolean = false
+
+  public copyID() {
+    this.copied = this.clipboard.copy(this.id.toString())
+    clearTimeout(this.copyTimeout)
+    this.copyTimeout = setTimeout(() => {
+      this.copied = false
+    }, 3000)
+  }
 }

src-ui/src/app/components/common/pdf-editor/pdf-editor-edit-mode.ts

@@ -0,0 +1,4 @@
+export enum PdfEditorEditMode {
+  Update = 'update',
+  Create = 'create',
+}

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.html

@@ -1,4 +1,4 @@
-<pdf-viewer [src]="pdfSrc" [render-text]="false" zoom="0.4" (after-load-complete)="pdfLoaded($event)"></pdf-viewer>
+<pngx-pdf-viewer class="visually-hidden" [src]="pdfSrc" [renderMode]="PdfRenderMode.Single" [page]="1" [selectable]="false" (afterLoadComplete)="pdfLoaded($event)"></pngx-pdf-viewer>
 <div class="modal-header">
   <h4 class="modal-title">{{ title }}</h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
@@ -59,7 +59,7 @@
                 <span class="placeholder w-100 h-100"></span>
               </div>
             }
-            <pdf-viewer class="fade" [class.show]="p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [original-size]="false" [show-all]="false" [render-text]="false" (page-rendered)="p.loaded = true"></pdf-viewer>
+            <pngx-pdf-viewer class="fade" [class.show]="p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [renderMode]="PdfRenderMode.Single" (rendered)="p.loaded = true"></pngx-pdf-viewer>
           } @placeholder {
             <div class="placeholder-glow w-100 h-100 z-10">
               <span class="placeholder w-100 h-100"></span>

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss

@@ -15,13 +15,13 @@
   background-color: gray;
   height: 240px;
 
-  pdf-viewer {
+  pngx-pdf-viewer {
     width: 100%;
     height: 100%;
   }
 }
 
-::ng-deep .ng2-pdf-viewer-container {
+::ng-deep .pngx-pdf-viewer-container {
   overflow: hidden;
 }
 

src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts

@@ -6,10 +6,17 @@ import {
 import { Component, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentService } from 'src/app/services/rest/document.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
+import {
+  PdfRenderMode,
+  PngxPdfDocumentProxy,
+} from '../pdf-viewer/pdf-viewer.types'
+import { PdfEditorEditMode } from './pdf-editor-edit-mode'
 
 interface PageOperation {
   page: number
@@ -19,11 +26,6 @@ interface PageOperation {
   loaded?: boolean
 }
 
-export enum PdfEditorEditMode {
-  Update = 'update',
-  Create = 'create',
-}
-
 @Component({
   selector: 'pngx-pdf-editor',
   templateUrl: './pdf-editor.component.html',
@@ -31,20 +33,24 @@ export enum PdfEditorEditMode {
   imports: [
     DragDropModule,
     FormsModule,
-    PdfViewerModule,
     NgxBootstrapIconsModule,
+    PngxPdfViewerComponent,
   ],
 })
 export class PDFEditorComponent extends ConfirmDialogComponent {
+  PdfRenderMode = PdfRenderMode
   public PdfEditorEditMode = PdfEditorEditMode
 
   private documentService = inject(DocumentService)
+  private readonly settingsService = inject(SettingsService)
   activeModal: NgbActiveModal = inject(NgbActiveModal)
 
   documentID: number
   pages: PageOperation[] = []
   totalPages = 0
-  editMode: PdfEditorEditMode = PdfEditorEditMode.Create
+  editMode: PdfEditorEditMode = this.settingsService.get(
+    SETTINGS_KEYS.PDF_EDITOR_DEFAULT_EDIT_MODE
+  )
   deleteOriginal: boolean = false
   includeMetadata: boolean = true
 
@@ -52,7 +58,7 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
     return this.documentService.getPreviewUrl(this.documentID)
   }
 
-  pdfLoaded(pdf: PDFDocumentProxy) {
+  pdfLoaded(pdf: PngxPdfDocumentProxy) {
     this.totalPages = pdf.numPages
     this.pages = Array.from({ length: this.totalPages }, (_, i) => ({
       page: i + 1,

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.html

@@ -0,0 +1,3 @@
+<div #container class="pngx-pdf-viewer-container">
+  <div #viewer class="pdfViewer"></div>
+</div>

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss

@@ -0,0 +1,153 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+:host ::ng-deep .pngx-pdf-viewer-container {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
+:host ::ng-deep .pdfViewer {
+  --scale-factor: 1;
+  --page-bg-color: unset;
+  padding-bottom: 0;
+}
+
+:host ::ng-deep .pdfViewer .page {
+  --user-unit: 1;
+  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+  direction: ltr;
+  margin: 0 auto 10px;
+  border: 0;
+  position: relative;
+  overflow: visible;
+  background-clip: content-box;
+  background-color: var(--page-bg-color, rgb(255 255 255));
+}
+
+:host ::ng-deep .pdfViewer > .page:last-of-type {
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .pdfViewer.singlePageView {
+  display: inline-block;
+}
+
+:host ::ng-deep .pdfViewer.singlePageView .page {
+  margin: 0;
+  border: none;
+}
+
+:host ::ng-deep .pdfViewer .canvasWrapper {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+:host ::ng-deep .pdfViewer .canvasWrapper canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  contain: content;
+}
+
+:host ::ng-deep .textLayer {
+  position: absolute;
+  text-align: initial;
+  inset: 0;
+  overflow: clip;
+  opacity: 1;
+  line-height: 1;
+  text-size-adjust: none;
+  transform-origin: 0 0;
+  caret-color: CanvasText;
+  z-index: 0;
+  user-select: text;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+}
+
+:host ::ng-deep .textLayer.highlighting {
+  touch-action: none;
+}
+
+:host ::ng-deep .textLayer :is(span, br) {
+  position: absolute;
+  white-space: pre;
+  color: transparent;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+
+:host ::ng-deep .textLayer > :not(.markedContent),
+:host ::ng-deep .textLayer .markedContent span:not(.markedContent) {
+  z-index: 1;
+  --font-height: 0;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  --scale-x: 1;
+  --rotate: 0deg;
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x))
+    scale(var(--min-font-size-inv));
+}
+
+:host ::ng-deep .textLayer .markedContent {
+  display: contents;
+}
+
+:host ::ng-deep .textLayer span[role='img'] {
+  user-select: none;
+  cursor: default;
+}
+
+:host ::ng-deep .textLayer .highlight {
+  --highlight-bg-color: rgb(180 0 170 / 0.25);
+  --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
+  --highlight-backdrop-filter: none;
+  --highlight-selected-backdrop-filter: none;
+  margin: -1px;
+  padding: 1px;
+  background-color: var(--highlight-bg-color);
+  backdrop-filter: var(--highlight-backdrop-filter);
+  border-radius: 4px;
+}
+
+:host ::ng-deep .appended:is(.textLayer .highlight) {
+  position: initial;
+}
+
+:host ::ng-deep .begin:is(.textLayer .highlight) {
+  border-radius: 4px 0 0 4px;
+}
+
+:host ::ng-deep .end:is(.textLayer .highlight) {
+  border-radius: 0 4px 4px 0;
+}
+
+:host ::ng-deep .middle:is(.textLayer .highlight) {
+  border-radius: 0;
+}
+
+:host ::ng-deep .selected:is(.textLayer .highlight) {
+  background-color: var(--highlight-selected-bg-color);
+}
+
+:host ::ng-deep .textLayer ::selection {
+  background: rgba(30, 100, 255, 0.35);
+}
+
+:host ::ng-deep .annotationLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.spec.ts

@@ -0,0 +1,299 @@
+import { SimpleChange } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.mjs'
+import { PDFSinglePageViewer, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs'
+import { PngxPdfViewerComponent } from './pdf-viewer.component'
+import { PdfRenderMode, PdfZoomLevel, PdfZoomScale } from './pdf-viewer.types'
+
+describe('PngxPdfViewerComponent', () => {
+  let fixture: ComponentFixture<PngxPdfViewerComponent>
+  let component: PngxPdfViewerComponent
+
+  const initComponent = async (src = 'test.pdf') => {
+    component.src = src
+    fixture.detectChanges()
+    await fixture.whenStable()
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PngxPdfViewerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PngxPdfViewerComponent)
+    component = fixture.componentInstance
+  })
+
+  it('loads a document and emits events', async () => {
+    const loadSpy = jest.fn()
+    const renderedSpy = jest.fn()
+    component.afterLoadComplete.subscribe(loadSpy)
+    component.rendered.subscribe(renderedSpy)
+
+    await initComponent()
+
+    expect(pdfjs.GlobalWorkerOptions.workerSrc).toBe(
+      '/assets/js/pdf.worker.min.mjs'
+    )
+    const isVisible = (component as any).findController.onIsPageVisible as
+      | (() => boolean)
+      | undefined
+    expect(isVisible?.()).toBe(true)
+    expect(loadSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ numPages: 1 })
+    )
+    expect(renderedSpy).toHaveBeenCalled()
+    expect((component as any).pdfViewer).toBeInstanceOf(PDFViewer)
+  })
+
+  it('initializes single-page viewer and disables text layer', async () => {
+    component.renderMode = PdfRenderMode.Single
+    component.selectable = false
+
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFSinglePageViewer & {
+      options: Record<string, unknown>
+    }
+    expect(viewer).toBeInstanceOf(PDFSinglePageViewer)
+    expect(viewer.options.textLayerMode).toBe(0)
+  })
+
+  it('applies zoom, rotation, and page changes', async () => {
+    await initComponent()
+
+    const pageSpy = jest.fn()
+    component.pageChange.subscribe(pageSpy)
+
+    component.zoomScale = PdfZoomScale.PageFit
+    component.zoom = PdfZoomLevel.Two
+    component.rotation = 90
+    component.page = 2
+
+    component.ngOnChanges({
+      zoomScale: new SimpleChange(
+        PdfZoomScale.PageWidth,
+        PdfZoomScale.PageFit,
+        false
+      ),
+      zoom: new SimpleChange(PdfZoomLevel.One, PdfZoomLevel.Two, false),
+      rotation: new SimpleChange(undefined, 90, false),
+      page: new SimpleChange(undefined, 2, false),
+    })
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    expect(viewer.pagesRotation).toBe(90)
+    expect(viewer.currentPageNumber).toBe(2)
+    expect(pageSpy).toHaveBeenCalledWith(2)
+
+    viewer.currentScale = 1
+    ;(component as any).applyScale()
+    expect(viewer.currentScaleValue).toBe(PdfZoomScale.PageFit)
+    expect(viewer.currentScale).toBe(2)
+
+    const applyScaleSpy = jest.spyOn(component as any, 'applyScale')
+    component.page = 2
+    ;(component as any).lastViewerPage = 2
+    ;(component as any).applyViewerState()
+    expect((component as any).lastViewerPage).toBeUndefined()
+    expect(applyScaleSpy).toHaveBeenCalled()
+  })
+
+  it('dispatches find when search query changes after render', async () => {
+    await initComponent()
+
+    const eventBus = (component as any).eventBus as { dispatch: jest.Mock }
+    const dispatchSpy = jest.spyOn(eventBus, 'dispatch')
+
+    ;(component as any).hasRenderedPage = true
+    component.searchQuery = 'needle'
+    component.ngOnChanges({
+      searchQuery: new SimpleChange('', 'needle', false),
+    })
+
+    expect(dispatchSpy).toHaveBeenCalledWith('find', {
+      query: 'needle',
+      caseSensitive: false,
+      highlightAll: true,
+      phraseSearch: true,
+    })
+
+    component.ngOnChanges({
+      searchQuery: new SimpleChange('needle', 'needle', false),
+    })
+    expect(dispatchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('emits error when document load fails', async () => {
+    const errorSpy = jest.fn()
+    component.loadError.subscribe(errorSpy)
+
+    jest.spyOn(pdfjs, 'getDocument').mockImplementationOnce(() => {
+      return {
+        promise: Promise.reject(new Error('boom')),
+        destroy: jest.fn(),
+      } as any
+    })
+
+    await initComponent('bad.pdf')
+
+    expect(errorSpy).toHaveBeenCalled()
+  })
+
+  it('cleans up resources on destroy', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as { cleanup: jest.Mock }
+    const loadingTask = (component as any).loadingTask as unknown as {
+      destroy: jest.Mock
+    }
+    const resizeObserver = (component as any).resizeObserver as unknown as {
+      disconnect: jest.Mock
+    }
+    const eventBus = (component as any).eventBus as { off: jest.Mock }
+
+    jest.spyOn(viewer, 'cleanup')
+    jest.spyOn(loadingTask, 'destroy')
+    jest.spyOn(resizeObserver, 'disconnect')
+    jest.spyOn(eventBus, 'off')
+
+    component.ngOnDestroy()
+
+    expect(eventBus.off).toHaveBeenCalledWith(
+      'pagerendered',
+      expect.any(Function)
+    )
+    expect(eventBus.off).toHaveBeenCalledWith('pagesinit', expect.any(Function))
+    expect(eventBus.off).toHaveBeenCalledWith(
+      'pagechanging',
+      expect.any(Function)
+    )
+    expect(resizeObserver.disconnect).toHaveBeenCalled()
+    expect(loadingTask.destroy).toHaveBeenCalled()
+    expect(viewer.cleanup).toHaveBeenCalled()
+    expect((component as any).pdfViewer).toBeUndefined()
+  })
+
+  it('skips work when viewer is missing or has no pages', () => {
+    const eventBus = (component as any).eventBus as { dispatch: jest.Mock }
+    const dispatchSpy = jest.spyOn(eventBus, 'dispatch')
+    ;(component as any).dispatchFindIfReady()
+    expect(dispatchSpy).not.toHaveBeenCalled()
+    ;(component as any).applyViewerState()
+    ;(component as any).applyScale()
+
+    const viewer = new PDFViewer({ eventBus: undefined })
+    viewer.pagesCount = 0
+    ;(component as any).pdfViewer = viewer
+    viewer.currentScale = 5
+    ;(component as any).applyScale()
+    expect(viewer.currentScale).toBe(5)
+  })
+
+  it('returns early on src change in ngOnChanges', () => {
+    const loadSpy = jest.spyOn(component as any, 'loadDocument')
+    const initSpy = jest.spyOn(component as any, 'initViewer')
+    const scaleSpy = jest.spyOn(component as any, 'applyViewerState')
+    const resizeSpy = jest.spyOn(component as any, 'setupResizeObserver')
+
+    component.ngOnChanges({
+      src: new SimpleChange(undefined, 'test.pdf', true),
+      zoomScale: new SimpleChange(
+        PdfZoomScale.PageWidth,
+        PdfZoomScale.PageFit,
+        false
+      ),
+    })
+
+    expect(loadSpy).toHaveBeenCalled()
+    expect(resizeSpy).not.toHaveBeenCalled()
+    expect(initSpy).not.toHaveBeenCalled()
+    expect(scaleSpy).not.toHaveBeenCalled()
+  })
+
+  it('applies viewer state after view init when already loaded', () => {
+    const applySpy = jest.spyOn(component as any, 'applyViewerState')
+    ;(component as any).hasLoaded = true
+    ;(component as any).pdf = { numPages: 1 }
+
+    fixture.detectChanges()
+
+    expect(applySpy).toHaveBeenCalled()
+  })
+
+  it('skips viewer state after view init when no pdf is available', () => {
+    const applySpy = jest.spyOn(component as any, 'applyViewerState')
+    ;(component as any).hasLoaded = true
+
+    fixture.detectChanges()
+
+    expect(applySpy).not.toHaveBeenCalled()
+  })
+
+  it('does not reload when already loaded', async () => {
+    await initComponent()
+
+    const getDocumentSpy = jest.spyOn(pdfjs, 'getDocument')
+    const callCount = getDocumentSpy.mock.calls.length
+    await (component as any).loadDocument()
+
+    expect(getDocumentSpy).toHaveBeenCalledTimes(callCount)
+  })
+
+  it('runs applyScale on resize observer notifications', async () => {
+    await initComponent()
+
+    const applySpy = jest.spyOn(component as any, 'applyScale')
+    const resizeObserver = (component as any).resizeObserver as {
+      trigger: () => void
+    }
+    resizeObserver.trigger()
+
+    expect(applySpy).toHaveBeenCalled()
+  })
+
+  it('skips page work when no pages are available', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.pagesCount = 0
+    const applyScaleSpy = jest.spyOn(component as any, 'applyScale')
+
+    component.page = undefined
+    ;(component as any).lastViewerPage = 1
+    ;(component as any).applyViewerState()
+
+    expect(applyScaleSpy).not.toHaveBeenCalled()
+    expect((component as any).lastViewerPage).toBe(1)
+  })
+
+  it('falls back to a default zoom when input is invalid', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.currentScale = 3
+    component.zoom = 'not-a-number' as PdfZoomLevel
+    ;(component as any).applyScale()
+
+    expect(viewer.currentScale).toBe(3)
+  })
+
+  it('re-initializes viewer on selectable or render mode changes', async () => {
+    await initComponent()
+
+    const initSpy = jest.spyOn(component as any, 'initViewer')
+    component.selectable = false
+    component.renderMode = PdfRenderMode.Single
+
+    component.ngOnChanges({
+      selectable: new SimpleChange(true, false, false),
+      renderMode: new SimpleChange(
+        PdfRenderMode.All,
+        PdfRenderMode.Single,
+        false
+      ),
+    })
+
+    expect(initSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts

@@ -0,0 +1,266 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import {
+  getDocument,
+  GlobalWorkerOptions,
+  PDFDocumentLoadingTask,
+  PDFDocumentProxy,
+} from 'pdfjs-dist/legacy/build/pdf.mjs'
+import {
+  EventBus,
+  PDFFindController,
+  PDFLinkService,
+  PDFSinglePageViewer,
+  PDFViewer,
+} from 'pdfjs-dist/web/pdf_viewer.mjs'
+import {
+  PdfRenderMode,
+  PdfSource,
+  PdfZoomLevel,
+  PdfZoomScale,
+  PngxPdfDocumentProxy,
+} from './pdf-viewer.types'
+
+@Component({
+  selector: 'pngx-pdf-viewer',
+  templateUrl: './pdf-viewer.component.html',
+  styleUrl: './pdf-viewer.component.scss',
+})
+export class PngxPdfViewerComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
+  @Input() src!: PdfSource
+  @Input() page?: number
+  @Output() pageChange = new EventEmitter<number>()
+  @Input() rotation?: number
+  @Input() renderMode: PdfRenderMode = PdfRenderMode.All
+  @Input() selectable = true
+  @Input() searchQuery = ''
+  @Input() zoom: PdfZoomLevel = PdfZoomLevel.One
+  @Input() zoomScale: PdfZoomScale = PdfZoomScale.PageWidth
+
+  @Output() afterLoadComplete = new EventEmitter<PngxPdfDocumentProxy>()
+  @Output() rendered = new EventEmitter<void>()
+  @Output() loadError = new EventEmitter<unknown>()
+
+  @ViewChild('container', { static: true })
+  private readonly container!: ElementRef<HTMLDivElement>
+
+  @ViewChild('viewer', { static: true })
+  private readonly viewer!: ElementRef<HTMLDivElement>
+
+  private hasLoaded = false
+  private loadingTask?: PDFDocumentLoadingTask
+  private resizeObserver?: ResizeObserver
+  private pdf?: PDFDocumentProxy
+  private pdfViewer?: PDFViewer | PDFSinglePageViewer
+  private hasRenderedPage = false
+  private lastFindQuery = ''
+  private lastViewerPage?: number
+
+  private readonly eventBus = new EventBus()
+  private readonly linkService = new PDFLinkService({ eventBus: this.eventBus })
+  private readonly findController = new PDFFindController({
+    eventBus: this.eventBus,
+    linkService: this.linkService,
+    updateMatchesCountOnProgress: false,
+  })
+
+  private readonly onPageRendered = () => {
+    this.hasRenderedPage = true
+    this.dispatchFindIfReady()
+    this.rendered.emit()
+  }
+  private readonly onPagesInit = () => this.applyScale()
+  private readonly onPageChanging = (evt: { pageNumber: number }) => {
+    // Avoid [(page)] two-way binding re-triggers navigation
+    this.lastViewerPage = evt.pageNumber
+    this.pageChange.emit(evt.pageNumber)
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src']) {
+      this.hasLoaded = false
+      this.loadDocument()
+      return
+    }
+
+    if (changes['zoomScale']) {
+      this.setupResizeObserver()
+    }
+
+    if (changes['selectable'] || changes['renderMode']) {
+      this.initViewer()
+    }
+
+    if (
+      changes['page'] ||
+      changes['zoom'] ||
+      changes['zoomScale'] ||
+      changes['rotation']
+    ) {
+      this.applyViewerState()
+    }
+
+    if (changes['searchQuery']) {
+      this.dispatchFindIfReady()
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver()
+    this.initViewer()
+    if (!this.hasLoaded) {
+      this.loadDocument()
+      return
+    }
+    if (this.pdf) {
+      this.applyViewerState()
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.eventBus.off('pagerendered', this.onPageRendered)
+    this.eventBus.off('pagesinit', this.onPagesInit)
+    this.eventBus.off('pagechanging', this.onPageChanging)
+    this.resizeObserver?.disconnect()
+    this.loadingTask?.destroy()
+    this.pdfViewer?.cleanup()
+    this.pdfViewer = undefined
+  }
+
+  private async loadDocument(): Promise<void> {
+    if (this.hasLoaded) {
+      return
+    }
+
+    this.hasLoaded = true
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+    this.loadingTask?.destroy()
+
+    GlobalWorkerOptions.workerSrc = '/assets/js/pdf.worker.min.mjs'
+    this.loadingTask = getDocument(this.src)
+
+    try {
+      const pdf = await this.loadingTask.promise
+      this.pdf = pdf
+      this.linkService.setDocument(pdf)
+      this.findController.onIsPageVisible = () => true
+      this.pdfViewer?.setDocument(pdf)
+      this.applyViewerState()
+      this.afterLoadComplete.emit(pdf)
+    } catch (err) {
+      this.loadError.emit(err)
+    }
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => {
+      this.applyScale()
+    })
+    this.resizeObserver.observe(this.container.nativeElement)
+  }
+
+  private initViewer(): void {
+    this.viewer.nativeElement.innerHTML = ''
+    this.pdfViewer?.cleanup()
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+
+    const textLayerMode = this.selectable === false ? 0 : 1
+    const options = {
+      container: this.container.nativeElement,
+      viewer: this.viewer.nativeElement,
+      eventBus: this.eventBus,
+      linkService: this.linkService,
+      findController: this.findController,
+      textLayerMode,
+      removePageBorders: true,
+    }
+
+    this.pdfViewer =
+      this.renderMode === PdfRenderMode.Single
+        ? new PDFSinglePageViewer(options)
+        : new PDFViewer(options)
+    this.linkService.setViewer(this.pdfViewer)
+
+    this.eventBus.off('pagerendered', this.onPageRendered)
+    this.eventBus.off('pagesinit', this.onPagesInit)
+    this.eventBus.off('pagechanging', this.onPageChanging)
+    this.eventBus.on('pagerendered', this.onPageRendered)
+    this.eventBus.on('pagesinit', this.onPagesInit)
+    this.eventBus.on('pagechanging', this.onPageChanging)
+
+    if (this.pdf) {
+      this.pdfViewer.setDocument(this.pdf)
+      this.applyViewerState()
+    }
+  }
+
+  private applyViewerState(): void {
+    if (!this.pdfViewer) {
+      return
+    }
+    const hasPages = this.pdfViewer.pagesCount > 0
+    if (typeof this.rotation === 'number' && hasPages) {
+      this.pdfViewer.pagesRotation = this.rotation
+    }
+    if (
+      typeof this.page === 'number' &&
+      hasPages &&
+      this.page !== this.lastViewerPage
+    ) {
+      this.pdfViewer.currentPageNumber = this.page
+    }
+    if (this.page === this.lastViewerPage) {
+      this.lastViewerPage = undefined
+    }
+    if (hasPages) {
+      this.applyScale()
+    }
+    this.dispatchFindIfReady()
+  }
+
+  private applyScale(): void {
+    if (!this.pdfViewer) {
+      return
+    }
+    if (this.pdfViewer.pagesCount === 0) {
+      return
+    }
+    const zoomFactor = Number(this.zoom) || 1
+    this.pdfViewer.currentScaleValue = this.zoomScale
+    if (zoomFactor !== 1) {
+      this.pdfViewer.currentScale = this.pdfViewer.currentScale * zoomFactor
+    }
+  }
+
+  private dispatchFindIfReady(): void {
+    if (!this.hasRenderedPage) {
+      return
+    }
+    const query = this.searchQuery.trim()
+    if (query === this.lastFindQuery) {
+      return
+    }
+    this.lastFindQuery = query
+    this.eventBus.dispatch('find', {
+      query,
+      caseSensitive: false,
+      highlightAll: query.length > 0,
+      phraseSearch: true,
+    })
+  }
+}

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.types.ts

@@ -0,0 +1,25 @@
+export type PngxPdfDocumentProxy = {
+  numPages: number
+}
+
+export type PdfSource = string | { url: string; password?: string }
+
+export enum PdfRenderMode {
+  Single = 'single',
+  All = 'all',
+}
+
+export enum PdfZoomScale {
+  PageFit = 'page-fit',
+  PageWidth = 'page-width',
+}
+
+export enum PdfZoomLevel {
+  Quarter = '.25',
+  Half = '.5',
+  ThreeQuarters = '.75',
+  One = '1',
+  OneAndHalf = '1.5',
+  Two = '2',
+  Three = '3',
+}

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

@@ -5,7 +5,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of } from 'rxjs'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { UserService } from 'src/app/services/rest/user.service'
 import { PermissionsFormComponent } from '../input/permissions/permissions-form/permissions-form.component'
 import { PermissionsGroupComponent } from '../input/permissions/permissions-group/permissions-group.component'
@@ -41,7 +40,6 @@ describe('PermissionsDialogComponent', () => {
         ReactiveFormsModule,
         NgbModule,
         PermissionsDialogComponent,
-        SafeHtmlPipe,
         SelectComponent,
         SwitchComponent,
         PermissionsFormComponent,

src-ui/src/app/components/common/preview-popup/preview-popup.component.html

@@ -14,7 +14,7 @@
         @if (previewText) {
           <div class="bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{previewText}}</div>
         } @else {
-          <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
+          <object [data]="previewUrl | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
         }
       } @else {
         @if (requiresPassword) {
@@ -23,14 +23,12 @@
           </div>
         }
         @if (!requiresPassword) {
-          <pdf-viewer
-            [src]="previewURL"
-            [original-size]="false"
-            [show-borders]="false"
-            [show-all]="true"
-            (text-layer-rendered)="onPageRendered()"
-            (error)="onError($event)" #pdfViewer>
-          </pdf-viewer>
+          <pngx-pdf-viewer
+            [src]="previewUrl"
+            [renderMode]="PdfRenderMode.All"
+            [searchQuery]="documentService.searchQuery"
+            (loadError)="onError($event)">
+          </pngx-pdf-viewer>
         }
       }
     }

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -12,6 +12,7 @@ import { of, throwError } from 'rxjs'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
 import { PreviewPopupComponent } from './preview-popup.component'
 
 const doc = {
@@ -78,7 +79,7 @@ describe('PreviewPopupComponent', () => {
     component.popover.open()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).toBeNull()
-    expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
+    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
   })
 
   it('should show lock icon on password error', () => {
@@ -159,23 +160,15 @@ describe('PreviewPopupComponent', () => {
     expect(component.popover.isOpen()).toBeFalsy()
   })
 
-  it('should dispatch find event on viewer loaded if searchQuery set', () => {
+  it('should pass searchQuery to viewer', () => {
     documentService.searchQuery = 'test'
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
     component.popover.open()
-    jest.advanceTimersByTime(1000)
     fixture.detectChanges()
-    // normally setup by pdf-viewer
-    jest.replaceProperty(component.pdfViewer, 'eventBus', {
-      dispatch: jest.fn(),
-    } as any)
-    const dispatchSpy = jest.spyOn(component.pdfViewer.eventBus, 'dispatch')
-    component.onPageRendered()
-    expect(dispatchSpy).toHaveBeenCalledWith('find', {
-      query: 'test',
-      caseSensitive: false,
-      highlightAll: true,
-      phraseSearch: true,
-    })
+    const viewer = fixture.debugElement.query(
+      By.directive(PngxPdfViewerComponent)
+    )
+    expect(viewer).not.toBeNull()
+    expect(viewer.componentInstance.searchQuery).toBe('test')
   })
 })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,7 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
@@ -10,6 +9,8 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
+import { PdfRenderMode } from '../pdf-viewer/pdf-viewer.types'
 
 @Component({
   selector: 'pngx-preview-popup',
@@ -18,14 +19,15 @@ import { SettingsService } from 'src/app/services/settings.service'
   imports: [
     NgbPopoverModule,
     DocumentTitlePipe,
-    PdfViewerModule,
+    PngxPdfViewerComponent,
     SafeUrlPipe,
     NgxBootstrapIconsModule,
   ],
 })
 export class PreviewPopupComponent implements OnDestroy {
+  PdfRenderMode = PdfRenderMode
   private settingsService = inject(SettingsService)
-  private documentService = inject(DocumentService)
+  public readonly documentService = inject(DocumentService)
   private http = inject(HttpClient)
 
   private _document: Document
@@ -61,8 +63,6 @@ export class PreviewPopupComponent implements OnDestroy {
 
   @ViewChild('popover') popover: NgbPopover
 
-  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
-
   mouseOnPreview: boolean = false
 
   popoverClass: string = 'shadow popover-preview'
@@ -71,7 +71,7 @@ export class PreviewPopupComponent implements OnDestroy {
     return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
   }
 
-  get previewURL() {
+  get previewUrl() {
     return this.documentService.getPreviewUrl(this.document.id)
   }
 
@@ -93,7 +93,7 @@ export class PreviewPopupComponent implements OnDestroy {
   init() {
     if (this.document.mime_type?.includes('text')) {
       this.http
-        .get(this.previewURL, { responseType: 'text' })
+        .get(this.previewUrl, { responseType: 'text' })
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
         .subscribe({
           next: (res) => {
@@ -114,22 +114,6 @@ export class PreviewPopupComponent implements OnDestroy {
     }
   }
 
-  onPageRendered() {
-    // Only triggered by the pngx pdf viewer
-    if (this.documentService.searchQuery) {
-      this.pdfViewer.eventBus.dispatch('find', {
-        query: this.documentService.searchQuery,
-        caseSensitive: false,
-        highlightAll: true,
-        phraseSearch: true,
-      })
-    }
-  }
-
-  get previewUrl() {
-    return this.documentService.getPreviewUrl(this.document.id)
-  }
-
   mouseEnterPreview() {
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html

@@ -110,7 +110,9 @@
                       <div class="visually-hidden" i18n>Loading...</div>
                     } @else if (totpSettings) {
                       <figure class="figure">
-                        <div class="bg-white d-inline-block" [innerHTML]="totpSettings.qr_svg | safeHtml"></div>
+                        @if (qrSvgDataUrl) {
+                          <img class="bg-white d-inline-block" [src]="qrSvgDataUrl" alt="Authenticator QR code">
+                        }
                         <figcaption class="figure-caption text-end mt-2" i18n>Scan the QR code with your authenticator app and then enter the code below</figcaption>
                       </figure>
                       <p>

src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts

@@ -18,7 +18,6 @@ import {
   SocialAccountProvider,
   TotpSettings,
 } from 'src/app/data/user-profile'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ProfileService } from 'src/app/services/profile.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { setLocationHref } from 'src/app/utils/navigation'
@@ -37,7 +36,6 @@ import { TextComponent } from '../input/text/text.component'
     PasswordComponent,
     FormsModule,
     ReactiveFormsModule,
-    SafeHtmlPipe,
     NgbAccordionModule,
     NgbPopoverModule,
     NgxBootstrapIconsModule,
@@ -89,6 +87,13 @@ export class ProfileEditDialogComponent
   public socialAccounts: SocialAccount[] = []
   public socialAccountProviders: SocialAccountProvider[] = []
 
+  get qrSvgDataUrl(): string | null {
+    if (!this.totpSettings?.qr_svg) {
+      return null
+    }
+    return `data:image/svg+xml;utf8,${encodeURIComponent(this.totpSettings.qr_svg)}`
+  }
+
   ngOnInit(): void {
     this.networkActive = true
     this.profileService
@@ -183,6 +188,7 @@ export class ProfileEditDialogComponent
       this.newPassword && this.currentPassword !== this.newPassword
     const profile = Object.assign({}, this.form.value)
     delete profile.totp_code
+    this.error = null
     this.networkActive = true
     this.profileService
       .update(profile)
@@ -204,6 +210,7 @@ export class ProfileEditDialogComponent
         },
         error: (error) => {
           this.toastService.showError($localize`Error saving profile`, error)
+          this.error = error?.error
           this.networkActive = false
         },
       })

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.html

@@ -0,0 +1,129 @@
+<div class="modal-header">
+  <h4 class="modal-title">{{ title }}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
+</div>
+<div class="modal-body">
+  @if (!createdBundle) {
+    <form [formGroup]="form" class="d-flex flex-column gap-3">
+      <div>
+        <p class="mb-1">
+          <ng-container i18n>Selected documents:</ng-container>
+          {{ selectionCount }}
+        </p>
+        @if (documentPreview.length > 0) {
+          <ul class="list-unstyled small mb-0">
+            @for (doc of documentPreview; track doc.id) {
+              <li>
+                <strong>{{ doc.title | documentTitle }}</strong>
+              </li>
+            }
+            @if (selectionCount > documentPreview.length) {
+              <li>
+                <ng-container i18n>+ {{ selectionCount - documentPreview.length }} more…</ng-container>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+
+      <div class="d-flex align-items-center justify-content-between">
+        <div class="input-group">
+          <label class="input-group-text" for="expirationDays"><ng-container i18n>Expires</ng-container>:</label>
+          <select class="form-select" id="expirationDays" formControlName="expirationDays">
+            @for (option of expirationOptions; track option.value) {
+              <option [ngValue]="option.value">{{ option.label }}</option>
+            }
+          </select>
+        </div>
+        <div class="form-check form-switch w-100 ms-3">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="shareArchiveSwitch"
+            formControlName="shareArchiveVersion"
+            aria-checked="{{ shareArchiveVersion }}"
+          />
+          <label class="form-check-label" for="shareArchiveSwitch" i18n>Share archive version (if available)</label>
+        </div>
+      </div>
+    </form>
+  } @else {
+    <div class="d-flex flex-column gap-3">
+      <div class="alert alert-success mb-0" role="status">
+        <h6 class="alert-heading mb-1" i18n>Share link bundle requested</h6>
+        <p class="mb-0 small" i18n>
+          You can copy the share link below or open the manager to monitor progress. The link will start working once the bundle is ready.
+        </p>
+      </div>
+      <dl class="row mb-0 small">
+        <dt class="col-sm-4" i18n>Status</dt>
+        <dd class="col-sm-8">
+          <span class="badge text-bg-secondary text-uppercase">{{ statusLabel(createdBundle.status) }}</span>
+        </dd>
+        <dt class="col-sm-4" i18n>Slug</dt>
+        <dd class="col-sm-8"><code>{{ createdBundle.slug }}</code></dd>
+        <dt class="col-sm-4" i18n>Link</dt>
+        <dd class="col-sm-8">
+          <div class="input-group input-group-sm">
+            <input class="form-control" type="text" [value]="getShareUrl(createdBundle)" readonly>
+            <button
+              class="btn btn-outline-primary"
+              type="button"
+              (click)="copy(createdBundle)"
+            >
+              @if (copied) {
+                <i-bs name="clipboard-check"></i-bs>
+              }
+              @if (!copied) {
+                <i-bs name="clipboard"></i-bs>
+              }
+              <span class="visually-hidden" i18n>Copy link</span>
+            </button>
+          </div>
+        </dd>
+        <dt class="col-sm-4" i18n>Documents</dt>
+        <dd class="col-sm-8">{{ createdBundle.document_count }}</dd>
+        <dt class="col-sm-4" i18n>Expires</dt>
+        <dd class="col-sm-8">
+          @if (createdBundle.expiration) {
+            {{ createdBundle.expiration | date: 'short' }}
+          }
+          @if (!createdBundle.expiration) {
+            <span i18n>Never</span>
+          }
+        </dd>
+        <dt class="col-sm-4" i18n>File version</dt>
+        <dd class="col-sm-8">{{ fileVersionLabel(createdBundle.file_version) }}</dd>
+        @if (createdBundle.size_bytes !== undefined && createdBundle.size_bytes !== null) {
+          <dt class="col-sm-4" i18n>Size</dt>
+          <dd class="col-sm-8">{{ createdBundle.size_bytes | fileSize }}</dd>
+        }
+      </dl>
+    </div>
+  }
+</div>
+<div class="modal-footer">
+  <div class="d-flex align-items-center gap-2 w-100">
+    <div class="text-light fst-italic small">
+      <ng-container i18n>A zip file containing the selected documents will be created for this share link bundle. This process happens in the background and may take some time, especially for large bundles.</ng-container>
+    </div>
+    <button type="button" class="btn btn-outline-secondary btn-sm ms-auto" (click)="cancel()">{{ cancelBtnCaption }}</button>
+    @if (createdBundle) {
+      <button type="button" class="btn btn-outline-secondary btn-sm text-nowrap" (click)="openManage()" i18n>Manage share link bundles</button>
+    }
+
+    @if (!createdBundle) {
+      <button
+        type="button"
+        class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2 text-nowrap"
+        (click)="submit()"
+        [disabled]="loading || !buttonsEnabled">
+        @if (loading) {
+          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+        }
+        {{ btnCaption }}
+      </button>
+    }
+  </div>
+</div>

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.spec.ts

@@ -0,0 +1,161 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { FileVersion } from 'src/app/data/share-link'
+import {
+  ShareLinkBundleStatus,
+  ShareLinkBundleSummary,
+} from 'src/app/data/share-link-bundle'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ShareLinkBundleDialogComponent } from './share-link-bundle-dialog.component'
+
+class MockToastService {
+  showInfo = jest.fn()
+  showError = jest.fn()
+}
+
+describe('ShareLinkBundleDialogComponent', () => {
+  let component: ShareLinkBundleDialogComponent
+  let fixture: ComponentFixture<ShareLinkBundleDialogComponent>
+  let clipboard: Clipboard
+  let toastService: MockToastService
+  let activeModal: NgbActiveModal
+  let originalApiBaseUrl: string
+
+  beforeEach(() => {
+    originalApiBaseUrl = environment.apiBaseUrl
+    toastService = new MockToastService()
+
+    TestBed.configureTestingModule({
+      imports: [
+        ShareLinkBundleDialogComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        NgbActiveModal,
+        { provide: ToastService, useValue: toastService },
+      ],
+    })
+
+    fixture = TestBed.createComponent(ShareLinkBundleDialogComponent)
+    component = fixture.componentInstance
+    clipboard = TestBed.inject(Clipboard)
+    activeModal = TestBed.inject(NgbActiveModal)
+    fixture.detectChanges()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    environment.apiBaseUrl = originalApiBaseUrl
+  })
+
+  it('builds payload and emits confirm on submit', () => {
+    const confirmSpy = jest.spyOn(component.confirmClicked, 'emit')
+    component.documents = [
+      { id: 1, title: 'Doc 1' } as any,
+      { id: 2, title: 'Doc 2' } as any,
+    ]
+    component.form.setValue({
+      shareArchiveVersion: false,
+      expirationDays: 3,
+    })
+
+    component.submit()
+
+    expect(component.payload).toEqual({
+      document_ids: [1, 2],
+      file_version: FileVersion.Original,
+      expiration_days: 3,
+    })
+    expect(component.buttonsEnabled).toBe(false)
+    expect(confirmSpy).toHaveBeenCalled()
+
+    component.form.setValue({
+      shareArchiveVersion: true,
+      expirationDays: 7,
+    })
+    component.submit()
+
+    expect(component.payload).toEqual({
+      document_ids: [1, 2],
+      file_version: FileVersion.Archive,
+      expiration_days: 7,
+    })
+  })
+
+  it('ignores submit when bundle already created', () => {
+    component.createdBundle = { id: 1 } as ShareLinkBundleSummary
+    const confirmSpy = jest.spyOn(component, 'confirm')
+    component.submit()
+    expect(confirmSpy).not.toHaveBeenCalled()
+  })
+
+  it('limits preview to ten documents', () => {
+    const docs = Array.from({ length: 12 }).map((_, index) => ({
+      id: index + 1,
+    }))
+    component.documents = docs as any
+
+    expect(component.selectionCount).toBe(12)
+    expect(component.documentPreview).toHaveLength(10)
+    expect(component.documentPreview[0].id).toBe(1)
+  })
+
+  it('copies share link and resets state after timeout', fakeAsync(() => {
+    const copySpy = jest.spyOn(clipboard, 'copy').mockReturnValue(true)
+    const bundle = {
+      slug: 'bundle-slug',
+      status: ShareLinkBundleStatus.Ready,
+    } as ShareLinkBundleSummary
+
+    component.copy(bundle)
+
+    expect(copySpy).toHaveBeenCalledWith(component.getShareUrl(bundle))
+    expect(component.copied).toBe(true)
+    expect(toastService.showInfo).toHaveBeenCalled()
+
+    tick(3000)
+    expect(component.copied).toBe(false)
+  }))
+
+  it('generates share URLs based on API base URL', () => {
+    environment.apiBaseUrl = 'https://example.com/api/'
+    expect(
+      component.getShareUrl({ slug: 'abc' } as ShareLinkBundleSummary)
+    ).toBe('https://example.com/share/abc')
+  })
+
+  it('opens manage dialog when callback provided', () => {
+    const manageSpy = jest.fn()
+    component.onOpenManage = manageSpy
+    component.openManage()
+    expect(manageSpy).toHaveBeenCalled()
+  })
+
+  it('falls back to cancel when manage callback missing', () => {
+    const cancelSpy = jest.spyOn(component, 'cancel')
+    component.onOpenManage = undefined
+    component.openManage()
+    expect(cancelSpy).toHaveBeenCalled()
+  })
+
+  it('maps status and file version labels', () => {
+    expect(component.statusLabel(ShareLinkBundleStatus.Processing)).toContain(
+      'Processing'
+    )
+    expect(component.fileVersionLabel(FileVersion.Archive)).toContain('Archive')
+  })
+
+  it('closes dialog when cancel invoked', () => {
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.cancel()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/common/share-link-bundle-dialog/share-link-bundle-dialog.component.ts

@@ -0,0 +1,118 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import { CommonModule } from '@angular/common'
+import { Component, Input, inject } from '@angular/core'
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Document } from 'src/app/data/document'
+import {
+  FileVersion,
+  SHARE_LINK_EXPIRATION_OPTIONS,
+} from 'src/app/data/share-link'
+import {
+  SHARE_LINK_BUNDLE_FILE_VERSION_LABELS,
+  SHARE_LINK_BUNDLE_STATUS_LABELS,
+  ShareLinkBundleCreatePayload,
+  ShareLinkBundleStatus,
+  ShareLinkBundleSummary,
+} from 'src/app/data/share-link-bundle'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import { FileSizePipe } from 'src/app/pipes/file-size.pipe'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-share-link-bundle-dialog',
+  templateUrl: './share-link-bundle-dialog.component.html',
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    FileSizePipe,
+    DocumentTitlePipe,
+  ],
+  providers: [],
+})
+export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
+  private readonly formBuilder = inject(FormBuilder)
+  private readonly clipboard = inject(Clipboard)
+  private readonly toastService = inject(ToastService)
+
+  private _documents: Document[] = []
+
+  selectionCount = 0
+  documentPreview: Document[] = []
+  form: FormGroup = this.formBuilder.group({
+    shareArchiveVersion: true,
+    expirationDays: [7],
+  })
+  payload: ShareLinkBundleCreatePayload | null = null
+
+  readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
+
+  createdBundle: ShareLinkBundleSummary | null = null
+  copied = false
+  onOpenManage?: () => void
+  readonly statuses = ShareLinkBundleStatus
+
+  constructor() {
+    super()
+    this.loading = false
+    this.title = $localize`Create share link bundle`
+    this.btnCaption = $localize`Create link`
+  }
+
+  @Input()
+  set documents(docs: Document[]) {
+    this._documents = docs.concat()
+    this.selectionCount = this._documents.length
+    this.documentPreview = this._documents.slice(0, 10)
+  }
+
+  submit() {
+    if (this.createdBundle) return
+    this.payload = {
+      document_ids: this._documents.map((doc) => doc.id),
+      file_version: this.form.value.shareArchiveVersion
+        ? FileVersion.Archive
+        : FileVersion.Original,
+      expiration_days: this.form.value.expirationDays,
+    }
+    this.buttonsEnabled = false
+    super.confirm()
+  }
+
+  getShareUrl(bundle: ShareLinkBundleSummary): string {
+    const apiURL = new URL(environment.apiBaseUrl)
+    return `${apiURL.origin}${apiURL.pathname.replace(/\/api\/$/, '/share/')}${
+      bundle.slug
+    }`
+  }
+
+  copy(bundle: ShareLinkBundleSummary): void {
+    const success = this.clipboard.copy(this.getShareUrl(bundle))
+    if (success) {
+      this.copied = true
+      this.toastService.showInfo($localize`Share link copied to clipboard.`)
+      setTimeout(() => {
+        this.copied = false
+      }, 3000)
+    }
+  }
+
+  openManage(): void {
+    if (this.onOpenManage) {
+      this.onOpenManage()
+    } else {
+      this.cancel()
+    }
+  }
+
+  statusLabel(status: ShareLinkBundleSummary['status']): string {
+    return SHARE_LINK_BUNDLE_STATUS_LABELS[status] ?? status
+  }
+
+  fileVersionLabel(version: FileVersion): string {
+    return SHARE_LINK_BUNDLE_FILE_VERSION_LABELS[version] ?? version
+  }
+}

src-ui/src/app/components/common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component.html

@@ -0,0 +1,156 @@
+<div class="modal-header">
+  <h4 class="modal-title">{{ title }}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+
+<div class="modal-body">
+  @if (loading) {
+    <div class="d-flex align-items-center gap-2">
+      <div class="spinner-border spinner-border-sm" role="status"></div>
+      <span i18n>Loading share link bundles…</span>
+    </div>
+  }
+  @if (!loading && error) {
+    <div class="alert alert-danger mb-0" role="alert">
+      {{ error }}
+    </div>
+  }
+  @if (!loading && !error) {
+    <div class="d-flex justify-content-between align-items-center mb-2">
+      <p class="mb-0 text-muted small">
+        <ng-container i18n>Status updates every few seconds while bundles are being prepared.</ng-container>
+      </p>
+    </div>
+    @if (bundles.length === 0) {
+      <p class="mb-0 text-muted fst-italic" i18n>No share link bundles currently exist.</p>
+    }
+    @if (bundles.length > 0) {
+      <div class="table-responsive">
+        <table class="table table-sm align-middle mb-0">
+          <thead>
+            <tr>
+              <th scope="col" i18n>Created</th>
+              <th scope="col" i18n>Status</th>
+              <th scope="col" i18n>Size</th>
+              <th scope="col" i18n>Expires</th>
+              <th scope="col" i18n>Documents</th>
+              <th scope="col" i18n>File version</th>
+              <th scope="col" class="text-end" i18n>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (bundle of bundles; track bundle.id) {
+              <tr>
+                <td>
+                  <div>{{ bundle.created | date: 'short' }}</div>
+                  @if (bundle.built_at) {
+                    <div class="small text-muted">
+                      <ng-container i18n>Built:</ng-container> {{ bundle.built_at | date: 'short' }}
+                    </div>
+                  }
+                </td>
+                <td>
+                  <div class="d-flex align-items-center gap-2">
+                    @if (bundle.status === statuses.Failed && bundle.last_error) {
+                      <button
+                        type="button"
+                        class="btn btn-link p-0 text-danger"
+                        [ngbPopover]="errorDetail"
+                        popoverClass="popover-sm"
+                        triggers="mouseover:mouseleave"
+                        placement="auto"
+                        aria-label="View error details"
+                        i18n-aria-label
+                      >
+                        <span class="badge text-bg-warning text-uppercase me-2">{{ statusLabel(bundle.status) }}</span>
+                        <i-bs name="exclamation-triangle-fill" class="text-warning"></i-bs>
+                      </button>
+                      <ng-template #errorDetail>
+                        @if (bundle.last_error.timestamp) {
+                          <div class="text-muted small mb-1">
+                            {{ bundle.last_error.timestamp | date: 'short' }}
+                          </div>
+                        }
+                        <h6>{{ bundle.last_error.exception_type || ($localize`Unknown error`) }}</h6>
+                        @if (bundle.last_error.message) {
+                          <pre class="text-muted small"><code>{{ bundle.last_error.message }}</code></pre>
+                        }
+                      </ng-template>
+                    }
+                    @if (bundle.status === statuses.Processing || bundle.status === statuses.Pending) {
+                      <span class="spinner-border spinner-border-sm" role="status"></span>
+                    }
+                    @if (bundle.status !== statuses.Failed) {
+                      <span class="badge text-bg-secondary text-uppercase">{{ statusLabel(bundle.status) }}</span>
+                    }
+                  </div>
+                </td>
+                <td>
+                  @if (bundle.size_bytes !== undefined && bundle.size_bytes !== null) {
+                    {{ bundle.size_bytes | fileSize }}
+                  }
+                  @if (bundle.size_bytes === undefined || bundle.size_bytes === null) {
+                    <span class="text-muted">&mdash;</span>
+                  }
+                </td>
+                <td>
+                  @if (bundle.expiration) {
+                    {{ bundle.expiration | date: 'short' }}
+                  }
+                  @if (!bundle.expiration) {
+                    <span i18n>Never</span>
+                  }
+                </td>
+                <td>{{ bundle.document_count }}</td>
+                <td>{{ fileVersionLabel(bundle.file_version) }}</td>
+                <td class="text-end">
+                  <div class="btn-group btn-group-sm">
+                    <button
+                      type="button"
+                      class="btn btn-outline-primary"
+                      [disabled]="bundle.status !== statuses.Ready"
+                      (click)="copy(bundle)"
+                      title="Copy share link"
+                      i18n-title
+                    >
+                      @if (copiedSlug === bundle.slug) {
+                        <i-bs name="clipboard-check"></i-bs>
+                      }
+                      @if (copiedSlug !== bundle.slug) {
+                        <i-bs name="clipboard"></i-bs>
+                      }
+                      <span class="visually-hidden" i18n>Copy share link</span>
+                    </button>
+                    @if (bundle.status === statuses.Failed) {
+                      <button
+                        type="button"
+                        class="btn btn-outline-warning"
+                        [disabled]="loading"
+                        (click)="retry(bundle)"
+                      >
+                        <i-bs name="arrow-clockwise"></i-bs>
+                        <span class="visually-hidden" i18n>Retry</span>
+                      </button>
+                    }
+                    <pngx-confirm-button
+                      buttonClasses="btn btn-sm btn-outline-danger"
+                      [disabled]="loading"
+                      (confirm)="delete(bundle)"
+                      iconName="trash"
+                    >
+                      <span class="visually-hidden" i18n>Delete share link bundle</span>
+                    </pngx-confirm-button>
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    }
+  }
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-secondary btn-sm" (click)="close()" i18n>Close</button>
+</div>

src-ui/src/app/components/common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component.scss

@@ -0,0 +1,4 @@
+:host ::ng-deep .popover {
+  min-width: 300px;
+  max-width: 400px;
+ }

src-ui/src/app/components/common/share-link-bundle-manage-dialog/share-link-bundle-manage-dialog.component.spec.ts

@@ -0,0 +1,251 @@
+import { Clipboard } from '@angular/cdk/clipboard'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { FileVersion } from 'src/app/data/share-link'
+import {
+  ShareLinkBundleStatus,
+  ShareLinkBundleSummary,
+} from 'src/app/data/share-link-bundle'
+import { ShareLinkBundleService } from 'src/app/services/rest/share-link-bundle.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ShareLinkBundleManageDialogComponent } from './share-link-bundle-manage-dialog.component'
+
+class MockShareLinkBundleService {
+  listAllBundles = jest.fn()
+  delete = jest.fn()
+  rebuildBundle = jest.fn()
+}
+
+class MockToastService {
+  showInfo = jest.fn()
+  showError = jest.fn()
+}
+
+describe('ShareLinkBundleManageDialogComponent', () => {
+  let component: ShareLinkBundleManageDialogComponent
+  let fixture: ComponentFixture<ShareLinkBundleManageDialogComponent>
+  let service: MockShareLinkBundleService
+  let toastService: MockToastService
+  let clipboard: Clipboard
+  let activeModal: NgbActiveModal
+  let originalApiBaseUrl: string
+
+  beforeEach(() => {
+    service = new MockShareLinkBundleService()
+    toastService = new MockToastService()
+    originalApiBaseUrl = environment.apiBaseUrl
+
+    service.listAllBundles.mockReturnValue(of([]))
+    service.delete.mockReturnValue(of(true))
+    service.rebuildBundle.mockReturnValue(of(sampleBundle()))
+
+    TestBed.configureTestingModule({
+      imports: [
+        ShareLinkBundleManageDialogComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        NgbActiveModal,
+        { provide: ShareLinkBundleService, useValue: service },
+        { provide: ToastService, useValue: toastService },
+      ],
+    })
+
+    fixture = TestBed.createComponent(ShareLinkBundleManageDialogComponent)
+    component = fixture.componentInstance
+    clipboard = TestBed.inject(Clipboard)
+    activeModal = TestBed.inject(NgbActiveModal)
+  })
+
+  afterEach(() => {
+    component.ngOnDestroy()
+    fixture.destroy()
+    environment.apiBaseUrl = originalApiBaseUrl
+    jest.clearAllMocks()
+  })
+
+  const sampleBundle = (overrides: Partial<ShareLinkBundleSummary> = {}) =>
+    ({
+      id: 1,
+      slug: 'bundle-slug',
+      created: new Date().toISOString(),
+      document_count: 1,
+      documents: [1],
+      status: ShareLinkBundleStatus.Pending,
+      file_version: FileVersion.Archive,
+      last_error: undefined,
+      ...overrides,
+    }) as ShareLinkBundleSummary
+
+  it('loads bundles on init and polls periodically', fakeAsync(() => {
+    const bundles = [sampleBundle({ status: ShareLinkBundleStatus.Ready })]
+    service.listAllBundles.mockReset()
+    service.listAllBundles
+      .mockReturnValueOnce(of(bundles))
+      .mockReturnValue(of(bundles))
+
+    fixture.detectChanges()
+    tick()
+
+    expect(service.listAllBundles).toHaveBeenCalledTimes(1)
+    expect(component.bundles).toEqual(bundles)
+    expect(component.loading).toBe(false)
+    expect(component.error).toBeNull()
+
+    tick(5000)
+    expect(service.listAllBundles).toHaveBeenCalledTimes(2)
+  }))
+
+  it('handles errors when loading bundles', fakeAsync(() => {
+    service.listAllBundles.mockReset()
+    service.listAllBundles
+      .mockReturnValueOnce(throwError(() => new Error('load fail')))
+      .mockReturnValue(of([]))
+
+    fixture.detectChanges()
+    tick()
+
+    expect(component.error).toContain('Failed to load share link bundles.')
+    expect(toastService.showError).toHaveBeenCalled()
+    expect(component.loading).toBe(false)
+
+    tick(5000)
+    expect(service.listAllBundles).toHaveBeenCalledTimes(2)
+  }))
+
+  it('copies bundle links when ready', fakeAsync(() => {
+    jest.spyOn(clipboard, 'copy').mockReturnValue(true)
+    fixture.detectChanges()
+    tick()
+
+    const readyBundle = sampleBundle({
+      slug: 'ready-slug',
+      status: ShareLinkBundleStatus.Ready,
+    })
+    component.copy(readyBundle)
+
+    expect(clipboard.copy).toHaveBeenCalledWith(
+      component.getShareUrl(readyBundle)
+    )
+    expect(component.copiedSlug).toBe('ready-slug')
+    expect(toastService.showInfo).toHaveBeenCalled()
+
+    tick(3000)
+    expect(component.copiedSlug).toBeNull()
+  }))
+
+  it('ignores copy requests for non-ready bundles', fakeAsync(() => {
+    const copySpy = jest.spyOn(clipboard, 'copy')
+    fixture.detectChanges()
+    tick()
+    component.copy(sampleBundle({ status: ShareLinkBundleStatus.Pending }))
+    expect(copySpy).not.toHaveBeenCalled()
+  }))
+
+  it('deletes bundles and refreshes list', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    service.delete.mockReturnValue(of(true))
+
+    fixture.detectChanges()
+    tick()
+
+    component.delete(sampleBundle())
+    tick()
+
+    expect(service.delete).toHaveBeenCalled()
+    expect(toastService.showInfo).toHaveBeenCalledWith(
+      expect.stringContaining('deleted.')
+    )
+    expect(service.listAllBundles).toHaveBeenCalledTimes(2)
+    expect(component.loading).toBe(false)
+  }))
+
+  it('handles delete errors gracefully', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    service.delete.mockReturnValue(throwError(() => new Error('delete fail')))
+
+    fixture.detectChanges()
+    tick()
+
+    component.delete(sampleBundle())
+    tick()
+
+    expect(toastService.showError).toHaveBeenCalled()
+    expect(component.loading).toBe(false)
+  }))
+
+  it('retries bundle build and replaces existing entry', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    const updated = sampleBundle({ status: ShareLinkBundleStatus.Ready })
+    service.rebuildBundle.mockReturnValue(of(updated))
+
+    fixture.detectChanges()
+    tick()
+
+    component.bundles = [sampleBundle()]
+    component.retry(component.bundles[0])
+    tick()
+
+    expect(service.rebuildBundle).toHaveBeenCalledWith(updated.id)
+    expect(component.bundles[0].status).toBe(ShareLinkBundleStatus.Ready)
+    expect(toastService.showInfo).toHaveBeenCalled()
+  }))
+
+  it('adds new bundle when retry returns unknown entry', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    service.rebuildBundle.mockReturnValue(
+      of(sampleBundle({ id: 99, slug: 'new-slug' }))
+    )
+
+    fixture.detectChanges()
+    tick()
+
+    component.bundles = [sampleBundle()]
+    component.retry({ id: 99 } as ShareLinkBundleSummary)
+    tick()
+
+    expect(component.bundles.find((bundle) => bundle.id === 99)).toBeTruthy()
+  }))
+
+  it('handles retry errors', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    service.rebuildBundle.mockReturnValue(throwError(() => new Error('fail')))
+
+    fixture.detectChanges()
+    tick()
+
+    component.retry(sampleBundle())
+    tick()
+
+    expect(toastService.showError).toHaveBeenCalled()
+  }))
+
+  it('maps helpers and closes dialog', fakeAsync(() => {
+    service.listAllBundles.mockReturnValue(of([]))
+    fixture.detectChanges()
+    tick()
+
+    expect(component.statusLabel(ShareLinkBundleStatus.Processing)).toContain(
+      'Processing'
+    )
+    expect(component.fileVersionLabel(FileVersion.Original)).toContain(
+      'Original'
+    )
+
+    environment.apiBaseUrl = 'https://example.com/api/'
+    const url = component.getShareUrl(sampleBundle({ slug: 'sluggy' }))
+    expect(url).toBe('https://example.com/share/sluggy')
+
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.close()
+    expect(closeSpy).toHaveBeenCalled()
+  }))
+})