Merge branch 'dev' into feature-8271

2025-12-18 01:41:14 -06:00 · 2024-12-01 19:36:37 -08:00
parent 7756d49e5c 00485138f9
commit 5ef31859c8
113 changed files with 3792 additions and 1233 deletions
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
@@ -33,6 +33,7 @@
        "ngx-ui-tour-ng-bootstrap": "^15.0.0",
        "rxjs": "^7.8.1",
        "tslib": "^2.8.1",
+        "utif": "^3.1.0",
        "uuid": "^11.0.2",
        "zone.js": "^0.14.8"
      },
@@ -13758,6 +13759,12 @@
        "node": "^16.14.0 || >=18.0.0"
      }
    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -16563,6 +16570,15 @@
        "requires-port": "^1.0.0"
      }
    },
+    "node_modules/utif": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/utif/-/utif-3.1.0.tgz",
+      "integrity": "sha512-WEo4D/xOvFW53K5f5QTaTbbiORcm2/pCL9P6qmJnup+17eYfKaEhDeX9PeQkuyEoIxlbGklDuGl8xwuXYMrrXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.5"
+      }
+    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
--- a/src-ui/package.json
+++ b/src-ui/package.json
@@ -35,6 +35,7 @@
    "ngx-ui-tour-ng-bootstrap": "^15.0.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.8.1",
+    "utif": "^3.1.0",
    "uuid": "^11.0.2",
    "zone.js": "^0.14.8"
  },
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -145,7 +145,6 @@ import {
  asterisk,
  braces,
  bodyText,
-  boxArrowInRight,
  boxArrowUp,
  boxArrowUpRight,
  boxes,
@@ -186,6 +185,7 @@ import {
  fileEarmarkFill,
  fileEarmarkLock,
  fileEarmarkMinus,
+  fileEarmarkRichtext,
  files,
  fileText,
  filter,
@@ -253,7 +253,6 @@ const icons = {
  asterisk,
  braces,
  bodyText,
-  boxArrowInRight,
  boxArrowUp,
  boxArrowUpRight,
  boxes,
@@ -294,6 +293,7 @@ const icons = {
  fileEarmarkFill,
  fileEarmarkLock,
  fileEarmarkMinus,
+  fileEarmarkRichtext,
  files,
  fileText,
  filter,
--- a/src-ui/src/app/components/admin/logs/logs.component.html
+++ b/src-ui/src/app/components/admin/logs/logs.component.html
@@ -36,9 +36,7 @@
      <ng-container i18n>Loading...</ng-container>
    </div>
  }
-  @for (log of logs; track log) {
-    <p
-      class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    >{{log}}</p>
+  @for (log of logs; track $index) {
+    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
  }
 </div>
--- a/src-ui/src/app/components/admin/trash/trash.component.html
+++ b/src-ui/src/app/components/admin/trash/trash.component.html
@@ -47,14 +47,19 @@
                </tr>
            }
            @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()">
                    <td>
                    <div class="form-check m-0 ms-2 me-n2">
                        <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
                        <label class="form-check-label" for="{{document.id}}"></label>
                    </div>
                    </td>
-                    <td scope="row">{{ document.title }}</td>
+                    <td scope="row">
+                      {{ document.title }}
+                      <pngx-preview-popup [document]="document" linkClasses="btn btn-sm btn-link" #popupPreview>
+                        <i-bs name="eye"></i-bs>
+                      </pngx-preview-popup>
+                    </td>
                    <td scope="row" i18n>{{ getDaysRemaining(document) }} days</td>
                    <td scope="row">
                    <div class="btn-group d-block d-sm-none">
--- a/src-ui/src/app/components/admin/trash/trash.component.spec.ts
+++ b/src-ui/src/app/components/admin/trash/trash.component.spec.ts
@@ -16,6 +16,7 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { By } from '@angular/platform-browser'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ToastService } from 'src/app/services/toast.service'
+import { Router } from '@angular/router'

 const documentsInTrash = [
  {
@@ -38,6 +39,7 @@ describe('TrashComponent', () => {
  let trashService: TrashService
  let modalService: NgbModal
  let toastService: ToastService
+  let router: Router

  beforeEach(async () => {
    await TestBed.configureTestingModule({
@@ -61,6 +63,7 @@ describe('TrashComponent', () => {
    trashService = TestBed.inject(TrashService)
    modalService = TestBed.inject(NgbModal)
    toastService = TestBed.inject(ToastService)
+    router = TestBed.inject(Router)
    component = fixture.componentInstance
    fixture.detectChanges()
  })
@@ -161,6 +164,22 @@ describe('TrashComponent', () => {
    expect(restoreSpy).toHaveBeenCalledWith([1, 2])
  })

+  it('should offer link to restored document', () => {
+    let toasts
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    toastService.getToasts().subscribe((allToasts) => {
+      toasts = [...allToasts]
+    })
+    jest.spyOn(trashService, 'restoreDocuments').mockReturnValue(of('OK'))
+    component.restore(documentsInTrash[0])
+    expect(toasts.length).toEqual(1)
+    toasts[0].action()
+    expect(navigateSpy).toHaveBeenCalledWith([
+      'documents',
+      documentsInTrash[0].id,
+    ])
+  })
+
  it('should support toggle all items in view', () => {
    component.documentsInTrash = documentsInTrash
    expect(component.selectedDocuments.size).toEqual(0)
--- a/src-ui/src/app/components/admin/trash/trash.component.ts
+++ b/src-ui/src/app/components/admin/trash/trash.component.ts
@@ -7,6 +7,7 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 import { Subject, takeUntil } from 'rxjs'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { Router } from '@angular/router'

@Component({
  selector: 'pngx-trash',
@@ -26,7 +27,8 @@ export class TrashComponent implements OnDestroy {
    private trashService: TrashService,
    private toastService: ToastService,
    private modalService: NgbModal,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private router: Router
  ) {
    this.reload()
  }
@@ -110,7 +112,14 @@ export class TrashComponent implements OnDestroy {
  restore(document: Document) {
    this.trashService.restoreDocuments([document.id]).subscribe({
      next: () => {
-        this.toastService.showInfo($localize`Document restored`)
+        this.toastService.show({
+          content: $localize`Document restored`,
+          delay: 5000,
+          actionName: $localize`Open document`,
+          action: () => {
+            this.router.navigate(['documents', document.id])
+          },
+        })
        this.reload()
      },
      error: (err) => {
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow-sm">
+<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow-sm">
  <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
    data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
    (click)="isMenuCollapsed = !isMenuCollapsed">
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -48,6 +48,13 @@

 main {
  transition: all .2s ease;
+  padding-top: 110px;
+}
+
+@media (min-width: 768px) {
+  main {
+    padding-top: 56px;
+  }
 }

 .sidebar-slim-toggler {
--- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
@@ -343,6 +343,7 @@ describe('AppFrameComponent', () => {
    component.editProfile()
    expect(modalSpy).toHaveBeenCalledWith(ProfileEditDialogComponent, {
      backdrop: 'static',
+      size: 'xl',
    })
  })

--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@@ -136,6 +136,7 @@ export class AppFrameComponent
  editProfile() {
    this.modalService.open(ProfileEditDialogComponent, {
      backdrop: 'static',
+      size: 'xl',
    })
    this.closeMenu()
  }
--- a/src-ui/src/app/components/app-frame/global-search/global-search.component.html
+++ b/src-ui/src/app/components/app-frame/global-search/global-search.component.html
@@ -49,7 +49,7 @@
                [disabled]="disablePrimaryButton(type, item)"
                (mouseenter)="onButtonHover($event)">
                    @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="box-arrow-in-right"></i-bs>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                    } @else if (type === DataType.SavedView) {
                        <i-bs width="1em" height="1em" name="eye"></i-bs>
@@ -72,7 +72,7 @@
                            <i-bs width="1em" height="1em" name="download"></i-bs>
                            <span>&nbsp;<ng-container i18n>Download</ng-container></span>
                        } @else {
-                            <i-bs width="1em" height="1em" name="box-arrow-in-right"></i-bs>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
                            <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                        }
                    </button>
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss
@@ -1,6 +1,6 @@
 .pdf-viewer-container {
  background-color: gray;
-  height: 350px;
+  height: 550px;

  pdf-viewer {
    width: 100%;
--- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html
@@ -6,7 +6,7 @@
 <div class="modal-body">
    <p>{{message}}</p>
    <div class="row mb-2">
-        <div class="col-8">
+        <div class="col-7">
            <div class="input-group input-group-sm">
                <div class="input-group-text" i18n>Page</div>
                <input class="form-control" type="number" min="1" [(ngModel)]="page" />
@@ -21,7 +21,7 @@
                </pdf-viewer>
            </div>
        </div>
-        <div class="col-4">
+        <div class="col-5">
            <div class="d-grid">
                <button class="btn btn-sm btn-primary" (click)="addSplit()" [disabled]="!canSplit">
                    <i-bs name="plus-circle"></i-bs>&nbsp;
@@ -44,12 +44,12 @@
            </ul>
        </div>
    </div>
-    <div class="form-check form-switch mt-4">
+</div>
+<div class="modal-footer">
+    <div class="form-check form-switch me-auto">
       <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalSwitch" [(ngModel)]="deleteOriginal" [disabled]="!userOwnsDocument">
       <label class="form-check-label" for="deleteOriginalSwitch" i18n>Delete original document after successful split</label>
     </div>
-</div>
-<div class="modal-footer">
    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
            <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
        </button>
--- a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss
@@ -1,6 +1,6 @@
 .pdf-viewer-container {
    background-color: gray;
-    height: 350px;
+    height: 500px;

    pdf-viewer {
      width: 100%;
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
@@ -28,6 +28,9 @@
              </div>
            }
          </div>
+          @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">
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.html
@@ -32,6 +32,20 @@
          </div>

          <pngx-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></pngx-input-select>
+
+          @if (object?.is_mfa_enabled && currentUserIsSuperUser) {
+            <label class="form-label" i18n>Two-factor Authentication</label>
+            <pngx-confirm-button
+              label="Disable Two-factor Authentication"
+              i18n-label
+              title="Disable Two-factor Authentication"
+              i18n-title
+              buttonClasses="btn-outline-danger btn-sm"
+              iconName="trash"
+              [disabled]="totpLoading"
+              (confirm)="deactivateTotp()">
+            </pngx-confirm-button>
+          }
        </div>
        <div class="col">
          <pngx-permissions-select i18n-title title="Permissions" formControlName="user_permissions" [error]="error?.user_permissions" [inheritedPermissions]="inheritedPermissions"></pngx-permissions-select>
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.spec.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { of } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { GroupService } from 'src/app/services/rest/group.service'
@@ -21,10 +21,15 @@ import { EditDialogMode } from '../edit-dialog.component'
 import { UserEditDialogComponent } from './user-edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ToastService } from 'src/app/services/toast.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { PermissionsService } from 'src/app/services/permissions.service'

 describe('UserEditDialogComponent', () => {
  let component: UserEditDialogComponent
  let settingsService: SettingsService
+  let permissionsService: PermissionsService
+  let toastService: ToastService
  let fixture: ComponentFixture<UserEditDialogComponent>

  beforeEach(async () => {
@@ -71,6 +76,8 @@ describe('UserEditDialogComponent', () => {
    fixture = TestBed.createComponent(UserEditDialogComponent)
    settingsService = TestBed.inject(SettingsService)
    settingsService.currentUser = { id: 99, username: 'user99' }
+    permissionsService = TestBed.inject(PermissionsService)
+    toastService = TestBed.inject(ToastService)
    component = fixture.componentInstance

    fixture.detectChanges()
@@ -121,4 +128,38 @@ describe('UserEditDialogComponent', () => {
    component.save()
    expect(component.passwordIsSet).toBeTruthy()
  })
+
+  it('should support deactivation of TOTP', () => {
+    component.object = { id: 99, username: 'user99' }
+    const deactivateSpy = jest.spyOn(
+      component['service'] as UserService,
+      'deactivateTotp'
+    )
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    deactivateSpy.mockReturnValueOnce(throwError(() => new Error('error')))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    deactivateSpy.mockReturnValueOnce(of(false))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    deactivateSpy.mockReturnValueOnce(of(true))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
+
+  it('should check superuser status of current user', () => {
+    expect(component.currentUserIsSuperUser).toBeFalsy()
+    permissionsService.initialize([], {
+      id: 99,
+      username: 'user99',
+      is_superuser: true,
+    })
+    expect(component.currentUserIsSuperUser).toBeTruthy()
+  })
 })
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
@@ -5,9 +5,11 @@ import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
+import { 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'
+import { ToastService } from 'src/app/services/toast.service'

@Component({
  selector: 'pngx-user-edit-dialog',
@@ -20,12 +22,15 @@ export class UserEditDialogComponent
 {
  groups: Group[]
  passwordIsSet: boolean = false
+  public totpLoading: boolean = false

  constructor(
    service: UserService,
    activeModal: NgbActiveModal,
    groupsService: GroupService,
-    settingsService: SettingsService
+    settingsService: SettingsService,
+    private toastService: ToastService,
+    private permissionsService: PermissionsService
  ) {
    super(service, activeModal, service, settingsService)

@@ -87,4 +92,30 @@ export class UserEditDialogComponent
        .length > 0
    super.save()
  }
+
+  get currentUserIsSuperUser(): boolean {
+    return this.permissionsService.isSuperUser()
+  }
+
+  deactivateTotp() {
+    this.totpLoading = true
+    ;(this.service as UserService)
+      .deactivateTotp(this.object)
+      .pipe(first())
+      .subscribe({
+        next: (result) => {
+          this.totpLoading = false
+          if (result) {
+            this.toastService.showInfo($localize`Totp deactivated`)
+            this.object.is_mfa_enabled = false
+          } else {
+            this.toastService.showError($localize`Totp deactivation failed`)
+          }
+        },
+        error: (e) => {
+          this.totpLoading = false
+          this.toastService.showError($localize`Totp deactivation failed`, e)
+        },
+      })
+  }
 }
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.html
@@ -119,6 +119,32 @@
  <div [formGroup]="formGroup">
    <input type="hidden" formControlName="id" />
    <pngx-input-select i18n-title title="Trigger type" [horizontal]="true" [items]="triggerTypeOptions" formControlName="type"></pngx-input-select>
+    @if (formGroup.get('type').value === WorkflowTriggerType.Scheduled) {
+      <p class="small" i18n>Set scheduled trigger offset and which field to use.</p>
+      <div class="row">
+        <div class="col-4">
+          <pngx-input-number i18n-title title="Offset days" formControlName="schedule_offset_days" i18n-hint hint="Use 0 for immediate." [showAdd]="false" [error]="error?.schedule_offset_days"></pngx-input-number>
+        </div>
+        <div class="col-4">
+          <pngx-input-select i18n-title title="Relative to" formControlName="schedule_date_field" [items]="scheduleDateFieldOptions" [error]="error?.schedule_date_field"></pngx-input-select>
+        </div>
+        @if (formGroup.get('schedule_date_field').value === 'custom_field') {
+          <div class="col-4">
+            <pngx-input-select i18n-title title="Delay custom field" formControlName="schedule_date_custom_field" [items]="dateCustomFields" i18n-hint hint="Custom field to use for date." [error]="error?.schedule_date_custom_field"></pngx-input-select>
+          </div>
+        }
+      </div>
+      <div class="row">
+        <div class="col-4">
+          <pngx-input-check i18n-title title="Recurring" formControlName="schedule_is_recurring" i18n-hint hint="Trigger is recurring." [error]="error?.schedule_is_recurring"></pngx-input-check>
+        </div>
+        <div class="col-4">
+          @if (formGroup.get('schedule_is_recurring').value === true) {
+            <pngx-input-number i18n-title title="Recurring interval days" formControlName="schedule_recurring_interval_days" i18n-hint hint="Repeat the trigger every n days." [showAdd]="false" [error]="error?.schedule_recurring_interval_days"></pngx-input-number>
+          }
+        </div>
+      </div>
+    }
    <p class="small" i18n>Trigger for documents that match <em>all</em> filters specified below.</p>
    <div class="row">
      <div class="col">
@@ -128,7 +154,7 @@
          <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>
        }
-        @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated) {
+        @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>
@@ -138,7 +164,7 @@
          }
        }
      </div>
-      @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated) {
+      @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>
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.spec.ts
@@ -22,6 +22,7 @@ import { SwitchComponent } from '../../input/switch/switch.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import {
  DOCUMENT_SOURCE_OPTIONS,
+  SCHEDULE_DATE_FIELD_OPTIONS,
  WORKFLOW_ACTION_OPTIONS,
  WORKFLOW_TYPE_OPTIONS,
  WorkflowEditDialogComponent,
@@ -40,6 +41,7 @@ import {
 import { MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/matching-model'
 import { ConfirmButtonComponent } from '../../confirm-button/confirm-button.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { CustomFieldDataType } from 'src/app/data/custom-field'

 const workflow: Workflow = {
  name: 'Workflow 1',
@@ -148,7 +150,18 @@ describe('WorkflowEditDialogComponent', () => {
          useValue: {
            listAll: () =>
              of({
-                results: [],
+                results: [
+                  {
+                    id: 1,
+                    name: 'cf1',
+                    data_type: CustomFieldDataType.String,
+                  },
+                  {
+                    id: 2,
+                    name: 'cf2',
+                    data_type: CustomFieldDataType.Date,
+                  },
+                ],
              }),
          },
        },
@@ -186,7 +199,7 @@ describe('WorkflowEditDialogComponent', () => {
    expect(editTitleSpy).toHaveBeenCalled()
  })

-  it('should return source options, type options, type name', () => {
+  it('should return source options, type options, type name, schedule date field options', () => {
    // coverage
    expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
    expect(component.triggerTypeOptions).toEqual(WORKFLOW_TYPE_OPTIONS)
@@ -200,6 +213,9 @@ describe('WorkflowEditDialogComponent', () => {
      component.getActionTypeOptionName(WorkflowActionType.Assignment)
    ).toEqual('Assignment')
    expect(component.getActionTypeOptionName(null)).toEqual('')
+    expect(component.scheduleDateFieldOptions).toEqual(
+      SCHEDULE_DATE_FIELD_OPTIONS
+    )
  })

  it('should support add and remove triggers and actions', () => {
--- a/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts
@@ -16,9 +16,10 @@ import { EditDialogComponent } from '../edit-dialog.component'
 import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
 import { MailRule } from 'src/app/data/mail-rule'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { CustomField } from 'src/app/data/custom-field'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import {
  DocumentSource,
+  ScheduleDateField,
  WorkflowTrigger,
  WorkflowTriggerType,
 } from 'src/app/data/workflow-trigger'
@@ -48,6 +49,25 @@ export const DOCUMENT_SOURCE_OPTIONS = [
  },
 ]

+export const SCHEDULE_DATE_FIELD_OPTIONS = [
+  {
+    id: ScheduleDateField.Added,
+    name: $localize`Added`,
+  },
+  {
+    id: ScheduleDateField.Created,
+    name: $localize`Created`,
+  },
+  {
+    id: ScheduleDateField.Modified,
+    name: $localize`Modified`,
+  },
+  {
+    id: ScheduleDateField.CustomField,
+    name: $localize`Custom Field`,
+  },
+]
+
 export const WORKFLOW_TYPE_OPTIONS = [
  {
    id: WorkflowTriggerType.Consumption,
@@ -61,6 +81,10 @@ export const WORKFLOW_TYPE_OPTIONS = [
    id: WorkflowTriggerType.DocumentUpdated,
    name: $localize`Document Updated`,
  },
+  {
+    id: WorkflowTriggerType.Scheduled,
+    name: $localize`Scheduled`,
+  },
 ]

 export const WORKFLOW_ACTION_OPTIONS = [
@@ -96,6 +120,7 @@ export class WorkflowEditDialogComponent
  storagePaths: StoragePath[]
  mailRules: MailRule[]
  customFields: CustomField[]
+  dateCustomFields: CustomField[]

  expandedItem: number = null

@@ -135,7 +160,12 @@ export class WorkflowEditDialogComponent
    customFieldsService
      .listAll()
      .pipe(first())
-      .subscribe((result) => (this.customFields = result.results))
+      .subscribe((result) => {
+        this.customFields = result.results
+        this.dateCustomFields = this.customFields?.filter(
+          (f) => f.data_type === CustomFieldDataType.Date
+        )
+      })
  }

  getCreateTitle() {
@@ -314,6 +344,15 @@ export class WorkflowEditDialogComponent
        filter_has_document_type: new FormControl(
          trigger.filter_has_document_type
        ),
+        schedule_offset_days: new FormControl(trigger.schedule_offset_days),
+        schedule_is_recurring: new FormControl(trigger.schedule_is_recurring),
+        schedule_recurring_interval_days: new FormControl(
+          trigger.schedule_recurring_interval_days
+        ),
+        schedule_date_field: new FormControl(trigger.schedule_date_field),
+        schedule_date_custom_field: new FormControl(
+          trigger.schedule_date_custom_field
+        ),
      }),
      { emitEvent }
    )
@@ -388,6 +427,10 @@ export class WorkflowEditDialogComponent
    return WORKFLOW_TYPE_OPTIONS
  }

+  get scheduleDateFieldOptions() {
+    return SCHEDULE_DATE_FIELD_OPTIONS
+  }
+
  getTriggerTypeOptionName(type: WorkflowTriggerType): string {
    return this.triggerTypeOptions.find((t) => t.id === type)?.name ?? ''
  }
@@ -408,6 +451,11 @@ export class WorkflowEditDialogComponent
      matching_algorithm: MATCH_NONE,
      match: '',
      is_insensitive: true,
+      schedule_offset_days: 0,
+      schedule_is_recurring: false,
+      schedule_recurring_interval_days: 1,
+      schedule_date_field: ScheduleDateField.Added,
+      schedule_date_custom_field: null,
    }
    this.object.triggers.push(trigger)
    this.createTriggerField(trigger)
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -35,23 +35,31 @@
      </div>
      @if (selectionModel.items) {
        <div class="items" #buttonItems>
-          @for (item of selectionModel.itemsSorted | filter: filterText:'name'; track item; let i = $index) {
+          @for (item of selectionModel.items | filter: filterText:'name'; track item; let i = $index) {
            @if (allowSelectNone || item.id) {
              <pngx-toggleable-dropdown-button
-                [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggled)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
+                [item]="item"
+                [hideCount]="hideCount(item)"
+                [opacifyCount]="!editing"
+                [state]="selectionModel.get(item.id)"
+                [count]="getUpdatedDocumentCount(item.id)"
+                (toggled)="selectionModel.toggle(item.id)"
+                (exclude)="excludeClicked(item.id)"
+                (click)="setButtonItemIndex(i - 1)"
+                [disabled]="disabled">
              </pngx-toggleable-dropdown-button>
            }
          }
        </div>
      }
      @if (editing) {
-        @if ((selectionModel.itemsSorted | filter: filterText:'name').length === 0 && createRef !== undefined) {
+        @if ((selectionModel.items | filter: filterText:'name').length === 0 && createRef !== undefined) {
          <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
            <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
            <i-bs width="1.5em" height="1em" name="plus"></i-bs>
          </button>
        }
-        @if ((selectionModel.itemsSorted | filter: filterText:'name').length > 0) {
+        @if ((selectionModel.items | filter: filterText:'name').length > 0) {
          <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
            <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
            <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
@@ -501,7 +501,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
    component.selectionModel = selectionModel
    selectionModel.toggle(items[1].id)
    selectionModel.apply()
-    expect(selectionModel.itemsSorted).toEqual([
+    expect(selectionModel.items).toEqual([
      nullItem,
      { id: null, name: 'Null B' },
      items[1],
@@ -509,6 +509,37 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
    ])
  })

+  it('selection model should sort items by state and document counts, if set', () => {
+    component.items = items.concat([{ id: 4, name: 'Item D' }])
+    component.selectionModel = selectionModel
+    component.documentCounts = [
+      { id: 1, document_count: 0 }, // Tag1
+      { id: 2, document_count: 1 }, // Tag2
+      { id: 4, document_count: 2 },
+    ]
+    component.selectionModel.apply()
+    expect(selectionModel.items).toEqual([
+      nullItem,
+      { id: 4, name: 'Item D' },
+      items[1], // Tag2
+      items[0], // Tag1
+    ])
+
+    selectionModel.toggle(items[1].id)
+    component.documentCounts = [
+      { id: 1, document_count: 0 },
+      { id: 2, document_count: 1 },
+      { id: 4, document_count: 0 },
+    ]
+    selectionModel.apply()
+    expect(selectionModel.items).toEqual([
+      nullItem,
+      items[1], // Tag2
+      { id: 4, name: 'Item D' },
+      items[0], // Tag1
+    ])
+  })
+
  it('should set support create, keep open model and call createRef method', fakeAsync(() => {
    component.items = items
    component.icon = 'tag-fill'
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -43,11 +43,23 @@ export class FilterableDropdownSelectionModel {
  private _intersection: Intersection = Intersection.Include
  temporaryIntersection: Intersection = this._intersection

-  items: MatchingModel[] = []
+  private _documentCounts: SelectionDataItem[] = []
+  public set documentCounts(counts: SelectionDataItem[]) {
+    this._documentCounts = counts
+  }

-  get itemsSorted(): MatchingModel[] {
-    // TODO: this is getting called very often
-    return this.items.sort((a, b) => {
+  private _items: MatchingModel[] = []
+  get items(): MatchingModel[] {
+    return this._items
+  }
+
+  set items(items: MatchingModel[]) {
+    this._items = items
+    this.sortItems()
+  }
+
+  private sortItems() {
+    this._items.sort((a, b) => {
      if (a.id == null && b.id != null) {
        return -1
      } else if (a.id != null && b.id == null) {
@@ -62,6 +74,16 @@ export class FilterableDropdownSelectionModel {
        this.getNonTemporary(b.id) == ToggleableItemState.NotSelected
      ) {
        return -1
+      } else if (
+        this._documentCounts.length &&
+        this.getDocumentCount(a.id) > this.getDocumentCount(b.id)
+      ) {
+        return -1
+      } else if (
+        this._documentCounts.length &&
+        this.getDocumentCount(a.id) < this.getDocumentCount(b.id)
+      ) {
+        return 1
      } else {
        return a.name.localeCompare(b.name)
      }
@@ -279,6 +301,10 @@ export class FilterableDropdownSelectionModel {
    )
  }

+  getDocumentCount(id: number) {
+    return this._documentCounts.find((c) => c.id === id)?.document_count
+  }
+
  init(map: Map<number, ToggleableItemState>) {
    this.temporarySelectionStates = map
    this.apply()
@@ -291,6 +317,7 @@ export class FilterableDropdownSelectionModel {
    })
    this._logicalOperator = this.temporaryLogicalOperator
    this._intersection = this.temporaryIntersection
+    this.sortItems()
  }

  reset(complete: boolean = false) {
@@ -423,7 +450,11 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
  }

  @Input()
-  documentCounts: SelectionDataItem[]
+  set documentCounts(counts: SelectionDataItem[]) {
+    if (counts) {
+      this.selectionModel.documentCounts = counts
+    }
+  }

  @Input()
  shortcutKey: string
@@ -536,9 +567,7 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
  }

  getUpdatedDocumentCount(id: number) {
-    if (this.documentCounts) {
-      return this.documentCounts.find((c) => c.id === id)?.document_count
-    }
+    return this.selectionModel.getDocumentCount(id)
  }

  listKeyDown(event: KeyboardEvent) {
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@@ -1,4 +1,9 @@
-<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
+<button
+  class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom"
+  [class.opacity-50]="opacifyCount && !hideCount && currentCount === 0"
+  role="menuitem"
+  (click)="toggleItem($event)"
+  [disabled]="disabled">
  <div class="selected-icon me-1">
    @if (isChecked()) {
      <i-bs width="1em" height="1em" name="check"></i-bs>
@@ -18,6 +23,6 @@
    }
  </div>
  @if (!hideCount) {
-    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
+    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{currentCount}}</div>
  }
 </button>
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
@@ -29,6 +29,9 @@ export class ToggleableDropdownButtonComponent {
  @Input()
  hideCount: boolean = false

+  @Input()
+  opacifyCount: boolean = true
+
  @Output()
  toggled = new EventEmitter()

@@ -39,6 +42,10 @@ export class ToggleableDropdownButtonComponent {
    return 'is_inbox_tag' in this.item
  }

+  get currentCount(): number {
+    return this.count ?? this.item.document_count
+  }
+
  toggleItem(event: MouseEvent): void {
    if (this.state == ToggleableItemState.Selected) {
      this.exclude.emit()
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -1,30 +1,37 @@
-<div class="preview-popup-container">
-  @if (error) {
-    <div class="w-100 h-100 position-relative">
-      <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
-    </div>
-  } @else {
-    @if (renderAsObject) {
-      @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>
-      }
+<a [href]="link ?? previewUrl" class="{{linkClasses}}" [target]="linkTarget" [title]="linkTitle"
+  [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle" container="body"
+  autoClose="true" [popoverClass]="popoverClass" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+  <ng-content></ng-content>
+</a>
+<ng-template #previewContent>
+  <div class="preview-popup-container">
+    @if (error) {
+      <div class="w-100 h-100 position-relative">
+        <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
+      </div>
    } @else {
-      @if (requiresPassword) {
-        <div class="w-100 h-100 position-relative">
-          <i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
-        </div>
-      }
-      @if (!requiresPassword) {
-        <pdf-viewer
-          [src]="previewURL"
-          [original-size]="false"
-          [show-borders]="false"
-          [show-all]="true"
-          (error)="onError($event)">
-        </pdf-viewer>
+      @if (renderAsObject) {
+        @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>
+        }
+      } @else {
+        @if (requiresPassword) {
+          <div class="w-100 h-100 position-relative">
+            <i-bs width="2em" height="2em" class="position-absolute top-50 start-50 translate-middle" name="file-earmark-lock"></i-bs>
+          </div>
+        }
+        @if (!requiresPassword) {
+          <pdf-viewer
+            [src]="previewURL"
+            [original-size]="false"
+            [show-borders]="false"
+            [show-all]="true"
+            (error)="onError($event)">
+          </pdf-viewer>
+        }
      }
    }
-  }
-</div>
+  </div>
+</ng-template>
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing'

 import { PreviewPopupComponent } from './preview-popup.component'
 import { By } from '@angular/platform-browser'
@@ -15,6 +20,8 @@ import {
  withInterceptorsFromDi,
 } from '@angular/common/http'
 import { of, throwError } from 'rxjs'
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'

 const doc = {
  id: 10,
@@ -34,8 +41,12 @@ describe('PreviewPopupComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
-      declarations: [PreviewPopupComponent, SafeUrlPipe],
-      imports: [NgxBootstrapIconsModule.pick(allIcons), PdfViewerModule],
+      declarations: [PreviewPopupComponent, SafeUrlPipe, DocumentTitlePipe],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PdfViewerModule,
+        NgbPopoverModule,
+      ],
      providers: [
        provideHttpClient(withInterceptorsFromDi()),
        provideHttpClientTesting(),
@@ -70,12 +81,14 @@ describe('PreviewPopupComponent', () => {

  it('should render object if native PDF viewer enabled', () => {
    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
+    component.popover.open()
    fixture.detectChanges()
    expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
  })

  it('should render pngx viewer if native PDF viewer disabled', () => {
    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.popover.open()
    fixture.detectChanges()
    expect(fixture.debugElement.query(By.css('object'))).toBeNull()
    expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
@@ -83,6 +96,7 @@ describe('PreviewPopupComponent', () => {

  it('should show lock icon on password error', () => {
    settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
+    component.popover.open()
    component.onError({ name: 'PasswordException' })
    fixture.detectChanges()
    expect(component.requiresPassword).toBeTruthy()
@@ -93,16 +107,18 @@ describe('PreviewPopupComponent', () => {
    component.document.original_file_name = 'sample.png'
    component.document.mime_type = 'image/png'
    component.document.archived_file_name = undefined
+    component.popover.open()
    fixture.detectChanges()
    expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
  })

  it('should show message on error', () => {
+    component.popover.open()
    component.onError({})
    fixture.detectChanges()
-    expect(fixture.debugElement.nativeElement.textContent).toContain(
-      'Error loading preview'
-    )
+    expect(
+      fixture.debugElement.query(By.css('.popover')).nativeElement.textContent
+    ).toContain('Error loading preview')
  })

  it('should get text content from http if appropriate', () => {
@@ -122,4 +138,17 @@ describe('PreviewPopupComponent', () => {
    component.init()
    expect(component.previewText).toEqual('Preview text')
  })
+
+  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
+    component.mouseEnterPreview()
+    expect(component.popover.isOpen()).toBeTruthy()
+    tick(600)
+    component.close()
+
+    component.mouseEnterPreview()
+    tick(100)
+    component.mouseLeavePreview()
+    tick(600)
+    expect(component.popover.isOpen()).toBeFalsy()
+  }))
 })
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -1,5 +1,6 @@
 import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnDestroy } from '@angular/core'
+import { Component, Input, OnDestroy, ViewChild } from '@angular/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
@@ -23,6 +24,18 @@ export class PreviewPopupComponent implements OnDestroy {
    return this._document
  }

+  @Input()
+  link: string
+
+  @Input()
+  linkClasses: string = 'btn btn-sm btn-outline-secondary'
+
+  @Input()
+  linkTarget: string = '_blank'
+
+  @Input()
+  linkTitle: string = $localize`Open preview`
+
  unsubscribeNotifier: Subject<any> = new Subject()

  error = false
@@ -31,6 +44,12 @@ export class PreviewPopupComponent implements OnDestroy {

  previewText: string

+  @ViewChild('popover') popover: NgbPopover
+
+  mouseOnPreview: boolean
+
+  popoverClass: string = 'shadow popover-preview'
+
  get renderAsObject(): boolean {
    return (this.isPdf && this.useNativePdfViewer) || !this.isPdf
  }
@@ -83,4 +102,33 @@ export class PreviewPopupComponent implements OnDestroy {
      this.error = true
    }
  }
+
+  get previewUrl() {
+    return this.documentService.getPreviewUrl(this.document.id)
+  }
+
+  mouseEnterPreview() {
+    this.mouseOnPreview = true
+    if (!this.popover.isOpen()) {
+      // we're going to open but hide to pre-load content during hover delay
+      this.popover.open()
+      this.popoverClass = 'shadow popover-preview pe-none opacity-0'
+      setTimeout(() => {
+        if (this.mouseOnPreview) {
+          // show popover
+          this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
+        } else {
+          this.popover.close()
+        }
+      }, 600)
+    }
+  }
+
+  mouseLeavePreview() {
+    this.mouseOnPreview = false
+  }
+
+  public close() {
+    this.popover.close(false)
+  }
 }
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@@ -5,94 +5,179 @@
    </button>
  </div>
  <div class="modal-body">
-    <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error?.email"></pngx-input-text>
-    <div ngbAccordion>
-      <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm" class="border-0 bg-transparent">
-        <div ngbAccordionCollapse>
-          <div ngbAccordionBody class="p-0 pb-3">
-            <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" autocomplete="email" [error]="error?.email_confirm"></pngx-input-text>
+    <div class="row">
+      <div class="col-12 col-md-6">
+        <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error?.email"></pngx-input-text>
+        <div ngbAccordion>
+          <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm" class="border-0 bg-transparent">
+            <div ngbAccordionCollapse>
+              <div ngbAccordionBody class="p-0 pb-3">
+                <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" autocomplete="email" [error]="error?.email_confirm"></pngx-input-text>
+              </div>
+            </div>
          </div>
        </div>
-      </div>
-    </div>
-    <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" autocomplete="current-password" [error]="error?.password"></pngx-input-password>
-    <div ngbAccordion>
-      <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
-        <div ngbAccordionCollapse>
-          <div ngbAccordionBody class="p-0 pb-3">
-            <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" autocomplete="new-password" [error]="error?.password_confirm"></pngx-input-password>
+        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" autocomplete="current-password" [error]="error?.password"></pngx-input-password>
+        <div ngbAccordion>
+          <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
+            <div ngbAccordionCollapse>
+              <div ngbAccordionBody class="p-0 pb-3">
+                <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" autocomplete="new-password" [error]="error?.password_confirm"></pngx-input-password>
+              </div>
+            </div>
          </div>
        </div>
-      </div>
-    </div>
-    <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
-    <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
-    <div class="mb-3">
-      <label class="form-label" i18n>API Auth Token</label>
-      <div class="position-relative">
-        <div class="input-group">
-          <input type="text" class="form-control" formControlName="auth_token" readonly>
-          <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
-              @if (!copied) {
-                <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
-              }
-              @if (copied) {
-                <i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
-              }
-              <span class="visually-hidden" i18n>Copy</span>
-            </button>
-            <pngx-confirm-button
-              title="Regenerate auth token"
-              i18n-title
-              buttonClasses=" btn-outline-secondary"
-              iconName="arrow-repeat"
-              [disabled]="!hasUsablePassword"
-              (confirm)="generateAuthToken()">
-            </pngx-confirm-button>
-          </div>
-          <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
-        </div>
-        <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the token cannot be undone</div>
-      </div>
-      @if (socialAccounts?.length > 0) {
+        <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
+        <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
        <div class="mb-3">
-          <p i18n>Connected social accounts</p>
-          <ul class="list-group">
-            @for (account of socialAccounts; track account.id) {
-              <li class="list-group-item"
-                ngbPopover="Set a password before disconnecting social account."
-                i18n-ngbPopover
-                [disablePopover]="hasUsablePassword"
-                triggers="mouseenter:mouseleave">
-                {{account.name}} ({{account.provider}})
+          <label class="form-label" i18n>API Auth Token</label>
+          <div class="position-relative">
+            <div class="input-group">
+              <input type="text" class="form-control" formControlName="auth_token" readonly>
+              <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
+                  @if (!copied) {
+                    <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
+                  }
+                  @if (copied) {
+                    <i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
+                  }
+                  <span class="visually-hidden" i18n>Copy</span>
+                </button>
                <pngx-confirm-button
-                  label="Disconnect"
-                  i18n-label
-                  title="Disconnect {{ account.name }} social account"
+                  title="Regenerate auth token"
                  i18n-title
-                  buttonClasses="btn-outline-danger btn-sm ms-2 align-baseline"
-                  iconName="trash"
+                  buttonClasses=" btn-outline-secondary"
+                  iconName="arrow-repeat"
                  [disabled]="!hasUsablePassword"
-                  (confirm)="disconnectSocialAccount(account.id)">
+                  (confirm)="generateAuthToken()">
                </pngx-confirm-button>
-              </li>
-            }
-          </ul>
-          <div class="form-text text-muted text-end fst-italic" i18n>Warning: disconnecting social accounts cannot be undone</div>
-        </div>
-      }
-      @if (socialAccountProviders?.length > 0) {
-        <div class="mb-3">
-          <p i18n>Connect new social account</p>
-          <div class="list-group">
-            @for (provider of socialAccountProviders; track provider.name) {
-              <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
-                {{provider.name}}&nbsp;<i-bs class="pb-1 ps-1" name="box-arrow-up-right"></i-bs>
-              </a>
-            }
+              </div>
+              <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
+            </div>
+            <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the token cannot be undone</div>
          </div>
-        </div>
-      }
+      </div>
+      <div class="col-12 col-md-6">
+        @if (socialAccounts?.length > 0) {
+          <div class="mb-3">
+            <p i18n>Connected social accounts</p>
+            <ul class="list-group">
+              @for (account of socialAccounts; track account.id) {
+                <li class="list-group-item"
+                  ngbPopover="Set a password before disconnecting social account."
+                  i18n-ngbPopover
+                  [disablePopover]="hasUsablePassword"
+                  triggers="mouseenter:mouseleave">
+                  {{account.name}} ({{account.provider}})
+                  <pngx-confirm-button
+                    label="Disconnect"
+                    i18n-label
+                    title="Disconnect {{ account.name }} social account"
+                    i18n-title
+                    buttonClasses="btn-outline-danger btn-sm ms-2 align-baseline"
+                    iconName="trash"
+                    [disabled]="!hasUsablePassword"
+                    (confirm)="disconnectSocialAccount(account.id)">
+                  </pngx-confirm-button>
+                </li>
+              }
+            </ul>
+            <div class="form-text text-muted text-end fst-italic" i18n>Warning: disconnecting social accounts cannot be undone</div>
+          </div>
+        }
+        @if (socialAccountProviders?.length > 0) {
+          <div class="mb-3">
+            <p i18n>Connect new social account</p>
+            <div class="list-group">
+              @for (provider of socialAccountProviders; track provider.name) {
+                <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
+                  {{provider.name}}&nbsp;<i-bs class="pb-1 ps-1" name="box-arrow-up-right"></i-bs>
+                </a>
+              }
+            </div>
+          </div>
+        }
+        @if (!isTotpEnabled) {
+          <div ngbAccordion>
+            <div ngbAccordionItem>
+              <h2 ngbAccordionHeader>
+                <button ngbAccordionButton (click)="gettotpSettings()" i18n>Two-factor Authentication</button>
+              </h2>
+              <div ngbAccordionCollapse>
+                <div ngbAccordionBody>
+                  <ng-template>
+                    @if (totpSettingsLoading) {
+                      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                      <div class="visually-hidden" i18n>Loading...</div>
+                    } @else if (totpSettings) {
+                      <figure class="figure">
+                        <div class="bg-white d-inline-block" [innerHTML]="totpSettings.qr_svg | safeHtml"></div>
+                        <figcaption class="figure-caption text-end mt-2" i18n>Scan the QR code with your authenticator app and then enter the code below</figcaption>
+                      </figure>
+                      <p>
+                        <ng-container i18n>Authenticator secret</ng-container>: <code>{{totpSettings.secret}}</code>.
+                        <ng-container i18n>You can store this secret and use it to reinstall your authenticator app at a later time.</ng-container>
+                      </p>
+                      <div class="input-group mb-3">
+                        <input type="text" class="form-control" formControlName="totp_code" placeholder="Code" i18n-placeholder>
+                        <button type="button" class="btn btn-primary ml-auto" (click)="activateTotp()" [disabled]="totpLoading">
+                          <ng-container i18n>Enable</ng-container>
+                          @if (totpLoading) {
+                            <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+                            <div class="visually-hidden" i18n>Loading...</div>
+                          }
+                        </button>
+                      </div>
+                    }
+                  </ng-template>
+                </div>
+              </div>
+            </div>
+          </div>
+        } @else {
+          <label class="d-block mb-2" i18n>Two-factor Authentication</label>
+          @if (recoveryCodes) {
+            <div class="alert alert-warning" role="alert">
+              <i-bs name="exclamation-triangle"></i-bs>&nbsp;<ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
+            </div>
+            <div class="d-flex flex-row align-items-start mb-3">
+              <ul class="list-group w-50">
+                  @for (code of recoveryCodes; track code; let i = $index) {
+                    @if (i % 2 === 0) {
+                      <li class="list-group-item d-flex justify-content-around align-items-center">
+                        <code>{{code}}</code>
+                        @if (recoveryCodes[i + 1]) {
+                          <code>{{recoveryCodes[i + 1]}}</code>
+                        }
+                      </li>
+                    }
+                  }
+              </ul>
+              <button type="button" class="btn btn-sm btn-outline-secondary ms-2" (click)="copyRecoveryCodes()" i18n-title title="Copy">
+                @if (!codesCopied) {
+                  <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
+                  &nbsp;<span i18n>Copy codes</span>
+                }
+                @if (codesCopied) {
+                  <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary"></i-bs>
+                  &nbsp;<span class="text-primary" i18n>Copied!</span>
+                }
+              </button>
+            </div>
+          }
+          <pngx-confirm-button
+            label="Disable Two-factor Authentication"
+            i18n-label
+            title="Disable Two-factor Authentication"
+            i18n-title
+            buttonClasses="btn-outline-danger btn-sm"
+            iconName="trash"
+            [disabled]="totpLoading"
+            (confirm)="deactivateTotp()">
+          </pngx-confirm-button>
+        }
+      </div>
+    </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
@@ -294,4 +294,85 @@ describe('ProfileEditDialogComponent', () => {
    expect(disconnectSpy).toHaveBeenCalled()
    expect(component.socialAccounts).not.toContainEqual(socialAccount)
  })
+
+  it('should get totp settings', () => {
+    const settings = {
+      url: 'http://localhost/',
+      qr_svg: 'svg',
+      secret: 'secret',
+    }
+    const getSpy = jest.spyOn(profileService, 'getTotpSettings')
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    getSpy.mockReturnValueOnce(
+      throwError(() => new Error('failed to get settings'))
+    )
+    component.gettotpSettings()
+    expect(getSpy).toHaveBeenCalled()
+    expect(toastSpy).toHaveBeenCalled()
+
+    getSpy.mockReturnValue(of(settings))
+    component.gettotpSettings()
+    expect(getSpy).toHaveBeenCalled()
+    expect(component.totpSettings).toEqual(settings)
+  })
+
+  it('should activate totp', () => {
+    const activateSpy = jest.spyOn(profileService, 'activateTotp')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const error = new Error('failed to activate totp')
+    activateSpy.mockReturnValueOnce(throwError(() => error))
+    component.totpSettings = {
+      url: 'http://localhost/',
+      qr_svg: 'svg',
+      secret: 'secret',
+    }
+    component.form.get('totp_code').patchValue('123456')
+    component.activateTotp()
+    expect(activateSpy).toHaveBeenCalledWith(
+      component.totpSettings.secret,
+      component.form.get('totp_code').value
+    )
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    activateSpy.mockReturnValueOnce(of({ success: false, recovery_codes: [] }))
+    component.activateTotp()
+    expect(toastErrorSpy).toHaveBeenCalledWith('Error activating TOTP', error)
+
+    activateSpy.mockReturnValueOnce(
+      of({ success: true, recovery_codes: ['1', '2', '3'] })
+    )
+    component.activateTotp()
+    expect(toastInfoSpy).toHaveBeenCalled()
+    expect(component.isTotpEnabled).toBeTruthy()
+    expect(component.recoveryCodes).toEqual(['1', '2', '3'])
+  })
+
+  it('should deactivate totp', () => {
+    const deactivateSpy = jest.spyOn(profileService, 'deactivateTotp')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const error = new Error('failed to deactivate totp')
+    deactivateSpy.mockReturnValueOnce(throwError(() => error))
+    component.deactivateTotp()
+    expect(deactivateSpy).toHaveBeenCalled()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    deactivateSpy.mockReturnValueOnce(of(false))
+    component.deactivateTotp()
+    expect(toastErrorSpy).toHaveBeenCalledWith('Error deactivating TOTP', error)
+
+    deactivateSpy.mockReturnValueOnce(of(true))
+    component.deactivateTotp()
+    expect(toastInfoSpy).toHaveBeenCalled()
+    expect(component.isTotpEnabled).toBeFalsy()
+  })
+
+  it('should copy recovery codes', fakeAsync(() => {
+    const copySpy = jest.spyOn(clipboard, 'copy')
+    component.recoveryCodes = ['1', '2', '3']
+    component.copyRecoveryCodes()
+    expect(copySpy).toHaveBeenCalledWith('1\n2\n3')
+    tick(3000)
+  }))
 })
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
@@ -2,7 +2,11 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ProfileService } from 'src/app/services/profile.service'
-import { SocialAccount, SocialAccountProvider } from 'src/app/data/user-profile'
+import {
+  TotpSettings,
+  SocialAccount,
+  SocialAccountProvider,
+} from 'src/app/data/user-profile'
 import { ToastService } from 'src/app/services/toast.service'
 import { Subject, takeUntil } from 'rxjs'
 import { Clipboard } from '@angular/cdk/clipboard'
@@ -25,6 +29,7 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
    first_name: new FormControl(''),
    last_name: new FormControl(''),
    auth_token: new FormControl(''),
+    totp_code: new FormControl(''),
  })

  private currentPassword: string
@@ -38,7 +43,14 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
  private emailConfirm: string
  public showEmailConfirm: boolean = false

+  public isTotpEnabled: boolean = false
+  public totpSettings: TotpSettings
+  public totpSettingsLoading: boolean = false
+  public totpLoading: boolean = false
+  public recoveryCodes: string[]
+
  public copied: boolean = false
+  public codesCopied: boolean = false

  public socialAccounts: SocialAccount[] = []
  public socialAccountProviders: SocialAccountProvider[] = []
@@ -70,6 +82,7 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
          this.onPasswordChange()
        })
        this.socialAccounts = profile.social_accounts
+        this.isTotpEnabled = profile.is_mfa_enabled
      })

    this.profileService
@@ -147,6 +160,7 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
    const passwordChanged =
      this.newPassword && this.currentPassword !== this.newPassword
    const profile = Object.assign({}, this.form.value)
+    delete profile.totp_code
    this.networkActive = true
    this.profileService
      .update(profile)
@@ -213,4 +227,81 @@ export class ProfileEditDialogComponent implements OnInit, OnDestroy {
        },
      })
  }
+
+  public gettotpSettings(): void {
+    this.totpSettingsLoading = true
+    this.profileService
+      .getTotpSettings()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (totpSettings) => {
+          this.totpSettingsLoading = false
+          this.totpSettings = totpSettings
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error fetching TOTP settings`,
+            error
+          )
+          this.totpSettingsLoading = false
+        },
+      })
+  }
+
+  public activateTotp(): void {
+    this.totpLoading = true
+    this.form.get('totp_code').disable()
+    this.profileService
+      .activateTotp(this.totpSettings.secret, this.form.get('totp_code').value)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (activationResponse) => {
+          this.totpLoading = false
+          this.isTotpEnabled = activationResponse.success
+          this.recoveryCodes = activationResponse.recovery_codes
+          this.form.get('totp_code').enable()
+          if (activationResponse.success) {
+            this.toastService.showInfo($localize`TOTP activated successfully`)
+          } else {
+            this.toastService.showError($localize`Error activating TOTP`)
+          }
+        },
+        error: (error) => {
+          this.totpLoading = false
+          this.form.get('totp_code').enable()
+          this.toastService.showError($localize`Error activating TOTP`, error)
+        },
+      })
+  }
+
+  public deactivateTotp(): void {
+    this.totpLoading = true
+    this.profileService
+      .deactivateTotp()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (success) => {
+          this.totpLoading = false
+          this.isTotpEnabled = !success
+          this.recoveryCodes = null
+          if (success) {
+            this.toastService.showInfo($localize`TOTP deactivated successfully`)
+          } else {
+            this.toastService.showError($localize`Error deactivating TOTP`)
+          }
+        },
+        error: (error) => {
+          this.totpLoading = false
+          this.toastService.showError($localize`Error deactivating TOTP`, error)
+        },
+      })
+  }
+
+  public copyRecoveryCodes(): void {
+    this.clipboard.copy(this.recoveryCodes.join('\n'))
+    this.codesCopied = true
+    setTimeout(() => {
+      this.codesCopied = false
+    }, 3000)
+  }
 }
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -389,6 +389,15 @@
          <img [src]="previewUrl | safeUrl" width="100%" height="100%" alt="{{title}}" />
        </div>
      }
+      @case (ContentRenderType.TIFF) {
+        @if (!tiffError) {
+          <div class="preview-sticky">
+            <img [src]="tiffURL" width="100%" height="100%" alt="{{title}}" />
+          </div>
+        } @else {
+          <div class="preview-sticky bg-light p-3 overflow-auto whitespace-preserve" width="100%">{{tiffError}}</div>
+        }
+      }
      @case (ContentRenderType.Other) {
        <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
      }
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/src-ui/src/app/components/document-detail/document-detail.component.scss
@@ -61,6 +61,7 @@ textarea.rtl {
  width: 100%;
  height: 100%;
  object-fit: contain;
+  object-position: top;
 }

 .thumb-preview {
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -1270,4 +1270,46 @@ describe('DocumentDetailComponent', () => {
    expect(component.createDisabled(DataType.StoragePath)).toBeFalsy()
    expect(component.createDisabled(DataType.Tag)).toBeFalsy()
  })
+
+  it('should call tryRenderTiff when no archive and file is tiff', () => {
+    initNormally()
+    const tiffRenderSpy = jest.spyOn(
+      DocumentDetailComponent.prototype as any,
+      'tryRenderTiff'
+    )
+    const doc = Object.assign({}, component.document)
+    doc.archived_file_name = null
+    doc.mime_type = 'image/tiff'
+    jest
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValue(
+        of({ has_archive_version: false, original_mime_type: 'image/tiff' })
+      )
+    component.updateComponent(doc)
+    fixture.detectChanges()
+    expect(component.archiveContentRenderType).toEqual(
+      component.ContentRenderType.TIFF
+    )
+    expect(tiffRenderSpy).toHaveBeenCalled()
+  })
+
+  it('should try to render tiff and show error if failed', () => {
+    initNormally()
+    // just the text request
+    httpTestingController.expectOne(component.previewUrl)
+
+    // invalid tiff
+    component['tryRenderTiff']()
+    httpTestingController
+      .expectOne(component.previewUrl)
+      .flush(new ArrayBuffer(100)) // arraybuffer
+    expect(component.tiffError).not.toBeUndefined()
+
+    // http error
+    component['tryRenderTiff']()
+    httpTestingController
+      .expectOne(component.previewUrl)
+      .error(new ErrorEvent('failed'))
+    expect(component.tiffError).not.toBeUndefined()
+  })
 })
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -72,6 +72,7 @@ import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/dele
 import { HotKeyService } from 'src/app/services/hot-key.service'
 import { PDFDocumentProxy } from 'ng2-pdf-viewer'
 import { DataType } from 'src/app/data/datatype'
+import * as UTIF from 'utif'

 enum DocumentDetailNavIDs {
  Details = 1,
@@ -89,6 +90,7 @@ enum ContentRenderType {
  Text = 'text',
  Other = 'other',
  Unknown = 'unknown',
+  TIFF = 'tiff',
 }

 enum ZoomSetting {
@@ -136,6 +138,8 @@ export class DocumentDetailComponent
  downloadUrl: string
  downloadOriginalUrl: string
  previewLoaded: boolean = false
+  tiffURL: string
+  tiffError: string

  correspondents: Correspondent[]
  documentTypes: DocumentType[]
@@ -244,6 +248,8 @@ export class DocumentDetailComponent
      ['text/plain', 'application/csv', 'text/csv'].includes(mimeType)
    ) {
      return ContentRenderType.Text
+    } else if (mimeType.indexOf('tiff') >= 0) {
+      return ContentRenderType.TIFF
    } else if (mimeType?.indexOf('image/') === 0) {
      return ContentRenderType.Image
    }
@@ -542,6 +548,9 @@ export class DocumentDetailComponent
    this.document = doc
    this.requiresPassword = false
    this.updateFormForCustomFields()
+    if (this.archiveContentRenderType === ContentRenderType.TIFF) {
+      this.tryRenderTiff()
+    }
    this.documentsService
      .getMetadata(doc.id)
      .pipe(
@@ -721,6 +730,7 @@ export class DocumentDetailComponent

  save(close: boolean = false) {
    this.networkActive = true
+    ;(document.activeElement as HTMLElement)?.dispatchEvent(new Event('change'))
    this.documentsService
      .update(this.document)
      .pipe(first())
@@ -1163,6 +1173,7 @@ export class DocumentDetailComponent
  splitDocument() {
    let modal = this.modalService.open(SplitConfirmDialogComponent, {
      backdrop: 'static',
+      size: 'lg',
    })
    modal.componentInstance.title = $localize`Split confirm`
    modal.componentInstance.messageBold = $localize`This operation will split the selected document(s) into new documents.`
@@ -1201,6 +1212,7 @@ export class DocumentDetailComponent
  rotateDocument() {
    let modal = this.modalService.open(RotateConfirmDialogComponent, {
      backdrop: 'static',
+      size: 'lg',
    })
    modal.componentInstance.title = $localize`Rotate confirm`
    modal.componentInstance.messageBold = $localize`This operation will permanently rotate the original version of the current document.`
@@ -1275,4 +1287,45 @@ export class DocumentDetailComponent
          })
      })
  }
+
+  private tryRenderTiff() {
+    this.http.get(this.previewUrl, { responseType: 'arraybuffer' }).subscribe({
+      next: (res) => {
+        /* istanbul ignore next */
+        try {
+          // See UTIF.js > _imgLoaded
+          const tiffIfds: any[] = UTIF.decode(res)
+          var vsns = tiffIfds,
+            ma = 0,
+            page = vsns[0]
+          if (tiffIfds[0].subIFD) vsns = vsns.concat(tiffIfds[0].subIFD)
+          for (var i = 0; i < vsns.length; i++) {
+            var img = vsns[i]
+            if (img['t258'] == null || img['t258'].length < 3) continue
+            var ar = img['t256'] * img['t257']
+            if (ar > ma) {
+              ma = ar
+              page = img
+            }
+          }
+          UTIF.decodeImage(res, page, tiffIfds)
+          const rgba = UTIF.toRGBA8(page)
+          const { width: w, height: h } = page
+          var cnv = document.createElement('canvas')
+          cnv.width = w
+          cnv.height = h
+          var ctx = cnv.getContext('2d'),
+            imgd = ctx.createImageData(w, h)
+          for (var i = 0; i < rgba.length; i++) imgd.data[i] = rgba[i]
+          ctx.putImageData(imgd, 0, 0)
+          this.tiffURL = cnv.toDataURL()
+        } catch (err) {
+          this.tiffError = $localize`An error occurred loading tiff: ${err.toString()}`
+        }
+      },
+      error: (err) => {
+        this.tiffError = $localize`An error occurred loading tiff: ${err.toString()}`
+      },
+    })
+  }
 }
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
@@ -782,11 +782,11 @@ export class BulkEditorComponent
  rotateSelected() {
    let modal = this.modalService.open(RotateConfirmDialogComponent, {
      backdrop: 'static',
+      size: 'lg',
    })
    const rotateDialog = modal.componentInstance as RotateConfirmDialogComponent
    rotateDialog.title = $localize`Rotate confirm`
    rotateDialog.messageBold = $localize`This operation will permanently rotate the original version of ${this.list.selected.size} document(s).`
-    rotateDialog.message = $localize`This will alter the original copy.`
    rotateDialog.btnClass = 'btn-danger'
    rotateDialog.btnCaption = $localize`Proceed`
    rotateDialog.documentID = Array.from(this.list.selected)[0]
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,4 +1,4 @@
-<div class="card mb-3 shadow-sm bg-light" [class.card-selected]="selected" [class.document-card]="selectable" [class.popover-hidden]="popoverHidden" (mouseleave)="mouseLeaveCard()">
+<div class="card mb-3 shadow-sm bg-light" [class.card-selected]="selected" [class.document-card]="selectable" (mouseleave)="mouseLeaveCard()">
  <div class="row g-0">
    <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
      <img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
@@ -54,16 +54,11 @@
              <i-bs name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
            </a>
            <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-              <i-bs name="box-arrow-in-right"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Open</span>
+              <i-bs name="file-earmark-richtext"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Open</span>
            </a>
-            <a class="btn btn-sm btn-outline-secondary" target="_blank" [href]="previewUrl"
-              [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
-              autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+            <pngx-preview-popup [document]="document" #popupPreview>
              <i-bs name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
-            </a>
-            <ng-template #previewContent>
-              <pngx-preview-popup [document]="document"></pngx-preview-popup>
-            </ng-template>
+            </pngx-preview-popup>
            <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
              <i-bs name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
              </a>
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.spec.ts
@@ -1,11 +1,6 @@
 import { DatePipe } from '@angular/common'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { By } from '@angular/platform-browser'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
@@ -84,21 +79,6 @@ describe('DocumentCardLargeComponent', () => {
    expect(fixture.nativeElement.textContent).toContain('8 pages')
  })

-  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
-    component.mouseEnterPreview()
-    expect(component.popover.isOpen()).toBeTruthy()
-    expect(component.popoverHidden).toBeTruthy()
-    tick(600)
-    expect(component.popoverHidden).toBeFalsy()
-    component.mouseLeaveCard()
-
-    component.mouseEnterPreview()
-    tick(100)
-    component.mouseLeavePreview()
-    tick(600)
-    expect(component.popover.isOpen()).toBeFalsy()
-  }))
-
  it('should trim content', () => {
    expect(component.contentTrimmed).toHaveLength(503) // includes ...
  })
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
@@ -12,9 +12,9 @@ import {
 } from 'src/app/data/document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'

@Component({
  selector: 'pngx-document-card-large',
@@ -65,7 +65,7 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
  @Output()
  clickMoreLike = new EventEmitter()

-  @ViewChild('popover') popover: NgbPopover
+  @ViewChild('popupPreview') popupPreview: PreviewPopupComponent

  mouseOnPreview = false
  popoverHidden = true
@@ -112,29 +112,8 @@ export class DocumentCardLargeComponent extends ComponentWithPermissions {
    return this.documentService.getPreviewUrl(this.document.id)
  }

-  mouseEnterPreview() {
-    this.mouseOnPreview = true
-    if (!this.popover.isOpen()) {
-      // we're going to open but hide to pre-load content during hover delay
-      this.popover.open()
-      this.popoverHidden = true
-      setTimeout(() => {
-        if (this.mouseOnPreview) {
-          // show popover
-          this.popoverHidden = false
-        } else {
-          this.popover.close()
-        }
-      }, 600)
-    }
-  }
-
-  mouseLeavePreview() {
-    this.mouseOnPreview = false
-  }
-
  mouseLeaveCard() {
-    this.popover.close()
+    this.popupPreview.close()
  }

  get contentTrimmed() {
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,5 +1,5 @@
 <div class="col p-2 h-100">
-  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" [class.popover-hidden]="popoverHidden" (mouseleave)="mouseLeaveCard()">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" (mouseleave)="mouseLeaveCard()">
    <div class="border-bottom doc-img-container rounded-top" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
      <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()">

@@ -127,16 +127,11 @@
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group w-100">
          <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" title="Open" i18n-title *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }" i18n-title>
-            <i-bs name="box-arrow-in-right"></i-bs>
+            <i-bs name="file-earmark-richtext"></i-bs>
          </a>
-          <a [href]="previewUrl" target="_blank" class="btn btn-sm btn-outline-secondary"
-            [ngbPopover]="previewContent" [popoverTitle]="document.title | documentTitle"
-            autoClose="true" popoverClass="shadow popover-preview" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview()" #popover="ngbPopover">
+          <pngx-preview-popup [document]="document" #popupPreview>
            <i-bs name="eye"></i-bs>
-          </a>
-          <ng-template #previewContent>
-            <pngx-preview-popup [document]="document"></pngx-preview-popup>
-          </ng-template>
+          </pngx-preview-popup>
          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title (click)="$event.stopPropagation()">
            <i-bs name="download"></i-bs>
          </a>
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts
@@ -1,11 +1,6 @@
 import { DatePipe } from '@angular/common'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
  NgbPopoverModule,
@@ -116,19 +111,4 @@ describe('DocumentCardSmallComponent', () => {
      fixture.debugElement.queryAll(By.directive(TagComponent))
    ).toHaveLength(6)
  })
-
-  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
-    component.mouseEnterPreview()
-    expect(component.popover.isOpen()).toBeTruthy()
-    expect(component.popoverHidden).toBeTruthy()
-    tick(600)
-    expect(component.popoverHidden).toBeFalsy()
-    component.mouseLeaveCard()
-
-    component.mouseEnterPreview()
-    tick(100)
-    component.mouseLeavePreview()
-    tick(600)
-    expect(component.popover.isOpen()).toBeFalsy()
-  }))
 })
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -13,9 +13,9 @@ import {
 } from 'src/app/data/document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'

@Component({
  selector: 'pngx-document-card-small',
@@ -61,10 +61,7 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {

  moreTags: number = null

-  @ViewChild('popover') popover: NgbPopover
-
-  mouseOnPreview = false
-  popoverHidden = true
+  @ViewChild('popupPreview') popupPreview: PreviewPopupComponent

  getIsThumbInverted() {
    return this.settingsService.get(SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED)
@@ -78,10 +75,6 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
    return this.documentService.getDownloadUrl(this.document.id)
  }

-  get previewUrl() {
-    return this.documentService.getPreviewUrl(this.document.id)
-  }
-
  get privateName() {
    return $localize`Private`
  }
@@ -100,29 +93,8 @@ export class DocumentCardSmallComponent extends ComponentWithPermissions {
    )
  }

-  mouseEnterPreview() {
-    this.mouseOnPreview = true
-    if (!this.popover.isOpen()) {
-      // we're going to open but hide to pre-load content during hover delay
-      this.popover.open()
-      this.popoverHidden = true
-      setTimeout(() => {
-        if (this.mouseOnPreview) {
-          // show popover
-          this.popoverHidden = false
-        } else {
-          this.popover.close()
-        }
-      }, 600)
-    }
-  }
-
-  mouseLeavePreview() {
-    this.mouseOnPreview = false
-  }
-
  mouseLeaveCard() {
-    this.popover.close()
+    this.popupPreview.close()
  }

  get notesEnabled(): boolean {
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -292,7 +292,12 @@
                @if (activeDisplayFields.includes(DisplayField.TITLE) || activeDisplayFields.includes(DisplayField.TAGS)) {
                  <td width="30%">
                    @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-                      <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+                      <div class="d-inline-block" (mouseleave)="popupPreview.close()">
+                        <a routerLink="/documents/{{d.id}}" title="Edit document" i18n-title style="overflow-wrap: anywhere;">{{d.title | documentTitle}}</a>
+                        <pngx-preview-popup [document]="d" linkClasses="btn btn-sm btn-link text-secondary" linkTitle="Preview document" (click)="$event.stopPropagation()" i18n-linkTitle #popupPreview>
+                          <i-bs name="eye"></i-bs>
+                        </pngx-preview-popup>
+                      </div>
                    }
                    @if (activeDisplayFields.includes(DisplayField.TAGS)) {
                      @for (t of d.tags$ | async; track t) {
--- a/src-ui/src/app/components/document-list/document-list.component.spec.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.spec.ts
@@ -72,6 +72,7 @@ import { IsNumberPipe } from 'src/app/pipes/is-number.pipe'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { PreviewPopupComponent } from '../common/preview-popup/preview-popup.component'

 const docs: Document[] = [
  {
@@ -137,6 +138,7 @@ describe('DocumentListComponent', () => {
        UsernamePipe,
        SafeHtmlPipe,
        IsNumberPipe,
+        PreviewPopupComponent,
      ],
      imports: [
        RouterTestingModule.withRoutes(routes),
@@ -698,5 +700,31 @@ describe('DocumentListComponent', () => {
    fixture.detectChanges()
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'o' }))
    expect(detailSpy).toHaveBeenCalledWith(docs[1].id)
+
+    const lotsOfDocs: Document[] = Array.from({ length: 100 }, (_, i) => ({
+      id: i + 1,
+      title: `Doc${i + 1}`,
+      notes: [],
+      tags$: new Subject(),
+      content: `document content ${i + 1}`,
+    }))
+    jest
+      .spyOn(documentListService, 'documents', 'get')
+      .mockReturnValue(lotsOfDocs)
+    jest
+      .spyOn(documentService, 'listAllFilteredIds')
+      .mockReturnValue(of(lotsOfDocs.map((d) => d.id)))
+    jest.spyOn(documentListService, 'getLastPage').mockReturnValue(4)
+    fixture.detectChanges()
+
+    expect(component.list.currentPage).toEqual(1)
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowRight', ctrlKey: true })
+    )
+    expect(component.list.currentPage).toEqual(2)
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft', ctrlKey: true })
+    )
+    expect(component.list.currentPage).toEqual(1)
  })
 })
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -273,6 +273,30 @@ export class DocumentListComponent
          }
        }
      })
+
+    this.hotKeyService
+      .addShortcut({
+        keys: 'control.arrowleft',
+        description: $localize`Previous page`,
+      })
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        if (this.list.currentPage > 1) {
+          this.list.currentPage--
+        }
+      })
+
+    this.hotKeyService
+      .addShortcut({
+        keys: 'control.arrowright',
+        description: $localize`Next page`,
+      })
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        if (this.list.currentPage < this.list.getLastPage()) {
+          this.list.currentPage++
+        }
+      })
  }

  ngOnDestroy() {
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.spec.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.spec.ts
@@ -77,14 +77,19 @@ describe('CorrespondentListComponent', () => {
  it('should support very old date strings', () => {
    jest.spyOn(correspondentsService, 'listFiltered').mockReturnValue(
      of({
-        count: 1,
-        all: [1],
+        count: 2,
+        all: [1, 2],
        results: [
          {
            id: 1,
            name: 'Correspondent1',
            last_correspondence: '1832-12-31T15:32:54-07:52:58',
          },
+          {
+            id: 2,
+            name: 'Correspondent2',
+            last_correspondence: '1901-07-01T00:00:00+00:09:21',
+          },
        ],
      })
    )
--- a/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
+++ b/src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts
@@ -52,7 +52,7 @@ export class CorrespondentListComponent extends ManagementListComponent<Correspo
                date = new Date(
                  c.last_correspondence
                    ?.toString()
-                    .replace(/-(\d\d):\d\d:\d\d/gm, `-$1:00`)
+                    .replace(/([-+])(\d\d):\d\d:\d\d/gm, `$1$2:00`)
                )
              }
              return this.datePipe.transform(date)
--- a/src-ui/src/app/data/paperless-task.ts
+++ b/src-ui/src/app/data/paperless-task.ts
@@ -30,4 +30,6 @@ export interface PaperlessTask extends ObjectWithId {
  result?: string

  related_document?: number
+
+  owner?: number
 }
--- a/src-ui/src/app/data/ui-settings.ts
+++ b/src-ui/src/app/data/ui-settings.ts
@@ -17,6 +17,8 @@ export enum GlobalSearchType {
  TITLE_CONTENT = 'title-content',
 }

+export const PAPERLESS_GREEN_HEX = '#17541f'
+
 export const SETTINGS_KEYS = {
  LANGUAGE: 'language',
  APP_LOGO: 'app_logo',
--- a/src-ui/src/app/data/user-profile.ts
+++ b/src-ui/src/app/data/user-profile.ts
@@ -17,4 +17,11 @@ export interface PaperlessUserProfile {
  auth_token?: string
  social_accounts?: SocialAccount[]
  has_usable_password?: boolean
+  is_mfa_enabled?: boolean
+}
+
+export interface TotpSettings {
+  url: string
+  qr_svg: string
+  secret: string
 }
--- a/src-ui/src/app/data/user.ts
+++ b/src-ui/src/app/data/user.ts
@@ -11,4 +11,5 @@ export interface User extends ObjectWithId {
  groups?: number[] // Group[]
  user_permissions?: string[]
  inherited_permissions?: string[]
+  is_mfa_enabled?: boolean
 }
--- a/src-ui/src/app/data/workflow-trigger.ts
+++ b/src-ui/src/app/data/workflow-trigger.ts
@@ -10,6 +10,14 @@ export enum WorkflowTriggerType {
  Consumption = 1,
  DocumentAdded = 2,
  DocumentUpdated = 3,
+  Scheduled = 4,
+}
+
+export enum ScheduleDateField {
+  Added = 'added',
+  Created = 'created',
+  Modified = 'modified',
+  CustomField = 'custom_field',
 }

 export interface WorkflowTrigger extends ObjectWithId {
@@ -34,4 +42,14 @@ export interface WorkflowTrigger extends ObjectWithId {
  filter_has_correspondent?: number // Correspondent.id

  filter_has_document_type?: number // DocumentType.id
+
+  schedule_offset_days?: number
+
+  schedule_is_recurring?: boolean
+
+  schedule_recurring_interval_days?: number
+
+  schedule_date_field?: ScheduleDateField
+
+  schedule_date_custom_field?: number // CustomField.id
 }
--- a/src-ui/src/app/services/permissions.service.spec.ts
+++ b/src-ui/src/app/services/permissions.service.spec.ts
@@ -439,4 +439,25 @@ describe('PermissionsService', () => {

    expect(permissionsService.isAdmin()).toBeFalsy()
  })
+
+  it('correctly checks superuser status', () => {
+    permissionsService.initialize([], {
+      username: 'testuser',
+      last_name: 'User',
+      first_name: 'Test',
+      id: 1,
+      is_superuser: true,
+    })
+
+    expect(permissionsService.isSuperUser()).toBeTruthy()
+
+    permissionsService.initialize([], {
+      username: 'testuser',
+      last_name: 'User',
+      first_name: 'Test',
+      id: 1,
+    })
+
+    expect(permissionsService.isSuperUser()).toBeFalsy()
+  })
 })
--- a/src-ui/src/app/services/permissions.service.ts
+++ b/src-ui/src/app/services/permissions.service.ts
@@ -56,6 +56,10 @@ export class PermissionsService {
    return this.currentUser?.is_staff
  }

+  public isSuperUser(): boolean {
+    return this.currentUser?.is_superuser
+  }
+
  public currentUserOwnsObject(object: ObjectWithPermissions): boolean {
    return (
      !object ||
--- a/src-ui/src/app/services/profile.service.spec.ts
+++ b/src-ui/src/app/services/profile.service.spec.ts
@@ -72,4 +72,32 @@ describe('ProfileService', () => {
    )
    expect(req.request.method).toEqual('GET')
  })
+
+  it('calls get totp settings endpoint', () => {
+    service.getTotpSettings().subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}profile/totp/`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
+  it('calls activate totp endpoint', () => {
+    service.activateTotp('secret', 'code').subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}profile/totp/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({
+      secret: 'secret',
+      code: 'code',
+    })
+  })
+
+  it('calls deactivate totp endpoint', () => {
+    service.deactivateTotp().subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}profile/totp/`
+    )
+    expect(req.request.method).toEqual('DELETE')
+  })
 })
--- a/src-ui/src/app/services/profile.service.ts
+++ b/src-ui/src/app/services/profile.service.ts
@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
 import {
+  TotpSettings,
  PaperlessUserProfile,
  SocialAccountProvider,
 } from '../data/user-profile'
@@ -47,4 +48,30 @@ export class ProfileService {
      `${environment.apiBaseUrl}${this.endpoint}/social_account_providers/`
    )
  }
+
+  getTotpSettings(): Observable<TotpSettings> {
+    return this.http.get<TotpSettings>(
+      `${environment.apiBaseUrl}${this.endpoint}/totp/`
+    )
+  }
+
+  activateTotp(
+    totpSecret: string,
+    totpCode: string
+  ): Observable<{ success: boolean; recovery_codes: string[] }> {
+    return this.http.post<{ success: boolean; recovery_codes: string[] }>(
+      `${environment.apiBaseUrl}${this.endpoint}/totp/`,
+      {
+        secret: totpSecret,
+        code: totpCode,
+      }
+    )
+  }
+
+  deactivateTotp(): Observable<boolean> {
+    return this.http.delete<boolean>(
+      `${environment.apiBaseUrl}${this.endpoint}/totp/`,
+      {}
+    )
+  }
 }
--- a/src-ui/src/app/services/rest/user.service.spec.ts
+++ b/src-ui/src/app/services/rest/user.service.spec.ts
@@ -160,6 +160,18 @@ const user = {
 commonAbstractNameFilterPaperlessServiceTests(endpoint, UserService)

 describe('Additional service tests for UserService', () => {
+  beforeEach(() => {
+    // Dont need to setup again
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+    service = TestBed.inject(UserService)
+  })
+
+  afterEach(() => {
+    subscription?.unsubscribe()
+    httpTestingController.verify()
+  })
+
  it('should retain permissions on update', () => {
    subscription = service.listAll().subscribe()
    let req = httpTestingController.expectOne(
@@ -179,15 +191,11 @@ describe('Additional service tests for UserService', () => {
    )
  })

-  beforeEach(() => {
-    // Dont need to setup again
-
-    httpTestingController = TestBed.inject(HttpTestingController)
-    service = TestBed.inject(UserService)
-  })
-
-  afterEach(() => {
-    subscription?.unsubscribe()
-    httpTestingController.verify()
+  it('should deactivate totp', () => {
+    subscription = service.deactivateTotp(user).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${user.id}/deactivate_totp/`
+    )
+    expect(req.request.method).toEqual('POST')
  })
 })
--- a/src-ui/src/app/services/rest/user.service.ts
+++ b/src-ui/src/app/services/rest/user.service.ts
@@ -5,6 +5,7 @@ import { User } from 'src/app/data/user'
 import { PermissionsService } from '../permissions.service'
 import { AbstractNameFilterService } from './abstract-name-filter-service'

+const endpoint = 'users'
@Injectable({
  providedIn: 'root',
 })
@@ -13,7 +14,7 @@ export class UserService extends AbstractNameFilterService<User> {
    http: HttpClient,
    private permissionService: PermissionsService
  ) {
-    super(http, 'users')
+    super(http, endpoint)
  }

  update(o: User): Observable<User> {
@@ -31,4 +32,11 @@ export class UserService extends AbstractNameFilterService<User> {
      })
    )
  }
+
+  deactivateTotp(u: User): Observable<boolean> {
+    return this.http.post<boolean>(
+      `${this.getResourceUrl(u.id, 'deactivate_totp')}`,
+      null
+    )
+  }
 }
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -17,7 +17,12 @@ import {
  hexToHsl,
 } from 'src/app/utils/color'
 import { environment } from 'src/environments/environment'
-import { UiSettings, SETTINGS, SETTINGS_KEYS } from '../data/ui-settings'
+import {
+  UiSettings,
+  SETTINGS,
+  SETTINGS_KEYS,
+  PAPERLESS_GREEN_HEX,
+} from '../data/ui-settings'
 import { User } from '../data/user'
 import {
  PermissionAction,
@@ -420,7 +425,7 @@ export class SettingsService {
      )
    }

-    if (themeColor) {
+    if (themeColor?.length) {
      const hsl = hexToHsl(themeColor)
      const bgBrightnessEstimate = estimateBrightnessForColor(themeColor)

@@ -445,6 +450,11 @@ export class SettingsService {
      document.documentElement.style.removeProperty('--pngx-primary')
      document.documentElement.style.removeProperty('--pngx-primary-lightness')
    }
+
+    this.meta.updateTag({
+      name: 'theme-color',
+      content: themeColor?.length ? themeColor : PAPERLESS_GREEN_HEX,
+    })
  }

  getLanguageOptions(): LanguageOption[] {
--- a/src-ui/src/app/services/tasks.service.spec.ts
+++ b/src-ui/src/app/services/tasks.service.spec.ts
@@ -48,7 +48,7 @@ describe('TasksService', () => {
  it('calls acknowledge_tasks api endpoint on dismiss and reloads', () => {
    tasksService.dismissTasks(new Set([1, 2, 3]))
    const req = httpTestingController.expectOne(
-      `${environment.apiBaseUrl}acknowledge_tasks/`
+      `${environment.apiBaseUrl}tasks/acknowledge/`
    )
    expect(req.request.method).toEqual('POST')
    expect(req.request.body).toEqual({
--- a/src-ui/src/app/services/tasks.service.ts
+++ b/src-ui/src/app/services/tasks.service.ts
@@ -64,7 +64,7 @@ export class TasksService {

  public dismissTasks(task_ids: Set<number>) {
    this.http
-      .post(`${this.baseUrl}acknowledge_tasks/`, {
+      .post(`${this.baseUrl}tasks/acknowledge/`, {
        tasks: [...task_ids],
      })
      .pipe(first())
--- a/src-ui/src/environments/environment.prod.ts
+++ b/src-ui/src/environments/environment.prod.ts
@@ -3,9 +3,9 @@ const base_url = new URL(document.baseURI)
 export const environment = {
  production: true,
  apiBaseUrl: document.baseURI + 'api/',
-  apiVersion: '5',
+  apiVersion: '6',
  appTitle: 'Paperless-ngx',
-  version: '2.13.4',
+  version: '2.13.5',
  webSocketHost: window.location.host,
  webSocketProtocol: window.location.protocol == 'https:' ? 'wss:' : 'ws:',
  webSocketBaseUrl: base_url.pathname + 'ws/',
--- a/src-ui/src/environments/environment.ts
+++ b/src-ui/src/environments/environment.ts
@@ -5,7 +5,7 @@
 export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8000/api/',
-  apiVersion: '5',
+  apiVersion: '6',
  appTitle: 'Paperless-ngx',
  version: 'DEVELOPMENT',
  webSocketHost: 'localhost:8000',
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -564,11 +564,6 @@ table.table {
  }
 }

-.popover-hidden .popover {
-    opacity: 0;
-    pointer-events: none;
-}
-
 // Tour
 .tour-active .popover {
  min-width: 360px;
@@ -728,3 +723,27 @@ i-bs svg {
    vertical-align: middle;
  }
 }
+
+// fixes for buttons in preview popup
+.btn-group pngx-preview-popup:not(:last-child) {
+  // Prevent double borders when buttons are next to each other
+  > .btn {
+    margin-left: calc(#{$btn-border-width} * -1);
+  }
+  > .btn {
+    @include border-end-radius(0);
+  }
+}
+.btn-group pngx-preview-popup:not(:first-child) {
+  > .btn {
+    @include border-start-radius(0);
+  }
+}
+.btn-group pngx-preview-popup {
+  position: relative;
+  flex: 1 1 auto;
+
+  > .btn {
+    display: block;
+  }
+}