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

src-ui/angular.json

@@ -31,6 +31,7 @@
           "fi-FI": "src/locale/messages.fi_FI.xlf",
           "fr-FR": "src/locale/messages.fr_FR.xlf",
           "hu-HU": "src/locale/messages.hu_HU.xlf",
+          "id-ID": "src/locale/messages.id_ID.xlf",
           "it-IT": "src/locale/messages.it_IT.xlf",
           "ja-JP": "src/locale/messages.ja_JP.xlf",
           "lb-LU": "src/locale/messages.lb_LU.xlf",
@@ -85,7 +86,6 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "ng2-pdf-viewer",
               "file-saver",
               "utif"
             ],
@@ -155,16 +155,7 @@
           "builder": "@angular-builders/jest:run",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/apple-touch-icon.png",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
+            "zoneless": false
           }
         },
         "lint": {

src-ui/e2e/document-detail/document-detail.spec.ts

@@ -72,7 +72,7 @@ test('should show a mobile preview', async ({ page }) => {
   await page.setViewportSize({ width: 400, height: 1000 })
   await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
   await page.getByRole('tab', { name: 'Preview' }).click()
-  await page.waitForSelector('pdf-viewer')
+  await page.waitForSelector('pngx-pdf-viewer')
 })
 
 test('should show a list of notes', async ({ page }) => {

src-ui/e2e/document-list/document-list.spec.ts

@@ -174,12 +174,15 @@ test('bulk edit', async ({ page }) => {
   await expect(page.locator('pngx-document-list')).toHaveText(
     /Selected 61 of 61 documents/i
   )
-  await page.getByRole('button', { name: 'Cancel' }).click()
+  await page.getByRole('button', { name: 'None' }).click()
 
   await page.locator('pngx-document-card-small').nth(1).click()
   await page.locator('pngx-document-card-small').nth(2).click()
 
   await page.getByRole('button', { name: 'Tags' }).click()
+  await page
+    .getByRole('textbox', { name: 'Filter tags' })
+    .fill('TagWithPartial')
   await page.getByRole('menuitem', { name: 'TagWithPartial' }).click()
 
   await page.getByRole('button', { name: 'Apply' }).click()

src-ui/jest.config.js

@@ -1,5 +1,23 @@
+const { createEsmPreset } = require('jest-preset-angular/presets')
+
+const esmPreset = createEsmPreset({
+  tsconfig: '<rootDir>/tsconfig.spec.json',
+  stringifyContentPathRegex: '\\.(html|svg)$',
+})
+
 module.exports = {
-  preset: 'jest-preset-angular',
+  ...esmPreset,
+  transform: {
+    ...esmPreset.transform,
+    '^.+\\.(ts|js|mjs|html|svg)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+        useESM: true,
+      },
+    ],
+  },
   setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
   testPathIgnorePatterns: [
     '/node_modules/',
@@ -8,10 +26,15 @@ module.exports = {
     'abstract-paperless-service',
   ],
   transformIgnorePatterns: [
-    `<rootDir>/node_modules/.pnpm/(?!.*\\.mjs$|lodash-es|@angular\\+common.*locales)`,
+    'node_modules/(?!.*(\\.mjs$|tslib|lodash-es|@angular/common/locales/.*\\.js$))',
   ],
   moduleNameMapper: {
+    ...esmPreset.moduleNameMapper,
     '^src/(.*)': '<rootDir>/src/$1',
+    '^pdfjs-dist/legacy/build/pdf\\.mjs$':
+      '<rootDir>/src/test/mocks/pdfjs-legacy-build-pdf.ts',
+    '^pdfjs-dist/web/pdf_viewer\\.mjs$':
+      '<rootDir>/src/test/mocks/pdfjs-web-pdf_viewer.ts',
   },
   workerIdleMemoryLimit: '512MB',
   reporters: [

src-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "2.18.4",
+  "version": "2.20.6",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",
@@ -11,65 +11,66 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.2.2",
-    "@angular/common": "~20.2.4",
-    "@angular/compiler": "~20.2.4",
-    "@angular/core": "~20.2.4",
-    "@angular/forms": "~20.2.4",
-    "@angular/localize": "~20.2.4",
-    "@angular/platform-browser": "~20.2.4",
-    "@angular/platform-browser-dynamic": "~20.2.4",
-    "@angular/router": "~20.2.4",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.1",
-    "@ng-select/ng-select": "^20.1.3",
+    "@angular/cdk": "^21.1.3",
+    "@angular/common": "~21.1.3",
+    "@angular/compiler": "~21.1.3",
+    "@angular/core": "~21.1.3",
+    "@angular/forms": "~21.1.3",
+    "@angular/localize": "~21.1.3",
+    "@angular/platform-browser": "~21.1.3",
+    "@angular/platform-browser-dynamic": "~21.1.3",
+    "@angular/router": "~21.1.3",
+    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
+    "@ng-select/ng-select": "^21.2.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
-    "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
-    "ngx-color": "^10.0.0",
-    "ngx-cookie-service": "^20.1.0",
-    "ngx-device-detector": "^10.1.0",
-    "ngx-ui-tour-ng-bootstrap": "^17.0.1",
+    "ngx-color": "^10.1.0",
+    "ngx-cookie-service": "^21.1.0",
+    "ngx-device-detector": "^11.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^18.0.0",
+    "pdfjs-dist": "^5.4.624",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
-    "uuid": "^11.1.0",
-    "zone.js": "^0.15.1"
+    "uuid": "^13.0.0",
+    "zone.js": "^0.16.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^20.0.0",
-    "@angular-builders/jest": "^20.0.0",
-    "@angular-devkit/core": "^20.2.2",
-    "@angular-devkit/schematics": "^20.2.2",
-    "@angular-eslint/builder": "20.2.0",
-    "@angular-eslint/eslint-plugin": "20.2.0",
-    "@angular-eslint/eslint-plugin-template": "20.2.0",
-    "@angular-eslint/schematics": "20.2.0",
-    "@angular-eslint/template-parser": "20.2.0",
-    "@angular/build": "^20.2.2",
-    "@angular/cli": "~20.2.2",
-    "@angular/compiler-cli": "~20.2.4",
+    "@angular-builders/custom-webpack": "^21.0.3",
+    "@angular-builders/jest": "^21.0.3",
+    "@angular-devkit/core": "^21.1.3",
+    "@angular-devkit/schematics": "^21.1.3",
+    "@angular-eslint/builder": "21.2.0",
+    "@angular-eslint/eslint-plugin": "21.2.0",
+    "@angular-eslint/eslint-plugin-template": "21.2.0",
+    "@angular-eslint/schematics": "21.2.0",
+    "@angular-eslint/template-parser": "21.2.0",
+    "@angular/build": "^21.1.3",
+    "@angular/cli": "~21.1.3",
+    "@angular/compiler-cli": "~21.1.3",
     "@codecov/webpack-plugin": "^1.9.1",
-    "@playwright/test": "^1.55.0",
+    "@playwright/test": "^1.58.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^24.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.41.0",
-    "@typescript-eslint/parser": "^8.41.0",
-    "@typescript-eslint/utils": "^8.41.0",
-    "eslint": "^9.34.0",
-    "jest": "30.1.3",
-    "jest-environment-jsdom": "^30.1.2",
+    "@types/node": "^25.2.1",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/utils": "^8.54.0",
+    "eslint": "^9.39.2",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "jest-junit": "^16.0.0",
-    "jest-preset-angular": "^15.0.0",
+    "jest-preset-angular": "^16.0.0",
     "jest-websocket-mock": "^2.5.0",
-    "prettier-plugin-organize-imports": "^4.2.0",
+    "prettier-plugin-organize-imports": "^4.3.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.8.3",
-    "webpack": "^5.101.3"
+    "typescript": "^5.9.3",
+    "webpack": "^5.105.0"
   },
+  "packageManager": "pnpm@10.17.1",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

src-ui/setup-jest.ts

@@ -28,6 +28,7 @@ import localeFa from '@angular/common/locales/fa'
 import localeFi from '@angular/common/locales/fi'
 import localeFr from '@angular/common/locales/fr'
 import localeHu from '@angular/common/locales/hu'
+import localeId from '@angular/common/locales/id'
 import localeIt from '@angular/common/locales/it'
 import localeJa from '@angular/common/locales/ja'
 import localeKo from '@angular/common/locales/ko'
@@ -63,6 +64,7 @@ registerLocaleData(localeFa)
 registerLocaleData(localeFi)
 registerLocaleData(localeFr)
 registerLocaleData(localeHu)
+registerLocaleData(localeId)
 registerLocaleData(localeIt)
 registerLocaleData(localeJa)
 registerLocaleData(localeKo)
@@ -98,10 +100,10 @@ const mock = () => {
   }
 }
 
-Object.defineProperty(window, 'open', { value: jest.fn() })
-Object.defineProperty(window, 'localStorage', { value: mock() })
-Object.defineProperty(window, 'sessionStorage', { value: mock() })
-Object.defineProperty(window, 'getComputedStyle', {
+Object.defineProperty(globalThis, 'open', { value: jest.fn() })
+Object.defineProperty(globalThis, 'localStorage', { value: mock() })
+Object.defineProperty(globalThis, 'sessionStorage', { value: mock() })
+Object.defineProperty(globalThis, 'getComputedStyle', {
   value: () => ['-webkit-appearance'],
 })
 Object.defineProperty(navigator, 'clipboard', {
@@ -113,13 +115,33 @@ Object.defineProperty(navigator, 'canShare', { value: () => true })
 if (!navigator.share) {
   Object.defineProperty(navigator, 'share', { value: jest.fn() })
 }
-if (!URL.createObjectURL) {
-  Object.defineProperty(window.URL, 'createObjectURL', { value: jest.fn() })
+if (!globalThis.URL.createObjectURL) {
+  Object.defineProperty(globalThis.URL, 'createObjectURL', { value: jest.fn() })
 }
-if (!URL.revokeObjectURL) {
-  Object.defineProperty(window.URL, 'revokeObjectURL', { value: jest.fn() })
+if (!globalThis.URL.revokeObjectURL) {
+  Object.defineProperty(globalThis.URL, 'revokeObjectURL', { value: jest.fn() })
 }
-Object.defineProperty(window, 'ResizeObserver', { value: mock() })
+class MockResizeObserver {
+  private readonly callback: ResizeObserverCallback
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+  }
+
+  observe = jest.fn()
+  unobserve = jest.fn()
+  disconnect = jest.fn()
+
+  trigger = (entries: ResizeObserverEntry[] = []) => {
+    this.callback(entries, this)
+  }
+}
+
+Object.defineProperty(globalThis, 'ResizeObserver', {
+  writable: true,
+  configurable: true,
+  value: MockResizeObserver,
+})
 
 if (typeof IntersectionObserver === 'undefined') {
   class MockIntersectionObserver {
@@ -134,7 +156,7 @@ if (typeof IntersectionObserver === 'undefined') {
     takeRecords = jest.fn()
   }
 
-  Object.defineProperty(window, 'IntersectionObserver', {
+  Object.defineProperty(globalThis, 'IntersectionObserver', {
     writable: true,
     configurable: true,
     value: MockIntersectionObserver,
@@ -145,4 +167,18 @@ HTMLCanvasElement.prototype.getContext = <
   typeof HTMLCanvasElement.prototype.getContext
 >jest.fn()
 
+if (!HTMLElement.prototype.scrollTo) {
+  HTMLElement.prototype.scrollTo = jest.fn()
+}
+
+jest.mock('uuid', () => ({
+  v4: jest.fn(() =>
+    'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (char: string) => {
+      const random = Math.floor(Math.random() * 16)
+      const value = char === 'x' ? random : (random & 0x3) | 0x8
+      return value.toString(16)
+    })
+  ),
+}))
+
 jest.mock('pdfjs-dist')

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

@@ -9,7 +9,11 @@ import {
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import {
+  provideUiTour,
+  TourNgBootstrap,
+  TourService,
+} from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from './app-routing.module'
 import { AppComponent } from './app.component'
@@ -40,12 +44,12 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [
-        TourNgBootstrapModule,
         RouterModule.forRoot(routes),
         NgbModalModule,
         AppComponent,
         ToastsComponent,
         FileDropComponent,
+        TourNgBootstrap,
         NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
@@ -53,6 +57,7 @@ describe('AppComponent', () => {
         DirtySavedViewGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 

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

@@ -1,6 +1,6 @@
 import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router, RouterOutlet } from '@angular/router'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
 import { FileDropComponent } from './components/file-drop/file-drop.component'
@@ -21,12 +21,7 @@ import { WebsocketStatusService } from './services/websocket-status.service'
   selector: 'pngx-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [
-    FileDropComponent,
-    ToastsComponent,
-    TourNgBootstrapModule,
-    RouterOutlet,
-  ],
+  imports: [FileDropComponent, ToastsComponent, TourNgBootstrap, RouterOutlet],
 })
 export class AppComponent implements OnInit, OnDestroy {
   private settings = inject(SettingsService)
@@ -167,108 +162,91 @@ export class AppComponent implements OnInit, OnDestroy {
         })
     }
 
-    const prevBtnTitle = $localize`Prev`
-    const nextBtnTitle = $localize`Next`
-    const endBtnTitle = $localize`End`
-
-    this.tourService.initialize(
-      [
-        {
-          anchorId: 'tour.dashboard',
-          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
-          route: '/dashboard',
-          delayAfterNavigation: 500,
-          isOptional: false,
-        },
-        {
-          anchorId: 'tour.upload-widget',
-          content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.`,
-          route: '/dashboard',
-        },
-        {
-          anchorId: 'tour.documents',
-          content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-          delayAfterNavigation: 500,
-          placement: 'bottom',
-        },
-        {
-          anchorId: 'tour.documents-filter-editor',
-          content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-          placement: 'bottom',
-        },
-        {
-          anchorId: 'tour.documents-views',
-          content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-        },
-        {
-          anchorId: 'tour.tags',
-          content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
-          route: '/tags',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.mail',
-          content: $localize`Manage e-mail accounts and rules for automatically importing documents.`,
-          route: '/mail',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.workflows',
-          content: $localize`Workflows give you more control over the document pipeline.`,
-          route: '/workflows',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.file-tasks',
-          content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
-          route: '/tasks',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.settings',
-          content: $localize`Check out the settings for various tweaks to the web app.`,
-          route: '/settings',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.outro',
-          title: $localize`Thank you! 🙏`,
-          content:
-            $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
-            '<br/><br/>' +
-            $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
-          route: '/dashboard',
-          isOptional: false,
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-      ],
+    this.tourService.initialize([
       {
-        enableBackdrop: true,
+        anchorId: 'tour.dashboard',
+        content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
+        route: '/dashboard',
+        delayAfterNavigation: 500,
+        isOptional: false,
+      },
+      {
+        anchorId: 'tour.upload-widget',
+        content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.`,
+        route: '/dashboard',
+      },
+      {
+        anchorId: 'tour.documents',
+        content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+        delayAfterNavigation: 500,
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-filter-editor',
+        content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-views',
+        content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+      },
+      {
+        anchorId: 'tour.tags',
+        content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
+        route: '/tags',
         backdropConfig: {
-          offset: 10,
+          offset: 0,
         },
-        prevBtnTitle,
-        nextBtnTitle,
-        endBtnTitle,
-        isOptional: true,
-        useLegacyTitle: true,
-      }
-    )
+      },
+      {
+        anchorId: 'tour.mail',
+        content: $localize`Manage e-mail accounts and rules for automatically importing documents.`,
+        route: '/mail',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.workflows',
+        content: $localize`Workflows give you more control over the document pipeline.`,
+        route: '/workflows',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.file-tasks',
+        content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
+        route: '/tasks',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.settings',
+        content: $localize`Check out the settings for various tweaks to the web app.`,
+        route: '/settings',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.outro',
+        title: $localize`Thank you! 🙏`,
+        content:
+          $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
+          '<br/><br/>' +
+          $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
+        route: '/dashboard',
+        isOptional: false,
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+    ])
 
     this.tourService.start$.subscribe(() => {
       this.renderer.addClass(document.body, 'tour-active')

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')
   })
 })