v1

src-ui/src/app/app-routing.module.ts

@@ -0,0 +1,311 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { ConfigComponent } from './components/admin/config/config.component'
+import { LogsComponent } from './components/admin/logs/logs.component'
+import { SettingsComponent } from './components/admin/settings/settings.component'
+import { TasksComponent } from './components/admin/tasks/tasks.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
+import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
+import { AppFrameComponent } from './components/app-frame/app-frame.component'
+import { DashboardComponent } from './components/dashboard/dashboard.component'
+import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
+import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
+import { DocumentListComponent } from './components/document-list/document-list.component'
+import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
+import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
+import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
+import { MailComponent } from './components/manage/mail/mail.component'
+import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
+import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
+import { TagListComponent } from './components/manage/tag-list/tag-list.component'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
+import { NotFoundComponent } from './components/not-found/not-found.component'
+import { DirtyDocGuard } from './guards/dirty-doc.guard'
+import { DirtyFormGuard } from './guards/dirty-form.guard'
+import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
+import {
+  PermissionAction,
+  PermissionType,
+} from './services/permissions.service'
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+  {
+    path: '',
+    component: AppFrameComponent,
+    canDeactivate: [DirtyDocGuard],
+    children: [
+      {
+        path: 'dashboard',
+        component: DashboardComponent,
+        data: {
+          componentName: 'AppFrameComponent',
+        },
+      },
+      {
+        path: 'documents',
+        component: DocumentListComponent,
+        canDeactivate: [DirtySavedViewGuard],
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Document,
+          },
+          componentName: 'DocumentListComponent',
+        },
+      },
+      {
+        path: 'view/:id',
+        component: DocumentListComponent,
+        canDeactivate: [DirtySavedViewGuard],
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.SavedView,
+          },
+          componentName: 'DocumentListComponent',
+        },
+      },
+      {
+        path: 'documents/:id',
+        component: DocumentDetailComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Document,
+          },
+          componentName: 'DocumentDetailComponent',
+        },
+      },
+      {
+        path: 'documents/:id/:section',
+        component: DocumentDetailComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Document,
+          },
+          componentName: 'DocumentDetailComponent',
+        },
+      },
+      {
+        path: 'asn/:id',
+        component: DocumentAsnComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Document,
+          },
+          componentName: 'DocumentAsnComponent',
+        },
+      },
+      {
+        path: 'tags',
+        component: TagListComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Tag,
+          },
+          componentName: 'TagListComponent',
+        },
+      },
+      {
+        path: 'documenttypes',
+        component: DocumentTypeListComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.DocumentType,
+          },
+          componentName: 'DocumentTypeListComponent',
+        },
+      },
+      {
+        path: 'correspondents',
+        component: CorrespondentListComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Correspondent,
+          },
+          componentName: 'CorrespondentListComponent',
+        },
+      },
+      {
+        path: 'storagepaths',
+        component: StoragePathListComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.StoragePath,
+          },
+          componentName: 'StoragePathListComponent',
+        },
+      },
+      {
+        path: 'logs',
+        component: LogsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requireAdmin: true,
+          componentName: 'LogsComponent',
+        },
+      },
+      {
+        path: 'trash',
+        component: TrashComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.Delete,
+            type: PermissionType.Document,
+          },
+          componentName: 'TrashComponent',
+        },
+      },
+      // redirect old paths
+      {
+        path: 'settings/mail',
+        redirectTo: '/mail',
+      },
+      {
+        path: 'settings/usersgroups',
+        redirectTo: '/usersgroups',
+      },
+      {
+        path: 'settings/savedviews',
+        redirectTo: '/savedviews',
+      },
+      {
+        path: 'settings',
+        component: SettingsComponent,
+        canDeactivate: [DirtyFormGuard],
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.Change,
+            type: PermissionType.UISettings,
+          },
+          componentName: 'SettingsComponent',
+        },
+      },
+      {
+        path: 'settings/:section',
+        component: SettingsComponent,
+        canDeactivate: [DirtyFormGuard],
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.UISettings,
+          },
+          componentName: 'SettingsComponent',
+        },
+      },
+      {
+        path: 'config',
+        component: ConfigComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.Change,
+            type: PermissionType.AppConfig,
+          },
+          componentName: 'ConfigComponent',
+        },
+      },
+      {
+        path: 'tasks',
+        component: TasksComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.PaperlessTask,
+          },
+          componentName: 'TasksComponent',
+        },
+      },
+      {
+        path: 'customfields',
+        component: CustomFieldsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.CustomField,
+          },
+          componentName: 'CustomFieldsComponent',
+        },
+      },
+      {
+        path: 'workflows',
+        component: WorkflowsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.Workflow,
+          },
+          componentName: 'WorkflowsComponent',
+        },
+      },
+      {
+        path: 'mail',
+        component: MailComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.MailAccount,
+          },
+          componentName: 'MailComponent',
+        },
+      },
+      {
+        path: 'usersgroups',
+        component: UsersAndGroupsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.User,
+          },
+          componentName: 'UsersAndGroupsComponent',
+        },
+      },
+      {
+        path: 'savedviews',
+        component: SavedViewsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.SavedView,
+          },
+          componentName: 'SavedViewsComponent',
+        },
+      },
+    ],
+  },
+
+  { path: '404', component: NotFoundComponent },
+  { path: '**', redirectTo: '/404', pathMatch: 'full' },
+]
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

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

@@ -0,0 +1,36 @@
+<pngx-toasts></pngx-toasts>
+
+<pngx-file-drop>
+  <ng-container content>
+    <router-outlet></router-outlet>
+  </ng-container>
+</pngx-file-drop>
+
+<tour-step-template>
+  <ng-template #tourStep let-step="step">
+    <p class="tour-step-content" [innerHTML]="step?.content"></p>
+    <hr/>
+    <div class="d-flex justify-content-between align-items-center">
+      <span class="badge bg-light text-dark">{{ tourService.steps?.indexOf(step) + 1 }} / {{ tourService.steps?.length }}</span>
+      <div class="tour-step-navigation btn-toolbar" role="toolbar" aria-label="Controls">
+        <div class="btn-group btn-group-sm me-2" role="group" aria-label="Dismiss">
+          <button class="btn btn-outline-danger" (click)="tourService.end()">
+            {{ step?.endBtnTitle }}
+          </button>
+        </div>
+        <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
+          @if (tourService.hasPrev(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.prev()">
+              « {{ step?.prevBtnTitle }}
+            </button>
+          }
+          @if (tourService.hasNext(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.next()">
+              {{ step?.nextBtnTitle }} »
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+  </ng-template>
+</tour-step-template>

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

@@ -0,0 +1,171 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing'
+import { Router, RouterModule } from '@angular/router'
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { Subject } from 'rxjs'
+import { routes } from './app-routing.module'
+import { AppComponent } from './app.component'
+import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
+import { HotKeyService } from './services/hot-key.service'
+import { PermissionsService } from './services/permissions.service'
+import { SettingsService } from './services/settings.service'
+import { Toast, ToastService } from './services/toast.service'
+import {
+  FileStatus,
+  WebsocketStatusService,
+} from './services/websocket-status.service'
+
+describe('AppComponent', () => {
+  let component: AppComponent
+  let fixture: ComponentFixture<AppComponent>
+  let tourService: TourService
+  let websocketStatusService: WebsocketStatusService
+  let permissionsService: PermissionsService
+  let toastService: ToastService
+  let router: Router
+  let settingsService: SettingsService
+  let hotKeyService: HotKeyService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        TourNgBootstrapModule,
+        RouterModule.forRoot(routes),
+        NgbModalModule,
+        AppComponent,
+        ToastsComponent,
+        FileDropComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        PermissionsGuard,
+        DirtySavedViewGuard,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    tourService = TestBed.inject(TourService)
+    websocketStatusService = TestBed.inject(WebsocketStatusService)
+    permissionsService = TestBed.inject(PermissionsService)
+    settingsService = TestBed.inject(SettingsService)
+    toastService = TestBed.inject(ToastService)
+    router = TestBed.inject(Router)
+    hotKeyService = TestBed.inject(HotKeyService)
+    fixture = TestBed.createComponent(AppComponent)
+    component = fixture.componentInstance
+  })
+
+  it('should initialize the tour service & toggle class on body for styling', fakeAsync(() => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    fixture.detectChanges()
+    const tourSpy = jest.spyOn(tourService, 'initialize')
+    component.ngOnInit()
+    expect(tourSpy).toHaveBeenCalled()
+    tourService.start()
+    expect(document.body.classList).toContain('tour-active')
+    tourService.end()
+    tick(500)
+    expect(document.body.classList).not.toContain('tour-active')
+  }))
+
+  it('should display toast on document consumed with link if user has access', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    let toast: Toast
+    toastService.getToasts().subscribe((toasts) => (toast = toasts[0]))
+    const toastSpy = jest.spyOn(toastService, 'show')
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentConsumptionFinished')
+      .mockReturnValue(fileStatusSubject)
+    component.ngOnInit()
+    const status = new FileStatus()
+    status.documentId = 1
+    fileStatusSubject.next(status)
+    expect(toastSpy).toHaveBeenCalled()
+    expect(toast.action).not.toBeUndefined()
+    toast.action()
+    expect(navigateSpy).toHaveBeenCalledWith(['documents', status.documentId])
+  })
+
+  it('should display toast on document consumed without link if user does not have access', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(false)
+    let toast: Toast
+    toastService.getToasts().subscribe((toasts) => (toast = toasts[0]))
+    const toastSpy = jest.spyOn(toastService, 'show')
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentConsumptionFinished')
+      .mockReturnValue(fileStatusSubject)
+    component.ngOnInit()
+    fileStatusSubject.next(new FileStatus())
+    expect(toastSpy).toHaveBeenCalled()
+    expect(toast.action).toBeUndefined()
+  })
+
+  it('should display toast on document added', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    const toastSpy = jest.spyOn(toastService, 'show')
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentDetected')
+      .mockReturnValue(fileStatusSubject)
+    component.ngOnInit()
+    fileStatusSubject.next(new FileStatus())
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should suppress dashboard notifications if set', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    jest.spyOn(router, 'url', 'get').mockReturnValue('/dashboard')
+    const toastSpy = jest.spyOn(toastService, 'show')
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentDetected')
+      .mockReturnValue(fileStatusSubject)
+    component.ngOnInit()
+    fileStatusSubject.next(new FileStatus())
+    expect(toastSpy).not.toHaveBeenCalled()
+  })
+
+  it('should display toast on document failed', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    const fileStatusSubject = new Subject<FileStatus>()
+    jest
+      .spyOn(websocketStatusService, 'onDocumentConsumptionFailed')
+      .mockReturnValue(fileStatusSubject)
+    component.ngOnInit()
+    fileStatusSubject.next(new FileStatus())
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support hotkeys', () => {
+    const addShortcutSpy = jest.spyOn(hotKeyService, 'addShortcut')
+    const routerSpy = jest.spyOn(router, 'navigate')
+    // prevent actual navigation
+    routerSpy.mockReturnValue(new Promise(() => {}))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    component.ngOnInit()
+    expect(addShortcutSpy).toHaveBeenCalled()
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'h' }))
+    expect(routerSpy).toHaveBeenCalledWith(['/dashboard'])
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'd' }))
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'])
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 's' }))
+    expect(routerSpy).toHaveBeenCalledWith(['/settings'])
+  })
+})

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

@@ -0,0 +1,285 @@
+import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
+import { Router, RouterOutlet } from '@angular/router'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { first, Subscription } from 'rxjs'
+import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { SETTINGS_KEYS } from './data/ui-settings'
+import { ComponentRouterService } from './services/component-router.service'
+import { HotKeyService } from './services/hot-key.service'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from './services/permissions.service'
+import { SettingsService } from './services/settings.service'
+import { TasksService } from './services/tasks.service'
+import { ToastService } from './services/toast.service'
+import { WebsocketStatusService } from './services/websocket-status.service'
+
+@Component({
+  selector: 'pngx-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  imports: [
+    FileDropComponent,
+    ToastsComponent,
+    TourNgBootstrapModule,
+    RouterOutlet,
+  ],
+})
+export class AppComponent implements OnInit, OnDestroy {
+  private settings = inject(SettingsService)
+  private websocketStatusService = inject(WebsocketStatusService)
+  private toastService = inject(ToastService)
+  private router = inject(Router)
+  private tasksService = inject(TasksService)
+  tourService = inject(TourService)
+  private renderer = inject(Renderer2)
+  private permissionsService = inject(PermissionsService)
+  private hotKeyService = inject(HotKeyService)
+  private componentRouterService = inject(ComponentRouterService)
+
+  newDocumentSubscription: Subscription
+  successSubscription: Subscription
+  failedSubscription: Subscription
+
+  constructor() {
+    let anyWindow = window as any
+    anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.mjs'
+    this.settings.updateAppearanceSettings()
+  }
+
+  ngOnDestroy(): void {
+    this.websocketStatusService.disconnect()
+    if (this.successSubscription) {
+      this.successSubscription.unsubscribe()
+    }
+    if (this.failedSubscription) {
+      this.failedSubscription.unsubscribe()
+    }
+    if (this.newDocumentSubscription) {
+      this.newDocumentSubscription.unsubscribe()
+    }
+  }
+
+  private showNotification(key) {
+    if (
+      this.router.url == '/dashboard' &&
+      this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
+      )
+    ) {
+      return false
+    }
+    return this.settings.get(key)
+  }
+
+  ngOnInit(): void {
+    this.websocketStatusService.connect()
+
+    this.successSubscription = this.websocketStatusService
+      .onDocumentConsumptionFinished()
+      .subscribe((status) => {
+        this.tasksService.reload()
+        if (
+          this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS)
+        ) {
+          if (
+            this.permissionsService.currentUserCan(
+              PermissionAction.View,
+              PermissionType.Document
+            )
+          ) {
+            this.toastService.show({
+              content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
+              delay: 10000,
+              actionName: $localize`Open document`,
+              action: () => {
+                this.router.navigate(['documents', status.documentId])
+              },
+            })
+          } else {
+            this.toastService.show({
+              content: $localize`Document ${status.filename} was added to Paperless-ngx.`,
+              delay: 10000,
+            })
+          }
+        }
+      })
+
+    this.failedSubscription = this.websocketStatusService
+      .onDocumentConsumptionFailed()
+      .subscribe((status) => {
+        this.tasksService.reload()
+        if (
+          this.showNotification(SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED)
+        ) {
+          this.toastService.showError(
+            $localize`Could not add ${status.filename}\: ${status.message}`
+          )
+        }
+      })
+
+    this.newDocumentSubscription = this.websocketStatusService
+      .onDocumentDetected()
+      .subscribe((status) => {
+        this.tasksService.reload()
+        if (
+          this.showNotification(
+            SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
+          )
+        ) {
+          this.toastService.show({
+            content: $localize`Document ${status.filename} is being processed by Paperless-ngx.`,
+            delay: 5000,
+          })
+        }
+      })
+
+    this.hotKeyService
+      .addShortcut({ keys: 'h', description: $localize`Dashboard` })
+      .subscribe(() => {
+        this.router.navigate(['/dashboard'])
+      })
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Document
+      )
+    ) {
+      this.hotKeyService
+        .addShortcut({ keys: 'd', description: $localize`Documents` })
+        .subscribe(() => {
+          this.router.navigate(['/documents'])
+        })
+    }
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.Change,
+        PermissionType.UISettings
+      )
+    ) {
+      this.hotKeyService
+        .addShortcut({ keys: 's', description: $localize`Settings` })
+        .subscribe(() => {
+          this.router.navigate(['/settings'])
+        })
+    }
+
+    const prevBtnTitle = $localize`Prev`
+    const nextBtnTitle = $localize`Next`
+    const endBtnTitle = $localize`End`
+
+    this.tourService.initialize(
+      [
+        {
+          anchorId: 'tour.dashboard',
+          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
+          route: '/dashboard',
+          delayAfterNavigation: 500,
+          isOptional: false,
+        },
+        {
+          anchorId: 'tour.upload-widget',
+          content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.`,
+          route: '/dashboard',
+        },
+        {
+          anchorId: 'tour.documents',
+          content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`,
+          route: '/documents?sort=created&reverse=1&page=1',
+          delayAfterNavigation: 500,
+          placement: 'bottom',
+        },
+        {
+          anchorId: 'tour.documents-filter-editor',
+          content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
+          route: '/documents?sort=created&reverse=1&page=1',
+          placement: 'bottom',
+        },
+        {
+          anchorId: 'tour.documents-views',
+          content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
+          route: '/documents?sort=created&reverse=1&page=1',
+        },
+        {
+          anchorId: 'tour.tags',
+          content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
+          route: '/tags',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+        {
+          anchorId: 'tour.mail',
+          content: $localize`Manage e-mail accounts and rules for automatically importing documents.`,
+          route: '/mail',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+        {
+          anchorId: 'tour.workflows',
+          content: $localize`Workflows give you more control over the document pipeline.`,
+          route: '/workflows',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+        {
+          anchorId: 'tour.file-tasks',
+          content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
+          route: '/tasks',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+        {
+          anchorId: 'tour.settings',
+          content: $localize`Check out the settings for various tweaks to the web app.`,
+          route: '/settings',
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+        {
+          anchorId: 'tour.outro',
+          title: $localize`Thank you! 🙏`,
+          content:
+            $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
+            '<br/><br/>' +
+            $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
+          route: '/dashboard',
+          isOptional: false,
+          backdropConfig: {
+            offset: 0,
+          },
+        },
+      ],
+      {
+        enableBackdrop: true,
+        backdropConfig: {
+          offset: 10,
+        },
+        prevBtnTitle,
+        nextBtnTitle,
+        endBtnTitle,
+        isOptional: true,
+        useLegacyTitle: true,
+      }
+    )
+
+    this.tourService.start$.subscribe(() => {
+      this.renderer.addClass(document.body, 'tour-active')
+
+      this.tourService.end$.pipe(first()).subscribe(() => {
+        this.settings.completeTour()
+        // animation time
+        setTimeout(() => {
+          this.renderer.removeClass(document.body, 'tour-active')
+        }, 500)
+      })
+    })
+  }
+}

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

@@ -0,0 +1,59 @@
+<pngx-page-header
+    title="Application Configuration"
+    i18n-title
+    info="Global app configuration options which apply to <strong>every</strong> user of this install of Paperless-ngx. Options can also be set using environment variables or the configuration file but the value here will always take precedence."
+    i18n-info
+    infoLink="configuration">
+</pngx-page-header>
+
+<form [formGroup]="configForm" (ngSubmit)="saveConfig()" class="pb-4">
+
+    <ul ngbNav #nav="ngbNav" class="nav-tabs">
+        @for (category of optionCategories; track category) {
+            <li [ngbNavItem]="category">
+                <a ngbNavLink>{{category}}</a>
+                <ng-template ngbNavContent>
+                    <div class="p-3">
+                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2">
+                            @for (option of getCategoryOptions(category); track option.key) {
+                                <div class="col">
+                                    <div class="card bg-light">
+                                        <div class="card-body">
+                                            <div class="card-title">
+                                                <h6>
+                                                    {{option.title}}
+                                                    <a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
+                                                        <i-bs  name="info-circle"></i-bs>
+                                                    </a>
+                                                </h6>
+                                            </div>
+                                            <div class="mb-n3">
+                                                @switch (option.type) {
+                                                    @case (ConfigOptionType.Select) { <pngx-input-select [formControlName]="option.key" [error]="errors[option.key]" [items]="option.choices" [allowNull]="true"></pngx-input-select> }
+                                                    @case (ConfigOptionType.Number) { <pngx-input-number [formControlName]="option.key" [error]="errors[option.key]" [showAdd]="false"></pngx-input-number> }
+                                                    @case (ConfigOptionType.Boolean) { <pngx-input-switch [formControlName]="option.key" [error]="errors[option.key]" [showUnsetNote]="true" [horizontal]="true" title="Enable" i18n-title></pngx-input-switch> }
+                                                    @case (ConfigOptionType.String) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
+                                                    @case (ConfigOptionType.JSON) { <pngx-input-text [formControlName]="option.key" [error]="errors[option.key]"></pngx-input-text> }
+                                                    @case (ConfigOptionType.File) { <pngx-input-file [formControlName]="option.key" (upload)="uploadFile($event, option.key)" [error]="errors[option.key]"></pngx-input-file> }
+                                                }
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </ng-template>
+            </li>
+        }
+    </ul>
+    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+    <div class="btn-toolbar" role="toolbar">
+        <div class="btn-group me-2">
+            <button type="button" (click)="discardChanges()" class="btn btn-outline-secondary" [disabled]="loading || (isDirty$ | async) === false" i18n>Discard</button>
+        </div>
+        <div class="btn-group">
+            <button type="submit" class="btn btn-primary" [disabled]="loading || !configForm.valid || (isDirty$ | async) === false" i18n>Save</button>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,147 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { ConfigService } from 'src/app/services/config.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConfigComponent } from './config.component'
+
+describe('ConfigComponent', () => {
+  let component: ConfigComponent
+  let fixture: ComponentFixture<ConfigComponent>
+  let configService: ConfigService
+  let toastService: ToastService
+  let settingService: SettingsService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BrowserModule,
+        NgbModule,
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        ConfigComponent,
+        TextComponent,
+        SelectComponent,
+        NumberComponent,
+        SwitchComponent,
+        FileComponent,
+        PageHeaderComponent,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    configService = TestBed.inject(ConfigService)
+    toastService = TestBed.inject(ToastService)
+    settingService = TestBed.inject(SettingsService)
+    fixture = TestBed.createComponent(ConfigComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should load config on init, show error if necessary', () => {
+    const getSpy = jest.spyOn(configService, 'getConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    getSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error getting config'))
+    )
+    component.ngOnInit()
+    expect(getSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    getSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.ngOnInit()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should save config, show error if necessary', () => {
+    const saveSpy = jest.spyOn(configService, 'saveConfig')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    saveSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error saving config'))
+    )
+    component.saveConfig()
+    expect(saveSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    saveSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.saveConfig()
+    expect(component.initialConfig).toEqual({
+      output_type: OutputTypeConfig.PDF_A,
+    })
+  })
+
+  it('should support discard changes', () => {
+    component.initialConfig = { output_type: OutputTypeConfig.PDF_A2 } as any
+    component.configForm.patchValue({ output_type: OutputTypeConfig.PDF_A })
+    component.discardChanges()
+    expect(component.configForm.get('output_type').value).toEqual(
+      OutputTypeConfig.PDF_A2
+    )
+  })
+
+  it('should support JSON validation for e.g. user_args', () => {
+    component.configForm.patchValue({ user_args: '{ foo bar }' })
+    expect(component.errors['user_args']).toEqual('Invalid JSON')
+    component.configForm.patchValue({ user_args: '{ "foo": "bar" }' })
+    expect(component.errors['user_args']).toBeNull()
+  })
+
+  it('should upload file, show error if necessary', () => {
+    const uploadSpy = jest.spyOn(configService, 'uploadFile')
+    const errorSpy = jest.spyOn(toastService, 'showError')
+    uploadSpy.mockReturnValueOnce(
+      throwError(() => new Error('Error uploading file'))
+    )
+    component.uploadFile(new File([], 'test.png'), 'app_logo')
+    expect(uploadSpy).toHaveBeenCalled()
+    expect(errorSpy).toHaveBeenCalled()
+    uploadSpy.mockReturnValueOnce(
+      of({ app_logo: 'https://example.com/logo/test.png' } as any)
+    )
+    component.uploadFile(new File([], 'test.png'), 'app_logo')
+    expect(component.initialConfig).toEqual({
+      app_logo: 'https://example.com/logo/test.png',
+    })
+  })
+
+  it('should refresh ui settings after save or upload', () => {
+    const saveSpy = jest.spyOn(configService, 'saveConfig')
+    const initSpy = jest.spyOn(settingService, 'initializeSettings')
+    saveSpy.mockReturnValueOnce(
+      of({ output_type: OutputTypeConfig.PDF_A } as any)
+    )
+    component.saveConfig()
+    expect(initSpy).toHaveBeenCalled()
+
+    const uploadSpy = jest.spyOn(configService, 'uploadFile')
+    uploadSpy.mockReturnValueOnce(
+      of({ app_logo: 'https://example.com/logo/test.png' } as any)
+    )
+    component.uploadFile(new File([], 'test.png'), 'app_logo')
+    expect(initSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,211 @@
+import { AsyncPipe } from '@angular/common'
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  BehaviorSubject,
+  Observable,
+  Subscription,
+  first,
+  takeUntil,
+} from 'rxjs'
+import {
+  ConfigCategory,
+  ConfigOption,
+  ConfigOptionType,
+  PaperlessConfig,
+  PaperlessConfigOptions,
+} from 'src/app/data/paperless-config'
+import { ConfigService } from 'src/app/services/config.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-config',
+  templateUrl: './config.component.html',
+  styleUrl: './config.component.scss',
+  imports: [
+    PageHeaderComponent,
+    SelectComponent,
+    SwitchComponent,
+    TextComponent,
+    NumberComponent,
+    FileComponent,
+    AsyncPipe,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class ConfigComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy, DirtyComponent
+{
+  private configService = inject(ConfigService)
+  private toastService = inject(ToastService)
+  private settingsService = inject(SettingsService)
+
+  public readonly ConfigOptionType = ConfigOptionType
+
+  // generated dynamically
+  public configForm = new FormGroup({})
+
+  public errors = {}
+
+  get optionCategories(): string[] {
+    return Object.values(ConfigCategory)
+  }
+
+  getCategoryOptions(category: string): ConfigOption[] {
+    return PaperlessConfigOptions.filter((o) => o.category === category)
+  }
+
+  initialConfig: PaperlessConfig
+  store: BehaviorSubject<any>
+  storeSub: Subscription
+  isDirty$: Observable<boolean>
+
+  constructor() {
+    super()
+    this.configForm.addControl('id', new FormControl())
+    PaperlessConfigOptions.forEach((option) => {
+      this.configForm.addControl(option.key, new FormControl())
+    })
+  }
+
+  ngOnInit(): void {
+    this.configService
+      .getConfig()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError($localize`Error retrieving config`, e)
+        },
+      })
+
+    // validate JSON inputs
+    PaperlessConfigOptions.filter(
+      (o) => o.type === ConfigOptionType.JSON
+    ).forEach((option) => {
+      this.configForm
+        .get(option.key)
+        .addValidators((control: AbstractControl) => {
+          if (!control.value || control.value.toString().length === 0)
+            return null
+          try {
+            JSON.parse(control.value)
+          } catch (e) {
+            return [
+              {
+                user_args: e,
+              },
+            ]
+          }
+          return null
+        })
+      this.configForm.get(option.key).statusChanges.subscribe((status) => {
+        this.errors[option.key] =
+          status === 'INVALID' ? $localize`Invalid JSON` : null
+      })
+      this.configForm.get(option.key).updateValueAndValidity()
+    })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(true)
+    this.unsubscribeNotifier.complete()
+  }
+
+  private initialize(config: PaperlessConfig) {
+    if (!this.store) {
+      this.store = new BehaviorSubject(config)
+
+      this.store
+        .asObservable()
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe((state) => {
+          this.configForm.patchValue(state, { emitEvent: false })
+        })
+
+      this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable())
+    }
+    this.configForm.patchValue(config)
+
+    this.initialConfig = config
+  }
+
+  getDocsUrl(key: string) {
+    return `https://docs.paperless-ngx.com/configuration/#${key}`
+  }
+
+  public saveConfig() {
+    this.loading = true
+    this.configService
+      .saveConfig(this.configForm.value as PaperlessConfig)
+      .pipe(takeUntil(this.unsubscribeNotifier), first())
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+          this.store.next(config)
+          this.settingsService.initializeSettings().subscribe()
+          this.toastService.showInfo($localize`Configuration updated`)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError(
+            $localize`An error occurred updating configuration`,
+            e
+          )
+        },
+      })
+  }
+
+  public discardChanges() {
+    this.configForm.reset(this.initialConfig)
+  }
+
+  public uploadFile(file: File, key: string) {
+    this.loading = true
+    this.configService
+      .uploadFile(file, this.configForm.value['id'], key)
+      .pipe(takeUntil(this.unsubscribeNotifier), first())
+      .subscribe({
+        next: (config) => {
+          this.loading = false
+          this.initialize(config)
+          this.store.next(config)
+          this.settingsService.initializeSettings().subscribe()
+          this.toastService.showInfo($localize`File successfully updated`)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError(
+            $localize`An error occurred uploading file`,
+            e
+          )
+        },
+      })
+  }
+}

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

@@ -0,0 +1,42 @@
+<pngx-page-header
+  title="Logs"
+  i18n-title
+  info="Review the log files for the application and for email checking."
+  i18n-info>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
+    <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+  </div>
+</pngx-page-header>
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
+  @for (logFile of logFiles; track logFile) {
+    <li [ngbNavItem]="logFile">
+      <a ngbNavLink>
+        {{logFile}}.log
+      </a>
+    </li>
+  }
+  @if (loading || !logFiles.length) {
+    <div class="ps-2 d-flex align-items-center">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      @if (!logFiles.length) {
+        <ng-container i18n>Loading...</ng-container>
+      }
+    </div>
+  }
+</ul>
+
+<div [ngbNavOutlet]="nav" class="mt-2"></div>
+
+<div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
+  @if (loading && logFiles.length) {
+    <div>
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </div>
+  }
+  @for (log of logs; track $index) {
+    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
+  }
+</div>

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

@@ -0,0 +1,26 @@
+.log-entry-10 {
+  color: lightslategray !important;
+}
+
+.log-entry-30 {
+  color: yellow !important;
+}
+
+.log-entry-40 {
+  color: red !important;
+}
+
+.log-entry-50 {
+  color: lightcoral !important;
+  font-weight: bold;
+}
+
+.log-container {
+  overflow-y: scroll;
+  height: calc(100vh - 200px);
+  top: 70px;
+
+  p {
+    white-space: pre-wrap;
+  }
+}

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

@@ -0,0 +1,93 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { BrowserModule, By } from '@angular/platform-browser'
+import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { LogService } from 'src/app/services/rest/log.service'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LogsComponent } from './logs.component'
+
+const paperless_logs = [
+  '[2023-05-29 03:05:01,224] [DEBUG] [paperless.tasks] Training data unchanged.',
+  '[2023-05-29 04:05:00,622] [DEBUG] [paperless.classifier] Gathering data from database...',
+  '[2023-05-29 04:05:01,213] [DEBUG] [paperless.tasks] Training data unchanged.',
+  '[2023-06-11 00:30:01,774] [INFO] [paperless.sanity_checker] Document contains no OCR data',
+  '[2023-06-11 00:30:01,774] [WARNING] [paperless.sanity_checker] Made up',
+  '[2023-06-11 00:30:01,774] [ERROR] [paperless.sanity_checker] Document contains no OCR data',
+  '[2023-06-11 00:30:01,774] [CRITICAL] [paperless.sanity_checker] Document contains no OCR data',
+]
+const mail_logs = [
+  '[2023-06-09 01:10:00,666] [DEBUG] [paperless_mail] Rule inbox@example.com.Incoming: Searching folder with criteria (SINCE 10-May-2023 UNSEEN)',
+  '[2023-06-09 01:10:01,385] [DEBUG] [paperless_mail] Rule inbox@example.com.Incoming: Processed 3 matching mail(s)',
+]
+
+describe('LogsComponent', () => {
+  let component: LogsComponent
+  let fixture: ComponentFixture<LogsComponent>
+  let logService: LogService
+  let logSpy
+  let reloadSpy
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        LogsComponent,
+        PageHeaderComponent,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    logService = TestBed.inject(LogService)
+    jest.spyOn(logService, 'list').mockReturnValue(of(['paperless', 'mail']))
+    logSpy = jest.spyOn(logService, 'get')
+    logSpy.mockImplementation((id) => {
+      return of(id === 'paperless' ? paperless_logs : mail_logs)
+    })
+    fixture = TestBed.createComponent(LogsComponent)
+    component = fixture.componentInstance
+    reloadSpy = jest.spyOn(component, 'reloadLogs')
+    window.HTMLElement.prototype.scroll = function () {} // mock scroll
+    jest.useFakeTimers()
+    fixture.detectChanges()
+  })
+
+  it('should display logs with first log initially', () => {
+    expect(logSpy).toHaveBeenCalledWith('paperless')
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain(
+      paperless_logs[0]
+    )
+  })
+
+  it('should load log when tab clicked', () => {
+    fixture.debugElement
+      .queryAll(By.directive(NgbNavLink))[1]
+      .nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(logSpy).toHaveBeenCalledWith('mail')
+  })
+
+  it('should handle error with no logs', () => {
+    logSpy.mockReturnValueOnce(
+      throwError(() => new Error('error getting logs'))
+    )
+    component.reloadLogs()
+    expect(component.logs).toHaveLength(0)
+  })
+
+  it('should auto refresh, allow toggle', () => {
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+
+    component.autoRefreshEnabled = false
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+  })
+})

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

@@ -0,0 +1,111 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  inject,
+} from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { filter, takeUntil, timer } from 'rxjs'
+import { LogService } from 'src/app/services/rest/log.service'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-logs',
+  templateUrl: './logs.component.html',
+  styleUrls: ['./logs.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class LogsComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy
+{
+  private logService = inject(LogService)
+  private changedetectorRef = inject(ChangeDetectorRef)
+
+  public logs: string[] = []
+
+  public logFiles: string[] = []
+
+  public activeLog: string
+
+  public autoRefreshEnabled: boolean = true
+
+  @ViewChild('logContainer') logContainer: ElementRef
+
+  ngOnInit(): void {
+    this.logService
+      .list()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((result) => {
+        this.logFiles = result
+        this.loading = false
+        if (this.logFiles.length > 0) {
+          this.activeLog = this.logFiles[0]
+          this.reloadLogs()
+        }
+        timer(5000, 5000)
+          .pipe(
+            filter(() => this.autoRefreshEnabled),
+            takeUntil(this.unsubscribeNotifier)
+          )
+          .subscribe(() => {
+            this.reloadLogs()
+          })
+      })
+  }
+
+  ngOnDestroy(): void {
+    super.ngOnDestroy()
+  }
+
+  reloadLogs() {
+    this.loading = true
+    this.logService
+      .get(this.activeLog)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (result) => {
+          this.logs = result
+          this.loading = false
+          this.scrollToBottom()
+        },
+        error: () => {
+          this.logs = []
+          this.loading = false
+        },
+      })
+  }
+
+  getLogLevel(log: string) {
+    if (log.indexOf('[DEBUG]') != -1) {
+      return 10
+    } else if (log.indexOf('[WARNING]') != -1) {
+      return 30
+    } else if (log.indexOf('[ERROR]') != -1) {
+      return 40
+    } else if (log.indexOf('[CRITICAL]') != -1) {
+      return 50
+    } else {
+      return 20
+    }
+  }
+
+  scrollToBottom(): void {
+    this.changedetectorRef.detectChanges()
+    this.logContainer?.nativeElement.scroll({
+      top: this.logContainer.nativeElement.scrollHeight,
+      left: 0,
+      behavior: 'auto',
+    })
+  }
+}

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

@@ -0,0 +1,363 @@
+<pngx-page-header
+  title="Settings"
+  i18n-title
+  info="Options to customize appearance, notifications and more. Settings apply to the <strong>current user only</strong>."
+  i18n-info
+  >
+  <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
+    <i-bs class="me-1" name="airplane"></i-bs>&nbsp;<ng-container i18n>Start tour</ng-container>
+  </button>
+  @if (permissionsService.isAdmin()) {
+    <button class="btn btn-sm btn-outline-primary position-relative ms-md-5 me-1" (click)="showSystemStatus()"
+      [disabled]="!systemStatus">
+      @if (!systemStatus) {
+        <div class="spinner-border spinner-border-sm me-1 h-75" role="status"></div>
+      } @else {
+        <i-bs class="me-2" name="card-checklist"></i-bs>
+        @if (systemStatusHasErrors) {
+          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+            <i-bs name="exclamation-circle-fill" class="text-danger" width="1.75em" height="1.75em"></i-bs>
+          </span>
+        } @else {
+          <span class="badge bg-body position-absolute top-0 start-100 translate-middle rounded-pill p-0">
+            <i-bs name="check-circle-fill" class="text-primary" width="1.75em" height="1.75em"></i-bs>
+          </span>
+        }
+      }
+      <ng-container i18n>System Status</ng-container>
+    </button>
+    <a class="btn btn-sm btn-primary" href="admin/" target="_blank">
+      <ng-container i18n>Open Django Admin</ng-container>
+      &nbsp;<i-bs name="arrow-up-right"></i-bs>
+    </a>
+  }
+</pngx-page-header>
+
+<form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
+
+  <ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-tabs">
+    <li [ngbNavItem]="SettingsNavIDs.General">
+      <a ngbNavLink i18n>General</a>
+      <ng-template ngbNavContent>
+        <div class="row">
+          <div class="col-xl-6 pe-xl-5">
+            <h5 i18n>Appearance</h5>
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Display language</span>
+              </div>
+              <div class="col">
+
+                <select class="form-select" formControlName="displayLanguage">
+                  @for (lang of displayLanguageOptions; track lang) {
+                    <option [ngValue]="lang.code">{{lang.name}}@if (lang.code && currentLocale !== 'en-US') {
+                      <span> - {{lang.englishName}}</span>
+                    }</option>
+                  }
+                </select>
+
+                @if (displayLanguageIsDirty) {
+                  <small class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+                }
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Date display</span>
+              </div>
+              <div class="col">
+
+                <select class="form-select" formControlName="dateLocale">
+                  @for (lang of dateLocaleOptions; track lang) {
+                    <option [ngValue]="lang.code">{{lang.name}}@if (lang.code) {
+                      <span> - {{today | customDate:'shortDate':null:lang.code}}</span>
+                    }</option>
+                  }
+                </select>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Date format</span>
+              </div>
+              <div class="col">
+
+                <div class="form-check">
+                  <input type="radio" id="dateFormatShort" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="shortDate">
+                  <label class="form-check-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:computedDateLocale}}</label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" id="dateFormatMedium" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="mediumDate">
+                  <label class="form-check-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:computedDateLocale}}</label>
+                </div>
+                <div class="form-check">
+                  <input type="radio" id="dateFormatLong" name="dateFormat" class="form-check-input" formControlName="dateFormat" value="longDate">
+                  <label class="form-check-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:computedDateLocale}}</label>
+                </div>
+
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Items per page</span>
+              </div>
+              <div class="col">
+
+                <select class="form-select" formControlName="documentListItemPerPage">
+                  <option [ngValue]="10">10</option>
+                  <option [ngValue]="25">25</option>
+                  <option [ngValue]="50">50</option>
+                  <option [ngValue]="100">100</option>
+                </select>
+
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Sidebar</span>
+              </div>
+              <div class="col">
+
+                <pngx-input-check i18n-title title="Use 'slim' sidebar (icons only)" formControlName="slimSidebarEnabled"></pngx-input-check>
+
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Dark mode</span>
+              </div>
+              <div class="col">
+                <pngx-input-check i18n-title title="Use system settings" formControlName="darkModeUseSystem"></pngx-input-check>
+                <pngx-input-check [hidden]="settingsForm.value.darkModeUseSystem" i18n-title title="Enable dark mode" formControlName="darkModeEnabled"></pngx-input-check>
+                <pngx-input-check i18n-title title="Invert thumbnails in dark mode" formControlName="darkModeInvertThumbs"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Theme Color</span>
+              </div>
+              <div class="col col-md-4">
+                <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
+              </div>
+              <div class="col-2">
+                <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
+                  <i-bs width="1em" height="1em" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                </button>
+              </div>
+            </div>
+
+            <h5 class="mt-3" id="update-checking" i18n>Update checking</h5>
+            <div class="row mb-3">
+              <div class="col d-flex flex-row align-items-start">
+                <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+                <button class="btn btn-sm btn-link text-muted me-auto p-0 ms-2" title="What's this?" i18n-title type="button" triggers="mouseenter:mouseleave" [ngbPopover]="updatesPopover" [autoClose]="true">
+                  <i-bs name="question-circle"></i-bs>
+                </button>
+                <ng-template #updatesPopover>
+                  <p i18n>
+                    Update checking works by pinging the public GitHub API for the latest release to determine whether a new version is available. Actual updating of the app must still be performed manually.
+                  </p>
+                  <p class="mb-0">
+                    <em i18n>No tracking data is collected by the app in any way.</em>
+                  </p>
+                </ng-template>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Saved Views</h5>
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+                <pngx-input-check i18n-title title="Show document counts in sidebar saved views" formControlName="sidebarViewsShowCount"></pngx-input-check>
+              </div>
+            </div>
+
+          </div>
+          <div class="col-xl-6 ps-xl-5">
+            <h5 class="mt-3 mt-md-0" i18n>Document editing</h5>
+
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Default zoom</span>
+              </div>
+              <div class="col">
+                <select class="form-select" formControlName="pdfViewerDefaultZoom">
+                  <option [ngValue]="ZoomSetting.PageWidth" i18n>Fit width</option>
+                  <option [ngValue]="ZoomSetting.PageFit" i18n>Fit page</option>
+                </select>
+                <p class="small text-muted mt-1" i18n>Only applies to the Paperless-ngx PDF viewer.</p>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Automatically remove inbox tag(s) on save" formControlName="documentEditingRemoveInboxTags"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col">
+                <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Global search</h5>
+            <div class="row">
+              <div class="col">
+                <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col-md-3 col-form-label pt-0">
+                <span i18n>Full search links to</span>
+              </div>
+              <div class="col mb-3">
+                <select class="form-select" formControlName="searchLink">
+                  <option [ngValue]="GlobalSearchType.TITLE_CONTENT" i18n>Title and content search</option>
+                  <option [ngValue]="GlobalSearchType.ADVANCED" i18n>Advanced search</option>
+                </select>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Bulk editing</h5>
+            <div class="row mb-3">
+              <div class="col">
+                <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs"></pngx-input-check>
+                <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+              </div>
+            </div>
+
+            <h5 class="mt-3" i18n>Notes</h5>
+            <div class="row mb-3">
+              <div class="col">
+                <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      </ng-template>
+    </li>
+
+    <li [ngbNavItem]="SettingsNavIDs.Permissions">
+      <a ngbNavLink i18n>Permissions</a>
+      <ng-template ngbNavContent>
+
+        <h5 i18n>Default Permissions</h5>
+
+        <div class="row mb-3">
+          <div class="col">
+            <p i18n>
+              Settings apply to this user account for objects (Tags, Mail Rules, etc. but not documents) created via the web UI.
+            </p>
+          </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label pt-0">
+            <span i18n>Default Owner</span>
+          </div>
+          <div class="col-md-5">
+            <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
+            <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
+          </div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-md-3 col-form-label pt-0">
+            <span i18n>Default View Permissions</span>
+          </div>
+          <div class="col-md-5">
+            <div class="row">
+              <div class="col-3">
+                <span class="d-block pt-1" i18n>Users:</span>
+              </div>
+              <div class="col">
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                  <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
+                </ng-container>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-3">
+                <span class="d-block pt-1" i18n>Groups:</span>
+              </div>
+              <div class="col">
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                  <pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
+                </ng-container>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-3 col-form-label pt-0">
+            <span i18n>Default Edit Permissions</span>
+          </div>
+          <div class="col-md-5">
+            <div class="row">
+              <div class="col-3">
+                <span class="d-block pt-1" i18n>Users:</span>
+              </div>
+              <div class="col">
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                  <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
+                </ng-container>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-3">
+                <span class="d-block pt-1" i18n>Groups:</span>
+              </div>
+              <div class="col">
+                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                  <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
+                </ng-container>
+              </div>
+            </div>
+            <div class="row">
+              <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </li>
+
+    <li [ngbNavItem]="SettingsNavIDs.Notifications">
+      <a ngbNavLink i18n>Notifications</a>
+      <ng-template ngbNavContent>
+
+        <h5 i18n>Document processing</h5>
+
+        <div class="row">
+          <div class="col">
+            <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
+            <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
+            <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
+            <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
+          </div>
+        </div>
+
+      </ng-template>
+    </li>
+  </ul>
+
+  <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+
+  <button type="button" (click)="reset()" class="btn btn-outline-secondary mb-2" [disabled]="(isDirty$ | async) === false" i18n>Cancel</button>
+  <button type="submit" class="btn btn-primary ms-2 mb-2" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
+</form>

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

@@ -0,0 +1,368 @@
+import { DragDropModule } from '@angular/cdk/drag-drop'
+import { DatePipe, ViewportScroller } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { ActivatedRoute, Router, convertToParamMap } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import {
+  NgbAlertModule,
+  NgbModal,
+  NgbModalModule,
+  NgbModule,
+  NgbNavLink,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { routes } from 'src/app/app-routing.module'
+import {
+  InstallType,
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { GroupService } from 'src/app/services/rest/group.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import * as navUtils from 'src/app/utils/navigation'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { CheckComponent } from '../../common/input/check/check.component'
+import { ColorComponent } from '../../common/input/color/color.component'
+import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { TagsComponent } from '../../common/input/tags/tags.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { SettingsComponent } from './settings.component'
+
+const users = [
+  { id: 1, username: 'user1', is_superuser: false },
+  { id: 2, username: 'user2', is_superuser: false },
+]
+const groups = [
+  { id: 1, name: 'group1' },
+  { id: 2, name: 'group2' },
+]
+
+const status: SystemStatus = {
+  pngx_version: '2.4.3',
+  server_os: 'macOS-14.1.1-arm64-arm-64bit',
+  install_type: InstallType.BareMetal,
+  storage: { total: 494384795648, available: 13573525504 },
+  database: {
+    type: 'sqlite',
+    url: '/paperless-ngx/data/db.sqlite3',
+    status: SystemStatusItemStatus.ERROR,
+    error: null,
+    migration_status: {
+      latest_migration: 'socialaccount.0006_alter_socialaccount_extra_data',
+      unapplied_migrations: [],
+    },
+  },
+  tasks: {
+    redis_url: 'redis://localhost:6379',
+    redis_status: SystemStatusItemStatus.ERROR,
+    redis_error: 'Error 61 connecting to localhost:6379. Connection refused.',
+    celery_status: SystemStatusItemStatus.ERROR,
+    celery_url: 'celery@localhost',
+    celery_error: 'Error connecting to celery@localhost',
+    index_status: SystemStatusItemStatus.OK,
+    index_last_modified: new Date().toISOString(),
+    index_error: null,
+    classifier_status: SystemStatusItemStatus.OK,
+    classifier_last_trained: new Date().toISOString(),
+    classifier_error: null,
+    sanity_check_status: SystemStatusItemStatus.ERROR,
+    sanity_check_last_run: new Date().toISOString(),
+    sanity_check_error: 'Error running sanity check.',
+  },
+}
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent
+  let fixture: ComponentFixture<SettingsComponent>
+  let router: Router
+  let settingsService: SettingsService
+  let activatedRoute: ActivatedRoute
+  let viewportScroller: ViewportScroller
+  let toastService: ToastService
+  let userService: UserService
+  let permissionsService: PermissionsService
+  let groupService: GroupService
+  let modalService: NgbModal
+  let systemStatusService: SystemStatusService
+  let savedViewsService: SavedViewService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        FormsModule,
+        ReactiveFormsModule,
+        NgbAlertModule,
+        NgSelectModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgbModalModule,
+        DragDropModule,
+        SettingsComponent,
+        PageHeaderComponent,
+        IfPermissionsDirective,
+        CustomDatePipe,
+        ConfirmDialogComponent,
+        CheckComponent,
+        ColorComponent,
+        SafeHtmlPipe,
+        SelectComponent,
+        TextComponent,
+        NumberComponent,
+        TagsComponent,
+        PermissionsUserComponent,
+        PermissionsGroupComponent,
+        IfOwnerDirective,
+        ConfirmButtonComponent,
+        DragDropSelectComponent,
+      ],
+      providers: [
+        CustomDatePipe,
+        DatePipe,
+        PermissionsGuard,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    router = TestBed.inject(Router)
+    activatedRoute = TestBed.inject(ActivatedRoute)
+    viewportScroller = TestBed.inject(ViewportScroller)
+    toastService = TestBed.inject(ToastService)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = users[0]
+    userService = TestBed.inject(UserService)
+    permissionsService = TestBed.inject(PermissionsService)
+    modalService = TestBed.inject(NgbModal)
+    systemStatusService = TestBed.inject(SystemStatusService)
+    savedViewsService = TestBed.inject(SavedViewService)
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    jest
+      .spyOn(permissionsService, 'currentUserOwnsObject')
+      .mockReturnValue(true)
+    groupService = TestBed.inject(GroupService)
+  })
+
+  function completeSetup(excludeService = null) {
+    if (excludeService !== userService) {
+      jest.spyOn(userService, 'listAll').mockReturnValue(
+        of({
+          all: users.map((u) => u.id),
+          count: users.length,
+          results: users.concat([]),
+        })
+      )
+    }
+    if (excludeService !== groupService) {
+      jest.spyOn(groupService, 'listAll').mockReturnValue(
+        of({
+          all: groups.map((g) => g.id),
+          count: groups.length,
+          results: groups.concat([]),
+        })
+      )
+    }
+
+    fixture = TestBed.createComponent(SettingsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  }
+
+  it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', () => {
+    completeSetup()
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
+    tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
+    tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+
+    const initSpy = jest.spyOn(component, 'initialize')
+    component.isDirty = true // mock dirty
+    navigateSpy.mockResolvedValueOnce(false) // nav rejected cause dirty
+    tabButtons[0].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'general'])
+    expect(initSpy).not.toHaveBeenCalled()
+
+    navigateSpy.mockResolvedValueOnce(true) // nav accepted even though dirty
+    tabButtons[1].nativeElement.dispatchEvent(new MouseEvent('click'))
+    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
+    expect(initSpy).toHaveBeenCalled()
+  })
+
+  it('should support direct link to tab by URL, scroll if needed', () => {
+    completeSetup()
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ section: 'notifications' })))
+    activatedRoute.snapshot.fragment = '#notifications'
+    const scrollSpy = jest.spyOn(viewportScroller, 'scrollToAnchor')
+    component.ngOnInit()
+    expect(component.activeNavID).toEqual(3) // Notifications
+    component.ngAfterViewInit()
+    expect(scrollSpy).toHaveBeenCalledWith('#notifications')
+  })
+
+  it('should support save local settings updating appearance settings and calling API, show error', () => {
+    completeSetup()
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSpy = jest.spyOn(toastService, 'show')
+    const storeSpy = jest.spyOn(settingsService, 'storeSettings')
+    const appearanceSettingsSpy = jest.spyOn(
+      settingsService,
+      'updateAppearanceSettings'
+    )
+    const setSpy = jest.spyOn(settingsService, 'set')
+
+    // error first
+    storeSpy.mockReturnValueOnce(
+      throwError(() => new Error('unable to save settings'))
+    )
+    component.saveSettings()
+
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(storeSpy).toHaveBeenCalled()
+    expect(appearanceSettingsSpy).not.toHaveBeenCalled()
+    expect(setSpy).toHaveBeenCalledTimes(30)
+
+    // succeed
+    storeSpy.mockReturnValueOnce(of(true))
+    component.saveSettings()
+    expect(toastSpy).toHaveBeenCalled()
+    expect(appearanceSettingsSpy).toHaveBeenCalled()
+  })
+
+  it('should offer reload if settings changes require', () => {
+    const reloadSpy = jest
+      .spyOn(navUtils, 'locationReload')
+      .mockImplementation(() => {})
+    completeSetup()
+    let toast: Toast
+    toastService.getToasts().subscribe((t) => (toast = t[0]))
+    component.initialize(true) // reset
+    component.store.getValue()['displayLanguage'] = 'en-US'
+    component.store.getValue()['updateCheckingEnabled'] = false
+    component.settingsForm.value.displayLanguage = 'en-GB'
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+    component.saveSettings()
+    expect(toast.actionName).toEqual('Reload now')
+
+    component.settingsForm.value.updateCheckingEnabled = true
+    component.saveSettings()
+
+    expect(toast.actionName).toEqual('Reload now')
+    toast.action()
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should allow setting theme color, visually apply change immediately but not save', () => {
+    completeSetup()
+    const appearanceSpy = jest.spyOn(
+      settingsService,
+      'updateAppearanceSettings'
+    )
+    const colorInput = fixture.debugElement.query(By.directive(ColorComponent))
+    colorInput.query(By.css('input')).nativeElement.value = '#ff0000'
+    colorInput
+      .query(By.css('input'))
+      .nativeElement.dispatchEvent(new Event('change'))
+    fixture.detectChanges()
+    expect(appearanceSpy).toHaveBeenCalled()
+    expect(settingsService.get(SETTINGS_KEYS.THEME_COLOR)).toEqual('')
+    component.clearThemeColor()
+  })
+
+  it('should show errors on load if load users failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(userService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load users'))
+      )
+    completeSetup(userService)
+    fixture.detectChanges()
+    expect(toastErrorSpy).toHaveBeenCalled()
+  })
+
+  it('should show errors on load if load groups failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(groupService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load groups'))
+      )
+    completeSetup(groupService)
+    fixture.detectChanges()
+    expect(toastErrorSpy).toHaveBeenCalled()
+  })
+
+  it('should load system status on initialize, show errors if needed', () => {
+    jest.spyOn(systemStatusService, 'get').mockReturnValue(of(status))
+    jest.spyOn(permissionsService, 'isAdmin').mockReturnValue(true)
+    completeSetup()
+    expect(component['systemStatus']).toEqual(status) // private
+    expect(component.systemStatusHasErrors).toBeTruthy()
+    // coverage
+    component['systemStatus'].database.status = SystemStatusItemStatus.OK
+    component['systemStatus'].tasks.redis_status = SystemStatusItemStatus.OK
+    component['systemStatus'].tasks.celery_status = SystemStatusItemStatus.OK
+    component['systemStatus'].tasks.sanity_check_status =
+      SystemStatusItemStatus.OK
+    expect(component.systemStatusHasErrors).toBeFalsy()
+  })
+
+  it('should open system status dialog', () => {
+    const modalOpenSpy = jest.spyOn(modalService, 'open')
+    jest.spyOn(systemStatusService, 'get').mockReturnValue(of(status))
+    jest.spyOn(permissionsService, 'isAdmin').mockReturnValue(true)
+    completeSetup()
+    component.showSystemStatus()
+    expect(modalOpenSpy).toHaveBeenCalledWith(SystemStatusDialogComponent, {
+      size: 'xl',
+    })
+  })
+
+  it('should support reset', () => {
+    completeSetup()
+    component.settingsForm.get('themeColor').setValue('#ff0000')
+    component.reset()
+    expect(component.settingsForm.get('themeColor').value).toEqual('')
+  })
+
+  it('should trigger maybeRefreshDocumentCounts on settings save', () => {
+    completeSetup()
+    const maybeRefreshSpy = jest.spyOn(
+      savedViewsService,
+      'maybeRefreshDocumentCounts'
+    )
+    settingsService.settingsSaved.emit(true)
+    expect(maybeRefreshSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,599 @@
+import { AsyncPipe, ViewportScroller } from '@angular/common'
+import {
+  AfterViewInit,
+  Component,
+  LOCALE_ID,
+  OnDestroy,
+  OnInit,
+  inject,
+} from '@angular/core'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { ActivatedRoute, Router } from '@angular/router'
+import {
+  NgbModal,
+  NgbModalRef,
+  NgbNavChangeEvent,
+  NgbNavModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourService } from 'ngx-ui-tour-ng-bootstrap'
+import {
+  BehaviorSubject,
+  Observable,
+  Subject,
+  Subscription,
+  first,
+  takeUntil,
+  tap,
+} from 'rxjs'
+import { Group } from 'src/app/data/group'
+import {
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
+import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { GroupService } from 'src/app/services/rest/group.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import {
+  LanguageOption,
+  SettingsService,
+} from 'src/app/services/settings.service'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { locationReload } from 'src/app/utils/navigation'
+import { CheckComponent } from '../../common/input/check/check.component'
+import { ColorComponent } from '../../common/input/color/color.component'
+import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
+import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { ZoomSetting } from '../../document-detail/document-detail.component'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+
+enum SettingsNavIDs {
+  General = 1,
+  Permissions = 2,
+  Notifications = 3,
+  SavedViews = 4,
+}
+
+const systemLanguage = { code: '', name: $localize`Use system language` }
+const systemDateFormat = {
+  code: '',
+  name: $localize`Use date format of display language`,
+}
+
+@Component({
+  selector: 'pngx-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    CheckComponent,
+    ColorComponent,
+    SelectComponent,
+    PermissionsGroupComponent,
+    PermissionsUserComponent,
+    CustomDatePipe,
+    IfPermissionsDirective,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbNavModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class SettingsComponent
+  extends ComponentWithPermissions
+  implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
+{
+  private documentListViewService = inject(DocumentListViewService)
+  private toastService = inject(ToastService)
+  private settings = inject(SettingsService)
+  currentLocale = inject(LOCALE_ID)
+  private viewportScroller = inject(ViewportScroller)
+  private activatedRoute = inject(ActivatedRoute)
+  readonly tourService = inject(TourService)
+  private usersService = inject(UserService)
+  private groupsService = inject(GroupService)
+  private router = inject(Router)
+  permissionsService = inject(PermissionsService)
+  private modalService = inject(NgbModal)
+  private systemStatusService = inject(SystemStatusService)
+  private savedViewsService = inject(SavedViewService)
+
+  activeNavID: number
+
+  settingsForm = new FormGroup({
+    bulkEditConfirmationDialogs: new FormControl(null),
+    bulkEditApplyOnClose: new FormControl(null),
+    documentListItemPerPage: new FormControl(null),
+    slimSidebarEnabled: new FormControl(null),
+    darkModeUseSystem: new FormControl(null),
+    darkModeEnabled: new FormControl(null),
+    darkModeInvertThumbs: new FormControl(null),
+    themeColor: new FormControl(null),
+    displayLanguage: new FormControl(null),
+    dateLocale: new FormControl(null),
+    dateFormat: new FormControl(null),
+    notesEnabled: new FormControl(null),
+    updateCheckingEnabled: new FormControl(null),
+    defaultPermsOwner: new FormControl(null),
+    defaultPermsViewUsers: new FormControl(null),
+    defaultPermsViewGroups: new FormControl(null),
+    defaultPermsEditUsers: new FormControl(null),
+    defaultPermsEditGroups: new FormControl(null),
+    useNativePdfViewer: new FormControl(null),
+    pdfViewerDefaultZoom: new FormControl(null),
+    documentEditingRemoveInboxTags: new FormControl(null),
+    documentEditingOverlayThumbnail: new FormControl(null),
+    searchDbOnly: new FormControl(null),
+    searchLink: new FormControl(null),
+
+    notificationsConsumerNewDocument: new FormControl(null),
+    notificationsConsumerSuccess: new FormControl(null),
+    notificationsConsumerFailed: new FormControl(null),
+    notificationsConsumerSuppressOnDashboard: new FormControl(null),
+
+    savedViewsWarnOnUnsavedChange: new FormControl(null),
+    sidebarViewsShowCount: new FormControl(null),
+  })
+
+  SettingsNavIDs = SettingsNavIDs
+
+  store: BehaviorSubject<any>
+  storeSub: Subscription
+  isDirty$: Observable<boolean>
+  isDirty: boolean = false
+  unsubscribeNotifier: Subject<any> = new Subject()
+  savePending: boolean = false
+
+  users: User[]
+  groups: Group[]
+
+  public systemStatus: SystemStatus
+
+  public readonly GlobalSearchType = GlobalSearchType
+
+  public readonly ZoomSetting = ZoomSetting
+
+  get systemStatusHasErrors(): boolean {
+    return (
+      this.systemStatus.database.status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.redis_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.celery_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.index_status === SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.classifier_status ===
+        SystemStatusItemStatus.ERROR ||
+      this.systemStatus.tasks.sanity_check_status ===
+        SystemStatusItemStatus.ERROR ||
+      this.systemStatus.websocket_connected === SystemStatusItemStatus.ERROR
+    )
+  }
+
+  get computedDateLocale(): string {
+    return (
+      this.settingsForm.value.dateLocale ||
+      this.settingsForm.value.displayLanguage ||
+      this.currentLocale
+    )
+  }
+
+  constructor() {
+    super()
+    this.settings.settingsSaved.subscribe(() => {
+      if (!this.savePending) this.initialize()
+      this.savedViewsService.maybeRefreshDocumentCounts()
+    })
+  }
+
+  ngOnInit() {
+    this.initialize()
+
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.User
+      )
+    ) {
+      this.usersService
+        .listAll()
+        .pipe(first())
+        .subscribe({
+          next: (r) => {
+            this.users = r.results
+          },
+          error: (e) => {
+            this.toastService.showError($localize`Error retrieving users`, e)
+          },
+        })
+    }
+
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Group
+      )
+    ) {
+      this.groupsService
+        .listAll()
+        .pipe(first())
+        .subscribe({
+          next: (r) => {
+            this.groups = r.results
+          },
+          error: (e) => {
+            this.toastService.showError($localize`Error retrieving groups`, e)
+          },
+        })
+    }
+
+    this.activatedRoute.paramMap.subscribe((paramMap) => {
+      const section = paramMap.get('section')
+      if (section) {
+        const navIDKey: string = Object.keys(SettingsNavIDs).find(
+          (navID) => navID.toLowerCase() == section
+        )
+        if (navIDKey) {
+          this.activeNavID = SettingsNavIDs[navIDKey]
+        }
+      }
+    })
+  }
+
+  ngAfterViewInit(): void {
+    if (this.activatedRoute.snapshot.fragment) {
+      this.viewportScroller.scrollToAnchor(
+        this.activatedRoute.snapshot.fragment
+      )
+    }
+  }
+
+  private getCurrentSettings() {
+    return {
+      bulkEditConfirmationDialogs: this.settings.get(
+        SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
+      ),
+      bulkEditApplyOnClose: this.settings.get(
+        SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE
+      ),
+      documentListItemPerPage: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_LIST_SIZE
+      ),
+      slimSidebarEnabled: this.settings.get(SETTINGS_KEYS.SLIM_SIDEBAR),
+      darkModeUseSystem: this.settings.get(SETTINGS_KEYS.DARK_MODE_USE_SYSTEM),
+      darkModeEnabled: this.settings.get(SETTINGS_KEYS.DARK_MODE_ENABLED),
+      darkModeInvertThumbs: this.settings.get(
+        SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED
+      ),
+      themeColor: this.settings.get(SETTINGS_KEYS.THEME_COLOR),
+      useNativePdfViewer: this.settings.get(
+        SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
+      ),
+      pdfViewerDefaultZoom: this.settings.get(
+        SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING
+      ),
+      displayLanguage: this.settings.getLanguage(),
+      dateLocale: this.settings.get(SETTINGS_KEYS.DATE_LOCALE),
+      dateFormat: this.settings.get(SETTINGS_KEYS.DATE_FORMAT),
+      notesEnabled: this.settings.get(SETTINGS_KEYS.NOTES_ENABLED),
+      updateCheckingEnabled: this.settings.get(
+        SETTINGS_KEYS.UPDATE_CHECKING_ENABLED
+      ),
+      notificationsConsumerNewDocument: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT
+      ),
+      notificationsConsumerSuccess: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS
+      ),
+      notificationsConsumerFailed: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED
+      ),
+      notificationsConsumerSuppressOnDashboard: this.settings.get(
+        SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD
+      ),
+      savedViewsWarnOnUnsavedChange: this.settings.get(
+        SETTINGS_KEYS.SAVED_VIEWS_WARN_ON_UNSAVED_CHANGE
+      ),
+      sidebarViewsShowCount: this.settings.get(
+        SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT
+      ),
+      defaultPermsOwner: this.settings.get(SETTINGS_KEYS.DEFAULT_PERMS_OWNER),
+      defaultPermsViewUsers: this.settings.get(
+        SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS
+      ),
+      defaultPermsViewGroups: this.settings.get(
+        SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS
+      ),
+      defaultPermsEditUsers: this.settings.get(
+        SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS
+      ),
+      defaultPermsEditGroups: this.settings.get(
+        SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS
+      ),
+      documentEditingRemoveInboxTags: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
+      ),
+      documentEditingOverlayThumbnail: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
+      ),
+      searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
+      searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
+    }
+  }
+
+  onNavChange(navChangeEvent: NgbNavChangeEvent) {
+    const [foundNavIDkey] = Object.entries(SettingsNavIDs).find(
+      ([, navIDValue]) => navIDValue == navChangeEvent.nextId
+    )
+    if (foundNavIDkey)
+      // if its dirty we need to wait for confirmation
+      this.router
+        .navigate(['settings', foundNavIDkey.toLowerCase()])
+        .then((navigated) => {
+          if (!navigated && this.isDirty) {
+            this.activeNavID = navChangeEvent.activeId
+          } else if (navigated && this.isDirty) {
+            this.initialize()
+          }
+        })
+  }
+
+  initialize(resetSettings: boolean = true) {
+    this.unsubscribeNotifier.next(true)
+
+    const currentFormValue = this.settingsForm.value
+
+    let storeData = this.getCurrentSettings()
+
+    this.store = new BehaviorSubject(storeData)
+
+    this.storeSub = this.store.asObservable().subscribe((state) => {
+      this.settingsForm.patchValue(state, { emitEvent: false })
+    })
+
+    // Initialize dirtyCheck
+    this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
+
+    // Record dirty in case we need to 'undo' appearance settings if not saved on close
+    this.isDirty$
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((dirty) => {
+        this.isDirty = dirty
+      })
+
+    // "Live" visual changes prior to save
+    this.settingsForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.settings.updateAppearanceSettings(
+          this.settingsForm.get('darkModeUseSystem').value,
+          this.settingsForm.get('darkModeEnabled').value,
+          this.settingsForm.get('themeColor').value
+        )
+      })
+
+    if (!resetSettings && currentFormValue) {
+      // prevents loss of unsaved changes
+      this.settingsForm.patchValue(currentFormValue)
+    }
+
+    if (this.permissionsService.isAdmin()) {
+      this.systemStatusService.get().subscribe((status) => {
+        this.systemStatus = status
+      })
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didn't save
+    this.storeSub && this.storeSub.unsubscribe()
+  }
+
+  public saveSettings() {
+    this.savePending = true
+    const reloadRequired =
+      this.settingsForm.value.displayLanguage !=
+        this.store?.getValue()['displayLanguage'] || // displayLanguage is dirty
+      (this.settingsForm.value.updateCheckingEnabled !=
+        this.store?.getValue()['updateCheckingEnabled'] &&
+        this.settingsForm.value.updateCheckingEnabled) // update checking was turned on
+
+    this.settings.set(
+      SETTINGS_KEYS.BULK_EDIT_APPLY_ON_CLOSE,
+      this.settingsForm.value.bulkEditApplyOnClose
+    )
+    this.settings.set(
+      SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS,
+      this.settingsForm.value.bulkEditConfirmationDialogs
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
+      this.settingsForm.value.documentListItemPerPage
+    )
+    this.settings.set(
+      SETTINGS_KEYS.SLIM_SIDEBAR,
+      this.settingsForm.value.slimSidebarEnabled
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DARK_MODE_USE_SYSTEM,
+      this.settingsForm.value.darkModeUseSystem
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DARK_MODE_ENABLED,
+      (this.settingsForm.value.darkModeEnabled == true).toString()
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DARK_MODE_THUMB_INVERTED,
+      (this.settingsForm.value.darkModeInvertThumbs == true).toString()
+    )
+    this.settings.set(
+      SETTINGS_KEYS.THEME_COLOR,
+      this.settingsForm.value.themeColor
+    )
+    this.settings.set(
+      SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER,
+      this.settingsForm.value.useNativePdfViewer
+    )
+    this.settings.set(
+      SETTINGS_KEYS.PDF_VIEWER_ZOOM_SETTING,
+      this.settingsForm.value.pdfViewerDefaultZoom
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DATE_LOCALE,
+      this.settingsForm.value.dateLocale
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DATE_FORMAT,
+      this.settingsForm.value.dateFormat
+    )
+    this.settings.set(
+      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_NEW_DOCUMENT,
+      this.settingsForm.value.notificationsConsumerNewDocument
+    )
+    this.settings.set(
+      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUCCESS,
+      this.settingsForm.value.notificationsConsumerSuccess
+    )
+    this.settings.set(
+      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_FAILED,
+      this.settingsForm.value.notificationsConsumerFailed
+    )
+    this.settings.set(
+      SETTINGS_KEYS.NOTIFICATIONS_CONSUMER_SUPPRESS_ON_DASHBOARD,
+      this.settingsForm.value.notificationsConsumerSuppressOnDashboard
+    )
+    this.settings.set(
+      SETTINGS_KEYS.NOTES_ENABLED,
+      this.settingsForm.value.notesEnabled
+    )
+    this.settings.set(
+      SETTINGS_KEYS.UPDATE_CHECKING_ENABLED,
+      this.settingsForm.value.updateCheckingEnabled
+    )
+    this.settings.set(
+      SETTINGS_KEYS.SAVED_VIEWS_WARN_ON_UNSAVED_CHANGE,
+      this.settingsForm.value.savedViewsWarnOnUnsavedChange
+    )
+    this.settings.set(
+      SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT,
+      this.settingsForm.value.sidebarViewsShowCount
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DEFAULT_PERMS_OWNER,
+      this.settingsForm.value.defaultPermsOwner
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS,
+      this.settingsForm.value.defaultPermsViewUsers
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS,
+      this.settingsForm.value.defaultPermsViewGroups
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS,
+      this.settingsForm.value.defaultPermsEditUsers
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS,
+      this.settingsForm.value.defaultPermsEditGroups
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS,
+      this.settingsForm.value.documentEditingRemoveInboxTags
+    )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
+      this.settingsForm.value.documentEditingOverlayThumbnail
+    )
+    this.settings.set(
+      SETTINGS_KEYS.SEARCH_DB_ONLY,
+      this.settingsForm.value.searchDbOnly
+    )
+    this.settings.set(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE,
+      this.settingsForm.value.searchLink
+    )
+    this.settings.setLanguage(this.settingsForm.value.displayLanguage)
+    this.settings
+      .storeSettings()
+      .pipe(first())
+      .pipe(tap(() => (this.savePending = false)))
+      .subscribe({
+        next: () => {
+          this.store.next(this.settingsForm.value)
+          this.settings.updateAppearanceSettings()
+          this.settings.initializeDisplayFields()
+          let savedToast: Toast = {
+            content: $localize`Settings were saved successfully.`,
+            delay: 5000,
+          }
+          if (reloadRequired) {
+            savedToast.content = $localize`Settings were saved successfully. Reload is required to apply some changes.`
+            savedToast.actionName = $localize`Reload now`
+            savedToast.action = () => {
+              locationReload()
+            }
+          }
+
+          this.toastService.show(savedToast)
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`,
+            error
+          )
+        },
+      })
+  }
+
+  get displayLanguageOptions(): LanguageOption[] {
+    return [systemLanguage].concat(this.settings.getLanguageOptions())
+  }
+
+  get dateLocaleOptions(): LanguageOption[] {
+    return [systemDateFormat].concat(this.settings.getDateLocaleOptions())
+  }
+
+  get today() {
+    return new Date()
+  }
+
+  reset() {
+    this.settingsForm.patchValue(this.store.getValue())
+  }
+
+  clearThemeColor() {
+    this.settingsForm.get('themeColor').patchValue('')
+  }
+
+  showSystemStatus() {
+    const modal: NgbModalRef = this.modalService.open(
+      SystemStatusDialogComponent,
+      {
+        size: 'xl',
+      }
+    )
+    modal.componentInstance.status = this.systemStatus
+  }
+}

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

@@ -0,0 +1,180 @@
+<pngx-page-header
+  title="File Tasks"
+  i18n-title
+  info="File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process."
+  i18n-info
+  >
+  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
+    <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
+      <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    </button>
+    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+      <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
+    </button>
+    <div class="form-inline d-flex align-items-center">
+      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
+        <span class="input-group-text text-muted" i18n>Filter by</span>
+        @if (filterTargets.length > 1) {
+          <div ngbDropdown>
+            <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{filterTargetName}}</button>
+            <div class="dropdown-menu shadow" ngbDropdownMenu>
+              @for (t of filterTargets; track t.id) {
+                <button ngbDropdownItem [class.active]="filterTargetID === t.id" (click)="filterTargetID = t.id">{{t.name}}</button>
+              }
+            </div>
+          </div>
+        } @else {
+          <span class="input-group-text">{{filterTargetName}}</span>
+        }
+        @if (filterText?.length) {
+          <button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetFilter()">
+            <i-bs width="1em" height="1em" name="x"></i-bs>
+          </button>
+        }
+        <input #filterInput class="form-control form-control-sm" type="text"
+          (keyup)="filterInputKeyup($event)"
+          [(ngModel)]="filterText">
+      </div>
+    </div>
+    <div class="form-check form-switch mb-0 ms-2">
+      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
+      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+    </div>
+  </div>
+</pngx-page-header>
+
+@if (!tasksService.completedFileTasks && tasksService.loading) {
+  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+  <div class="visually-hidden" i18n>Loading...</div>
+}
+
+<ng-template let-tasks="tasks" #tasksTemplate>
+  <table class="table table-striped align-middle border shadow-sm">
+    <thead>
+      <tr>
+        <th scope="col">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" [(ngModel)]="togggleAll" (click)="toggleAll($event); $event.stopPropagation();">
+            <label class="form-check-label" for="all-tasks"></label>
+          </div>
+        </th>
+        <th scope="col" i18n>Name</th>
+        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+        @if (activeTab !== 'started' && activeTab !== 'queued') {
+          <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+        }
+        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+        <th scope="col" i18n>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task.id) {
+        <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
+          <td>
+            <div class="form-check">
+              <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
+              <label class="form-check-label" for="task{{task.id}}"></label>
+            </div>
+          </td>
+          <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
+          <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
+          @if (activeTab !== 'started' && activeTab !== 'queued') {
+            <td class="d-none d-lg-table-cell">
+              @if (task.result?.length > 50) {
+                <div class="result" (click)="expandTask(task); $event.stopPropagation();"
+                  [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+                  <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+                </div>
+              }
+              @if (task.result?.length <= 50) {
+                <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+              }
+              <ng-template #resultPopover>
+                <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
+                  &hellip;
+                }</pre>
+                @if (task.result?.length > 300) {
+                  <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                }
+              </ng-template>
+            </td>
+          }
+          <td class="d-lg-none">
+            <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+              <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+            </button>
+          </td>
+          <td scope="row">
+            <div class="btn-group" role="group">
+              <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+                <i-bs name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
+              </button>
+              <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                @if (task.related_document) {
+                  <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                    <i-bs name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
+                  </button>
+                }
+              </ng-container>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
+            <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+
+  <div class="pb-3 d-sm-flex justify-content-between align-items-center">
+    @if (tasks.length > 0) {
+      <div class="pb-2 pb-sm-0">
+        <ng-container i18n>{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</ng-container>
+        @if (selectedTasks.size > 0) {
+          <ng-container i18n>&nbsp;({{selectedTasks.size}} selected)</ng-container>
+        }
+      </div>
+    }
+    @if (tasks.length > pageSize) {
+      <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
+    }
+  </div>
+</ng-template>
+
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange()" (navChange)="beforeTabChange()">
+  <li ngbNavItem="failed">
+    <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
+      <span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="completed">
+    <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="started">
+    <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
+    </ng-template>
+  </li>
+  <li ngbNavItem="queued">
+    <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
+      <span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
+    }</a>
+    <ng-template ngbNavContent>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
+    </ng-template>
+  </li>
+</ul>
+<div [ngbNavOutlet]="nav"></div>

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

@@ -0,0 +1,39 @@
+::ng-deep .popover {
+    max-width: 350px;
+
+    pre {
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+}
+
+pre {
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.result {
+    cursor: pointer;
+}
+
+.btn .spinner-border-sm {
+    width: 0.8rem;
+    height: 0.8rem;
+}
+
+@media (max-width: 575.98px) {
+    .name-col {
+        max-width: 150px;
+    }
+}
+
+.input-group .dropdown .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.z-10 {
+    z-index: 10;
+}

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

@@ -0,0 +1,392 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { Router } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import {
+  NgbModal,
+  NgbModalRef,
+  NgbModule,
+  NgbNavItem,
+} from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { throwError } from 'rxjs'
+import { routes } from 'src/app/app-routing.module'
+import {
+  PaperlessTask,
+  PaperlessTaskName,
+  PaperlessTaskStatus,
+  PaperlessTaskType,
+} from 'src/app/data/paperless-task'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { TasksComponent, TaskTab } from './tasks.component'
+
+const tasks: PaperlessTask[] = [
+  {
+    id: 467,
+    task_id: '11ca1a5b-9f81-442c-b2c8-7e4ae53657f1',
+    task_file_name: 'test.pdf',
+    date_created: new Date('2023-03-01T10:26:03.093116Z'),
+    date_done: new Date('2023-03-01T10:26:07.223048Z'),
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Failed,
+    result: 'test.pd: Not consuming test.pdf: It is a duplicate of test (#100)',
+    acknowledged: false,
+    related_document: null,
+  },
+  {
+    id: 466,
+    task_id: '10ca1a5b-3c08-442c-b2c8-7e4ae53657f1',
+    task_file_name: '191092.pdf',
+    date_created: new Date('2023-03-01T09:26:03.093116Z'),
+    date_done: new Date('2023-03-01T09:26:07.223048Z'),
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Failed,
+    result:
+      '191092.pd: Not consuming 191092.pdf: It is a duplicate of 191092 (#311)',
+    acknowledged: false,
+    related_document: null,
+  },
+  {
+    id: 465,
+    task_id: '3612d477-bb04-44e3-985b-ac580dd496d8',
+    task_file_name: 'Scan Jun 6, 2023 at 3.19 PM.pdf',
+    date_created: new Date('2023-06-06T15:22:05.722323-07:00'),
+    date_done: new Date('2023-06-06T15:22:14.564305-07:00'),
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Pending,
+    result: null,
+    acknowledged: false,
+    related_document: null,
+  },
+  {
+    id: 464,
+    task_id: '2eac4716-2aa6-4dcd-9953-264e11656d7e',
+    task_file_name: 'paperless-mail-l4dkg8ir',
+    date_created: new Date('2023-06-04T11:24:32.898089-07:00'),
+    date_done: new Date('2023-06-04T11:24:44.678605-07:00'),
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Complete,
+    result: 'Success. New document id 422 created',
+    acknowledged: false,
+    related_document: 422,
+  },
+  {
+    id: 463,
+    task_id: '28125528-1575-4d6b-99e6-168906e8fa5c',
+    task_file_name: 'onlinePaymentSummary.pdf',
+    date_created: new Date('2023-06-01T13:49:51.631305-07:00'),
+    date_done: new Date('2023-06-01T13:49:54.190220-07:00'),
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Complete,
+    result: 'Success. New document id 421 created',
+    acknowledged: false,
+    related_document: 421,
+  },
+  {
+    id: 462,
+    task_id: 'a5b9ca47-0c8e-490f-a04c-6db5d5fc09e5',
+    task_file_name: 'paperless-mail-_rrpmqk6',
+    date_created: new Date('2023-06-07T02:54:35.694916Z'),
+    date_done: null,
+    type: PaperlessTaskType.Auto,
+    task_name: PaperlessTaskName.ConsumeFile,
+    status: PaperlessTaskStatus.Started,
+    result: null,
+    acknowledged: false,
+    related_document: null,
+  },
+]
+
+describe('TasksComponent', () => {
+  let component: TasksComponent
+  let fixture: ComponentFixture<TasksComponent>
+  let tasksService: TasksService
+  let modalService: NgbModal
+  let router: Router
+  let httpTestingController: HttpTestingController
+  let reloadSpy
+  let toastService: ToastService
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        TasksComponent,
+        PageHeaderComponent,
+        IfPermissionsDirective,
+        CustomDatePipe,
+        ConfirmDialogComponent,
+      ],
+      providers: [
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: () => true,
+          },
+        },
+        CustomDatePipe,
+        DatePipe,
+        PermissionsGuard,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    tasksService = TestBed.inject(TasksService)
+    reloadSpy = jest.spyOn(tasksService, 'reload')
+    httpTestingController = TestBed.inject(HttpTestingController)
+    modalService = TestBed.inject(NgbModal)
+    router = TestBed.inject(Router)
+    toastService = TestBed.inject(ToastService)
+    fixture = TestBed.createComponent(TasksComponent)
+    component = fixture.componentInstance
+    jest.useFakeTimers()
+    fixture.detectChanges()
+    httpTestingController
+      .expectOne(
+        `${environment.apiBaseUrl}tasks/?task_name=consume_file&acknowledged=false`
+      )
+      .flush(tasks)
+  })
+
+  it('should display file tasks in 4 tabs by status', () => {
+    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavItem))
+
+    let currentTasksLength = tasks.filter(
+      (t) => t.status === PaperlessTaskStatus.Failed
+    ).length
+    component.activeTab = TaskTab.Failed
+    fixture.detectChanges()
+    expect(tabButtons[0].nativeElement.textContent).toEqual(
+      `Failed${currentTasksLength}`
+    )
+    expect(
+      fixture.debugElement.queryAll(By.css('table input[type="checkbox"]'))
+    ).toHaveLength(currentTasksLength + 1)
+
+    currentTasksLength = tasks.filter(
+      (t) => t.status === PaperlessTaskStatus.Complete
+    ).length
+    component.activeTab = TaskTab.Completed
+    fixture.detectChanges()
+    expect(tabButtons[1].nativeElement.textContent).toEqual(
+      `Complete${currentTasksLength}`
+    )
+
+    currentTasksLength = tasks.filter(
+      (t) => t.status === PaperlessTaskStatus.Started
+    ).length
+    component.activeTab = TaskTab.Started
+    fixture.detectChanges()
+    expect(tabButtons[2].nativeElement.textContent).toEqual(
+      `Started${currentTasksLength}`
+    )
+
+    currentTasksLength = tasks.filter(
+      (t) => t.status === PaperlessTaskStatus.Pending
+    ).length
+    component.activeTab = TaskTab.Queued
+    fixture.detectChanges()
+    expect(tabButtons[3].nativeElement.textContent).toEqual(
+      `Queued${currentTasksLength}`
+    )
+  })
+
+  it('should to go page 1 between tab switch', () => {
+    component.page = 10
+    component.duringTabChange()
+    expect(component.page).toEqual(1)
+  })
+
+  it('should support expanding / collapsing one task at a time', () => {
+    component.expandTask(tasks[0])
+    expect(component.expandedTask).toEqual(tasks[0].id)
+    component.expandTask(tasks[1])
+    expect(component.expandedTask).toEqual(tasks[1].id)
+    component.expandTask(tasks[1])
+    expect(component.expandedTask).toBeUndefined()
+  })
+
+  it('should support dismiss single task', () => {
+    const dismissSpy = jest.spyOn(tasksService, 'dismissTasks')
+    component.dismissTask(tasks[0])
+    expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id]))
+  })
+
+  it('should support dismiss specific checked tasks', () => {
+    component.toggleSelected(tasks[0])
+    component.toggleSelected(tasks[1])
+    component.toggleSelected(tasks[3])
+    component.toggleSelected(tasks[3]) // uncheck, for coverage
+    const selected = new Set([tasks[0].id, tasks[1].id])
+    expect(component.selectedTasks).toEqual(selected)
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const dismissSpy = jest.spyOn(tasksService, 'dismissTasks')
+    fixture.detectChanges()
+    component.dismissTasks()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.confirmClicked.emit()
+    expect(dismissSpy).toHaveBeenCalledWith(selected)
+  })
+
+  it('should show an error and re-enable modal buttons when dismissing multiple tasks fails', () => {
+    component.selectedTasks = new Set([tasks[0].id, tasks[1].id])
+    const error = new Error('dismiss failed')
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    const dismissSpy = jest
+      .spyOn(tasksService, 'dismissTasks')
+      .mockReturnValue(throwError(() => error))
+
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+
+    component.dismissTasks()
+    expect(modal).not.toBeUndefined()
+
+    modal.componentInstance.confirmClicked.emit()
+
+    expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id, tasks[1].id]))
+    expect(toastSpy).toHaveBeenCalledWith('Error dismissing tasks', error)
+    expect(modal.componentInstance.buttonsEnabled).toBe(true)
+    expect(component.selectedTasks.size).toBe(0)
+  })
+
+  it('should show an error when dismissing a single task fails', () => {
+    const error = new Error('dismiss failed')
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    const dismissSpy = jest
+      .spyOn(tasksService, 'dismissTasks')
+      .mockReturnValue(throwError(() => error))
+
+    component.dismissTask(tasks[0])
+
+    expect(dismissSpy).toHaveBeenCalledWith(new Set([tasks[0].id]))
+    expect(toastSpy).toHaveBeenCalledWith('Error dismissing task', error)
+    expect(component.selectedTasks.size).toBe(0)
+  })
+
+  it('should support dismiss all tasks', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const dismissSpy = jest.spyOn(tasksService, 'dismissTasks')
+    component.dismissTasks()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.confirmClicked.emit()
+    expect(dismissSpy).toHaveBeenCalledWith(new Set(tasks.map((t) => t.id)))
+  })
+
+  it('should support toggle all tasks', () => {
+    const toggleCheck = fixture.debugElement.query(
+      By.css('table input[type=checkbox]')
+    )
+    toggleCheck.nativeElement.dispatchEvent(new MouseEvent('click'))
+    fixture.detectChanges()
+    expect(component.selectedTasks).toEqual(
+      new Set(
+        tasks
+          .filter((t) => t.status === PaperlessTaskStatus.Failed)
+          .map((t) => t.id)
+      )
+    )
+    toggleCheck.nativeElement.dispatchEvent(new MouseEvent('click'))
+    fixture.detectChanges()
+    expect(component.selectedTasks).toEqual(new Set())
+  })
+
+  it('should support dismiss and open a document', () => {
+    const routerSpy = jest.spyOn(router, 'navigate')
+    component.dismissAndGo(tasks[3])
+    expect(routerSpy).toHaveBeenCalledWith([
+      'documents',
+      tasks[3].related_document,
+    ])
+  })
+
+  it('should auto refresh, allow toggle', () => {
+    expect(reloadSpy).toHaveBeenCalledTimes(1)
+    jest.advanceTimersByTime(5000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+    component.autoRefreshEnabled = false
+    jest.advanceTimersByTime(6000)
+    expect(reloadSpy).toHaveBeenCalledTimes(2)
+  })
+
+  it('should filter tasks by file name', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('191092')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(2) // 1 task x 2 lines
+  })
+
+  it('should filter tasks by result', () => {
+    component.activeTab = TaskTab.Failed
+    fixture.detectChanges()
+    component.filterTargetID = 1
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = 'duplicate'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('duplicate')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(4) // 2 tasks x 2 lines
+  })
+
+  it('should support keyboard events for filtering', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Enter' })
+    )
+    expect(component.filterText).toEqual('191092') // no debounce needed
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Escape' })
+    )
+    expect(component.filterText).toEqual('')
+  })
+
+  it('should reset filter and target on tab switch', () => {
+    component.filterText = '191092'
+    component.filterTargetID = 1
+    component.activeTab = TaskTab.Completed
+    component.beforeTabChange()
+    expect(component.filterText).toEqual('')
+    expect(component.filterTargetID).toEqual(0)
+  })
+})

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

@@ -0,0 +1,267 @@
+import { NgTemplateOutlet, SlicePipe } from '@angular/common'
+import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPaginationModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  first,
+  Subject,
+  takeUntil,
+  timer,
+} from 'rxjs'
+import { PaperlessTask } from 'src/app/data/paperless-task'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+export enum TaskTab {
+  Queued = 'queued',
+  Started = 'started',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+enum TaskFilterTargetID {
+  Name,
+  Result,
+}
+
+const FILTER_TARGETS = [
+  { id: TaskFilterTargetID.Name, name: $localize`Name` },
+  { id: TaskFilterTargetID.Result, name: $localize`Result` },
+]
+
+@Component({
+  selector: 'pngx-tasks',
+  templateUrl: './tasks.component.html',
+  styleUrls: ['./tasks.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    CustomDatePipe,
+    SlicePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    NgbNavModule,
+    NgbPaginationModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class TasksComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy
+{
+  tasksService = inject(TasksService)
+  private modalService = inject(NgbModal)
+  private readonly router = inject(Router)
+  private readonly toastService = inject(ToastService)
+
+  public activeTab: TaskTab
+  public selectedTasks: Set<number> = new Set()
+  public togggleAll: boolean = false
+  public expandedTask: number
+
+  public pageSize: number = 25
+  public page: number = 1
+
+  public autoRefreshEnabled: boolean = true
+
+  private _filterText: string = ''
+  get filterText() {
+    return this._filterText
+  }
+  set filterText(value: string) {
+    this.filterDebounce.next(value)
+  }
+
+  public filterTargetID: TaskFilterTargetID = TaskFilterTargetID.Name
+  public get filterTargetName(): string {
+    return this.filterTargets.find((t) => t.id == this.filterTargetID).name
+  }
+  private filterDebounce: Subject<string> = new Subject<string>()
+
+  public get filterTargets(): Array<{ id: number; name: string }> {
+    return [TaskTab.Failed, TaskTab.Completed].includes(this.activeTab)
+      ? FILTER_TARGETS
+      : FILTER_TARGETS.slice(0, 1)
+  }
+
+  get dismissButtonText(): string {
+    return this.selectedTasks.size > 0
+      ? $localize`Dismiss selected`
+      : $localize`Dismiss all`
+  }
+
+  ngOnInit() {
+    this.tasksService.reload()
+    timer(5000, 5000)
+      .pipe(
+        filter(() => this.autoRefreshEnabled),
+        takeUntil(this.unsubscribeNotifier)
+      )
+      .subscribe(() => {
+        this.tasksService.reload()
+      })
+
+    this.filterDebounce
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        debounceTime(100),
+        distinctUntilChanged(),
+        filter((query) => !query.length || query.length > 2)
+      )
+      .subscribe((query) => (this._filterText = query))
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy()
+    this.tasksService.cancelPending()
+  }
+
+  dismissTask(task: PaperlessTask) {
+    this.dismissTasks(task)
+  }
+
+  dismissTasks(task: PaperlessTask = undefined) {
+    let tasks = task ? new Set([task.id]) : new Set(this.selectedTasks.values())
+    if (!task && tasks.size == 0)
+      tasks = new Set(this.tasksService.allFileTasks.map((t) => t.id))
+    if (tasks.size > 1) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
+      })
+      modal.componentInstance.title = $localize`Confirm Dismiss All`
+      modal.componentInstance.messageBold = $localize`Dismiss all ${tasks.size} tasks?`
+      modal.componentInstance.btnClass = 'btn-warning'
+      modal.componentInstance.btnCaption = $localize`Dismiss`
+      modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        modal.close()
+        this.tasksService.dismissTasks(tasks).subscribe({
+          error: (e) => {
+            this.toastService.showError($localize`Error dismissing tasks`, e)
+            modal.componentInstance.buttonsEnabled = true
+          },
+        })
+        this.clearSelection()
+      })
+    } else {
+      this.tasksService.dismissTasks(tasks).subscribe({
+        error: (e) =>
+          this.toastService.showError($localize`Error dismissing task`, e),
+      })
+      this.clearSelection()
+    }
+  }
+
+  dismissAndGo(task: PaperlessTask) {
+    this.dismissTask(task)
+    this.router.navigate(['documents', task.related_document])
+  }
+
+  expandTask(task: PaperlessTask) {
+    this.expandedTask = this.expandedTask == task.id ? undefined : task.id
+  }
+
+  toggleSelected(task: PaperlessTask) {
+    this.selectedTasks.has(task.id)
+      ? this.selectedTasks.delete(task.id)
+      : this.selectedTasks.add(task.id)
+  }
+
+  get currentTasks(): PaperlessTask[] {
+    let tasks: PaperlessTask[] = []
+    switch (this.activeTab) {
+      case TaskTab.Queued:
+        tasks = this.tasksService.queuedFileTasks
+        break
+      case TaskTab.Started:
+        tasks = this.tasksService.startedFileTasks
+        break
+      case TaskTab.Completed:
+        tasks = this.tasksService.completedFileTasks
+        break
+      case TaskTab.Failed:
+        tasks = this.tasksService.failedFileTasks
+        break
+    }
+    if (this._filterText.length) {
+      tasks = tasks.filter((t) => {
+        if (this.filterTargetID == TaskFilterTargetID.Name) {
+          return t.task_file_name
+            .toLowerCase()
+            .includes(this._filterText.toLowerCase())
+        } else if (this.filterTargetID == TaskFilterTargetID.Result) {
+          return t.result.toLowerCase().includes(this._filterText.toLowerCase())
+        }
+      })
+    }
+    return tasks
+  }
+
+  toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedTasks = new Set(this.currentTasks.map((t) => t.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  clearSelection() {
+    this.togggleAll = false
+    this.selectedTasks.clear()
+  }
+
+  duringTabChange() {
+    this.page = 1
+  }
+
+  beforeTabChange() {
+    this.resetFilter()
+    this.filterTargetID = TaskFilterTargetID.Name
+  }
+
+  get activeTabLocalized(): string {
+    switch (this.activeTab) {
+      case TaskTab.Queued:
+        return $localize`queued`
+      case TaskTab.Started:
+        return $localize`started`
+      case TaskTab.Completed:
+        return $localize`completed`
+      case TaskTab.Failed:
+        return $localize`failed`
+    }
+  }
+
+  public resetFilter() {
+    this._filterText = ''
+  }
+
+  filterInputKeyup(event: KeyboardEvent) {
+    if (event.key == 'Enter') {
+      this._filterText = (event.target as HTMLInputElement).value
+    } else if (event.key === 'Escape') {
+      this.resetFilter()
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+<pngx-page-header
+    title="Trash"
+    i18n-title
+    info="Manage trashed documents that are pending deletion."
+    i18n-info
+    infoLink="usage/#document-trash">
+    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
+        <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+        <i-bs name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore selected</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete selected</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
+        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Empty trash</ng-container>
+    </button>
+</pngx-page-header>
+
+<div class="row mb-3">
+    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+</div>
+
+<div class="card border table-responsive mb-3">
+    <table class="table table-striped align-middle shadow-sm mb-0">
+        <thead>
+            <tr>
+            <th scope="col">
+                <div class="form-check m-0 ms-2 me-n2">
+                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="allToggled" [disabled]="documentsInTrash.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-objects"></label>
+                </div>
+            </th>
+            <th scope="col" class="fw-normal" i18n>Name</th>
+            <th scope="col" class="fw-normal d-none d-sm-table-cell" i18n>Remaining</th>
+            <th scope="col" class="fw-normal" i18n>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            @if (loading) {
+                <tr>
+                    <td colspan="5">
+                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                    <ng-container i18n>Loading...</ng-container>
+                    </td>
+                </tr>
+            }
+            @for (document of documentsInTrash; track document.id) {
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
+                    <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 }}
+                      <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" class="d-none d-sm-table-cell" i18n>{{ getDaysRemaining(document) }} days</td>
+                    <td scope="row">
+                    <div class="btn-group d-block d-sm-none">
+                        <div ngbDropdown container="body" class="d-inline-block">
+                        <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
+                            <i-bs name="three-dots-vertical"></i-bs>
+                        </button>
+                        <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
+                            <button (click)="restore(document)" ngbDropdownItem i18n>Restore</button>
+                            <button (click)="delete(document)" ngbDropdownItem i18n>Delete</button>
+                        </div>
+                        </div>
+                    </div>
+                    <div class="btn-group d-none d-sm-block">
+                        <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
+                            <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore</ng-container>
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
+                            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                        </button>
+                    </div>
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>
+
+@if (!loading) {
+    <div class="d-flex mb-2">
+        <div>
+            <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>
+            @if (selectedDocuments.size > 0) {
+                &nbsp;({{selectedDocuments.size}} selected)
+            }
+        </div>
+        @if (documentsInTrash.length > 20) {
+            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+        }
+    </div>
+}

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

@@ -0,0 +1,4 @@
+// hide caret on mobile dropdown
+.d-block.d-sm-none .dropdown-toggle::after {
+  display: none;
+}

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

@@ -0,0 +1,219 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { Router } from '@angular/router'
+import {
+  NgbModal,
+  NgbPaginationModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { TrashComponent } from './trash.component'
+
+const documentsInTrash = [
+  {
+    id: 1,
+    name: 'test1',
+    created: new Date('2023-03-01T10:26:03.093116Z'),
+    deleted_at: new Date('2023-03-01T10:26:03.093116Z'),
+  },
+  {
+    id: 2,
+    name: 'test2',
+    created: new Date('2023-03-01T10:26:03.093116Z'),
+    deleted_at: new Date('2023-03-01T10:26:03.093116Z'),
+  },
+]
+
+describe('TrashComponent', () => {
+  let component: TrashComponent
+  let fixture: ComponentFixture<TrashComponent>
+  let trashService: TrashService
+  let modalService: NgbModal
+  let toastService: ToastService
+  let router: Router
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        HttpClientTestingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbPopoverModule,
+        NgbPaginationModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        TrashComponent,
+        PageHeaderComponent,
+        ConfirmDialogComponent,
+        SafeHtmlPipe,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(TrashComponent)
+    trashService = TestBed.inject(TrashService)
+    modalService = TestBed.inject(NgbModal)
+    toastService = TestBed.inject(ToastService)
+    router = TestBed.inject(Router)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should call correct service method on reload', () => {
+    jest.useFakeTimers()
+    const trashSpy = jest.spyOn(trashService, 'getTrash')
+    trashSpy.mockReturnValue(
+      of({
+        count: 2,
+        all: documentsInTrash.map((d) => d.id),
+        results: documentsInTrash,
+      })
+    )
+    component.reload()
+    jest.advanceTimersByTime(100)
+    expect(trashSpy).toHaveBeenCalled()
+    expect(component.documentsInTrash).toEqual(documentsInTrash)
+  })
+
+  it('should support delete document, show error if needed', () => {
+    const trashSpy = jest.spyOn(trashService, 'emptyTrash')
+    let modal
+    modalService.activeInstances.subscribe((instances) => {
+      modal = instances[0]
+    })
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+
+    // fail first
+    trashSpy.mockReturnValue(throwError(() => 'Error'))
+    component.delete(documentsInTrash[0])
+    modal.componentInstance.confirmClicked.next()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    trashSpy.mockReturnValue(of('OK'))
+    component.delete(documentsInTrash[0])
+    expect(modal).toBeDefined()
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalled()
+  })
+
+  it('should support empty trash, show error if needed', () => {
+    const trashSpy = jest.spyOn(trashService, 'emptyTrash')
+    let modal
+    modalService.activeInstances.subscribe((instances) => {
+      modal = instances[instances.length - 1]
+    })
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+
+    // fail first
+    trashSpy.mockReturnValue(throwError(() => 'Error'))
+    component.emptyTrash()
+    modal.componentInstance.confirmClicked.next()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    trashSpy.mockReturnValue(of('OK'))
+    component.emptyTrash()
+    expect(modal).toBeDefined()
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalled()
+    modal.close()
+    component.emptyTrash(new Set([1, 2]))
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalledWith([1, 2])
+  })
+
+  it('should support restore document, show error if needed', () => {
+    const restoreSpy = jest.spyOn(trashService, 'restoreDocuments')
+    const reloadSpy = jest.spyOn(component, 'reload')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+
+    // fail first
+    restoreSpy.mockReturnValue(throwError(() => 'Error'))
+    component.restore(documentsInTrash[0])
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    restoreSpy.mockReturnValue(of('OK'))
+    component.restore(documentsInTrash[0])
+    expect(restoreSpy).toHaveBeenCalledWith([documentsInTrash[0].id])
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should support restore all documents, show error if needed', () => {
+    const restoreSpy = jest.spyOn(trashService, 'restoreDocuments')
+    const reloadSpy = jest.spyOn(component, 'reload')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+
+    // fail first
+    restoreSpy.mockReturnValue(throwError(() => 'Error'))
+    component.restoreAll()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(reloadSpy).not.toHaveBeenCalled()
+
+    restoreSpy.mockReturnValue(of('OK'))
+    component.restoreAll()
+    expect(restoreSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+    component.restoreAll(new Set([1, 2]))
+    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)
+    const toggleAllSpy = jest.spyOn(component, 'toggleAll')
+    const checkButton = fixture.debugElement.queryAll(
+      By.css('input.form-check-input')
+    )[0]
+    checkButton.nativeElement.dispatchEvent(new Event('click'))
+    checkButton.nativeElement.checked = true
+    checkButton.nativeElement.dispatchEvent(new Event('click'))
+    expect(toggleAllSpy).toHaveBeenCalled()
+    expect(component.selectedDocuments.size).toEqual(documentsInTrash.length)
+  })
+
+  it('should support toggle item', () => {
+    component.selectedDocuments = new Set([1])
+    component.toggleSelected(documentsInTrash[0])
+    expect(component.selectedDocuments.size).toEqual(0)
+    component.toggleSelected(documentsInTrash[0])
+    expect(component.selectedDocuments.size).toEqual(1)
+  })
+
+  it('should support clear selection', () => {
+    component.selectedDocuments = new Set([1])
+    component.clearSelection()
+    expect(component.selectedDocuments.size).toEqual(0)
+  })
+
+  it('should correctly display days remaining', () => {
+    expect(component.getDaysRemaining(documentsInTrash[0])).toBeLessThan(0)
+    const tenDaysAgo = new Date()
+    tenDaysAgo.setDate(tenDaysAgo.getDate() - 10)
+    expect(
+      component.getDaysRemaining({ deleted_at: tenDaysAgo })
+    ).toBeGreaterThan(0) // 10 days ago but depends on month
+  })
+})

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

@@ -0,0 +1,205 @@
+import { Component, OnDestroy, inject } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import {
+  NgbDropdownModule,
+  NgbModal,
+  NgbPaginationModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { delay, takeUntil, tap } from 'rxjs'
+import { Document } from 'src/app/data/document'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-trash',
+  templateUrl: './trash.component.html',
+  styleUrl: './trash.component.scss',
+  imports: [
+    PageHeaderComponent,
+    PreviewPopupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbDropdownModule,
+    NgbPaginationModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class TrashComponent
+  extends LoadingComponentWithPermissions
+  implements OnDestroy
+{
+  private trashService = inject(TrashService)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  private settingsService = inject(SettingsService)
+  private router = inject(Router)
+
+  public documentsInTrash: Document[] = []
+  public selectedDocuments: Set<number> = new Set()
+  public allToggled: boolean = false
+  public page: number = 1
+  public totalDocuments: number
+
+  constructor() {
+    super()
+    this.reload()
+  }
+
+  reload() {
+    this.loading = true
+    this.trashService
+      .getTrash(this.page)
+      .pipe(
+        tap((r) => {
+          this.documentsInTrash = r.results
+          this.totalDocuments = r.count
+          this.selectedDocuments.clear()
+          this.loading = false
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.show = true
+      })
+  }
+
+  delete(document: Document) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this document.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Delete`
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.trashService.emptyTrash([document.id]).subscribe({
+          next: () => {
+            this.toastService.showInfo(
+              $localize`Document "${document.title}" deleted`
+            )
+            modal.close()
+            this.reload()
+          },
+          error: (err) => {
+            this.toastService.showError(
+              $localize`Error deleting document "${document.title}"`,
+              err
+            )
+            modal.close()
+          },
+        })
+      })
+  }
+
+  emptyTrash(documents?: Set<number>) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = documents
+      ? $localize`This operation will permanently delete the selected documents.`
+      : $localize`This operation will permanently delete all documents in the trash.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Delete`
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.trashService
+          .emptyTrash(documents ? Array.from(documents) : null)
+          .subscribe({
+            next: () => {
+              this.toastService.showInfo($localize`Document(s) deleted`)
+              this.allToggled = false
+              modal.close()
+              this.reload()
+            },
+            error: (err) => {
+              this.toastService.showError(
+                $localize`Error deleting document(s)`,
+                err
+              )
+              modal.close()
+            },
+          })
+      })
+  }
+
+  restore(document: Document) {
+    this.trashService.restoreDocuments([document.id]).subscribe({
+      next: () => {
+        this.toastService.show({
+          content: $localize`Document "${document.title}" restored`,
+          delay: 5000,
+          actionName: $localize`Open document`,
+          action: () => {
+            this.router.navigate(['documents', document.id])
+          },
+        })
+        this.reload()
+      },
+      error: (err) => {
+        this.toastService.showError(
+          $localize`Error restoring document "${document.title}"`,
+          err
+        )
+      },
+    })
+  }
+
+  restoreAll(documents: Set<number> = null) {
+    this.trashService
+      .restoreDocuments(documents ? Array.from(documents) : null)
+      .subscribe({
+        next: () => {
+          this.toastService.showInfo($localize`Document(s) restored`)
+          this.allToggled = false
+          this.reload()
+        },
+        error: (err) => {
+          this.toastService.showError(
+            $localize`Error restoring document(s)`,
+            err
+          )
+        },
+      })
+  }
+
+  toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  toggleSelected(object: Document) {
+    this.selectedDocuments.has(object.id)
+      ? this.selectedDocuments.delete(object.id)
+      : this.selectedDocuments.add(object.id)
+  }
+
+  clearSelection() {
+    this.allToggled = false
+    this.selectedDocuments.clear()
+  }
+
+  getDaysRemaining(document: Document): number {
+    const delay = this.settingsService.get(SETTINGS_KEYS.EMPTY_TRASH_DELAY)
+    const diff = new Date().getTime() - new Date(document.deleted_at).getTime()
+    const days = Math.ceil(diff / (1000 * 3600 * 24))
+    return delay - days
+  }
+}

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

@@ -0,0 +1,94 @@
+<pngx-page-header
+  title="Users & Groups"
+  i18n-title
+  info="Create, delete and edit users and groups."
+  i18n-info
+  infoLink="usage/#users-and-groups"
+  >
+</pngx-page-header>
+
+@if (users) {
+  <h4 class="d-flex">
+    <ng-container i18n>Users</ng-container>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
+      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add User</ng-container>
+    </button>
+  </h4>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <div class="row">
+        <div class="col" i18n>Username</div>
+        <div class="col" i18n>Name</div>
+        <div class="col" i18n>Groups</div>
+        <div class="col" i18n>Actions</div>
+      </div>
+    </li>
+    @for (user of users; track user) {
+      <li class="list-group-item">
+        <div class="row">
+          <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
+          <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
+          <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
+          <div class="col">
+            <div class="btn-group">
+              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
+                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+              </button>
+              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
+                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+    }
+  </ul>
+}
+
+@if (groups) {
+  <h4 class="mt-4 d-flex">
+    <ng-container i18n>Groups</ng-container>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
+      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
+    </button>
+  </h4>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <div class="row">
+        <div class="col" i18n>Name</div>
+        <div class="col"></div>
+        <div class="col"></div>
+        <div class="col" i18n>Actions</div>
+      </div>
+    </li>
+    @for (group of groups; track group) {
+      <li class="list-group-item">
+        <div class="row">
+          <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
+          <div class="col"></div>
+          <div class="col"></div>
+          <div class="col">
+            <div class="btn-group">
+              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
+                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+              </button>
+              <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
+                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+              </button>
+            </div>
+          </div>
+        </div>
+      </li>
+    }
+    @if (groups.length === 0) {
+      <li class="list-group-item" i18n>No groups defined</li>
+    }
+  </ul>
+}
+
+@if (!users || !groups) {
+  <div>
+    <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+    <div class="visually-hidden" i18n>Loading...</div>
+  </div>
+}

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

@@ -0,0 +1,227 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { GroupService } from 'src/app/services/rest/group.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import * as navUtils from 'src/app/utils/navigation'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { UsersAndGroupsComponent } from './users-groups.component'
+
+const users = [
+  { id: 1, username: 'user1', is_superuser: false },
+  { id: 2, username: 'user2', is_superuser: false },
+]
+const groups = [
+  { id: 1, name: 'group1' },
+  { id: 2, name: 'group2' },
+]
+
+describe('UsersAndGroupsComponent', () => {
+  let component: UsersAndGroupsComponent
+  let fixture: ComponentFixture<UsersAndGroupsComponent>
+  let settingsService: SettingsService
+  let modalService: NgbModal
+  let toastService: ToastService
+  let userService: UserService
+  let permissionsService: PermissionsService
+  let groupService: GroupService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+      providers: [
+        CustomDatePipe,
+        DatePipe,
+        PermissionsGuard,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(UsersAndGroupsComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = users[0]
+    userService = TestBed.inject(UserService)
+    modalService = TestBed.inject(NgbModal)
+    toastService = TestBed.inject(ToastService)
+    permissionsService = TestBed.inject(PermissionsService)
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    jest
+      .spyOn(permissionsService, 'currentUserOwnsObject')
+      .mockReturnValue(true)
+    groupService = TestBed.inject(GroupService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  function completeSetup(excludeService = null) {
+    if (excludeService !== userService) {
+      jest.spyOn(userService, 'listAll').mockReturnValue(
+        of({
+          all: users.map((a) => a.id),
+          count: users.length,
+          results: (users as User[]).concat([]),
+        })
+      )
+    }
+    if (excludeService !== groupService) {
+      jest.spyOn(groupService, 'listAll').mockReturnValue(
+        of({
+          all: groups.map((r) => r.id),
+          count: groups.length,
+          results: (groups as Group[]).concat([]),
+        })
+      )
+    }
+
+    fixture = TestBed.createComponent(UsersAndGroupsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  }
+
+  it('should support edit / create user, show error if needed', () => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.editUser(users[0])
+    const editDialog = modal.componentInstance as UserEditDialogComponent
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    editDialog.failed.emit()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    settingsService.currentUser = users[1] // simulate logged in as different user
+    editDialog.succeeded.emit(users[0])
+    expect(toastInfoSpy).toHaveBeenCalledWith(
+      `Saved user "${users[0].username}".`
+    )
+    component.editUser()
+  })
+
+  it('should support delete user, show error if needed', () => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.deleteUser(users[0])
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteSpy = jest.spyOn(userService, 'delete')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const listAllSpy = jest.spyOn(userService, 'listAll')
+    deleteSpy.mockReturnValueOnce(
+      throwError(() => new Error('error deleting user'))
+    )
+    deleteDialog.confirm()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    deleteSpy.mockReturnValueOnce(of(true))
+    deleteDialog.confirm()
+    expect(listAllSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user "user1"')
+  })
+
+  it('should logout current user if password changed, after delay', fakeAsync(() => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.editUser(users[0])
+    const navSpy = jest
+      .spyOn(navUtils, 'setLocationHref')
+      .mockImplementation(() => {})
+    const editDialog = modal.componentInstance as UserEditDialogComponent
+    editDialog.passwordIsSet = true
+    settingsService.currentUser = users[0] // simulate logged in as same user
+    editDialog.succeeded.emit(users[0])
+    fixture.detectChanges()
+    tick(2600)
+    expect(navSpy).toHaveBeenCalledWith(
+      `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
+    )
+  }))
+
+  it('should support edit / create group, show error if needed', () => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.editGroup(groups[0])
+    const editDialog = modal.componentInstance as GroupEditDialogComponent
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    editDialog.failed.emit()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    editDialog.succeeded.emit(groups[0])
+    expect(toastInfoSpy).toHaveBeenCalledWith(
+      `Saved group "${groups[0].name}".`
+    )
+    component.editGroup()
+  })
+
+  it('should support delete group, show error if needed', () => {
+    completeSetup()
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
+    component.deleteGroup(groups[0])
+    const deleteDialog = modal.componentInstance as ConfirmDialogComponent
+    const deleteSpy = jest.spyOn(groupService, 'delete')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const listAllSpy = jest.spyOn(groupService, 'listAll')
+    deleteSpy.mockReturnValueOnce(
+      throwError(() => new Error('error deleting group'))
+    )
+    deleteDialog.confirm()
+    expect(toastErrorSpy).toHaveBeenCalled()
+    deleteSpy.mockReturnValueOnce(of(true))
+    deleteDialog.confirm()
+    expect(listAllSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).toHaveBeenCalledWith('Deleted group "group1"')
+  })
+
+  it('should get group name', () => {
+    completeSetup()
+    expect(component.getGroupName(1)).toEqual(groups[0].name)
+    expect(component.getGroupName(11)).toEqual('')
+  })
+
+  it('should show errors on load if load users failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(userService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load users'))
+      )
+    completeSetup(userService)
+    fixture.detectChanges()
+    expect(toastErrorSpy).toHaveBeenCalled()
+  })
+
+  it('should show errors on load if load groups failure', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(groupService, 'listAll')
+      .mockImplementation(() =>
+        throwError(() => new Error('failed to load groups'))
+      )
+    completeSetup(groupService)
+    fixture.detectChanges()
+    expect(toastErrorSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,202 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, first, takeUntil } from 'rxjs'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { GroupService } from 'src/app/services/rest/group.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { setLocationHref } from 'src/app/utils/navigation'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+
+@Component({
+  selector: 'pngx-users-groups',
+  templateUrl: './users-groups.component.html',
+  styleUrls: ['./users-groups.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class UsersAndGroupsComponent
+  extends ComponentWithPermissions
+  implements OnInit, OnDestroy
+{
+  private usersService = inject(UserService)
+  private groupsService = inject(GroupService)
+  private toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+  private settings = inject(SettingsService)
+
+  users: User[]
+  groups: Group[]
+
+  unsubscribeNotifier: Subject<any> = new Subject()
+
+  ngOnInit(): void {
+    this.usersService
+      .listAll(null, null, { full_perms: true })
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (r) => {
+          this.users = r.results
+        },
+        error: (e) => {
+          this.toastService.showError($localize`Error retrieving users`, e)
+        },
+      })
+
+    this.groupsService
+      .listAll(null, null, { full_perms: true })
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: (r) => {
+          this.groups = r.results
+        },
+        error: (e) => {
+          this.toastService.showError($localize`Error retrieving groups`, e)
+        },
+      })
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeNotifier.next(true)
+  }
+
+  editUser(user: User = null) {
+    var modal = this.modalService.open(UserEditDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+    modal.componentInstance.dialogMode = user
+      ? EditDialogMode.EDIT
+      : EditDialogMode.CREATE
+    modal.componentInstance.object = user
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((newUser: User) => {
+        if (
+          newUser.id === this.settings.currentUser.id &&
+          (modal.componentInstance as UserEditDialogComponent).passwordIsSet
+        ) {
+          this.toastService.showInfo(
+            $localize`Password has been changed, you will be logged out momentarily.`
+          )
+          setTimeout(() => {
+            setLocationHref(
+              `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
+            )
+          }, 2500)
+        } else {
+          this.toastService.showInfo(
+            $localize`Saved user "${newUser.username}".`
+          )
+          this.usersService.listAll().subscribe((r) => {
+            this.users = r.results
+          })
+        }
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving user.`, e)
+      })
+  }
+
+  deleteUser(user: User) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete user account`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user account.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      this.usersService.delete(user).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted user "${user.username}"`)
+          this.usersService.listAll().subscribe((r) => {
+            this.users = r.results
+          })
+        },
+        error: (e) => {
+          this.toastService.showError(
+            $localize`Error deleting user "${user.username}".`,
+            e
+          )
+        },
+      })
+    })
+  }
+
+  editGroup(group: Group = null) {
+    var modal = this.modalService.open(GroupEditDialogComponent, {
+      backdrop: 'static',
+      size: 'lg',
+    })
+    modal.componentInstance.dialogMode = group
+      ? EditDialogMode.EDIT
+      : EditDialogMode.CREATE
+    modal.componentInstance.object = group
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((newGroup) => {
+        this.toastService.showInfo($localize`Saved group "${newGroup.name}".`)
+        this.groupsService.listAll().subscribe((r) => {
+          this.groups = r.results
+        })
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving group.`, e)
+      })
+  }
+
+  deleteGroup(group: Group) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete user group`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this user group.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      this.groupsService.delete(group).subscribe({
+        next: () => {
+          modal.close()
+          this.toastService.showInfo($localize`Deleted group "${group.name}"`)
+          this.groupsService.listAll().subscribe((r) => {
+            this.groups = r.results
+          })
+        },
+        error: (e) => {
+          this.toastService.showError(
+            $localize`Error deleting group "${group.name}".`,
+            e
+          )
+        },
+      })
+    })
+  }
+
+  getGroupName(id: number): string {
+    return this.groups?.find((g) => g.id === id)?.name ?? ''
+  }
+}

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

@@ -0,0 +1,366 @@
+<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">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <a class="navbar-brand d-flex align-items-center me-0 px-3 py-3 order-sm-0"
+    [ngClass]="{ 'slim': slimSidebarEnabled, 'col-auto col-md-3 col-lg-2 col-xxxl-1' : !slimSidebarEnabled, 'py-3' : !customAppTitle?.length || slimSidebarEnabled, 'py-2': customAppTitle?.length }"
+    routerLink="/dashboard"
+    tourAnchor="tour.intro">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="1em" height="1.5em" fill="currentColor">
+      <path
+        d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
+        transform="translate(0 0)" />
+    </svg>
+    <div class="ms-2 ms-md-3 d-inline-block" [class.d-md-none]="slimSidebarEnabled">
+      @if (customAppTitle?.length) {
+        <div class="d-flex flex-column align-items-start custom-title">
+          <span class="title">{{customAppTitle}}</span>
+          <span class="byline text-uppercase font-monospace" i18n>by Paperless-ngx</span>
+        </div>
+      } @else {
+        Paperless-ngx
+      }
+    </div>
+  </a>
+  <div class="search-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1">
+    <div class="col-12 col-md-7">
+      <pngx-global-search></pngx-global-search>
+    </div>
+  </div>
+  <ul ngbNav class="order-sm-3">
+    <pngx-toasts-dropdown></pngx-toasts-dropdown>
+    <li ngbDropdown class="nav-item dropdown">
+      <button class="btn ps-1 border-0" id="userDropdown" ngbDropdownToggle>
+        <i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
+        <span class="small ms-2 d-none d-sm-inline">
+          {{this.settingsService.displayName}}
+        </span>
+      </button>
+      <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
+        <div class="d-sm-none">
+          <p class="small mb-0 px-3 text-muted" i18n>Logged in as {{this.settingsService.displayName}}</p>
+          <div class="dropdown-divider"></div>
+        </div>
+        <button ngbDropdownItem class="nav-link" (click)="editProfile()">
+          <i-bs class="me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container>
+        </button>
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
+          *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }">
+          <i-bs class="me-2" name="gear"></i-bs><ng-container i18n>Settings</ng-container>
+        </a>
+        <a ngbDropdownItem class="nav-link d-flex" href="accounts/logout/" (click)="onLogout()">
+          <i-bs class="me-2" name="door-open"></i-bs><ng-container i18n>Logout</ng-container>
+        </a>
+        <div class="dropdown-divider"></div>
+        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
+          href="https://docs.paperless-ngx.com">
+          <i-bs class="me-2" name="question-circle"></i-bs><ng-container i18n>Documentation</ng-container>
+        </a>
+      </div>
+    </li>
+  </ul>
+</nav>
+
+<div class="container-fluid">
+  <div class="row">
+    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
+      [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
+      [ngbCollapse]="isMenuCollapsed">
+      <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
+        @if (slimSidebarEnabled) {
+          <i-bs width="0.9em" height="0.9em" name="chevron-double-right"></i-bs>
+        } @else {
+          <i-bs width="0.9em" height="0.9em" name="chevron-double-left"></i-bs>
+        }
+      </button>
+      <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
+        <ul class="nav flex-column">
+          <li class="nav-item app-link">
+            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <i-bs class="me-1" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
+            </a>
+          </li>
+          <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              <i-bs class="me-1" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
+            </a>
+          </li>
+        </ul>
+
+        <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+          @if (savedViewService.loading) {
+            <h6 class="sidebar-heading px-3 text-muted">
+              <span i18n>Saved views</span>
+              <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+            </h6>
+          } @else if (savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 text-muted">
+              <span i18n>Saved views</span>
+            </h6>
+            <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
+              @for (view of savedViewService.sidebarViews; track view.id) {
+                <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
+                  cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
+                  (cdkDragEnded)="onDragEnd($event)">
+                  <a class="nav-link" routerLink="view/{{view.id}}"
+                    routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                    [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                    popoverClass="popover-slim">
+                    <i-bs class="me-1" name="funnel"></i-bs>
+                      <span>&nbsp;<div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
+                        @if (showSidebarCounts && !slimSidebarEnabled) {
+                          <span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
+                        }
+                      </span>
+                    @if (showSidebarCounts && slimSidebarEnabled) {
+                      <span class="badge bg-info text-dark position-absolute top-0 end-0 d-none d-md-block">{{ savedViewService.getDocumentCount(view) }}</span>
+                    }
+                  </a>
+                  @if (settingsService.organizingSidebarSavedViews) {
+                    <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                      <i-bs name="grip-vertical"></i-bs>
+                    </div>
+                  }
+                </li>
+              }
+            </ul>
+          }
+        </div>
+
+        <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+          @if (openDocuments.length > 0) {
+            <h6 class="sidebar-heading px-3 text-muted">
+              <span i18n>Open documents</span>
+            </h6>
+          }
+          <ul class="nav flex-column mb-2">
+            @for (d of openDocuments; track d) {
+              <li class="nav-item w-100 app-link">
+                <a class="nav-link app-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
+                  <i-bs class="me-1" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <span class="close flex-column justify-content-center" (click)="closeDocument(d); $event.preventDefault()">
+                    <i-bs name="x"></i-bs>
+                  </span>
+                </a>
+              </li>
+            }
+            @if (openDocuments.length >= 1) {
+              <li class="nav-item w-100 app-link">
+                <a class="nav-link app-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
+                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  <i-bs class="me-1" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                </a>
+              </li>
+            }
+          </ul>
+        </div>
+
+        <div class="nav-group mt-3 mb-1">
+          <h6 class="sidebar-heading px-3 text-muted">
+            <span i18n>Manage</span>
+          </h6>
+          <ul class="nav flex-column mb-2">
+            <li class="nav-item app-link"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+              <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
+              tourAnchor="tour.tags">
+              <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+              <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+              <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
+              <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+              <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="window-stack"></i-bs><span>&nbsp;<ng-container i18n>Saved Views</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
+              tourAnchor="tour.workflows">
+              <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
+              tourAnchor="tour.mail">
+              <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="nav-group mt-auto mb-1">
+          <h6 class="sidebar-heading px-3 pt-4 text-muted">
+            <span i18n>Administration</span>
+          </h6>
+          <ul class="nav flex-column mb-2">
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }"
+              tourAnchor="tour.settings">
+              <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.AppConfig }">
+              <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+              <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item app-link"
+              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }"
+              tourAnchor="tour.file-tasks">
+              <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="list-task"></i-bs><span>&nbsp;<ng-container i18n>File Tasks</ng-container>@if (tasksService.failedFileTasks.length > 0) {
+                  <span><span class="badge bg-danger ms-2 d-inline">{{tasksService.failedFileTasks.length}}</span></span>
+                }</span>
+                @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
+                  <span class="badge bg-danger position-absolute top-0 end-0 d-none d-md-block">{{tasksService.failedFileTasks.length}}</span>
+                }
+              </a>
+            </li>
+            @if (permissionsService.isAdmin()) {
+              <li class="nav-item app-link">
+                <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
+                  i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                  <i-bs class="me-1" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
+                </a>
+              </li>
+            }
+            <li class="nav-item mt-2" tourAnchor="tour.outro">
+              <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
+                target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="d-flex" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
+              </a>
+            </li>
+            <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
+              <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
+                <div class="me-3">
+                  <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
+                    href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
+                    [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                    triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                    {{ versionString }}
+                  </a>
+                </div>
+                @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                  <div class="version-check">
+                    <ng-template #updateAvailablePopContent>
+                      <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                          available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>
+                    </ng-template>
+                    <ng-template #updateCheckingNotEnabledPopContent>
+                      <p class="small mb-2">
+                        <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
+                      </p>
+                      <div class="btn-group btn-group-xs flex-fill w-100">
+                        <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
+                        <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
+                      </div>
+                      <p class="small mb-0 mt-2">
+                        <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
+                          How does this work?
+                        </a>
+                      </p>
+                    </ng-template>
+                    @if (settingsService.updateCheckingIsSet) {
+                      @if (appRemoteVersion.update_available) {
+                        <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer"
+                          href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                          [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
+                          container="body">
+                          <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                          @if (appRemoteVersion?.update_available) {
+                            &nbsp;<ng-container i18n>Update available</ng-container>
+                          }
+                        </a>
+                      }
+                    } @else {
+                      <a  *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
+                        [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
+                        container="body">
+                        <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                      </a>
+                    }
+                  </div>
+                }
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <main role="main" class="ms-sm-auto px-md-4"
+      [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+</div>

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

@@ -0,0 +1,314 @@
+/*
+ * Sidebar
+ */
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 995; /* Behind the navbar */
+  padding: 50px 0 0; /* Height of navbar */
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+  overflow-y: auto;
+  --pngx-sidebar-width: 100%;
+  max-width: var(--pngx-sidebar-width);
+  transition: all .2s ease;
+
+  .sidebar-heading .spinner-border {
+    width: 0.8em;
+    height: 0.8em;
+  }
+
+  .view-name {
+    max-width: calc(100% - 50px)
+  }
+
+  .nav-group:not(:has(.app-link)) .sidebar-heading {
+    display: none !important;
+  }
+
+  // These come from the col-* classes for non-slim sidebar, needed for animation
+  @media (min-width: 768px) {
+    --pngx-sidebar-width: 25%;
+  }
+
+  @media (min-width: 992px) {
+    --pngx-sidebar-width: 16.66666667%;
+  }
+
+  @media (min-width: 2400px) {
+    --pngx-sidebar-width: 8.33333333%;
+  }
+}
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 3.5rem;
+  }
+}
+
+main {
+  transition: all .2s ease;
+  padding-top: 110px;
+}
+
+@media (min-width: 768px) {
+  main {
+    padding-top: 56px;
+  }
+}
+
+.sidebar-slim-toggler {
+  display: none; // hide on mobile
+}
+
+.sidebar li.nav-item span,
+.sidebar .sidebar-heading span {
+  transition: all .1s ease;
+}
+
+@media(min-width: 768px) {
+  .sidebar.slim {
+    max-width: 50px;
+
+    li.nav-item span.badge {
+      display: inline-block;
+      margin-right: 2px;
+    }
+  }
+
+  .sidebar.slim:not(.animating) {
+    li.nav-item span,
+    .sidebar-heading span {
+      display: none;
+    }
+  }
+
+  .sidebar.animating {
+    li.nav-item span,
+    .sidebar-heading span {
+      display: unset;
+      position: absolute;
+      opacity: 0;
+      overflow: hidden;
+    }
+  }
+
+  .sidebar:not(.slim):not(.animating) {
+    li.nav-item span,
+    .sidebar-heading span {
+      position: unset;
+      opacity: 1;
+      overflow: auto;
+    }
+  }
+
+  .sidebar.slim,
+  .sidebar.animating {
+    .text-truncate {
+      text-overflow: unset !important;
+      word-wrap: break-word !important;
+    }
+  }
+
+  .sidebar.slim {
+    li.nav-item span.badge {
+      display: inline-block;
+      margin-right: 2px;
+    }
+  }
+
+  .sidebar-slim-toggler {
+    display: block;
+    position: fixed;
+    left: calc(var(--pngx-sidebar-width) - 12px);
+    top: 60px;
+    z-index: 996;
+    --bs-btn-padding-x: 0.35rem;
+    --bs-btn-padding-y: 0.125rem;
+    transition: all .2s ease;
+  }
+
+  .sidebar.slim .sidebar-slim-toggler {
+    --pngx-sidebar-width: 50px !important;
+  }
+}
+
+::ng-deep .popover-slim .popover-body {
+  --bs-popover-body-padding-x: .5rem;
+  --bs-popover-body-padding-y: .5rem;
+}
+
+.sidebar-sticky {
+  position: relative;
+  top: 0;
+  height: 100%;
+  padding-top: 0.5rem;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+  min-height: min-content;
+}
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sidebar-sticky {
+    position: -webkit-sticky;
+    position: sticky;
+  }
+}
+
+.sidebar .nav-link {
+  font-weight: 500;
+  white-space: nowrap;
+
+  &:hover, &.active, &:focus {
+    color: var(--bs-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+    background-color: var(--bs-body-bg);
+  }
+
+  &.active {
+    font-weight: bold;
+  }
+
+  i-bs {
+    position: relative;
+    top: -1px;
+  }
+}
+
+.sidebar-heading {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.nav {
+  flex-wrap: nowrap;
+}
+
+.nav-item {
+  position: relative;
+  list-style-type: none;
+
+  &:hover .close {
+    display: flex;
+  }
+
+  .close {
+    display: none;
+    position: absolute !important;
+    cursor: pointer;
+    opacity: 1;
+    top: 0;
+    padding: .25rem .3rem 0;
+    right: .4rem;
+    width: 1.8rem;
+    height: 100%;
+
+    i-bs {
+      opacity: 0.5;
+    }
+
+    &:hover i-bs {
+      opacity: 1;
+    }
+  }
+
+  .nav-link-additional {
+    margin-top: 0.1rem;
+    margin-left: 0.25rem;
+    padding-top: 0.5rem;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    i-bs {
+      margin-bottom: 2px;
+    }
+  }
+}
+
+
+/*
+ * Navbar
+ */
+
+.navbar-brand {
+  font-size: 1rem;
+
+  .flex-column {
+    padding: 0.15rem 0;
+  }
+
+  .byline {
+    font-size: 0.5rem;
+    letter-spacing: 0.1rem;
+  }
+}
+
+@media screen and (min-width: 366px) and (max-width: 768px) {
+  .navbar-toggler {
+    // compensate for 2 buttons on the right
+    margin-right: 45px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .navbar-brand.slim {
+    max-width: 50px;
+  }
+}
+
+@media screen and (max-width: 345px) {
+  .custom-title {
+    max-width: 110px;
+    overflow: hidden;
+  }
+}
+
+:host ::ng-deep .dropdown.show .dropdown-toggle,
+:host ::ng-deep .dropdown-toggle:hover {
+  opacity: 0.7;
+}
+
+.dropdown-toggle::after {
+  margin-left: 0.4em;
+  vertical-align: 0.155em;
+}
+
+.navbar .dropdown-menu {
+  font-size: 0.875rem; // body size
+
+  a i-bs {
+    opacity: 0.6;
+  }
+}
+
+.version-check {
+  animation: pulse 2s ease-in-out 0s 1;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 100%;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 100%;
+  }
+}
+
+.nav-item > .position-absolute {
+  cursor: move;
+}
+
+::ng-deep .navItemDrag .position-absolute i-bs {
+  display: none;
+}

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

@@ -0,0 +1,374 @@
+import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { ActivatedRoute, Router } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { routes } from 'src/app/app-routing.module'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import {
+  DjangoMessageLevel,
+  DjangoMessagesService,
+} from 'src/app/services/django-messages.service'
+import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SearchService } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { AppFrameComponent } from './app-frame.component'
+import { GlobalSearchComponent } from './global-search/global-search.component'
+
+const saved_views = [
+  {
+    name: 'Saved View 0',
+    id: 0,
+    show_on_dashboard: true,
+    show_in_sidebar: true,
+    sort_field: 'name',
+    sort_reverse: true,
+    filter_rules: [],
+  },
+  {
+    name: 'Saved View 1',
+    id: 1,
+    show_on_dashboard: false,
+    show_in_sidebar: false,
+    sort_field: 'name',
+    sort_reverse: true,
+    filter_rules: [],
+  },
+  {
+    name: 'Saved View 2',
+    id: 2,
+    show_on_dashboard: true,
+    show_in_sidebar: true,
+    sort_field: 'name',
+    sort_reverse: true,
+    filter_rules: [],
+  },
+  {
+    name: 'Saved View 3',
+    id: 3,
+    show_on_dashboard: true,
+    show_in_sidebar: true,
+    sort_field: 'name',
+    sort_reverse: true,
+    filter_rules: [],
+  },
+]
+const document = { id: 2, title: 'Hello world' }
+
+describe('AppFrameComponent', () => {
+  let component: AppFrameComponent
+  let fixture: ComponentFixture<AppFrameComponent>
+  let httpTestingController: HttpTestingController
+  let settingsService: SettingsService
+  let permissionsService: PermissionsService
+  let remoteVersionService: RemoteVersionService
+  let toastService: ToastService
+  let messagesService: DjangoMessagesService
+  let openDocumentsService: OpenDocumentsService
+  let router: Router
+  let savedViewSpy
+  let modalService: NgbModal
+  let maybeRefreshSpy
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserModule,
+        RouterTestingModule.withRoutes(routes),
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        DragDropModule,
+        NgbModalModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        AppFrameComponent,
+        IfPermissionsDirective,
+        GlobalSearchComponent,
+      ],
+      providers: [
+        SettingsService,
+        {
+          provide: SavedViewService,
+          useValue: {
+            reload: (fn: any) => {
+              if (fn) {
+                fn()
+              }
+            },
+            listAll: () =>
+              of({
+                all: [saved_views.map((v) => v.id)],
+                count: saved_views.length,
+                results: saved_views,
+              }),
+            sidebarViews: saved_views.filter((v) => v.show_in_sidebar),
+            getDocumentCount: (view: SavedView) => 5,
+            maybeRefreshDocumentCounts: () => {},
+          },
+        },
+        PermissionsService,
+        RemoteVersionService,
+        IfPermissionsDirective,
+        ToastService,
+        DjangoMessagesService,
+        OpenDocumentsService,
+        SearchService,
+        NgbModal,
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            firstChild: {
+              component: DocumentDetailComponent,
+            },
+            snapshot: {
+              firstChild: {
+                component: DocumentDetailComponent,
+                params: {
+                  id: document.id,
+                },
+              },
+            },
+          },
+        },
+        PermissionsGuard,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    settingsService = TestBed.inject(SettingsService)
+    const savedViewService = TestBed.inject(SavedViewService)
+    permissionsService = TestBed.inject(PermissionsService)
+    remoteVersionService = TestBed.inject(RemoteVersionService)
+    toastService = TestBed.inject(ToastService)
+    messagesService = TestBed.inject(DjangoMessagesService)
+    openDocumentsService = TestBed.inject(OpenDocumentsService)
+    modalService = TestBed.inject(NgbModal)
+    router = TestBed.inject(Router)
+
+    jest
+      .spyOn(settingsService, 'displayName', 'get')
+      .mockReturnValue('Hello World')
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+
+    savedViewSpy = jest.spyOn(savedViewService, 'reload')
+    maybeRefreshSpy = jest.spyOn(savedViewService, 'maybeRefreshDocumentCounts')
+
+    fixture = TestBed.createComponent(AppFrameComponent)
+    component = fixture.componentInstance
+
+    httpTestingController = TestBed.inject(HttpTestingController)
+
+    fixture.detectChanges()
+  })
+
+  it('should initialize the saved view service', () => {
+    expect(savedViewSpy).toHaveBeenCalled()
+  })
+
+  it('should check for update if enabled', () => {
+    const updateCheckSpy = jest.spyOn(remoteVersionService, 'checkForUpdates')
+    updateCheckSpy.mockImplementation(() => {
+      return of({
+        version: 'v100.0',
+        update_available: true,
+      })
+    })
+    settingsService.set(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED, true)
+    component.ngOnInit()
+    expect(updateCheckSpy).toHaveBeenCalled()
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Update available')
+  })
+
+  it('should check not for update if disabled', () => {
+    const updateCheckSpy = jest.spyOn(remoteVersionService, 'checkForUpdates')
+    settingsService.set(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED, false)
+    component.ngOnInit()
+    fixture.detectChanges()
+    expect(updateCheckSpy).not.toHaveBeenCalled()
+    expect(fixture.nativeElement.textContent).not.toContain('Update available')
+  })
+
+  it('should check for update if was disabled and then enabled', () => {
+    const updateCheckSpy = jest.spyOn(remoteVersionService, 'checkForUpdates')
+    settingsService.set(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED, false)
+    component.setUpdateChecking(true)
+    fixture.detectChanges()
+    expect(updateCheckSpy).toHaveBeenCalled()
+  })
+
+  it('should show error on toggle update checking if store settings fails', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    settingsService.set(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED, false)
+    component.setUpdateChecking(true)
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .flush('error', {
+        status: 500,
+        statusText: 'error',
+      })
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support toggling slim sidebar and saving', fakeAsync(() => {
+    const saveSettingSpy = jest.spyOn(settingsService, 'set')
+    expect(component.slimSidebarEnabled).toBeFalsy()
+    expect(component.slimSidebarAnimating).toBeFalsy()
+    component.toggleSlimSidebar()
+    expect(component.slimSidebarAnimating).toBeTruthy()
+    tick(200)
+    expect(component.slimSidebarAnimating).toBeFalsy()
+    expect(component.slimSidebarEnabled).toBeTruthy()
+    expect(saveSettingSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.SLIM_SIDEBAR,
+      true
+    )
+  }))
+
+  it('should show error on toggle slim sidebar if store settings fails', () => {
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    component.toggleSlimSidebar()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .flush('error', {
+        status: 500,
+        statusText: 'error',
+      })
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support collapsible menu', () => {
+    const button: HTMLButtonElement = (
+      fixture.nativeElement as HTMLDivElement
+    ).querySelector('button[data-toggle=collapse]')
+    button.dispatchEvent(new MouseEvent('click'))
+    expect(component.isMenuCollapsed).toBeFalsy()
+    component.closeMenu()
+    expect(component.isMenuCollapsed).toBeTruthy()
+  })
+
+  it('should support close document & navigate on close current doc', () => {
+    const closeSpy = jest.spyOn(openDocumentsService, 'closeDocument')
+    closeSpy.mockReturnValue(of(true))
+    const routerSpy = jest.spyOn(router, 'navigate')
+    component.closeDocument(document)
+    expect(closeSpy).toHaveBeenCalledWith(document)
+    expect(routerSpy).toHaveBeenCalled()
+  })
+
+  it('should support close all documents & navigate on close current doc', () => {
+    const closeAllSpy = jest.spyOn(openDocumentsService, 'closeAll')
+    closeAllSpy.mockReturnValue(of(true))
+    const routerSpy = jest.spyOn(router, 'navigate')
+    component.closeAll()
+    expect(closeAllSpy).toHaveBeenCalled()
+    expect(routerSpy).toHaveBeenCalled()
+  })
+
+  it('should close all documents on logout', () => {
+    const closeAllSpy = jest.spyOn(openDocumentsService, 'closeAll')
+    component.onLogout()
+    expect(closeAllSpy).toHaveBeenCalled()
+  })
+
+  it('should warn before close if dirty documents', () => {
+    jest.spyOn(openDocumentsService, 'hasDirty').mockReturnValue(true)
+    expect(component.canDeactivate()).toBeFalsy()
+  })
+
+  it('should disable global dropzone on start drag + drop, re-enable after', () => {
+    expect(settingsService.globalDropzoneEnabled).toBeTruthy()
+    component.onDragStart(null)
+    expect(settingsService.globalDropzoneEnabled).toBeFalsy()
+    component.onDragEnd(null)
+    expect(settingsService.globalDropzoneEnabled).toBeTruthy()
+  })
+
+  it('should update saved view sorting on drag + drop, show info', () => {
+    const settingsSpy = jest.spyOn(settingsService, 'updateSidebarViewsSort')
+    const toastSpy = jest.spyOn(toastService, 'showInfo')
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+    component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
+      SavedView[]
+    >)
+    expect(settingsSpy).toHaveBeenCalledWith([
+      saved_views[2],
+      saved_views[0],
+      saved_views[3],
+    ])
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should update saved view sorting on drag + drop, show error', () => {
+    jest.spyOn(settingsService, 'get').mockImplementation((key) => {
+      if (key === SETTINGS_KEYS.SIDEBAR_VIEWS_SORT_ORDER) return []
+    })
+    fixture.destroy()
+    fixture = TestBed.createComponent(AppFrameComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest
+      .spyOn(settingsService, 'storeSettings')
+      .mockReturnValue(throwError(() => new Error('unable to save')))
+    component.onDrop({ previousIndex: 0, currentIndex: 2 } as CdkDragDrop<
+      SavedView[]
+    >)
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should support edit profile', () => {
+    const modalSpy = jest.spyOn(modalService, 'open')
+    component.editProfile()
+    expect(modalSpy).toHaveBeenCalledWith(ProfileEditDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+  })
+
+  it('should show toasts for django messages', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    jest.spyOn(messagesService, 'get').mockReturnValue([
+      { level: DjangoMessageLevel.WARNING, message: 'Test warning' },
+      { level: DjangoMessageLevel.ERROR, message: 'Test error' },
+      { level: DjangoMessageLevel.SUCCESS, message: 'Test success' },
+      { level: DjangoMessageLevel.INFO, message: 'Test info' },
+      { level: DjangoMessageLevel.DEBUG, message: 'Test debug' },
+    ])
+    component.ngOnInit()
+    expect(toastErrorSpy).toHaveBeenCalledTimes(2)
+    expect(toastInfoSpy).toHaveBeenCalledTimes(3)
+  })
+
+  it('should call maybeRefreshDocumentCounts after saved views reload', () => {
+    expect(maybeRefreshSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,295 @@
+import {
+  CdkDragDrop,
+  CdkDragEnd,
+  CdkDragStart,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgClass } from '@angular/common'
+import { Component, HostListener, inject, OnInit } from '@angular/core'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { Observable } from 'rxjs'
+import { first } from 'rxjs/operators'
+import { Document } from 'src/app/data/document'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
+import {
+  DjangoMessageLevel,
+  DjangoMessagesService,
+} from 'src/app/services/django-messages.service'
+import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import {
+  AppRemoteVersion,
+  RemoteVersionService,
+} from 'src/app/services/rest/remote-version.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
+import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { GlobalSearchComponent } from './global-search/global-search.component'
+import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.component'
+
+@Component({
+  selector: 'pngx-app-frame',
+  templateUrl: './app-frame.component.html',
+  styleUrls: ['./app-frame.component.scss'],
+  imports: [
+    GlobalSearchComponent,
+    DocumentTitlePipe,
+    IfPermissionsDirective,
+    ToastsDropdownComponent,
+    RouterModule,
+    NgClass,
+    NgbDropdownModule,
+    NgbPopoverModule,
+    NgbCollapseModule,
+    NgbNavModule,
+    NgxBootstrapIconsModule,
+    DragDropModule,
+    TourNgBootstrapModule,
+  ],
+})
+export class AppFrameComponent
+  extends ComponentWithPermissions
+  implements OnInit, ComponentCanDeactivate
+{
+  router = inject(Router)
+  private activatedRoute = inject(ActivatedRoute)
+  private openDocumentsService = inject(OpenDocumentsService)
+  savedViewService = inject(SavedViewService)
+  private remoteVersionService = inject(RemoteVersionService)
+  settingsService = inject(SettingsService)
+  tasksService = inject(TasksService)
+  private readonly toastService = inject(ToastService)
+  private modalService = inject(NgbModal)
+  permissionsService = inject(PermissionsService)
+  private djangoMessagesService = inject(DjangoMessagesService)
+
+  appRemoteVersion: AppRemoteVersion
+
+  isMenuCollapsed: boolean = true
+
+  slimSidebarAnimating: boolean = false
+
+  constructor() {
+    super()
+    const permissionsService = this.permissionsService
+
+    if (
+      permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.SavedView
+      )
+    ) {
+      this.savedViewService.reload(() => {
+        this.savedViewService.maybeRefreshDocumentCounts()
+      })
+    }
+  }
+
+  ngOnInit(): void {
+    if (this.settingsService.get(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED)) {
+      this.checkForUpdates()
+    }
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.PaperlessTask
+      )
+    ) {
+      this.tasksService.reload()
+    }
+
+    this.djangoMessagesService.get().forEach((message) => {
+      switch (message.level) {
+        case DjangoMessageLevel.ERROR:
+        case DjangoMessageLevel.WARNING:
+          this.toastService.showError(message.message)
+          break
+        case DjangoMessageLevel.SUCCESS:
+        case DjangoMessageLevel.INFO:
+        case DjangoMessageLevel.DEBUG:
+          this.toastService.showInfo(message.message)
+          break
+      }
+    })
+  }
+
+  toggleSlimSidebar(): void {
+    this.slimSidebarAnimating = true
+    this.slimSidebarEnabled = !this.slimSidebarEnabled
+    setTimeout(() => {
+      this.slimSidebarAnimating = false
+    }, 200) // slightly longer than css animation for slim sidebar
+  }
+
+  get versionString(): string {
+    return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
+  }
+
+  get customAppTitle(): string {
+    return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
+  }
+
+  get slimSidebarEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
+  }
+
+  set slimSidebarEnabled(enabled: boolean) {
+    this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, enabled)
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
+  }
+
+  closeMenu() {
+    this.isMenuCollapsed = true
+  }
+
+  editProfile() {
+    this.modalService.open(ProfileEditDialogComponent, {
+      backdrop: 'static',
+      size: 'xl',
+    })
+    this.closeMenu()
+  }
+
+  get openDocuments(): Document[] {
+    return this.openDocumentsService.getOpenDocuments()
+  }
+
+  @HostListener('window:beforeunload')
+  canDeactivate(): Observable<boolean> | boolean {
+    return !this.openDocumentsService.hasDirty()
+  }
+
+  closeDocument(d: Document) {
+    this.openDocumentsService
+      .closeDocument(d)
+      .pipe(first())
+      .subscribe((confirmed) => {
+        if (confirmed) {
+          this.closeMenu()
+          let route = this.activatedRoute.snapshot
+          while (route.firstChild) {
+            route = route.firstChild
+          }
+          if (
+            route.component == DocumentDetailComponent &&
+            route.params['id'] == d.id
+          ) {
+            this.router.navigate([''])
+          }
+        }
+      })
+  }
+
+  closeAll() {
+    // user may need to confirm losing unsaved changes
+    this.openDocumentsService
+      .closeAll()
+      .pipe(first())
+      .subscribe((confirmed) => {
+        if (confirmed) {
+          this.closeMenu()
+
+          // TODO: is there a better way to do this?
+          let route = this.activatedRoute
+          while (route.firstChild) {
+            route = route.firstChild
+          }
+          if (route.component === DocumentDetailComponent) {
+            this.router.navigate([''])
+          }
+        }
+      })
+  }
+
+  onDragStart(event: CdkDragStart) {
+    this.settingsService.globalDropzoneEnabled = false
+  }
+
+  onDragEnd(event: CdkDragEnd) {
+    this.settingsService.globalDropzoneEnabled = true
+  }
+
+  onDrop(event: CdkDragDrop<SavedView[]>) {
+    const sidebarViews = this.savedViewService.sidebarViews.concat([])
+    moveItemInArray(sidebarViews, event.previousIndex, event.currentIndex)
+
+    this.settingsService.updateSidebarViewsSort(sidebarViews).subscribe({
+      next: () => {
+        this.toastService.showInfo($localize`Sidebar views updated`)
+      },
+      error: (e) => {
+        this.toastService.showError($localize`Error updating sidebar views`, e)
+      },
+    })
+  }
+
+  private checkForUpdates() {
+    this.remoteVersionService
+      .checkForUpdates()
+      .subscribe((appRemoteVersion: AppRemoteVersion) => {
+        this.appRemoteVersion = appRemoteVersion
+      })
+  }
+
+  setUpdateChecking(enable: boolean) {
+    this.settingsService.set(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED, enable)
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving update checking settings.`
+          )
+          console.warn(error)
+        },
+      })
+    if (enable) {
+      this.checkForUpdates()
+    }
+  }
+
+  onLogout() {
+    this.openDocumentsService.closeAll()
+  }
+
+  get showSidebarCounts(): boolean {
+    return (
+      this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
+      !this.settingsService.organizingSidebarSavedViews
+    )
+  }
+}

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

@@ -0,0 +1,174 @@
+
+<div ngbDropdown #resultsDropdown="ngbDropdown" (openChange)="onDropdownOpenChange">
+    <form class="form-inline position-relative">
+        <i-bs width="1em" height="1em" name="search"></i-bs>
+        <div class="input-group">
+            <div class="form-control form-control-sm">
+                <input class="bg-transparent border-0 w-100 h-100" #searchInput type="text" name="query"
+                    placeholder="Search" aria-label="Search" i18n-placeholder
+                    autocomplete="off"
+                    spellcheck="false"
+                    [(ngModel)]="query"
+                    (ngModelChange)="this.queryDebounce.next($event)"
+                    (keydown)="searchInputKeyDown($event)"
+                    ngbDropdownAnchor>
+                <div class="position-absolute top-50 end-0 translate-middle">
+                    @if (loading) {
+                        <div class="spinner-border spinner-border-sm text-muted mt-1"></div>
+                    }
+                </div>
+            </div>
+            @if (query) {
+                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="runFullSearch()">
+                    @if (useAdvancedForFullSearch) {
+                        <ng-container i18n>Advanced search</ng-container>
+                    } @else {
+                        <ng-container i18n>Search</ng-container>
+                    }
+                    <i-bs width="1em" height="1em" name="arrow-right-short"></i-bs>
+                </button>
+            }
+        </div>
+    </form>
+
+    <ng-template #resultItemTemplate let-item="item" let-nameProp="nameProp" let-type="type" let-icon="icon" let-date="date">
+        <div #resultItem ngbDropdownItem class="py-2 d-flex align-items-center focus-ring border-0 cursor-pointer" tabindex="-1"
+        (click)="primaryAction(type, item, $event)"
+        (mouseenter)="onItemHover($event)">
+            <i-bs width="1.2em" height="1.2em" name="{{icon}}" class="me-2 text-muted"></i-bs>
+            <div class="text-truncate">
+                {{item[nameProp]}}
+                @if (date) {
+                    <small class="small text-muted">{{date | customDate}}</small>
+                }
+            </div>
+            <div class="btn-group ms-auto">
+                <button #primaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
+                (click)="primaryAction(type, item, $event); $event.stopImmediatePropagation()"
+                (keydown)="onButtonKeyDown($event)"
+                [disabled]="disablePrimaryButton(type, item)"
+                (mouseenter)="onButtonHover($event)">
+                    @if (type === DataType.Document) {
+                        <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>
+                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                    } @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
+                        <i-bs width="1em" height="1em" name="pencil"></i-bs>
+                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                    } @else {
+                        <i-bs width="1em" height="1em" name="filter"></i-bs>
+                        <span>&nbsp;<ng-container i18n>Filter documents</ng-container></span>
+                    }
+                </button>
+                @if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
+                    <button #secondaryButton type="button" class="btn btn-sm btn-outline-primary d-flex"
+                    (click)="secondaryAction(type, item, $event); $event.stopImmediatePropagation()"
+                    (keydown)="onButtonKeyDown($event)"
+                    [disabled]="disableSecondaryButton(type, item)"
+                    (mouseenter)="onButtonHover($event)">
+                        @if (type === DataType.Document) {
+                            <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="file-earmark-richtext"></i-bs>
+                            <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        }
+                    </button>
+                }
+            </div>
+        </div>
+    </ng-template>
+
+    <div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg">
+        <div (keydown)="dropdownKeyDown($event)">
+            @if (searchResults?.total === 0) {
+                <h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
+            } @else {
+                @if (searchResults?.documents.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6>
+                    @for (document of searchResults.documents; track document.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: document, nameProp: 'title', type: DataType.Document, icon: 'file-text', date: document.created}"></ng-container>
+                    }
+                }
+                @if (searchResults?.saved_views.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.saved_views">Saved Views</h6>
+                    @for (saved_view of searchResults.saved_views; track saved_view.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: saved_view, nameProp: 'name', type: DataType.SavedView, icon: 'funnel'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.tags.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.tags">Tags</h6>
+                    @for (tag of searchResults.tags; track tag.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: tag, nameProp: 'name', type: DataType.Tag, icon: 'tag'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.correspondents.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.correspondents">Correspondents</h6>
+                    @for (correspondent of searchResults.correspondents; track correspondent.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: correspondent, nameProp: 'name', type: DataType.Correspondent, icon: 'person'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.document_types.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.documentTypes">Document types</h6>
+                    @for (documentType of searchResults.document_types; track documentType.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: documentType, nameProp: 'name', type: DataType.DocumentType, icon: 'file-earmark'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.storage_paths.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.storagePaths">Storage paths</h6>
+                    @for (storagePath of searchResults.storage_paths; track storagePath.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: storagePath, nameProp: 'name', type: DataType.StoragePath, icon: 'folder'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.users.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.users">Users</h6>
+                    @for (user of searchResults.users; track user.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: user, nameProp: 'username', type: DataType.User, icon: 'person-square'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.groups.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.groups">Groups</h6>
+                    @for (group of searchResults.groups; track group.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: group, nameProp: 'name', type: DataType.Group, icon: 'people'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.custom_fields.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.customFields">Custom fields</h6>
+                    @for (customField of searchResults.custom_fields; track customField.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: customField, nameProp: 'name', type: DataType.CustomField, icon: 'ui-radios'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.mail_accounts.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.mailAccounts">Mail accounts</h6>
+                    @for (mailAccount of searchResults.mail_accounts; track mailAccount.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: mailAccount, nameProp: 'name', type: DataType.MailAccount, icon: 'envelope-at'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.mail_rules.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.mailRules">Mail rules</h6>
+                    @for (mailRule of searchResults.mail_rules; track mailRule.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: mailRule, nameProp: 'name', type: DataType.MailRule, icon: 'envelope'}"></ng-container>
+                    }
+                }
+
+                @if (searchResults?.workflows.length) {
+                    <h6 class="dropdown-header" i18n="@@searchResults.workflows">Workflows</h6>
+                    @for (workflow of searchResults.workflows; track workflow.id) {
+                        <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: workflow, nameProp: 'name', type: DataType.Workflow, icon: 'boxes'}"></ng-container>
+                    }
+                }
+            }
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,97 @@
+form {
+  position: relative;
+
+  > i-bs[name="search"] {
+    position: absolute;
+    left: 0.6rem;
+    top: .35rem;
+    color: rgba(255, 255, 255, 0.6);
+
+    @media screen and (min-width: 768px) {
+      // adjust for smaller font size on non-mobile
+      top: 0.25rem;
+    }
+  }
+
+  &:focus-within {
+    i-bs[name="search"],
+    .badge {
+      display: none !important;
+    }
+
+    .form-control::placeholder {
+      color: rgba(255, 255, 255, 0);
+    }
+  }
+
+  .badge {
+    font-size: 0.8rem;
+  }
+
+  .input-group .btn {
+    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--pngx-primary-text-contrast);
+    padding-top: .15rem;
+    padding-bottom: .15rem;
+    min-height: calc(1.3em + 0.5rem + calc(var(--bs-border-width) * 2)) !important;
+  }
+
+  .form-control {
+    color: rgba(255, 255, 255, 0.3);
+    background-color: rgba(0, 0, 0, 0.15);
+    padding-left: 1.8rem;
+    border-color: rgba(255, 255, 255, 0.2);
+    transition: all .3s ease, padding-left 0s ease, background-color 0s ease; // Safari requires all
+    > input {
+      outline: none;
+      color: var(--pngx-primary-text-contrast);
+
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.4);
+      }
+    }
+
+    &:focus-within {
+      background-color: rgba(0, 0, 0, 0.3);
+      color: var(--bs-light);
+      flex-grow: 1;
+      padding-left: 0.5rem;
+    }
+  }
+
+}
+
+* {
+  --pngx-focus-alpha: 0;
+}
+
+.mh-75 {
+  max-height: 75vh;
+}
+
+.dropdown-item {
+  &:has(button:focus) {
+    background-color: var(--pngx-bg-darker);
+  }
+
+  & button {
+    transition: all 0.3s ease, color 0.15s ease;
+    max-width: 2rem;
+    overflow: hidden;
+  }
+
+  & button span {
+    opacity: 0;
+    transition: inherit;
+  }
+
+  &:hover button,
+  &:has(button:focus) button {
+    max-width: 10rem;
+  }
+
+  &:hover button span,
+  &:has(button:focus) span {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,561 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef } from '@angular/core'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import {
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalModule,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DataType } from 'src/app/data/datatype'
+import {
+  FILTER_FULLTEXT_QUERY,
+  FILTER_HAS_CORRESPONDENT_ANY,
+  FILTER_HAS_DOCUMENT_TYPE_ANY,
+  FILTER_HAS_STORAGE_PATH_ANY,
+  FILTER_HAS_TAGS_ALL,
+  FILTER_TITLE_CONTENT,
+} from 'src/app/data/filter-rule-type'
+import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SearchService } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
+import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
+import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
+import { GlobalSearchComponent } from './global-search.component'
+
+const searchResults = {
+  total: 11,
+  documents: [
+    {
+      id: 1,
+      title: 'Test',
+      created_at: new Date(),
+      updated_at: new Date(),
+      document_type: { id: 1, name: 'Test' },
+      storage_path: { id: 1, path: 'Test' },
+      tags: [],
+      correspondents: [],
+      custom_fields: [],
+    },
+  ],
+  saved_views: [
+    {
+      id: 1,
+      name: 'TestSavedView',
+    },
+  ],
+  correspondents: [
+    {
+      id: 1,
+      name: 'TestCorrespondent',
+    },
+  ],
+  document_types: [
+    {
+      id: 1,
+      name: 'TestDocumentType',
+    },
+  ],
+  storage_paths: [
+    {
+      id: 1,
+      name: 'TestStoragePath',
+    },
+  ],
+  tags: [
+    {
+      id: 1,
+      name: 'TestTag',
+    },
+  ],
+  users: [
+    {
+      id: 1,
+      username: 'TestUser',
+    },
+  ],
+  groups: [
+    {
+      id: 1,
+      name: 'TestGroup',
+    },
+  ],
+  mail_accounts: [
+    {
+      id: 1,
+      name: 'TestMailAccount',
+    },
+  ],
+  mail_rules: [
+    {
+      id: 1,
+      name: 'TestMailRule',
+    },
+  ],
+  custom_fields: [
+    {
+      id: 1,
+      name: 'TestCustomField',
+    },
+  ],
+  workflows: [
+    {
+      id: 1,
+      name: 'TestWorkflow',
+    },
+  ],
+}
+
+describe('GlobalSearchComponent', () => {
+  let component: GlobalSearchComponent
+  let fixture: ComponentFixture<GlobalSearchComponent>
+  let searchService: SearchService
+  let router: Router
+  let modalService: NgbModal
+  let documentService: DocumentService
+  let documentListViewService: DocumentListViewService
+  let toastService: ToastService
+  let settingsService: SettingsService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbModalModule,
+        NgbDropdownModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        GlobalSearchComponent,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    searchService = TestBed.inject(SearchService)
+    router = TestBed.inject(Router)
+    modalService = TestBed.inject(NgbModal)
+    documentService = TestBed.inject(DocumentService)
+    documentListViewService = TestBed.inject(DocumentListViewService)
+    toastService = TestBed.inject(ToastService)
+    settingsService = TestBed.inject(SettingsService)
+
+    fixture = TestBed.createComponent(GlobalSearchComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should handle keyboard nav', () => {
+    const focusSpy = jest.spyOn(component.searchInput.nativeElement, 'focus')
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: '/' }))
+    expect(focusSpy).toHaveBeenCalled()
+
+    component.searchResults = searchResults as any
+    component.resultsDropdown.open()
+    fixture.detectChanges()
+
+    component['currentItemIndex'] = 0
+    component['setCurrentItem']()
+    const firstItemFocusSpy = jest.spyOn(
+      component.primaryButtons.get(1).nativeElement,
+      'focus'
+    )
+    component.dropdownKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    expect(component['currentItemIndex']).toBe(1)
+    expect(firstItemFocusSpy).toHaveBeenCalled()
+
+    const secondaryItemFocusSpy = jest.spyOn(
+      component.secondaryButtons.get(1).nativeElement,
+      'focus'
+    )
+    component.dropdownKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowRight' })
+    )
+    expect(secondaryItemFocusSpy).toHaveBeenCalled()
+
+    component.dropdownKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowLeft' })
+    )
+    expect(firstItemFocusSpy).toHaveBeenCalled()
+
+    const zeroItemSpy = jest.spyOn(
+      component.primaryButtons.get(0).nativeElement,
+      'focus'
+    )
+    component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+    expect(component['currentItemIndex']).toBe(0)
+    expect(zeroItemSpy).toHaveBeenCalled()
+
+    const inputFocusSpy = jest.spyOn(
+      component.searchInput.nativeElement,
+      'focus'
+    )
+    component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
+    expect(component['currentItemIndex']).toBe(-1)
+    expect(inputFocusSpy).toHaveBeenCalled()
+
+    component.dropdownKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    component['currentItemIndex'] = searchResults.total - 1
+    component['setCurrentItem']()
+    component.dropdownKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    expect(component['currentItemIndex']).toBe(-1)
+
+    // Search input
+
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowUp' })
+    )
+    expect(component['currentItemIndex']).toBe(searchResults.total - 1)
+
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    expect(component['currentItemIndex']).toBe(0)
+
+    component.searchResults = { total: 1 } as any
+    const primaryActionSpy = jest.spyOn(component, 'primaryAction')
+    component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(primaryActionSpy).toHaveBeenCalled()
+
+    component.query = 'test'
+    const resetSpy = jest.spyOn(GlobalSearchComponent.prototype as any, 'reset')
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'Escape' })
+    )
+    expect(resetSpy).toHaveBeenCalled()
+
+    component.query = ''
+    const blurSpy = jest.spyOn(component.searchInput.nativeElement, 'blur')
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'Escape' })
+    )
+    expect(blurSpy).toHaveBeenCalled()
+
+    component.searchResults = { total: 1 } as any
+    component.resultsDropdown.open()
+
+    component.searchInputKeyDown(
+      new KeyboardEvent('keydown', { key: 'ArrowDown' })
+    )
+    expect(component['currentItemIndex']).toBe(0)
+    const closeSpy = jest.spyOn(component.resultsDropdown, 'close')
+    component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
+    expect(closeSpy).toHaveBeenCalled()
+
+    component.searchResults = searchResults as any
+    component.resultsDropdown.open()
+    component.query = 'test'
+    const advancedSearchSpy = jest.spyOn(component, 'runFullSearch')
+    component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
+    expect(advancedSearchSpy).toHaveBeenCalled()
+  })
+
+  it('should search on query debounce', fakeAsync(() => {
+    const query = 'test'
+    const searchSpy = jest.spyOn(searchService, 'globalSearch')
+    searchSpy.mockReturnValue(of({} as any))
+    const dropdownOpenSpy = jest.spyOn(component.resultsDropdown, 'open')
+    component.queryDebounce.next(query)
+    tick(401)
+    expect(searchSpy).toHaveBeenCalledWith(query)
+    expect(dropdownOpenSpy).toHaveBeenCalled()
+  }))
+
+  it('should support primary action', () => {
+    const object = { id: 1 }
+    const routerSpy = jest.spyOn(router, 'navigate')
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+
+    component.primaryAction(DataType.Document, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents', object.id], {})
+
+    component.primaryAction(DataType.SavedView, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/view', object.id], {})
+
+    component.primaryAction(DataType.Correspondent, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: Object.assign(
+        {
+          page: 1,
+          reverse: 1,
+          sort: 'created',
+        },
+        queryParamsFromFilterRules([
+          {
+            rule_type: FILTER_HAS_CORRESPONDENT_ANY,
+            value: object.id.toString(),
+          },
+        ])
+      ),
+    })
+
+    component.primaryAction(DataType.DocumentType, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: Object.assign(
+        {
+          page: 1,
+          reverse: 1,
+          sort: 'created',
+        },
+        queryParamsFromFilterRules([
+          {
+            rule_type: FILTER_HAS_DOCUMENT_TYPE_ANY,
+            value: object.id.toString(),
+          },
+        ])
+      ),
+    })
+
+    component.primaryAction(DataType.StoragePath, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: Object.assign(
+        {
+          page: 1,
+          reverse: 1,
+          sort: 'created',
+        },
+        queryParamsFromFilterRules([
+          {
+            rule_type: FILTER_HAS_STORAGE_PATH_ANY,
+            value: object.id.toString(),
+          },
+        ])
+      ),
+    })
+
+    component.primaryAction(DataType.Tag, object)
+    expect(routerSpy).toHaveBeenCalledWith(['/documents'], {
+      queryParams: Object.assign(
+        {
+          page: 1,
+          reverse: 1,
+          sort: 'created',
+        },
+        queryParamsFromFilterRules([
+          { rule_type: FILTER_HAS_TAGS_ALL, value: object.id.toString() },
+        ])
+      ),
+    })
+
+    component.primaryAction(DataType.User, object)
+    expect(modalSpy).toHaveBeenCalledWith(UserEditDialogComponent, {
+      size: 'lg',
+    })
+
+    component.primaryAction(DataType.Group, object)
+    expect(modalSpy).toHaveBeenCalledWith(GroupEditDialogComponent, {
+      size: 'lg',
+    })
+
+    component.primaryAction(DataType.MailAccount, object)
+    expect(modalSpy).toHaveBeenCalledWith(MailAccountEditDialogComponent, {
+      size: 'xl',
+    })
+
+    component.primaryAction(DataType.MailRule, object)
+    expect(modalSpy).toHaveBeenCalledWith(MailRuleEditDialogComponent, {
+      size: 'xl',
+    })
+
+    component.primaryAction(DataType.CustomField, object)
+    expect(modalSpy).toHaveBeenCalledWith(CustomFieldEditDialogComponent, {
+      size: 'md',
+    })
+
+    component.primaryAction(DataType.Workflow, object)
+    expect(modalSpy).toHaveBeenCalledWith(WorkflowEditDialogComponent, {
+      size: 'xl',
+    })
+
+    const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+
+    // fail first
+    editDialog.failed.emit({ error: 'error creating item' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    // succeed
+    editDialog.succeeded.emit(object as any)
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
+
+  it('should support secondary action', () => {
+    const doc = searchResults.documents[0]
+    const openSpy = jest.spyOn(window, 'open')
+    component.secondaryAction('document', doc)
+    expect(openSpy).toHaveBeenCalledWith(documentService.getDownloadUrl(doc.id))
+
+    const correspondent = searchResults.correspondents[0]
+    const modalSpy = jest.spyOn(modalService, 'open')
+
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+
+    component.secondaryAction(DataType.Correspondent, correspondent)
+    expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
+      size: 'md',
+    })
+
+    component.secondaryAction(
+      DataType.DocumentType,
+      searchResults.document_types[0]
+    )
+    expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
+      size: 'md',
+    })
+
+    component.secondaryAction(
+      DataType.StoragePath,
+      searchResults.storage_paths[0]
+    )
+    expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
+      size: 'md',
+    })
+
+    component.secondaryAction(DataType.Tag, searchResults.tags[0])
+    expect(modalSpy).toHaveBeenCalledWith(CorrespondentEditDialogComponent, {
+      size: 'md',
+    })
+
+    const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+
+    // fail first
+    editDialog.failed.emit({ error: 'error creating item' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    // succeed
+    editDialog.succeeded.emit(searchResults.tags[0] as any)
+    expect(toastInfoSpy).toHaveBeenCalled()
+  })
+
+  it('should support reset', () => {
+    const debounce = jest.spyOn(component.queryDebounce, 'next')
+    const closeSpy = jest.spyOn(component.resultsDropdown, 'close')
+    component['reset'](true)
+    expect(debounce).toHaveBeenCalledWith(null)
+    expect(component.searchResults).toBeNull()
+    expect(component['currentItemIndex']).toBe(-1)
+    expect(closeSpy).toHaveBeenCalled()
+  })
+
+  it('should support focus current item', () => {
+    component.searchResults = searchResults as any
+    fixture.detectChanges()
+    const focusSpy = jest.spyOn(
+      component.primaryButtons.get(0).nativeElement,
+      'focus'
+    )
+    component['currentItemIndex'] = 0
+    component['setCurrentItem']()
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('should reset on dropdown close', () => {
+    const resetSpy = jest.spyOn(GlobalSearchComponent.prototype as any, 'reset')
+    component.onDropdownOpenChange(false)
+    expect(resetSpy).toHaveBeenCalled()
+  })
+
+  it('should focus button on dropdown item hover', () => {
+    component.searchResults = searchResults as any
+    fixture.detectChanges()
+    const item: ElementRef = component.resultItems.first
+    const focusSpy = jest.spyOn(
+      component.primaryButtons.first.nativeElement,
+      'focus'
+    )
+    component.onItemHover({ currentTarget: item.nativeElement } as any)
+    expect(component['currentItemIndex']).toBe(0)
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('should focus on button hover', () => {
+    const event = { currentTarget: { focus: jest.fn() } }
+    const focusSpy = jest.spyOn(event.currentTarget, 'focus')
+    component.onButtonHover(event as any)
+    expect(focusSpy).toHaveBeenCalled()
+  })
+
+  it('should support open in new window', () => {
+    const openSpy = jest.spyOn(window, 'open')
+    const event = new Event('click')
+    event['ctrlKey'] = true
+    component.primaryAction(DataType.Document, { id: 2 }, event as any)
+    expect(openSpy).toHaveBeenCalledWith('/documents/2', '_blank')
+
+    component.searchResults = searchResults as any
+    component.resultsDropdown.open()
+    fixture.detectChanges()
+
+    const button = component.primaryButtons.get(0).nativeElement
+    const keyboardEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      ctrlKey: true,
+    })
+    const dispatchSpy = jest.spyOn(button, 'dispatchEvent')
+    button.dispatchEvent(keyboardEvent)
+    expect(dispatchSpy).toHaveBeenCalledTimes(2) // once for keydown, second for click
+  })
+
+  it('should support using base href in navigateOrOpenInNewWindow', () => {
+    jest
+      .spyOn(component['locationStrategy'], 'getBaseHref')
+      .mockReturnValue('/base/')
+    const openSpy = jest.spyOn(window, 'open')
+    const event = new Event('click')
+    event['ctrlKey'] = true
+    component.primaryAction(DataType.Document, { id: 1 }, event as any)
+    expect(openSpy).toHaveBeenCalledWith('/base/documents/1', '_blank')
+  })
+
+  it('should support title content search and advanced search', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.query = 'test'
+    component.runFullSearch()
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_TITLE_CONTENT, value: 'test' },
+    ])
+
+    settingsService.set(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE,
+      GlobalSearchType.ADVANCED
+    )
+    component.query = 'test'
+    component.runFullSearch()
+    expect(qfSpy).toHaveBeenCalledWith([
+      { rule_type: FILTER_FULLTEXT_QUERY, value: 'test' },
+    ])
+  })
+})

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

@@ -0,0 +1,437 @@
+import { LocationStrategy, NgTemplateOutlet } from '@angular/common'
+import {
+  Component,
+  ElementRef,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  inject,
+} from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import {
+  NgbDropdown,
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
+import { DataType } from 'src/app/data/datatype'
+import {
+  FILTER_FULLTEXT_QUERY,
+  FILTER_HAS_CORRESPONDENT_ANY,
+  FILTER_HAS_DOCUMENT_TYPE_ANY,
+  FILTER_HAS_STORAGE_PATH_ANY,
+  FILTER_HAS_TAGS_ALL,
+  FILTER_TITLE_CONTENT,
+} from 'src/app/data/filter-rule-type'
+import { ObjectWithId } from 'src/app/data/object-with-id'
+import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { HotKeyService } from 'src/app/services/hot-key.service'
+import {
+  PermissionAction,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import {
+  GlobalSearchResult,
+  SearchService,
+} from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { paramsFromViewState } from 'src/app/utils/query-params'
+import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
+import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
+import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
+import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
+import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
+
+@Component({
+  selector: 'pngx-global-search',
+  templateUrl: './global-search.component.html',
+  styleUrl: './global-search.component.scss',
+  imports: [
+    CustomDatePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+    NgTemplateOutlet,
+  ],
+})
+export class GlobalSearchComponent implements OnInit {
+  searchService = inject(SearchService)
+  private router = inject(Router)
+  private modalService = inject(NgbModal)
+  private documentService = inject(DocumentService)
+  private documentListViewService = inject(DocumentListViewService)
+  private permissionsService = inject(PermissionsService)
+  private toastService = inject(ToastService)
+  private hotkeyService = inject(HotKeyService)
+  private settingsService = inject(SettingsService)
+  private locationStrategy = inject(LocationStrategy)
+
+  public DataType = DataType
+  public query: string
+  public queryDebounce: Subject<string>
+  public searchResults: GlobalSearchResult
+  private currentItemIndex: number = -1
+  private domIndex: number = -1
+  public loading: boolean = false
+
+  @ViewChild('searchInput') searchInput: ElementRef
+  @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
+  @ViewChildren('resultItem') resultItems: QueryList<ElementRef>
+  @ViewChildren('primaryButton') primaryButtons: QueryList<ElementRef>
+  @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
+
+  get useAdvancedForFullSearch(): boolean {
+    return (
+      this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
+      GlobalSearchType.ADVANCED
+    )
+  }
+
+  constructor() {
+    this.queryDebounce = new Subject<string>()
+
+    this.queryDebounce
+      .pipe(
+        debounceTime(400),
+        filter((query) => !query?.length || query?.length > 2),
+        distinctUntilChanged()
+      )
+      .subscribe((text) => {
+        this.query = text
+        if (text) this.search(text)
+      })
+  }
+
+  public ngOnInit() {
+    this.hotkeyService
+      .addShortcut({ keys: '/', description: $localize`Global search` })
+      .subscribe(() => {
+        this.searchInput.nativeElement.focus()
+      })
+  }
+
+  private search(query: string) {
+    this.loading = true
+    this.searchService.globalSearch(query.trim()).subscribe((results) => {
+      this.searchResults = results
+      this.loading = false
+      this.resultsDropdown.open()
+    })
+  }
+
+  public primaryAction(
+    type: string,
+    object: ObjectWithId,
+    event: PointerEvent = null
+  ) {
+    const newWindow = event?.metaKey || event?.ctrlKey
+    this.reset(true)
+    let filterRuleType: number
+    let editDialogComponent: any
+    let size: string = 'md'
+    switch (type) {
+      case DataType.Document:
+        this.navigateOrOpenInNewWindow(['/documents', object.id], newWindow)
+        return
+      case DataType.SavedView:
+        this.navigateOrOpenInNewWindow(['/view', object.id], newWindow)
+        return
+      case DataType.Correspondent:
+        filterRuleType = FILTER_HAS_CORRESPONDENT_ANY
+        break
+      case DataType.DocumentType:
+        filterRuleType = FILTER_HAS_DOCUMENT_TYPE_ANY
+        break
+      case DataType.StoragePath:
+        filterRuleType = FILTER_HAS_STORAGE_PATH_ANY
+        break
+      case DataType.Tag:
+        filterRuleType = FILTER_HAS_TAGS_ALL
+        break
+      case DataType.User:
+        editDialogComponent = UserEditDialogComponent
+        size = 'lg'
+        break
+      case DataType.Group:
+        editDialogComponent = GroupEditDialogComponent
+        size = 'lg'
+        break
+      case DataType.MailAccount:
+        editDialogComponent = MailAccountEditDialogComponent
+        size = 'xl'
+        break
+      case DataType.MailRule:
+        editDialogComponent = MailRuleEditDialogComponent
+        size = 'xl'
+        break
+      case DataType.CustomField:
+        editDialogComponent = CustomFieldEditDialogComponent
+        break
+      case DataType.Workflow:
+        editDialogComponent = WorkflowEditDialogComponent
+        size = 'xl'
+        break
+    }
+
+    if (filterRuleType) {
+      let params = paramsFromViewState({
+        filterRules: [
+          { rule_type: filterRuleType, value: object.id.toString() },
+        ],
+        currentPage: 1,
+        sortField: this.documentListViewService.sortField ?? 'created',
+        sortReverse: this.documentListViewService.sortReverse,
+      })
+      this.navigateOrOpenInNewWindow(['/documents'], newWindow, {
+        queryParams: params,
+      })
+    } else if (editDialogComponent) {
+      const modalRef: NgbModalRef = this.modalService.open(
+        editDialogComponent,
+        { size }
+      )
+      modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
+      modalRef.componentInstance.object = object
+      modalRef.componentInstance.succeeded.subscribe(() => {
+        this.toastService.showInfo($localize`Successfully updated object.`)
+      })
+      modalRef.componentInstance.failed.subscribe((e) => {
+        this.toastService.showError($localize`Error occurred saving object.`, e)
+      })
+    }
+  }
+
+  public secondaryAction(type: string, object: ObjectWithId) {
+    this.reset(true)
+    let editDialogComponent: any
+    let size: string = 'md'
+    switch (type) {
+      case DataType.Document:
+        window.open(this.documentService.getDownloadUrl(object.id))
+        break
+      case DataType.Correspondent:
+        editDialogComponent = CorrespondentEditDialogComponent
+        break
+      case DataType.DocumentType:
+        editDialogComponent = DocumentTypeEditDialogComponent
+        break
+      case DataType.StoragePath:
+        editDialogComponent = StoragePathEditDialogComponent
+        break
+      case DataType.Tag:
+        editDialogComponent = TagEditDialogComponent
+        break
+    }
+
+    if (editDialogComponent) {
+      const modalRef: NgbModalRef = this.modalService.open(
+        editDialogComponent,
+        { size }
+      )
+      modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
+      modalRef.componentInstance.object = object
+      modalRef.componentInstance.succeeded.subscribe(() => {
+        this.toastService.showInfo($localize`Successfully updated object.`)
+      })
+      modalRef.componentInstance.failed.subscribe((e) => {
+        this.toastService.showError($localize`Error occurred saving object.`, e)
+      })
+    }
+  }
+
+  private reset(close: boolean = false) {
+    this.queryDebounce.next(null)
+    this.query = null
+    this.searchResults = null
+    this.currentItemIndex = -1
+    if (close) {
+      this.resultsDropdown.close()
+    }
+  }
+
+  private setCurrentItem() {
+    // QueryLists do not always reflect the current DOM order, so we need to find the actual element
+    // Yes, using some vanilla JS
+    const result: HTMLElement = this.resultItems.first.nativeElement.parentNode
+      .querySelectorAll('.dropdown-item')
+      .item(this.currentItemIndex)
+    this.domIndex = this.resultItems
+      .toArray()
+      .indexOf(this.resultItems.find((item) => item.nativeElement === result))
+    const item: ElementRef = this.primaryButtons.get(this.domIndex)
+    item.nativeElement.focus()
+  }
+
+  public onItemHover(event: MouseEvent) {
+    const item: ElementRef = this.resultItems
+      .toArray()
+      .find((item) => item.nativeElement === event.currentTarget)
+    this.currentItemIndex = this.resultItems.toArray().indexOf(item)
+    this.setCurrentItem()
+  }
+
+  public onButtonHover(event: MouseEvent) {
+    ;(event.currentTarget as HTMLElement).focus()
+  }
+
+  public searchInputKeyDown(event: KeyboardEvent) {
+    if (
+      event.key === 'ArrowDown' &&
+      this.searchResults?.total &&
+      this.resultsDropdown.isOpen()
+    ) {
+      event.preventDefault()
+      this.currentItemIndex = 0
+      this.setCurrentItem()
+    } else if (
+      event.key === 'ArrowUp' &&
+      this.searchResults?.total &&
+      this.resultsDropdown.isOpen()
+    ) {
+      event.preventDefault()
+      this.currentItemIndex = this.searchResults.total - 1
+      this.setCurrentItem()
+    } else if (event.key === 'Enter') {
+      if (this.searchResults?.total === 1 && this.resultsDropdown.isOpen()) {
+        this.primaryButtons.first.nativeElement.click()
+        this.searchInput.nativeElement.blur()
+      } else if (this.query?.length) {
+        this.runFullSearch()
+        this.reset(true)
+      }
+    } else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
+      if (this.query?.length) {
+        this.reset(true)
+      } else {
+        this.searchInput.nativeElement.blur()
+      }
+    }
+  }
+
+  public dropdownKeyDown(event: KeyboardEvent) {
+    if (
+      this.searchResults?.total &&
+      this.resultsDropdown.isOpen() &&
+      document.activeElement !== this.searchInput.nativeElement
+    ) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        if (this.currentItemIndex < this.searchResults.total - 1) {
+          this.currentItemIndex++
+          this.setCurrentItem()
+        } else {
+          this.searchInput.nativeElement.focus()
+          this.currentItemIndex = -1
+        }
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        if (this.currentItemIndex > 0) {
+          this.currentItemIndex--
+          this.setCurrentItem()
+        } else {
+          this.searchInput.nativeElement.focus()
+          this.currentItemIndex = -1
+        }
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        this.secondaryButtons.get(this.domIndex)?.nativeElement.focus()
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        this.primaryButtons.get(this.domIndex).nativeElement.focus()
+      } else if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopImmediatePropagation()
+        this.reset(true)
+        this.searchInput.nativeElement.focus()
+      }
+    }
+  }
+
+  public onButtonKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.target.dispatchEvent(new MouseEvent('click', { ctrlKey: true }))
+    }
+  }
+
+  public onDropdownOpenChange(open: boolean) {
+    if (!open) {
+      this.reset()
+    }
+  }
+
+  public disablePrimaryButton(type: DataType, object: ObjectWithId): boolean {
+    if (
+      [
+        DataType.Workflow,
+        DataType.CustomField,
+        DataType.Group,
+        DataType.User,
+      ].includes(type)
+    ) {
+      return !this.permissionsService.currentUserHasObjectPermissions(
+        PermissionAction.Change,
+        object
+      )
+    }
+
+    return false
+  }
+
+  public disableSecondaryButton(type: DataType, object: ObjectWithId): boolean {
+    if (DataType.Document === type) {
+      return false
+    }
+
+    return !this.permissionsService.currentUserHasObjectPermissions(
+      PermissionAction.Change,
+      object
+    )
+  }
+
+  public runFullSearch() {
+    const ruleType = this.useAdvancedForFullSearch
+      ? FILTER_FULLTEXT_QUERY
+      : FILTER_TITLE_CONTENT
+    this.documentListViewService.quickFilter([
+      { rule_type: ruleType, value: this.query },
+    ])
+    this.reset(true)
+  }
+
+  private navigateOrOpenInNewWindow(
+    commands: any,
+    newWindow: boolean = false,
+    extras: Object = {}
+  ) {
+    if (newWindow) {
+      const serializedUrl = this.router.serializeUrl(
+        this.router.createUrlTree(commands, extras)
+      )
+      const baseHref = this.locationStrategy.getBaseHref()
+      const fullUrl =
+        baseHref.replace(/\/+$/, '') + '/' + serializedUrl.replace(/^\/+/, '')
+      window.open(fullUrl, '_blank')
+    } else {
+      this.router.navigate(commands, extras)
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+
+<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
+  @if (toasts.length) {
+    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts.length }}</span>
+  }
+  <button class="btn border-0" id="notificationsDropdown" ngbDropdownToggle>
+    <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
+  </button>
+  <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="notificationsDropdown">
+    <div class="btn-toolbar align-items-center" role="toolbar">
+      <h6 i18n>Notifications</h6>
+      <div class="btn-group ms-auto">
+        <button class="btn btn-sm btn-outline-secondary mb-2 ms-auto"
+          (click)="toastService.clearToasts()"
+          [disabled]="toasts.length === 0"
+          i18n>Clear All</button>
+      </div>
+    </div>
+    @if (toasts.length === 0) {
+      <p class="text-center mb-0 small text-muted"><em i18n>No notifications</em></p>
+    }
+    <div class="scroll-list">
+      @for (toast of toasts; track toast.id) {
+        <pngx-toast [autohide]="false" [toast]="toast" (hidden)="onHidden(toast)" (closed)="toastService.closeToast(toast)"></pngx-toast>
+      }
+      </div>
+  </div>
+</li>

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

@@ -0,0 +1,22 @@
+.dropdown-menu {
+  width: var(--pngx-toast-max-width);
+}
+
+.dropdown-menu .scroll-list {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-item {
+  white-space: initial;
+}
+
+@media screen and (max-width: 400px) {
+  :host ::ng-deep .dropdown-menu-end {
+    right: -3rem;
+  }
+}

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

@@ -0,0 +1,112 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  discardPeriodicTasks,
+  fakeAsync,
+  flush,
+} from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ToastsDropdownComponent } from './toasts-dropdown.component'
+
+const toasts = [
+  {
+    id: 'abc-123',
+    content: 'foo bar',
+    delay: 5000,
+  },
+  {
+    id: 'def-123',
+    content: 'Error 1 content',
+    delay: 5000,
+    error: 'Error 1 string',
+  },
+  {
+    id: 'ghi-123',
+    content: 'Error 2 content',
+    delay: 5000,
+    error: {
+      url: 'https://example.com',
+      status: 500,
+      statusText: 'Internal Server Error',
+      message: 'Internal server error 500 message',
+      error: { detail: 'Error 2 message details' },
+    },
+  },
+]
+
+describe('ToastsDropdownComponent', () => {
+  let component: ToastsDropdownComponent
+  let fixture: ComponentFixture<ToastsDropdownComponent>
+  let toastService: ToastService
+  let toastsSubject: Subject<Toast[]> = new Subject()
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        ToastsDropdownComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ToastsDropdownComponent)
+    toastService = TestBed.inject(ToastService)
+    jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject)
+
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should call getToasts and return toasts', fakeAsync(() => {
+    const spy = jest.spyOn(toastService, 'getToasts')
+
+    component.ngOnInit()
+    toastsSubject.next(toasts)
+    fixture.detectChanges()
+
+    expect(spy).toHaveBeenCalled()
+    expect(component.toasts).toContainEqual({
+      id: 'abc-123',
+      content: 'foo bar',
+      delay: 5000,
+    })
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+
+  it('should show a toast', fakeAsync(() => {
+    component.ngOnInit()
+    toastsSubject.next(toasts)
+    fixture.detectChanges()
+
+    expect(fixture.nativeElement.textContent).toContain('foo bar')
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+
+  it('should toggle suppressPopupToasts', fakeAsync((finish) => {
+    component.ngOnInit()
+    fixture.detectChanges()
+    toastsSubject.next(toasts)
+
+    const spy = jest.spyOn(toastService, 'suppressPopupToasts', 'set')
+    component.onOpenChange(true)
+    expect(spy).toHaveBeenCalledWith(true)
+
+    component.ngOnDestroy()
+    flush()
+    discardPeriodicTasks()
+  }))
+})

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

@@ -0,0 +1,42 @@
+import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import {
+  NgbDropdownModule,
+  NgbProgressbarModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subscription } from 'rxjs'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ToastComponent } from '../../common/toast/toast.component'
+
+@Component({
+  selector: 'pngx-toasts-dropdown',
+  templateUrl: './toasts-dropdown.component.html',
+  styleUrls: ['./toasts-dropdown.component.scss'],
+  imports: [
+    ToastComponent,
+    NgbDropdownModule,
+    NgbProgressbarModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class ToastsDropdownComponent implements OnInit, OnDestroy {
+  toastService = inject(ToastService)
+
+  private subscription: Subscription
+
+  public toasts: Toast[] = []
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe()
+  }
+
+  ngOnInit(): void {
+    this.subscription = this.toastService.getToasts().subscribe((toasts) => {
+      this.toasts = [...toasts]
+    })
+  }
+
+  onOpenChange(open: boolean): void {
+    this.toastService.suppressPopupToasts = open
+  }
+}

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html

@@ -0,0 +1,11 @@
+@if (active) {
+  <button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
+    @if (!isNumbered && selected) {
+      <i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
+    }
+    @if (isNumbered) {
+      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    }
+    <i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
+  </button>
+}

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.scss

@@ -0,0 +1,28 @@
+.badge {
+    min-width: 20px;
+    min-height: 20px;
+}
+
+.x {
+    display: none;
+}
+
+.number {
+    min-width: 1em;
+    min-height: 1em;
+    display: inline-block;
+}
+
+button:hover {
+    .check,
+    .number {
+        opacity: 0 !important;
+    }
+
+    .x {
+        display: inline-block;
+        position: absolute;
+        top: .4em;
+        left: calc(50% - .4em);
+    }
+}

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.spec.ts

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ClearableBadgeComponent } from './clearable-badge.component'
+
+describe('ClearableBadgeComponent', () => {
+  let component: ClearableBadgeComponent
+  let fixture: ComponentFixture<ClearableBadgeComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        ClearableBadgeComponent,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ClearableBadgeComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support selected', () => {
+    component.selected = true
+    expect(component.active).toBeTruthy()
+  })
+
+  it('should support numbered', () => {
+    component.number = 3
+    fixture.detectChanges()
+    expect(component.active).toBeTruthy()
+    expect((fixture.nativeElement as HTMLDivElement).textContent).toContain('3')
+  })
+
+  it('should support selected', () => {
+    let clearedResult
+    component.selected = true
+    fixture.detectChanges()
+    component.cleared.subscribe((clear) => {
+      clearedResult = clear
+    })
+    fixture.nativeElement
+      .querySelectorAll('button')[0]
+      .dispatchEvent(new MouseEvent('click'))
+    expect(clearedResult).toBeTruthy()
+  })
+})

src-ui/src/app/components/common/clearable-badge/clearable-badge.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+
+@Component({
+  selector: 'pngx-clearable-badge',
+  templateUrl: './clearable-badge.component.html',
+  styleUrls: ['./clearable-badge.component.scss'],
+  imports: [NgxBootstrapIconsModule],
+})
+export class ClearableBadgeComponent {
+  constructor() {}
+
+  @Input()
+  number: number
+
+  @Input()
+  selected: boolean
+
+  @Output()
+  cleared: EventEmitter<boolean> = new EventEmitter()
+
+  get active(): boolean {
+    return this.selected || this.number > -1
+  }
+
+  get isNumbered(): boolean {
+    return this.number > -1
+  }
+
+  onClick(event: PointerEvent) {
+    this.cleared.emit(true)
+    event.stopImmediatePropagation()
+    event.preventDefault()
+  }
+}

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

@@ -0,0 +1,22 @@
+<button
+    type="button"
+    class="btn {{buttonClasses}}"
+    (click)="onClick($event)"
+    [disabled]="disabled"
+    [ngbPopover]="popoverContent"
+    [autoClose]="true"
+    (hidden)="confirming = false"
+    #popover="ngbPopover"
+    popoverClass="popover-slim"
+>
+    @if (iconName) {
+        <i-bs [class.me-1]="label" name="{{iconName}}"></i-bs>
+    }
+    <ng-container>{{label}}</ng-container>
+</button>
+
+<ng-template #popoverContent>
+    <div>
+        {{confirmMessage}}&nbsp;<button class="btn btn-link btn-sm text-danger p-0 m-0 lh-1" type="button" (click)="onConfirm($event)">Yes</button>
+    </div>
+</ng-template>

src-ui/src/app/components/common/confirm-button/confirm-button.component.scss

@@ -0,0 +1,12 @@
+// Taken from bootstrap rules, obv
+::ng-deep .input-group > pngx-confirm-button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > button,
+::ng-deep .btn-group > pngx-confirm-button:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) > button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  ::ng-deep .input-group:not(.has-validation) > pngx-confirm-button:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > button,
+  ::ng-deep .btn-group:not(.has-validation) > pngx-confirm-button:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) > button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }

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

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from './confirm-button.component'
+
+describe('ConfirmButtonComponent', () => {
+  let component: ConfirmButtonComponent
+  let fixture: ComponentFixture<ConfirmButtonComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        ConfirmButtonComponent,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(ConfirmButtonComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should show confirm on click', () => {
+    expect(component.popover.isOpen()).toBeFalsy()
+    expect(component.confirming).toBeFalsy()
+    component.onClick(new MouseEvent('click'))
+    expect(component.popover.isOpen()).toBeTruthy()
+    expect(component.confirming).toBeTruthy()
+  })
+
+  it('should emit confirm on confirm', () => {
+    const confirmSpy = jest.spyOn(component.confirm, 'emit')
+    component.onConfirm(new MouseEvent('click'))
+    expect(confirmSpy).toHaveBeenCalled()
+    expect(component.popover.isOpen()).toBeFalsy()
+    expect(component.confirming).toBeFalsy()
+  })
+})

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

@@ -0,0 +1,57 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+
+@Component({
+  selector: 'pngx-confirm-button',
+  templateUrl: './confirm-button.component.html',
+  styleUrl: './confirm-button.component.scss',
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule],
+})
+export class ConfirmButtonComponent {
+  @Input()
+  label: string
+
+  @Input()
+  confirmMessage: string = $localize`Are you sure?`
+
+  @Input()
+  buttonClasses: string = 'btn-primary'
+
+  @Input()
+  iconName: string
+
+  @Input()
+  disabled: boolean = false
+
+  @Output()
+  confirm: EventEmitter<void> = new EventEmitter<void>()
+
+  @ViewChild('popover') popover: NgbPopover
+
+  public confirming: boolean = false
+
+  public onClick(event: MouseEvent) {
+    if (!this.confirming) {
+      this.confirming = true
+      this.popover.open()
+    }
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+
+  public onConfirm(event: MouseEvent) {
+    this.confirm.emit()
+    this.confirming = false
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+}

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

@@ -0,0 +1,32 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+  </button>
+</div>
+<div class="modal-body">
+  @if (messageBold) {
+    <p><b>{{messageBold}}</b></p>
+  }
+  @if (message) {
+    <p class="mb-0" [innerHTML]="message | safeHtml"></p>
+  }
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+      </button>
+  <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+    <span>
+      {{btnCaption}}
+      <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
+    </span>
+    @if (!confirmButtonEnabled) {
+      <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+    }
+  </button>
+  @if (alternativeBtnCaption) {
+    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
+      {{alternativeBtnCaption}}
+    </button>
+  }
+</div>

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

@@ -0,0 +1,82 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Subject } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { ConfirmDialogComponent } from './confirm-dialog.component'
+
+describe('ConfirmDialogComponent', () => {
+  let component: ConfirmDialogComponent
+  let modal: NgbActiveModal
+  let fixture: ComponentFixture<ConfirmDialogComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      providers: [NgbActiveModal, SafeHtmlPipe],
+      imports: [ConfirmDialogComponent, SafeHtmlPipe],
+    }).compileComponents()
+
+    modal = TestBed.inject(NgbActiveModal)
+
+    fixture = TestBed.createComponent(ConfirmDialogComponent)
+    component = fixture.componentInstance
+    component.title = 'Confirm delete'
+    component.messageBold = 'Do you really want to delete document file.pdf?'
+    component.message =
+      'The files for this document will be deleted permanently. This operation cannot be undone.'
+    component.btnClass = 'btn-danger'
+    component.btnCaption = 'Delete document'
+
+    fixture.detectChanges()
+  })
+
+  it('should support alternative', () => {
+    let alternativeClickedResult
+    let alternativeSubjectResult
+    component.alternativeClicked.subscribe((result) => {
+      alternativeClickedResult = true
+    })
+    component.alternative()
+    // with subject
+    const subject = new Subject<boolean>()
+    component.alternativeSubject = subject
+    subject.asObservable().subscribe((result) => {
+      alternativeSubjectResult = result
+    })
+    component.alternative()
+    expect(alternativeClickedResult).toBeTruthy()
+    expect(alternativeSubjectResult).toBeTruthy()
+  })
+
+  it('should support confirm', () => {
+    let confirmClickedResult
+    let confirmSubjectResult
+    component.confirmClicked.subscribe((result) => {
+      confirmClickedResult = true
+    })
+    component.confirm()
+    // with subject
+    const subject = new Subject<boolean>()
+    component.confirmSubject = subject
+    subject.asObservable().subscribe((result) => {
+      confirmSubjectResult = result
+    })
+    component.confirm()
+    expect(confirmClickedResult).toBeTruthy()
+    expect(confirmSubjectResult).toBeTruthy()
+  })
+
+  it('should support cancel & close modal', () => {
+    let confirmSubjectResult
+    const closeModalSpy = jest.spyOn(modal, 'close')
+    component.cancel()
+    const subject = new Subject<boolean>()
+    component.confirmSubject = subject
+    subject.asObservable().subscribe((result) => {
+      confirmSubjectResult = result
+    })
+    component.cancel()
+    // with subject
+    expect(closeModalSpy).toHaveBeenCalled()
+    expect(confirmSubjectResult).toBeFalsy()
+  })
+})

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

@@ -0,0 +1,78 @@
+import { DecimalPipe } from '@angular/common'
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Subject } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-confirm-dialog',
+  templateUrl: './confirm-dialog.component.html',
+  styleUrls: ['./confirm-dialog.component.scss'],
+  imports: [DecimalPipe, SafeHtmlPipe],
+})
+export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
+  activeModal = inject(NgbActiveModal)
+
+  @Output()
+  public confirmClicked = new EventEmitter()
+
+  @Output()
+  public alternativeClicked = new EventEmitter()
+
+  @Input()
+  title = $localize`Confirmation`
+
+  @Input()
+  messageBold
+
+  @Input()
+  message
+
+  @Input()
+  btnClass = 'btn-primary'
+
+  @Input()
+  btnCaption = $localize`Confirm`
+
+  @Input()
+  alternativeBtnClass = 'btn-secondary'
+
+  @Input()
+  alternativeBtnCaption
+
+  @Input()
+  cancelBtnClass = 'btn-outline-secondary'
+
+  @Input()
+  cancelBtnCaption = $localize`Cancel`
+
+  @Input()
+  buttonsEnabled = true
+
+  confirmButtonEnabled = true
+  alternativeButtonEnabled = true
+  seconds = 0
+  secondsTotal = 0
+
+  confirmSubject: Subject<boolean>
+  alternativeSubject: Subject<boolean>
+
+  cancel() {
+    this.confirmSubject?.next(false)
+    this.confirmSubject?.complete()
+    this.activeModal.close()
+  }
+
+  confirm() {
+    this.confirmClicked.emit()
+    this.confirmSubject?.next(true)
+    this.confirmSubject?.complete()
+  }
+
+  alternative() {
+    this.alternativeClicked.emit()
+    this.alternativeSubject?.next(true)
+    this.alternativeSubject?.complete()
+  }
+}

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

@@ -0,0 +1,49 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <p>{{message}}</p>
+    <div class="form-group">
+        <label class="form-label" for="metadataDocumentID" i18n>Documents:</label>
+        <ul class="list-group"
+            cdkDropList
+            (cdkDropListDropped)="onDrop($event)">
+            @for (documentID of documentIDs; track documentID) {
+                <li class="list-group-item" cdkDrag>
+                    <i-bs name="grip-vertical" class="me-2"></i-bs>
+                    {{getDocument(documentID)?.title}}
+                </li>
+            }
+        </ul>
+        </div>
+    <div class="form-group mt-4">
+        <label class="form-label" for="metadataDocumentID" i18n>Use metadata from:</label>
+        <select class="form-select" [(ngModel)]="metadataDocumentID">
+            <option [ngValue]="-1" i18n>Regenerate all metadata</option>
+            @for (document of documents; track document.id) {
+              <option [ngValue]="document.id">{{document.title}}</option>
+            }
+        </select>
+    </div>
+    <div class="form-check form-switch mt-4">
+      <input class="form-check-input" type="checkbox" role="switch" id="archiveFallbackSwitch" [(ngModel)]="archiveFallback">
+      <label class="form-check-label" for="archiveFallbackSwitch" i18n>Try to include archive version in merge for non-PDF files</label>
+    </div>
+    <div class="form-check form-switch mt-2">
+      <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalsSwitch" [(ngModel)]="deleteOriginals" [disabled]="!userOwnsAllDocuments">
+      <label class="form-check-label" for="deleteOriginalsSwitch" i18n>Delete original documents after successful merge</label>
+    </div>
+    @if (!archiveFallback) {
+      <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be included.</p>
+    }
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+    </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+        {{btnCaption}}
+    </button>
+</div>

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

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

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

@@ -0,0 +1,87 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
+
+describe('MergeConfirmDialogComponent', () => {
+  let component: MergeConfirmDialogComponent
+  let fixture: ComponentFixture<MergeConfirmDialogComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        ReactiveFormsModule,
+        FormsModule,
+        MergeConfirmDialogComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MergeConfirmDialogComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should fetch documents on ngOnInit', () => {
+    const documents = [
+      { id: 1, name: 'Document 1' },
+      { id: 2, name: 'Document 2' },
+      { id: 3, name: 'Document 3' },
+    ]
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: documents.map((d) => d.id),
+        count: documents.length,
+        results: documents,
+      })
+    )
+
+    component.ngOnInit()
+
+    expect(component.documents).toEqual(documents)
+    expect(documentService.getFew).toHaveBeenCalledWith(component.documentIDs)
+  })
+
+  it('should move documentIDs on drop', () => {
+    component.documentIDs = [1, 2, 3]
+    const event = {
+      previousIndex: 1,
+      currentIndex: 2,
+    }
+
+    component.onDrop(event as any)
+
+    expect(component.documentIDs).toEqual([1, 3, 2])
+  })
+
+  it('should get document by ID', () => {
+    const documents = [
+      { id: 1, name: 'Document 1' },
+      { id: 2, name: 'Document 2' },
+      { id: 3, name: 'Document 3' },
+    ]
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: documents.map((d) => d.id),
+        count: documents.length,
+        results: documents,
+      })
+    )
+
+    component.ngOnInit()
+
+    expect(component.getDocument(2)).toEqual({ id: 2, name: 'Document 2' })
+  })
+})

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

@@ -0,0 +1,69 @@
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { Component, OnInit, inject } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { takeUntil } from 'rxjs'
+import { Document } from 'src/app/data/document'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-merge-confirm-dialog',
+  templateUrl: './merge-confirm-dialog.component.html',
+  styleUrl: './merge-confirm-dialog.component.scss',
+  imports: [
+    DragDropModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class MergeConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  private documentService = inject(DocumentService)
+  private permissionService = inject(PermissionsService)
+
+  public documentIDs: number[] = []
+  public archiveFallback: boolean = false
+  public deleteOriginals: boolean = false
+  private _documents: Document[] = []
+  get documents(): Document[] {
+    return this._documents
+  }
+
+  public metadataDocumentID: number = -1
+
+  constructor() {
+    super()
+  }
+
+  ngOnInit() {
+    this.documentService
+      .getFew(this.documentIDs)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((r) => {
+        this._documents = r.results
+      })
+  }
+
+  onDrop(event: CdkDragDrop<number[]>) {
+    moveItemInArray(this.documentIDs, event.previousIndex, event.currentIndex)
+  }
+
+  getDocument(documentID: number): Document {
+    return this.documents.find((d) => d.id === documentID)
+  }
+
+  get userOwnsAllDocuments(): boolean {
+    return this.documents.every((d) =>
+      this.permissionService.currentUserOwnsObject(d)
+    )
+  }
+}

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

@@ -0,0 +1,46 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col-2 d-flex justify-content-end">
+            <button class="btn btn-secondary mt-auto" (click)="rotate(false)">
+                <i-bs name="arrow-counterclockwise"></i-bs>
+            </button>
+        </div>
+        <div class="col-8 d-flex align-items-center">
+            @if (documentID) {
+                <img class="w-75 m-auto" [ngStyle]="{'transform': 'rotate('+rotation+'deg)'}" [src]="documentService.getThumbUrl(documentID)" />
+            }
+        </div>
+        <div class="col-2 d-flex">
+            <button class="btn btn-secondary mt-auto" (click)="rotate()">
+                <i-bs name="arrow-clockwise"></i-bs>
+            </button>
+        </div>
+    </div>
+    @if (showPDFNote) {
+        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
+    }
+</div>
+<div class="modal-footer flex-nowrap">
+    <div class="col">
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+          <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+    </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled || degrees === 0">
+      {{btnCaption}}
+      @if (!confirmButtonEnabled) {
+          <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+      }
+    </button>
+</div>

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

@@ -0,0 +1,3 @@
+img {
+    transition: all 0.25s ease;
+}

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

@@ -0,0 +1,66 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
+
+describe('RotateConfirmDialogComponent', () => {
+  let component: RotateConfirmDialogComponent
+  let fixture: ComponentFixture<RotateConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        RotateConfirmDialogComponent,
+        SafeHtmlPipe,
+      ],
+      providers: [
+        NgbActiveModal,
+        SafeHtmlPipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(RotateConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should support rotating the image', () => {
+    component.documentID = 1
+    fixture.detectChanges()
+    component.rotate()
+    fixture.detectChanges()
+    expect(component.degrees).toBe(90)
+    expect(fixture.nativeElement.querySelector('img').style.transform).toBe(
+      'rotate(90deg)'
+    )
+    component.rotate()
+    fixture.detectChanges()
+    expect(fixture.nativeElement.querySelector('img').style.transform).toBe(
+      'rotate(180deg)'
+    )
+  })
+
+  it('should normalize degrees', () => {
+    expect(component.degrees).toBe(0)
+    component.rotate()
+    expect(component.degrees).toBe(90)
+    component.rotate()
+    expect(component.degrees).toBe(180)
+    component.rotate()
+    expect(component.degrees).toBe(270)
+    component.rotate()
+    expect(component.degrees).toBe(0)
+    component.rotate()
+    expect(component.degrees).toBe(90)
+    component.rotate(false)
+    expect(component.degrees).toBe(0)
+    component.rotate(false)
+    expect(component.degrees).toBe(270)
+  })
+})

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

@@ -0,0 +1,36 @@
+import { NgStyle } from '@angular/common'
+import { Component, inject } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-rotate-confirm-dialog',
+  templateUrl: './rotate-confirm-dialog.component.html',
+  styleUrl: './rotate-confirm-dialog.component.scss',
+  imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
+})
+export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
+  documentService = inject(DocumentService)
+
+  public documentID: number
+  public showPDFNote: boolean = true
+
+  // animation is better if we dont normalize yet
+  public rotation: number = 0
+
+  public get degrees(): number {
+    let degrees = this.rotation % 360
+    if (degrees < 0) degrees += 360
+    return degrees
+  }
+
+  constructor() {
+    super()
+  }
+
+  rotate(clockwise: boolean = true) {
+    this.rotation += clockwise ? 90 : -90
+  }
+}

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

@@ -0,0 +1,48 @@
+@if (field) {
+    @if (value?.toString().length > 0) {
+        <ng-template #nameTooltip>
+            <div class="d-flex flex-column text-light">
+                {{field.name}}
+            </div>
+        </ng-template>
+        @switch (field.data_type) {
+            @case (CustomFieldDataType.Monetary) {
+                <span [ngbTooltip]="nameTooltip">{{value | currency: currency}}</span>
+            }
+            @case (CustomFieldDataType.Date) {
+                <span [ngbTooltip]="nameTooltip">{{value | customDate}}</span>
+            }
+            @case (CustomFieldDataType.Url) {
+                <a [ngbTooltip]="nameTooltip" [href]="value" class="btn-link text-dark text-decoration-none" target="_blank">{{value}}</a>
+            }
+            @case (CustomFieldDataType.DocumentLink) {
+                <div [ngbTooltip]="nameTooltip" class="d-flex gap-1 flex-wrap">
+                    @for (docId of value; track docId) {
+                      @if (getDocumentTitle(docId)) {
+                          <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
+                              <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
+                          </a>
+                      }
+                    }
+                </div>
+            }
+            @case (CustomFieldDataType.Boolean) {
+                <div class="d-flex flex-row align-items-center">
+                    <span>{{field.name}}:</span>
+                    <input type="checkbox" id="{{field.name}}" name="{{field.name}}" [checked]="value" value="" class="form-check-input ms-2 mt-0 pe-none">
+                </div>
+            }
+            @case (CustomFieldDataType.Select) {
+                <span [ngbTooltip]="nameTooltip">{{getSelectValue(field, value)}}</span>
+            }
+            @case (CustomFieldDataType.LongText) {
+                <p class="mb-0" [ngbTooltip]="nameTooltip">{{value | slice:0:20}}{{value.length > 20 ? '...' : ''}}</p>
+            }
+            @default {
+              <span [ngbTooltip]="nameTooltip">{{value}}</span>
+            }
+        }
+    } @else if (showNameIfEmpty) {
+        <span class="fst-italic text-muted">{{field.name}}</span>
+    }
+}

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

@@ -0,0 +1,141 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { of } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { DisplayField, Document } from 'src/app/data/document'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { CustomFieldDisplayComponent } from './custom-field-display.component'
+
+const customFields: CustomField[] = [
+  { id: 1, name: 'Field 1', data_type: CustomFieldDataType.String },
+  { id: 2, name: 'Field 2', data_type: CustomFieldDataType.Monetary },
+  { id: 3, name: 'Field 3', data_type: CustomFieldDataType.DocumentLink },
+  {
+    id: 4,
+    name: 'Field 4',
+    data_type: CustomFieldDataType.Select,
+    extra_data: {
+      select_options: [
+        { label: 'Option 1', id: 'abc-123' },
+        { label: 'Option 2', id: 'def-456' },
+        { label: 'Option 3', id: 'ghi-789' },
+      ],
+    },
+  },
+  {
+    id: 5,
+    name: 'Field 5',
+    data_type: CustomFieldDataType.Monetary,
+    extra_data: { default_currency: 'JPY' },
+  },
+]
+const document: Document = {
+  id: 1,
+  title: 'Doc 1',
+  custom_fields: [
+    { field: 1, document: 1, created: null, value: 'Text value' },
+    { field: 2, document: 1, created: null, value: 'USD100' },
+    { field: 3, document: 1, created: null, value: [1, 2, 3] },
+  ],
+}
+
+describe('CustomFieldDisplayComponent', () => {
+  let component: CustomFieldDisplayComponent
+  let fixture: ComponentFixture<CustomFieldDisplayComponent>
+  let documentService: DocumentService
+  let customFieldService: CustomFieldsService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomFieldDisplayComponent],
+      providers: [
+        DocumentService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    documentService = TestBed.inject(DocumentService)
+    customFieldService = TestBed.inject(CustomFieldsService)
+    jest
+      .spyOn(customFieldService, 'listAll')
+      .mockReturnValue(of({ results: customFields } as any))
+    fixture = TestBed.createComponent(CustomFieldDisplayComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should initialize component', () => {
+    jest
+      .spyOn(documentService, 'getFew')
+      .mockReturnValue(of({ results: [] } as any))
+
+    component.fieldDisplayKey = DisplayField.CUSTOM_FIELD + '2'
+    expect(component.fieldId).toEqual(2)
+    component.document = document
+    expect(component.document.title).toEqual('Doc 1')
+
+    expect(component.field).toEqual(customFields[1])
+    expect(component.value).toEqual(100)
+    expect(component.currency).toEqual('USD')
+  })
+
+  it('should get document titles', () => {
+    const docLinkDocuments: Document[] = [
+      { id: 1, title: 'Document 1' } as any,
+      { id: 2, title: 'Document 2' } as any,
+      { id: 3, title: 'Document 3' } as any,
+    ]
+    jest
+      .spyOn(documentService, 'getFew')
+      .mockReturnValue(of({ results: docLinkDocuments } as any))
+    component.fieldId = 3
+    component.document = document
+
+    const title1 = component.getDocumentTitle(1)
+    const title2 = component.getDocumentTitle(2)
+    const title3 = component.getDocumentTitle(3)
+
+    expect(title1).toEqual('Document 1')
+    expect(title2).toEqual('Document 2')
+    expect(title3).toEqual('Document 3')
+  })
+
+  it('should fallback to default currency', () => {
+    component['defaultCurrencyCode'] = 'EUR' // mock default locale injection
+    component.fieldId = 2
+    component.document = {
+      id: 1,
+      title: 'Doc 1',
+      custom_fields: [{ field: 2, document: 1, created: null, value: '100' }],
+    }
+    expect(component.currency).toEqual('EUR')
+    expect(component.value).toEqual(100)
+  })
+
+  it('should respect explicit default currency', () => {
+    component['defaultCurrencyCode'] = 'EUR' // mock default locale injection
+    component.fieldId = 5
+    component.document = {
+      id: 1,
+      title: 'Doc 1',
+      custom_fields: [{ field: 5, document: 1, created: null, value: '100' }],
+    }
+    expect(component.currency).toEqual('JPY')
+    expect(component.value).toEqual(100)
+  })
+
+  it('should show select value', () => {
+    expect(component.getSelectValue(customFields[3], 'ghi-789')).toEqual(
+      'Option 3'
+    )
+  })
+})

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

@@ -0,0 +1,124 @@
+import { CurrencyPipe, getLocaleCurrencyCode, SlicePipe } from '@angular/common'
+import { Component, inject, Input, LOCALE_ID, OnInit } from '@angular/core'
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
+import { takeUntil } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { DisplayField, Document } from 'src/app/data/document'
+import { Results } from 'src/app/data/results'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-custom-field-display',
+  templateUrl: './custom-field-display.component.html',
+  styleUrl: './custom-field-display.component.scss',
+  imports: [CustomDatePipe, CurrencyPipe, NgbTooltipModule, SlicePipe],
+})
+export class CustomFieldDisplayComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit
+{
+  private customFieldService = inject(CustomFieldsService)
+  private documentService = inject(DocumentService)
+
+  CustomFieldDataType = CustomFieldDataType
+
+  private _document: Document
+  @Input()
+  set document(document: Document) {
+    this._document = document
+    this.init()
+  }
+
+  get document(): Document {
+    return this._document
+  }
+
+  private _fieldId: number
+  @Input()
+  set fieldId(id: number) {
+    this._fieldId = id
+    this.init()
+  }
+
+  get fieldId(): number {
+    return this._fieldId
+  }
+
+  @Input()
+  set fieldDisplayKey(key: string) {
+    this.fieldId = parseInt(key.replace(DisplayField.CUSTOM_FIELD, ''), 10)
+  }
+
+  @Input()
+  showNameIfEmpty: boolean = false
+
+  value: any
+  currency: string
+
+  private customFields: CustomField[] = []
+
+  public field: CustomField
+
+  private docLinkDocuments: Document[] = []
+
+  private defaultCurrencyCode: any
+
+  constructor() {
+    const currentLocale = inject(LOCALE_ID)
+
+    super()
+    this.defaultCurrencyCode = getLocaleCurrencyCode(currentLocale)
+    this.customFieldService.listAll().subscribe((r) => {
+      this.customFields = r.results
+      this.init()
+    })
+  }
+
+  ngOnInit(): void {
+    this.init()
+  }
+
+  private init() {
+    if (this.value || !this._fieldId || !this._document || !this.customFields) {
+      return
+    }
+    this.field = this.customFields.find((f) => f.id === this._fieldId)
+    this.value = this._document.custom_fields.find(
+      (f) => f.field === this._fieldId
+    )?.value
+    if (this.value && this.field.data_type === CustomFieldDataType.Monetary) {
+      this.currency =
+        this.value.match(/([A-Z]{3})/)?.[0] ??
+        this.field.extra_data?.default_currency ??
+        this.defaultCurrencyCode
+      this.value = parseFloat(this.value.replace(this.currency, ''))
+    } else if (
+      this.value?.length &&
+      this.field.data_type === CustomFieldDataType.DocumentLink
+    ) {
+      this.getDocuments()
+    }
+  }
+
+  private getDocuments() {
+    this.documentService
+      .getFew(this.value, { fields: 'id,title' })
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((result: Results<Document>) => {
+        this.docLinkDocuments = this.value
+          .map((id) => result.results.find((d) => d.id === id))
+          .filter((d) => d)
+      })
+  }
+
+  public getDocumentTitle(docId: number): string {
+    return this.docLinkDocuments?.find((d) => d.id === docId)?.title
+  }
+
+  public getSelectValue(field: CustomField, id: string): string {
+    return field.extra_data.select_options?.find((o) => o.id === id)?.label
+  }
+}

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

@@ -0,0 +1,27 @@
+<div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions" placement="bottom-end">
+    <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
+      <i-bs name="ui-radios"></i-bs>
+      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
+    </button>
+    <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
+        <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
+            <div class="list-group-item">
+                <div class="input-group input-group-sm">
+                  <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Search fields" i18n-placeholder (keyup.enter)="listFilterEnter()" #listFilterTextInput>
+                </div>
+            </div>
+            @for (field of filteredFields; track field.id) {
+                <button class="list-group-item list-group-item-action bg-light" (click)="addField(field)" #button>
+                    <small class="d-flex">{{field.name}} <small class="ms-auto text-muted">{{getDataTypeLabel(field.data_type)}}</small></small>
+                </button>
+            }
+            @if (!filterText?.length || filteredFields.length === 0) {
+                <button class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
+                    <small>
+                        <i-bs width=".9em" height=".9em" name="asterisk"></i-bs>&nbsp;<ng-container i18n>Create new field</ng-container>
+                    </small>
+                </button>
+            }
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,10 @@
+.custom-fields-dropdown {
+    min-width: 300px;
+
+    // correct position on mobile
+    @media (max-width: 575.98px) {
+        &.show {
+            margin-left: -245px !important;
+        }
+    }
+}

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

@@ -0,0 +1,254 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import {
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalModule,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { SelectComponent } from '../input/select/select.component'
+import { CustomFieldsDropdownComponent } from './custom-fields-dropdown.component'
+
+const fields: CustomField[] = [
+  {
+    id: 0,
+    name: 'Field 1',
+    data_type: CustomFieldDataType.Integer,
+  },
+  {
+    id: 1,
+    name: 'Field 2',
+    data_type: CustomFieldDataType.String,
+  },
+]
+
+describe('CustomFieldsDropdownComponent', () => {
+  let component: CustomFieldsDropdownComponent
+  let fixture: ComponentFixture<CustomFieldsDropdownComponent>
+  let customFieldService: CustomFieldsService
+  let toastService: ToastService
+  let modalService: NgbModal
+  let settingsService: SettingsService
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbModalModule,
+        NgbDropdownModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        CustomFieldsDropdownComponent,
+        SelectComponent,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    })
+    customFieldService = TestBed.inject(CustomFieldsService)
+    toastService = TestBed.inject(ToastService)
+    modalService = TestBed.inject(NgbModal)
+    jest.spyOn(customFieldService, 'listAll').mockReturnValue(
+      of({
+        all: fields.map((f) => f.id),
+        count: fields.length,
+        results: fields.concat([]),
+      })
+    )
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 1, username: 'test' }
+    fixture = TestBed.createComponent(CustomFieldsDropdownComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should support add field', () => {
+    let addedField
+    component.added.subscribe((f) => (addedField = f))
+    component.documentId = 11
+    component.addField({ field: fields[0].id } as any)
+    expect(addedField).not.toBeUndefined()
+  })
+
+  it('should support filtering fields', () => {
+    const input = fixture.debugElement.query(By.css('input'))
+    input.nativeElement.value = 'Field 1'
+    input.triggerEventHandler('input', { target: input.nativeElement })
+    fixture.detectChanges()
+    expect(component.filteredFields.length).toEqual(1)
+    expect(component.filteredFields[0].name).toEqual('Field 1')
+  })
+
+  it('should support update unused fields', () => {
+    component.existingFields = [{ field: fields[0].id } as any]
+    component['updateUnusedFields']()
+    expect(component['unusedFields'].length).toEqual(1)
+    expect(component['unusedFields'][0].name).toEqual('Field 2')
+  })
+
+  it('should support getting data type label', () => {
+    expect(component.getDataTypeLabel(CustomFieldDataType.Integer)).toEqual(
+      'Integer'
+    )
+  })
+
+  it('should support creating field, show error if necessary, then add', fakeAsync(() => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const getFieldsSpy = jest.spyOn(
+      CustomFieldsDropdownComponent.prototype as any,
+      'getFields'
+    )
+    const addFieldSpy = jest.spyOn(component, 'addField')
+
+    const createButton = fixture.debugElement.queryAll(By.css('button'))[3]
+    createButton.triggerEventHandler('click')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
+
+    // fail first
+    editDialog.failed.emit({ error: 'error creating field' })
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(getFieldsSpy).not.toHaveBeenCalled()
+
+    // succeed
+    editDialog.succeeded.emit(fields[0])
+    tick(100)
+    expect(toastInfoSpy).toHaveBeenCalled()
+    expect(getFieldsSpy).toHaveBeenCalled()
+    expect(addFieldSpy).toHaveBeenCalled()
+  }))
+
+  it('should support creating field with name', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
+    component.createField('Foo bar')
+
+    expect(modal).not.toBeUndefined()
+    const editDialog = modal.componentInstance as CustomFieldEditDialogComponent
+    expect(editDialog.object.name).toEqual('Foo bar')
+  })
+
+  it('should support arrow keyboard navigation', fakeAsync(() => {
+    fixture.nativeElement
+      .querySelector('button')
+      .dispatchEvent(new MouseEvent('click')) // open
+    fixture.detectChanges()
+    tick(100)
+    const filterInputEl: HTMLInputElement =
+      component.listFilterTextInput.nativeElement
+    expect(document.activeElement).toEqual(filterInputEl)
+    const itemButtons = Array.from(
+      (fixture.nativeElement as HTMLDivElement).querySelectorAll(
+        '.custom-fields-dropdown button'
+      )
+    ).filter((b) => b.textContent.includes('Field'))
+    filterInputEl.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(itemButtons[0])
+    itemButtons[0].dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(itemButtons[1])
+    itemButtons[1].dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(itemButtons[0])
+    itemButtons[0].dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(filterInputEl)
+    filterInputEl.value = 'foo'
+    component.filterText = 'foo'
+
+    // dont move focus if we're traversing the field
+    filterInputEl.selectionStart = 1
+    expect(document.activeElement).toEqual(filterInputEl)
+
+    // now we're at end, so move focus
+    filterInputEl.selectionStart = 3
+    filterInputEl.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(itemButtons[0])
+  }))
+
+  it('should support arrow keyboard navigation after tab keyboard navigation', fakeAsync(() => {
+    fixture.nativeElement
+      .querySelector('button')
+      .dispatchEvent(new MouseEvent('click')) // open
+    fixture.detectChanges()
+    tick(100)
+    const filterInputEl: HTMLInputElement =
+      component.listFilterTextInput.nativeElement
+    expect(document.activeElement).toEqual(filterInputEl)
+    const itemButtons = Array.from(
+      (fixture.nativeElement as HTMLDivElement).querySelectorAll(
+        '.custom-fields-dropdown button'
+      )
+    ).filter((b) => b.textContent.includes('Field'))
+    filterInputEl.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
+    )
+    itemButtons[0]['focus']() // normally handled by browser
+    itemButtons[0].dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Tab', bubbles: true })
+    )
+    itemButtons[1]['focus']() // normally handled by browser
+    itemButtons[1].dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'Tab',
+        shiftKey: true,
+        bubbles: true,
+      })
+    )
+    itemButtons[0]['focus']() // normally handled by browser
+    itemButtons[0].dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
+    )
+    expect(document.activeElement).toEqual(itemButtons[1])
+  }))
+
+  it('should support enter keyboard navigation', fakeAsync(() => {
+    jest.spyOn(component, 'canCreateFields', 'get').mockReturnValue(true)
+    const addFieldSpy = jest.spyOn(component, 'addField')
+    const createFieldSpy = jest.spyOn(component, 'createField')
+    component.filterText = 'Field 1'
+    component.listFilterEnter()
+    expect(addFieldSpy).toHaveBeenCalled()
+
+    component.filterText = 'Field 3'
+    component.listFilterEnter()
+    expect(createFieldSpy).toHaveBeenCalledWith('Field 3')
+
+    addFieldSpy.mockClear()
+    createFieldSpy.mockClear()
+
+    component.filterText = undefined
+    component.listFilterEnter()
+    expect(createFieldSpy).not.toHaveBeenCalled()
+    expect(addFieldSpy).not.toHaveBeenCalled()
+  }))
+})

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

@@ -0,0 +1,220 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+  inject,
+} from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { first, takeUntil } from 'rxjs'
+import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
+import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
+import {
+  PermissionAction,
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+
+@Component({
+  selector: 'pngx-custom-fields-dropdown',
+  templateUrl: './custom-fields-dropdown.component.html',
+  styleUrls: ['./custom-fields-dropdown.component.scss'],
+  imports: [
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissions {
+  private customFieldsService = inject(CustomFieldsService)
+  private modalService = inject(NgbModal)
+  private toastService = inject(ToastService)
+  private permissionsService = inject(PermissionsService)
+
+  public popperOptions = pngxPopperOptions
+
+  @Input()
+  documentId: number
+
+  @Input()
+  disabled: boolean = false
+
+  @Input()
+  existingFields: CustomFieldInstance[] = []
+
+  @Output()
+  added: EventEmitter<CustomField> = new EventEmitter()
+
+  @Output()
+  created: EventEmitter<CustomField> = new EventEmitter()
+
+  @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChildren('button') buttons: QueryList<ElementRef>
+
+  private customFields: CustomField[] = []
+  private unusedFields: CustomField[] = []
+  private keyboardIndex: number
+
+  public get filteredFields(): CustomField[] {
+    return this.unusedFields.filter(
+      (f) =>
+        !this.filterText ||
+        f.name.toLowerCase().includes(this.filterText.toLowerCase())
+    )
+  }
+
+  public filterText: string
+
+  get canCreateFields(): boolean {
+    return this.permissionsService.currentUserCan(
+      PermissionAction.Add,
+      PermissionType.CustomField
+    )
+  }
+
+  constructor() {
+    super()
+    this.getFields()
+  }
+
+  private getFields() {
+    this.customFieldsService
+      .listAll()
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe((result) => {
+        this.customFields = result.results
+        this.updateUnusedFields()
+      })
+  }
+
+  private updateUnusedFields() {
+    this.unusedFields = this.customFields.filter(
+      (f) => !this.existingFields?.find((e) => e.field === f.id)
+    )
+  }
+
+  onOpenClose(open: boolean) {
+    if (open) {
+      setTimeout(() => {
+        this.listFilterTextInput.nativeElement.focus()
+      }, 100)
+    } else {
+      this.filterText = undefined
+    }
+    this.updateUnusedFields()
+  }
+
+  addField(field: CustomField) {
+    this.added.emit(field)
+    this.updateUnusedFields()
+  }
+
+  createField(newName: string = null) {
+    const modal = this.modalService.open(CustomFieldEditDialogComponent)
+    if (newName) modal.componentInstance.object = { name: newName }
+    modal.componentInstance.succeeded
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((newField) => {
+        this.toastService.showInfo($localize`Saved field "${newField.name}".`)
+        this.customFieldsService.clearCache()
+        this.getFields()
+        this.created.emit(newField)
+        setTimeout(() => this.addField(newField), 100)
+      })
+    modal.componentInstance.failed
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((e) => {
+        this.toastService.showError($localize`Error saving field.`, e)
+      })
+  }
+
+  getDataTypeLabel(dataType: string) {
+    return DATA_TYPE_LABELS.find((l) => l.id === dataType)?.name
+  }
+
+  public listFilterEnter() {
+    if (this.filteredFields.length === 1) {
+      this.addField(this.filteredFields[0])
+    } else if (
+      this.filterText &&
+      this.filteredFields.length === 0 &&
+      this.canCreateFields
+    ) {
+      this.createField(this.filterText)
+    }
+  }
+
+  private focusNextButtonItem(setFocus: boolean = true) {
+    this.keyboardIndex = Math.min(
+      this.buttons.length - 1,
+      this.keyboardIndex + 1
+    )
+    if (setFocus) this.setButtonItemFocus()
+  }
+
+  focusPreviousButtonItem(setFocus: boolean = true) {
+    this.keyboardIndex = Math.max(0, this.keyboardIndex - 1)
+    if (setFocus) this.setButtonItemFocus()
+  }
+
+  setButtonItemFocus() {
+    this.buttons.get(this.keyboardIndex)?.nativeElement.focus()
+  }
+
+  public listKeyDown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowDown':
+        if (event.target instanceof HTMLInputElement) {
+          if (
+            !this.filterText ||
+            event.target.selectionStart === this.filterText.length
+          ) {
+            this.keyboardIndex = -1
+            this.focusNextButtonItem()
+            event.preventDefault()
+          }
+        } else if (event.target instanceof HTMLButtonElement) {
+          this.focusNextButtonItem()
+          event.preventDefault()
+        }
+        break
+      case 'ArrowUp':
+        if (event.target instanceof HTMLButtonElement) {
+          if (this.keyboardIndex === 0) {
+            this.listFilterTextInput.nativeElement.focus()
+          } else {
+            this.focusPreviousButtonItem()
+          }
+          event.preventDefault()
+        }
+        break
+      case 'Tab':
+        // just track the index in case user uses arrows
+        if (event.target instanceof HTMLInputElement) {
+          this.keyboardIndex = 0
+        } else if (event.target instanceof HTMLButtonElement) {
+          if (event.shiftKey) {
+            if (this.keyboardIndex > 0) {
+              this.focusPreviousButtonItem(false)
+            }
+          } else {
+            this.focusNextButtonItem(false)
+          }
+        }
+      default:
+        break
+    }
+  }
+}

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

@@ -0,0 +1,178 @@
+<div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
+  <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
+    <i-bs name="{{icon}}"></i-bs>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    @if (isActive) {
+      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
+    }
+  </button>
+  <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
+    <div class="list-group list-group-flush">
+      @for (element of selectionModel.queries; track element.id; let i = $index) {
+        <div class="list-group-item px-0 d-flex flex-nowrap">
+          @switch (element.type) {
+            @case (CustomFieldQueryComponentType.Atom) {
+              <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
+            }
+            @case (CustomFieldQueryComponentType.Expression) {
+              <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
+            }
+          }
+        </div>
+      }
+    </div>
+  </div>
+</div>
+
+<ng-template #comparisonValueTemplate let-atom="atom">
+  @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
+    <input class="form-control" placeholder="yyyy-mm-dd"
+      [(ngModel)]="atom.value"
+      ngbDatepicker
+      #d="ngbDatepicker"
+      [footerTemplate]="datePickerFooterTemplate" />
+    <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
+      <i-bs name="calendar-event"></i-bs>
+    </button>
+    <ng-template #datePickerFooterTemplate>
+      <div class="btn-group-xs border-top p-2 d-flex">
+        <button type="button" class="btn btn-primary" (click)="atom.value = today; d.close()" i18n>Today</button>
+        <button type="button" class="btn btn-secondary ms-auto" (click)="d.close()" i18n>Close</button>
+      </div>
+    </ng-template>
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
+    <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [disabled]="disabled">
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {
+    <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+      <option value="true" i18n>True</option>
+      <option value="false" i18n>False</option>
+    </select>
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Select) {
+    <ng-select #fieldSelects
+      class="paperless-input-select rounded-end"
+      [items]="getSelectOptionsForField(atom.field)"
+      bindLabel="label"
+      bindValue="id"
+      [(ngModel)]="atom.value"
+      [disabled]="disabled"
+      (mousedown)="$event.stopImmediatePropagation()"
+    ></ng-select>
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {
+    <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+  } @else {
+    <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
+  }
+</ng-template>
+
+<ng-template #queryAtom let-atom="atom">
+  <div class="input-group input-group-sm">
+    <ng-select
+      class="paperless-input-select"
+      [items]="customFields"
+      [(ngModel)]="atom.field"
+      [disabled]="disabled"
+      bindLabel="name"
+      bindValue="id"
+      (mousedown)="$event.stopImmediatePropagation()"
+    ></ng-select>
+    <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
+      @for (operator of getOperatorsForField(atom.field); track operator.label) {
+        <option [ngValue]="operator.value">{{operator.label}}</option>
+      }
+    </select>
+    @switch (atom.operator) {
+      @case (CustomFieldQueryOperator.Exists) {
+        <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+          <option value="true" i18n>True</option>
+          <option value="false" i18n>False</option>
+        </select>
+      }
+      @case (CustomFieldQueryOperator.IsNull) {
+        <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+          <option value="true" i18n>True</option>
+          <option value="false" i18n>False</option>
+        </select>
+      }
+      @case (CustomFieldQueryOperator.GreaterThanOrEqual) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.LessThanOrEqual) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.GreaterThan) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.LessThan) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.Contains) {
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+      }
+      @case (CustomFieldQueryOperator.In) {
+        <ng-select
+          class="paperless-input-select rounded-end"
+          [items]="getSelectOptionsForField(atom.field)"
+          bindLabel="label"
+          bindValue="id"
+          [(ngModel)]="atom.value"
+          [disabled]="disabled"
+          [multiple]="true"
+          (mousedown)="$event.stopImmediatePropagation()"
+        ></ng-select>
+      }
+      @case (CustomFieldQueryOperator.Exact) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @default {
+        <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
+      }
+    }
+    <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeElement(atom)" [disabled]="disabled">
+      <i-bs name="x-circle"></i-bs>
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #queryExpression let-expression="expression">
+  <div class="d-flex w-100">
+    <div class="d-flex flex-grow-1 flex-column">
+      <div class="btn-group btn-group-xs" role="group">
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{expression.id}}" name="logicalOperatorOr_{{expression.id}}" value="OR" [disabled]="expression.depth > 0 && expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.id}}" i18n>Any</label>
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{expression.id}}" name="logicalOperatorAnd_{{expression.id}}" value="AND" [disabled]="expression.depth > 0 && expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
+        @if (expression.negatable)  {
+          <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorNot_{{expression.id}}" name="logicalOperatorNot_{{expression.id}}" value="NOT">
+          <label class="btn btn-outline-secondary" for="logicalOperatorNot_{{expression.id}}" i18n>Not</label>
+        }
+      </div>
+      <div class="list-group list-group-flush mb-n2">
+        @for (element of expression.value; track element.id; let i = $index) {
+          <div class="list-group-item px-0 d-flex flex-nowrap">
+            @switch (element.type) {
+              @case (CustomFieldQueryComponentType.Atom) {
+                <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
+              }
+              @case (CustomFieldQueryComponentType.Expression) {
+                <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
+              }
+            }
+          </div>
+        }
+      </div>
+    </div>
+    <div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
+      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add query" i18n-title (click)="addAtom(expression)" [disabled]="disabled || expression.value.length === CUSTOM_FIELD_QUERY_MAX_ATOMS">
+        <i-bs name="node-plus"></i-bs>
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(expression)" [disabled]="disabled || expression.depth === CUSTOM_FIELD_QUERY_MAX_DEPTH">
+        <i-bs name="braces"></i-bs>
+      </button>
+      @if (expression.depth > 0) {
+        <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled">
+          <i-bs name="x-circle"></i-bs>
+        </button>
+      }
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,43 @@
+.dropdown-menu {
+  width: 370px;
+  @media(min-width: 768px) {
+    width: 600px;
+  }
+}
+
+:host ::ng-deep .ng-select-container {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  height: 100% !important;
+}
+
+:host ::ng-deep .rounded-end .ng-select-container {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+:host ::ng-deep .ng-select {
+  max-width: 100px;
+  min-width: 35%;
+  font-size: 14px;
+}
+
+:host ::ng-deep .doc-link-select {
+  padding-top: 0 !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  background-image: none !important;
+
+  .ng-select-container,
+  .ng-select.ng-select-opened > .ng-select-container {
+    border: none !important;
+    min-height: 34px !important;
+    background: none !important;
+  }
+  .ng-select {
+    max-width: 200px;
+    min-width: 140px;
+  }
+}

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

@@ -0,0 +1,358 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import {
+  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
+  CustomFieldQueryLogicalOperator,
+  CustomFieldQueryOperatorGroups,
+} from 'src/app/data/custom-field-query'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import {
+  CustomFieldQueryAtom,
+  CustomFieldQueryElement,
+  CustomFieldQueryExpression,
+} from 'src/app/utils/custom-field-query-element'
+import {
+  CustomFieldQueriesModel,
+  CustomFieldsQueryDropdownComponent,
+} from './custom-fields-query-dropdown.component'
+
+const customFields = [
+  {
+    id: 1,
+    name: 'Test Field',
+    data_type: CustomFieldDataType.String,
+    extra_data: {},
+  },
+  {
+    id: 2,
+    name: 'Test Select Field',
+    data_type: CustomFieldDataType.Select,
+    extra_data: {
+      select_options: [
+        { label: 'Option 1', id: 'abc-123' },
+        { label: 'Option 2', id: 'def-456' },
+      ],
+    },
+  },
+]
+
+describe('CustomFieldsQueryDropdownComponent', () => {
+  let component: CustomFieldsQueryDropdownComponent
+  let fixture: ComponentFixture<CustomFieldsQueryDropdownComponent>
+  let customFieldsService: CustomFieldsService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgbDropdownModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgSelectModule,
+        FormsModule,
+        ReactiveFormsModule,
+        CustomFieldsQueryDropdownComponent,
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    customFieldsService = TestBed.inject(CustomFieldsService)
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+    fixture = TestBed.createComponent(CustomFieldsQueryDropdownComponent)
+    component = fixture.componentInstance
+    component.icon = 'ui-radios'
+    fixture.detectChanges()
+  })
+
+  it('should initialize custom fields on creation', () => {
+    expect(component.customFields).toEqual(customFields)
+  })
+
+  it('should add an expression when opened if queries are empty', () => {
+    component.selectionModel.clear()
+    component.onOpenChange(true)
+    expect(component.selectionModel.queries.length).toBe(1)
+  })
+
+  it('should support reset the selection model', () => {
+    component.selectionModel.addExpression()
+    component.reset()
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+  })
+
+  it('should get operators for a field', () => {
+    const field: CustomField = {
+      id: 1,
+      name: 'Test Field',
+      data_type: CustomFieldDataType.String,
+      extra_data: {},
+    }
+    component.customFields = [field]
+    const operators = component.getOperatorsForField(1)
+    expect(operators.length).toEqual(
+      [
+        ...CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+          CustomFieldQueryOperatorGroups.Basic
+        ],
+        ...CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+          CustomFieldQueryOperatorGroups.Exact
+        ],
+        ...CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+          CustomFieldQueryOperatorGroups.String
+        ],
+      ].length
+    )
+
+    // Fallback to basic operators if field is not found
+    const operators2 = component.getOperatorsForField(2)
+    expect(operators2.length).toEqual(
+      CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+        CustomFieldQueryOperatorGroups.Basic
+      ].length
+    )
+  })
+
+  it('should get select options for a field', () => {
+    const field: CustomField = {
+      id: 1,
+      name: 'Test Field',
+      data_type: CustomFieldDataType.Select,
+      extra_data: {
+        select_options: [
+          { label: 'Option 1', id: 'abc-123' },
+          { label: 'Option 2', id: 'def-456' },
+        ],
+      },
+    }
+    component.customFields = [field]
+    const options = component.getSelectOptionsForField(1)
+    expect(options).toEqual([
+      { label: 'Option 1', id: 'abc-123' },
+      { label: 'Option 2', id: 'def-456' },
+    ])
+
+    // Fallback to empty array if field is not found
+    const options2 = component.getSelectOptionsForField(2)
+    expect(options2).toEqual([])
+  })
+
+  it('should remove an element from the selection model', () => {
+    const expression = new CustomFieldQueryExpression()
+    const atom = new CustomFieldQueryAtom()
+    ;(expression.value as CustomFieldQueryElement[]).push(atom)
+    component.selectionModel.addExpression(expression)
+    component.removeElement(atom)
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+    const expression2 = new CustomFieldQueryExpression([
+      CustomFieldQueryLogicalOperator.And,
+      [
+        [1, 'icontains', 'test'],
+        [2, 'icontains', 'test'],
+      ],
+    ])
+    component.selectionModel.addExpression(expression2)
+    component.removeElement(expression2)
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+  })
+
+  it('should emit selectionModelChange when model changes', () => {
+    const nextSpy = jest.spyOn(component.selectionModelChange, 'next')
+    const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+    component.selectionModel.addAtom(atom)
+    atom.changed.next(atom)
+    expect(nextSpy).toHaveBeenCalled()
+  })
+
+  it('should complete selection model subscription when new selection model is set', () => {
+    const completeSpy = jest.spyOn(component.selectionModel.changed, 'complete')
+    const selectionModel = new CustomFieldQueriesModel()
+    component.selectionModel = selectionModel
+    expect(completeSpy).toHaveBeenCalled()
+  })
+
+  it('should support adding an atom', () => {
+    const expression = new CustomFieldQueryExpression()
+    component.addAtom(expression)
+    expect(expression.value.length).toBe(1)
+  })
+
+  it('should support adding an expression', () => {
+    const expression = new CustomFieldQueryExpression()
+    component.addExpression(expression)
+    expect(expression.value.length).toBe(1)
+  })
+
+  it('should support getting a custom field by ID', () => {
+    expect(component.getCustomFieldByID(1)).toEqual(customFields[0])
+  })
+
+  it('should sanitize name from title', () => {
+    component.title = 'Test Title'
+    expect(component.name).toBe('test_title')
+  })
+
+  it('should add a default atom on open and focus the select field', fakeAsync(() => {
+    expect(component.selectionModel.queries.length).toBe(0)
+    component.onOpenChange(true)
+    fixture.detectChanges()
+    tick()
+    expect(component.selectionModel.queries.length).toBe(1)
+    expect(window.document.activeElement.tagName).toBe('INPUT')
+  }))
+
+  describe('CustomFieldQueriesModel', () => {
+    let model: CustomFieldQueriesModel
+
+    beforeEach(() => {
+      model = new CustomFieldQueriesModel()
+    })
+
+    it('should initialize with empty queries', () => {
+      expect(model.queries).toEqual([])
+    })
+
+    it('should clear queries and fire event', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.addExpression()
+      model.clear()
+      expect(model.queries).toEqual([])
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
+
+    it('should clear queries without firing event', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.addExpression()
+      model.clear(false)
+      expect(model.queries).toEqual([])
+      expect(nextSpy).not.toHaveBeenCalled()
+    })
+
+    it('should validate an empty model as invalid', () => {
+      expect(model.isValid()).toBeFalsy()
+    })
+
+    it('should validate a model with valid expression as valid', () => {
+      const expression = new CustomFieldQueryExpression()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      const atom2 = new CustomFieldQueryAtom([2, 'icontains', 'test'])
+      const expression2 = new CustomFieldQueryExpression()
+      expression2.addAtom(atom)
+      expression2.addAtom(atom2)
+      expression.addExpression(expression2)
+      model.addExpression(expression)
+      expect(model.isValid()).toBeTruthy()
+    })
+
+    it('should validate a model with invalid expression as invalid', () => {
+      const expression = new CustomFieldQueryExpression()
+      model.addExpression(expression)
+      expect(model.isValid()).toBeFalsy()
+    })
+
+    it('should validate an atom with in or contains operator', () => {
+      const atom = new CustomFieldQueryAtom([1, 'in', '[1,2,3]'])
+      expect(model['validateAtom'].apply(null, [atom])).toBeTruthy()
+      atom.operator = 'contains'
+      atom.value = [1, 2, 3]
+      expect(model['validateAtom'].apply(null, [atom])).toBeTruthy()
+      atom.value = null
+      expect(model['validateAtom'].apply(null, [atom])).toBeFalsy()
+    })
+
+    it('should check if model is empty', () => {
+      expect(model.isEmpty()).toBeTruthy()
+      model.addExpression()
+      expect(model.isEmpty()).toBeTruthy()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      expect(model.isEmpty()).toBeFalsy()
+    })
+
+    it('should add an atom to the model', () => {
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      expect(model.queries.length).toBe(1)
+      expect(
+        (model.queries[0] as CustomFieldQueryExpression).value.length
+      ).toBe(1)
+    })
+
+    it('should add an expression to the model, propagate changes', () => {
+      const expression = new CustomFieldQueryExpression()
+      model.addExpression(expression)
+      expect(model.queries.length).toBe(1)
+      const expression2 = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [1, 'icontains', 'test'],
+          [2, 'icontains', 'test'],
+        ],
+      ])
+      model.addExpression(expression2)
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      expression2.changed.next(expression2)
+      expect(nextSpy).toHaveBeenCalled()
+    })
+
+    it('should remove an element from the model', () => {
+      const expression = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [1, 'icontains', 'test'],
+          [2, 'icontains', 'test'],
+        ],
+      ])
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      const expression2 = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [3, 'icontains', 'test'],
+          [4, 'icontains', 'test'],
+        ],
+      ])
+      expression.addAtom(atom)
+      expression2.addExpression(expression)
+      model.addExpression(expression2)
+      model.removeElement(atom)
+      expect(model.queries.length).toBe(1)
+      model.removeElement(expression2)
+    })
+
+    it('should fire changed event when an atom changes', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      atom.changed.next(atom)
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
+
+    it('should complete changed subject when element is removed', () => {
+      const expression = new CustomFieldQueryExpression()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      ;(expression.value as CustomFieldQueryElement[]).push(atom)
+      model.addExpression(expression)
+      const completeSpy = jest.spyOn(atom.changed, 'complete')
+      model.removeElement(atom)
+      expect(completeSpy).toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,342 @@
+import { NgTemplateOutlet } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  NgbDatepickerModule,
+  NgbDropdown,
+  NgbDropdownModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { first, Subject, takeUntil } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import {
+  CUSTOM_FIELD_QUERY_MAX_ATOMS,
+  CUSTOM_FIELD_QUERY_MAX_DEPTH,
+  CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE,
+  CUSTOM_FIELD_QUERY_OPERATOR_LABELS,
+  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
+  CustomFieldQueryElementType,
+  CustomFieldQueryOperator,
+  CustomFieldQueryOperatorGroups,
+} from 'src/app/data/custom-field-query'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import {
+  CustomFieldQueryAtom,
+  CustomFieldQueryElement,
+  CustomFieldQueryExpression,
+} from 'src/app/utils/custom-field-query-element'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import { DocumentLinkComponent } from '../input/document-link/document-link.component'
+
+export class CustomFieldQueriesModel {
+  public queries: CustomFieldQueryElement[] = []
+
+  public readonly changed = new Subject<CustomFieldQueriesModel>()
+
+  public clear(fireEvent = true) {
+    this.queries = []
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+  }
+
+  public isValid(): boolean {
+    return (
+      this.queries.length > 0 &&
+      this.validateExpression(this.queries[0] as CustomFieldQueryExpression)
+    )
+  }
+
+  public isEmpty(): boolean {
+    return (
+      this.queries.length === 0 ||
+      (this.queries.length === 1 && this.queries[0].value.length === 0)
+    )
+  }
+
+  private validateAtom(atom: CustomFieldQueryAtom) {
+    let valid = !!(atom.field && atom.operator && atom.value !== null)
+    if (
+      [
+        CustomFieldQueryOperator.In.valueOf(),
+        CustomFieldQueryOperator.Contains.valueOf(),
+      ].includes(atom.operator) &&
+      atom.value
+    ) {
+      valid = valid && atom.value.length > 0
+    }
+    return valid
+  }
+
+  private validateExpression(expression: CustomFieldQueryExpression) {
+    return (
+      expression.operator &&
+      expression.value.length > 0 &&
+      (expression.value as CustomFieldQueryElement[]).every((e) =>
+        e.type === CustomFieldQueryElementType.Atom
+          ? this.validateAtom(e as CustomFieldQueryAtom)
+          : this.validateExpression(e as CustomFieldQueryExpression)
+      )
+    )
+  }
+
+  public addAtom(atom: CustomFieldQueryAtom) {
+    if (this.queries.length === 0) {
+      this.addExpression()
+    }
+    ;(this.queries[0].value as CustomFieldQueryElement[]).push(atom)
+    atom.changed.subscribe(() => {
+      if (atom.field && atom.operator && atom.value) {
+        this.changed.next(this)
+      }
+    })
+  }
+
+  public addExpression(
+    expression: CustomFieldQueryExpression = new CustomFieldQueryExpression()
+  ) {
+    if (this.queries.length > 0) {
+      ;(
+        (this.queries[0] as CustomFieldQueryExpression)
+          .value as CustomFieldQueryElement[]
+      ).push(expression)
+    } else {
+      this.queries.push(expression)
+    }
+    expression.changed.subscribe(() => {
+      this.changed.next(this)
+    })
+  }
+
+  private findElement(
+    queryElement: CustomFieldQueryElement,
+    elements: any[]
+  ): CustomFieldQueryElement {
+    let foundElement
+    for (let i = 0; i < elements.length; i++) {
+      if (elements[i] === queryElement) {
+        foundElement = elements.splice(i, 1)[0]
+      } else if (elements[i].type === CustomFieldQueryElementType.Expression) {
+        foundElement = this.findElement(
+          queryElement,
+          elements[i].value as CustomFieldQueryElement[]
+        )
+      }
+      if (foundElement) {
+        break
+      }
+    }
+    return foundElement
+  }
+
+  public removeElement(queryElement: CustomFieldQueryElement) {
+    let foundComponent
+    for (let i = 0; i < this.queries.length; i++) {
+      let query = this.queries[i]
+      if (query === queryElement) {
+        foundComponent = this.queries.splice(i, 1)[0]
+        break
+      } else if (query.type === CustomFieldQueryElementType.Expression) {
+        foundComponent = this.findElement(queryElement, query.value as any[])
+      }
+    }
+    if (foundComponent) {
+      foundComponent.changed.complete()
+      if (this.isEmpty()) {
+        this.clear()
+      }
+      this.changed.next(this)
+    }
+  }
+}
+
+@Component({
+  selector: 'pngx-custom-fields-query-dropdown',
+  templateUrl: './custom-fields-query-dropdown.component.html',
+  styleUrls: ['./custom-fields-query-dropdown.component.scss'],
+  imports: [
+    ClearableBadgeComponent,
+    FormsModule,
+    DocumentLinkComponent,
+    ReactiveFormsModule,
+    NgbDatepickerModule,
+    NgTemplateOutlet,
+    NgSelectModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+  ],
+})
+export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPermissions {
+  protected customFieldsService = inject(CustomFieldsService)
+
+  public CustomFieldQueryComponentType = CustomFieldQueryElementType
+  public CustomFieldQueryOperator = CustomFieldQueryOperator
+  public CustomFieldDataType = CustomFieldDataType
+  public CUSTOM_FIELD_QUERY_MAX_DEPTH = CUSTOM_FIELD_QUERY_MAX_DEPTH
+  public CUSTOM_FIELD_QUERY_MAX_ATOMS = CUSTOM_FIELD_QUERY_MAX_ATOMS
+  public popperOptions = pngxPopperOptions
+
+  @Input()
+  title: string
+
+  @Input()
+  filterPlaceholder: string = ''
+
+  @Input()
+  icon: string
+
+  @Input()
+  allowSelectNone: boolean = false
+
+  @Input()
+  editing = false
+
+  @Input()
+  applyOnClose = false
+
+  get name(): string {
+    return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
+  }
+
+  @Input()
+  disabled: boolean = false
+
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  @ViewChildren(NgSelectComponent) fieldSelects!: QueryList<NgSelectComponent>
+
+  private _selectionModel: CustomFieldQueriesModel
+
+  @Input()
+  set selectionModel(model: CustomFieldQueriesModel) {
+    if (this._selectionModel) {
+      this._selectionModel.changed.complete()
+    }
+    model.changed.subscribe(() => {
+      this.onModelChange()
+    })
+    this._selectionModel = model
+  }
+
+  get selectionModel(): CustomFieldQueriesModel {
+    return this._selectionModel
+  }
+
+  private onModelChange() {
+    if (this.selectionModel.isEmpty() || this.selectionModel.isValid()) {
+      this.selectionModelChange.next(this.selectionModel)
+      this.selectionModel.isEmpty() && this.dropdown?.close()
+    }
+  }
+
+  @Output()
+  selectionModelChange = new EventEmitter<CustomFieldQueriesModel>()
+
+  customFields: CustomField[] = []
+
+  public readonly today: string = new Date().toLocaleDateString('en-CA')
+
+  constructor() {
+    super()
+    this.selectionModel = new CustomFieldQueriesModel()
+    this.getFields()
+    this.reset()
+  }
+
+  public onOpenChange(open: boolean) {
+    if (open) {
+      if (this.selectionModel.queries.length === 0) {
+        this.selectionModel.addAtom(
+          new CustomFieldQueryAtom([
+            null,
+            CustomFieldQueryOperator.Exists,
+            'true',
+          ])
+        )
+      }
+      if (
+        this.selectionModel.queries.length === 1 &&
+        (
+          (this.selectionModel.queries[0] as CustomFieldQueryExpression)
+            ?.value[0] as CustomFieldQueryAtom
+        )?.field === null
+      ) {
+        setTimeout(() => {
+          this.fieldSelects.first?.focus()
+        }, 0)
+      }
+    }
+  }
+
+  public get isActive(): boolean {
+    return this.selectionModel.isValid()
+  }
+
+  private getFields() {
+    this.customFieldsService
+      .listAll()
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe((result) => {
+        this.customFields = result.results
+      })
+  }
+
+  public getCustomFieldByID(id: number): CustomField {
+    return this.customFields.find((field) => field.id === id)
+  }
+
+  public addAtom(expression: CustomFieldQueryExpression) {
+    expression.addAtom()
+  }
+
+  public addExpression(expression: CustomFieldQueryExpression) {
+    expression.addExpression()
+  }
+
+  public removeElement(element: CustomFieldQueryElement) {
+    this.selectionModel.removeElement(element)
+  }
+
+  public reset() {
+    this.selectionModel.clear(false)
+    this.selectionModel.changed.next(this.selectionModel)
+  }
+
+  getOperatorsForField(
+    fieldID: number
+  ): Array<{ value: string; label: string }> {
+    const field = this.customFields.find((field) => field.id === fieldID)
+    const groups: CustomFieldQueryOperatorGroups[] = field
+      ? CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE[field.data_type]
+      : [CustomFieldQueryOperatorGroups.Basic]
+    const operators = groups.flatMap(
+      (group) => CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[group]
+    )
+    return operators.map((operator) => ({
+      value: operator,
+      label: CUSTOM_FIELD_QUERY_OPERATOR_LABELS[operator],
+    }))
+  }
+
+  getSelectOptionsForField(
+    fieldID: number
+  ): Array<{ label: string; id: string }> {
+    const field = this.customFields.find((field) => field.id === fieldID)
+    if (field) {
+      return field.extra_data['select_options']
+    }
+    return []
+  }
+}

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

@@ -0,0 +1,160 @@
+<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
+    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+  </button>
+  <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+    <h6 class="dropdown-header border-bottom" i18n>Created</h6>
+    <div class="list-group list-group-flush">
+      <div class="list-group-item d-flex p-2 select-item" role="menuitem">
+        <div class="selected-icon">
+          @if (createdRelativeDate) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused text-dark"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <ng-select class="w-100" name="createdRelativeDate"
+          [items]="relativeDates" [(ngModel)]="createdRelativeDate"
+          bindValue="id"
+          bindLabel="name"
+          clearable="false"
+          placeholder="Relative dates"
+          i18n-placeholder
+          (change)="onSetCreatedRelativeDate($event)">
+          <ng-template ng-option-tmp let-item="item">
+            <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+          </ng-template>
+          </ng-select>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (createdDateFrom) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedFrom()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>From</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="createdDateFrom" ngbDatepicker #createdDateFromPicker="ngbDatepicker" [footerTemplate]="createdFromFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="createdDateFromPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #createdFromFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="createdDateFrom = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="createdDateFromPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (createdDateTo) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedTo()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>To</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="createdDateTo" ngbDatepicker #createdDateToPicker="ngbDatepicker" [footerTemplate]="createdToFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="createdDateToPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #createdToFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="createdDateTo = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="createdDateToPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
+
+      </div>
+    </div>
+    <h6 class="dropdown-header border-bottom" i18n>Added</h6>
+    <div class="list-group list-group-flush">
+      <div class="list-group-item d-flex p-2 select-item" role="menuitem">
+        <div class="selected-icon">
+          @if (addedRelativeDate) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <ng-select class="w-100" name="addedRelativeDate"
+            [items]="relativeDates" [(ngModel)]="addedRelativeDate"
+            bindValue="id"
+            bindLabel="name"
+            clearable="false"
+            placeholder="Relative dates"
+            i18n-placeholder
+            (change)="onSetAddedRelativeDate($event)">
+            <ng-template ng-option-tmp let-item="item">
+              <div class="d-flex">{{ item.name }}<span class="ms-auto text-muted small">{{ item.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container></span></div>
+            </ng-template>
+          </ng-select>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (addedDateFrom) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>From</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="addedDateFrom" ngbDatepicker #addedDateFromPicker="ngbDatepicker" [footerTemplate]="addedFromFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="addedDateFromPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #addedFromFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="addedDateFrom = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="addedDateFromPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+      <div class="list-group-item d-flex p-2" role="menuitem">
+        <div class="selected-icon">
+          @if (addedDateTo) {
+            <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedTo()">
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
+          }
+        </div>
+        <div class="input-group input-group-sm small ps-1 pe-2">
+          <span class="input-group-text w-25 small text-muted" i18n>To</span>
+          <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="addedDateTo" ngbDatepicker #addedDateToPicker="ngbDatepicker" [footerTemplate]="addedToFooterTemplate">
+          <button class="btn btn-outline-secondary" (click)="addedDateToPicker.toggle()" type="button">
+            <i-bs width="1em" height="1em" name="calendar"></i-bs>
+          </button>
+          <ng-template #addedToFooterTemplate>
+            <div class="btn-group-xs border-top p-2 d-flex">
+              <button class="btn btn-primary" (click)="addedDateTo = today; onChangeDebounce()" i18n>Today</button>
+              <button class="btn btn-secondary ms-auto" (click)="addedDateToPicker.close()" i18n>Close</button>
+            </div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+.date-dropdown {
+  --bs-dropdown-min-width: 22rem;
+  white-space: nowrap;
+
+  .btn-link {
+    line-height: 1;
+  }
+}
+
+.selected-icon {
+  min-width: 1em;
+  min-height: 1em;
+}
+
+.select-item .selected-icon {
+  line-height: 2em;
+}
+
+.input-group-sm {
+  .form-control {
+    font-size: 0.875rem;
+  }
+}
+
+.focus-variants {
+  .variant-focused {
+    display: none;
+  }
+
+  &:hover, &:focus {
+    .variant-unfocused {
+      display: none;
+    }
+    .variant-focused {
+      display: block;
+    }
+  }
+}
+
+.btn-group-xs {
+  > .btn {
+    border-radius: 0.15rem;
+  }
+}

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

@@ -0,0 +1,194 @@
+import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import {
+  DateSelection,
+  DatesDropdownComponent,
+  RelativeDate,
+} from './dates-dropdown.component'
+let fixture: ComponentFixture<DatesDropdownComponent>
+
+describe('DatesDropdownComponent', () => {
+  let component: DatesDropdownComponent
+  let settingsService: SettingsService
+  let settingsSpy
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        NgbModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        DatesDropdownComponent,
+        ClearableBadgeComponent,
+        CustomDatePipe,
+      ],
+      providers: [
+        SettingsService,
+        CustomDatePipe,
+        DatePipe,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    settingsService = TestBed.inject(SettingsService)
+    settingsSpy = jest.spyOn(settingsService, 'getLocalizedDateInputFormat')
+
+    fixture = TestBed.createComponent(DatesDropdownComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should use a localized date placeholder', () => {
+    expect(component.datePlaceHolder).toEqual('mm/dd/yyyy')
+    expect(settingsSpy).toHaveBeenCalled()
+  })
+
+  it('should support date input, emit change', fakeAsync(() => {
+    let result: string
+    component.createdDateFromChange.subscribe((date) => (result = date))
+    const input: HTMLInputElement = fixture.nativeElement.querySelector('input')
+    input.value = '5/30/2023'
+    input.dispatchEvent(new Event('change'))
+    tick(500)
+    expect(result).not.toBeNull()
+  }))
+
+  it('should support date select, emit datesSet change', fakeAsync(() => {
+    let result: DateSelection
+    component.datesSet.subscribe((date) => (result = date))
+    const input: HTMLInputElement = fixture.nativeElement.querySelector('input')
+    input.value = '5/30/2023'
+    input.dispatchEvent(new Event('dateSelect'))
+    tick(500)
+    expect(result).not.toBeNull()
+  }))
+
+  it('should support relative dates', fakeAsync(() => {
+    let result: DateSelection
+    component.datesSet.subscribe((date) => (result = date))
+    component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
+    component.onSetCreatedRelativeDate({
+      id: RelativeDate.WITHIN_1_WEEK,
+    } as any)
+    component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
+    component.onSetAddedRelativeDate({ id: RelativeDate.WITHIN_1_WEEK } as any)
+    tick(500)
+    expect(result).toEqual({
+      createdFrom: null,
+      createdTo: null,
+      createdRelativeDateID: RelativeDate.WITHIN_1_WEEK,
+      addedFrom: null,
+      addedTo: null,
+      addedRelativeDateID: RelativeDate.WITHIN_1_WEEK,
+    })
+  }))
+
+  it('should support report if active', () => {
+    component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK
+    expect(component.isActive).toBeTruthy()
+    component.createdRelativeDate = null
+    component.createdDateFrom = '2023-05-30'
+    expect(component.isActive).toBeTruthy()
+    component.createdDateFrom = null
+    component.createdDateTo = '2023-05-30'
+    expect(component.isActive).toBeTruthy()
+    component.createdDateTo = null
+
+    component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    expect(component.isActive).toBeTruthy()
+    component.addedRelativeDate = null
+    component.addedDateFrom = '2023-05-30'
+    expect(component.isActive).toBeTruthy()
+    component.addedDateFrom = null
+    component.addedDateTo = '2023-05-30'
+    expect(component.isActive).toBeTruthy()
+    component.addedDateTo = null
+
+    expect(component.isActive).toBeFalsy()
+  })
+
+  it('should support reset', () => {
+    component.createdDateFrom = '2023-05-30'
+    component.reset()
+    expect(component.createdDateFrom).toBeNull()
+  })
+
+  it('should support clearFrom', () => {
+    component.createdDateFrom = '2023-05-30'
+    component.clearCreatedFrom()
+    expect(component.createdDateFrom).toBeNull()
+
+    component.addedDateFrom = '2023-05-30'
+    component.clearAddedFrom()
+    expect(component.addedDateFrom).toBeNull()
+  })
+
+  it('should support clearTo', () => {
+    component.createdDateTo = '2023-05-30'
+    component.clearCreatedTo()
+    expect(component.createdDateTo).toBeNull()
+
+    component.addedDateTo = '2023-05-30'
+    component.clearAddedTo()
+    expect(component.addedDateTo).toBeNull()
+  })
+
+  it('should support clearRelativeDate', () => {
+    component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK
+    component.clearCreatedRelativeDate()
+    expect(component.createdRelativeDate).toBeNull()
+
+    component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK
+    component.clearAddedRelativeDate()
+    expect(component.addedRelativeDate).toBeNull()
+  })
+
+  it('should limit keyboard events', () => {
+    const input: HTMLInputElement =
+      fixture.nativeElement.querySelector('input.form-control')
+    let event: KeyboardEvent = new KeyboardEvent('keypress', {
+      key: '9',
+    })
+    let eventSpy = jest.spyOn(event, 'preventDefault')
+    input.dispatchEvent(event)
+    expect(eventSpy).not.toHaveBeenCalled()
+
+    event = new KeyboardEvent('keypress', {
+      key: '{',
+    })
+    eventSpy = jest.spyOn(event, 'preventDefault')
+    input.dispatchEvent(event)
+    expect(eventSpy).toHaveBeenCalled()
+  })
+
+  it('should support debounce', fakeAsync(() => {
+    let result: DateSelection
+    component.datesSet.subscribe((date) => (result = date))
+    component.onChangeDebounce()
+    tick(500)
+    expect(result).toEqual({
+      createdFrom: null,
+      createdTo: null,
+      createdRelativeDateID: null,
+      addedFrom: null,
+      addedTo: null,
+      addedRelativeDateID: null,
+    })
+  }))
+})

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

@@ -0,0 +1,285 @@
+import { NgClass } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import {
+  NgbDateAdapter,
+  NgbDatepickerModule,
+  NgbDropdownModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, Subscription } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
+import { pngxPopperOptions } from 'src/app/utils/popper-options'
+import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+
+export interface DateSelection {
+  createdTo?: string
+  createdFrom?: string
+  createdRelativeDateID?: number
+  addedTo?: string
+  addedFrom?: string
+  addedRelativeDateID?: number
+}
+
+export enum RelativeDate {
+  WITHIN_1_WEEK = 1,
+  WITHIN_1_MONTH = 2,
+  WITHIN_3_MONTHS = 3,
+  WITHIN_1_YEAR = 4,
+  THIS_YEAR = 5,
+  THIS_MONTH = 6,
+  TODAY = 7,
+  YESTERDAY = 8,
+}
+
+@Component({
+  selector: 'pngx-dates-dropdown',
+  templateUrl: './dates-dropdown.component.html',
+  styleUrls: ['./dates-dropdown.component.scss'],
+  providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],
+  imports: [
+    ClearableBadgeComponent,
+    CustomDatePipe,
+    NgxBootstrapIconsModule,
+    NgbDatepickerModule,
+    NgbDropdownModule,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgClass,
+  ],
+})
+export class DatesDropdownComponent implements OnInit, OnDestroy {
+  public popperOptions = pngxPopperOptions
+
+  constructor() {
+    const settings = inject(SettingsService)
+
+    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
+  }
+
+  relativeDates = [
+    {
+      id: RelativeDate.WITHIN_1_WEEK,
+      name: $localize`Within 1 week`,
+      date: new Date().setDate(new Date().getDate() - 7),
+    },
+    {
+      id: RelativeDate.WITHIN_1_MONTH,
+      name: $localize`Within 1 month`,
+      date: new Date().setMonth(new Date().getMonth() - 1),
+    },
+    {
+      id: RelativeDate.WITHIN_3_MONTHS,
+      name: $localize`Within 3 months`,
+      date: new Date().setMonth(new Date().getMonth() - 3),
+    },
+    {
+      id: RelativeDate.WITHIN_1_YEAR,
+      name: $localize`Within 1 year`,
+      date: new Date().setFullYear(new Date().getFullYear() - 1),
+    },
+    {
+      id: RelativeDate.THIS_YEAR,
+      name: $localize`This year`,
+      date: new Date('1/1/' + new Date().getFullYear()),
+    },
+    {
+      id: RelativeDate.THIS_MONTH,
+      name: $localize`This month`,
+      date: new Date().setDate(1),
+    },
+    {
+      id: RelativeDate.TODAY,
+      name: $localize`Today`,
+      date: new Date().setHours(0, 0, 0, 0),
+    },
+    {
+      id: RelativeDate.YESTERDAY,
+      name: $localize`Yesterday`,
+      date: new Date().setDate(new Date().getDate() - 1),
+    },
+  ]
+
+  datePlaceHolder: string
+
+  // created
+  @Input()
+  createdDateTo: string = null
+
+  @Output()
+  createdDateToChange = new EventEmitter<string>()
+
+  @Input()
+  createdDateFrom: string = null
+
+  @Output()
+  createdDateFromChange = new EventEmitter<string>()
+
+  @Input()
+  createdRelativeDate: RelativeDate = null
+
+  @Output()
+  createdRelativeDateChange = new EventEmitter<number>()
+
+  // added
+  @Input()
+  addedDateTo: string = null
+
+  @Output()
+  addedDateToChange = new EventEmitter<string>()
+
+  @Input()
+  addedDateFrom: string = null
+
+  @Output()
+  addedDateFromChange = new EventEmitter<string>()
+
+  @Input()
+  addedRelativeDate: RelativeDate = null
+
+  @Output()
+  addedRelativeDateChange = new EventEmitter<number>()
+
+  @Input()
+  title: string
+
+  @Output()
+  datesSet = new EventEmitter<DateSelection>()
+
+  @Input()
+  disabled: boolean = false
+
+  @Input()
+  placement: string = 'bottom-start'
+
+  public readonly today: string = new Date().toLocaleDateString('en-CA')
+
+  get isActive(): boolean {
+    return (
+      this.createdRelativeDate !== null ||
+      this.createdDateFrom?.length > 0 ||
+      this.createdDateTo?.length > 0 ||
+      this.addedRelativeDate !== null ||
+      this.addedDateFrom?.length > 0 ||
+      this.addedDateTo?.length > 0
+    )
+  }
+
+  private datesSetDebounce$ = new Subject()
+
+  private sub: Subscription
+
+  ngOnInit() {
+    this.sub = this.datesSetDebounce$.pipe(debounceTime(400)).subscribe(() => {
+      this.onChange()
+    })
+  }
+
+  ngOnDestroy() {
+    if (this.sub) {
+      this.sub.unsubscribe()
+    }
+  }
+
+  reset() {
+    this.createdDateTo = null
+    this.createdDateFrom = null
+    this.createdRelativeDate = null
+    this.addedDateTo = null
+    this.addedDateFrom = null
+    this.addedRelativeDate = null
+    this.onChange()
+  }
+
+  onSetCreatedRelativeDate(rd: { id: number; name: string; date: number }) {
+    // createdRelativeDate is set by ngModel
+    this.createdDateTo = null
+    this.createdDateFrom = null
+    this.onChange()
+  }
+
+  onSetAddedRelativeDate(rd: { id: number; name: string; date: number }) {
+    // addedRelativeDate is set by ngModel
+    this.addedDateTo = null
+    this.addedDateFrom = null
+    this.onChange()
+  }
+
+  onChange() {
+    this.createdDateToChange.emit(this.createdDateTo)
+    this.createdDateFromChange.emit(this.createdDateFrom)
+    this.createdRelativeDateChange.emit(this.createdRelativeDate)
+    this.addedDateToChange.emit(this.addedDateTo)
+    this.addedDateFromChange.emit(this.addedDateFrom)
+    this.addedRelativeDateChange.emit(this.addedRelativeDate)
+    this.datesSet.emit({
+      createdFrom: this.createdDateFrom,
+      createdTo: this.createdDateTo,
+      createdRelativeDateID: this.createdRelativeDate,
+      addedFrom: this.addedDateFrom,
+      addedTo: this.addedDateTo,
+      addedRelativeDateID: this.addedRelativeDate,
+    })
+  }
+
+  onChangeDebounce() {
+    this.createdRelativeDate = null
+    this.addedRelativeDate = null
+    this.datesSetDebounce$.next({
+      createdAfter: this.createdDateFrom,
+      createdBefore: this.createdDateTo,
+      addedAfter: this.addedDateFrom,
+      addedBefore: this.addedDateTo,
+    })
+  }
+
+  clearCreatedTo() {
+    this.createdDateTo = null
+    this.onChange()
+  }
+
+  clearCreatedFrom() {
+    this.createdDateFrom = null
+    this.onChange()
+  }
+
+  clearCreatedRelativeDate() {
+    this.createdRelativeDate = null
+    this.onChange()
+  }
+
+  clearAddedTo() {
+    this.addedDateTo = null
+    this.onChange()
+  }
+
+  clearAddedFrom() {
+    this.addedDateFrom = null
+    this.onChange()
+  }
+
+  clearAddedRelativeDate() {
+    this.addedRelativeDate = null
+    this.onChange()
+  }
+
+  // prevent chars other than numbers and separators
+  onKeyPress(event: KeyboardEvent) {
+    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
+      event.preventDefault()
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    @if (object?.id) {
+      <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+    }
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
+    }
+
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
+    </div>
+
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -0,0 +1,61 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { SettingsService } from 'src/app/services/settings.service'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { EditDialogMode } from '../edit-dialog.component'
+import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog.component'
+
+describe('CorrespondentEditDialogComponent', () => {
+  let component: CorrespondentEditDialogComponent
+  let settingsService: SettingsService
+  let fixture: ComponentFixture<CorrespondentEditDialogComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        CorrespondentEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        PermissionsFormComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(CorrespondentEditDialogComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 99, username: 'user99' }
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,59 @@
+import { Component, inject } from '@angular/core'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { Correspondent } from 'src/app/data/correspondent'
+import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { CheckComponent } from '../../input/check/check.component'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+
+@Component({
+  selector: 'pngx-correspondent-edit-dialog',
+  templateUrl: './correspondent-edit-dialog.component.html',
+  styleUrls: ['./correspondent-edit-dialog.component.scss'],
+  imports: [
+    CheckComponent,
+    SelectComponent,
+    PermissionsFormComponent,
+    TextComponent,
+    IfOwnerDirective,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
+  constructor() {
+    super()
+    this.service = inject(CorrespondentService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new correspondent`
+  }
+
+  getEditTitle() {
+    return $localize`Edit correspondent`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      matching_algorithm: new FormControl(DEFAULT_MATCHING_ALGORITHM),
+      match: new FormControl(''),
+      is_insensitive: new FormControl(true),
+      permissions_form: new FormControl(null),
+    })
+  }
+}

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

@@ -0,0 +1,57 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    @if (object?.id) {
+      <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+    }
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+    <pngx-input-select i18n-title title="Data type" [items]="getDataTypes()" formControlName="data_type"></pngx-input-select>
+    @if (typeFieldDisabled) {
+      <small class="d-block mt-n2" i18n>Data type cannot be changed after a field is created</small>
+    }
+    <div [formGroup]="objectForm.controls.extra_data">
+      @switch (objectForm.get('data_type').value) {
+        @case (CustomFieldDataType.Select) {
+          <button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
+            <span i18n>Add option</span>&nbsp;<i-bs name="plus-circle"></i-bs>
+          </button>
+          <div formArrayName="select_options">
+            @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {
+              <div class="input-group input-group-sm my-2" [formGroup]="objectForm.controls.extra_data.controls.select_options.controls[i]">
+                <input #selectOption type="text" class="form-control" formControlName="label" autocomplete="off">
+                <input type="hidden" formControlName="id">
+                <button type="button" class="btn btn-outline-danger" (click)="removeSelectOption(i)" i18n>Delete</button>
+              </div>
+            }
+          </div>
+          @if (allSelectOptions.length > SELECT_OPTION_PAGE_SIZE) {
+            <ngb-pagination
+              class="d-flex justify-content-end"
+              [pageSize]="SELECT_OPTION_PAGE_SIZE"
+              [collectionSize]="allSelectOptions.length"
+              [(page)]="selectOptionsPage"
+              [maxSize]="5"
+              size="sm"
+            ></ngb-pagination>
+          }
+          @if (object?.id) {
+            <small class="d-block mt-2" i18n>Warning: existing instances of this field will retain their current value index (e.g. option #1, #2, #3) after editing the options here</small>
+          }
+        }
+        @case (CustomFieldDataType.Monetary) {
+          <div class="my-3">
+            <pngx-input-text i18n-title title="Default Currency" hint="3-character currency code" i18n-hint formControlName="default_currency" placeholder="Use locale" i18n-placeholder autocomplete="off"></pngx-input-text>
+          </div>
+        }
+      }
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -0,0 +1,166 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef, QueryList } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { CustomFieldDataType } from 'src/app/data/custom-field'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { EditDialogMode } from '../edit-dialog.component'
+import { CustomFieldEditDialogComponent } from './custom-field-edit-dialog.component'
+
+describe('CustomFieldEditDialogComponent', () => {
+  let component: CustomFieldEditDialogComponent
+  let settingsService: SettingsService
+  let fixture: ComponentFixture<CustomFieldEditDialogComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        CustomFieldEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        SafeHtmlPipe,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(CustomFieldEditDialogComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 99, username: 'user99' }
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+  })
+
+  it('should disable data type select on edit', () => {
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    component.ngOnInit()
+    expect(component.objectForm.get('data_type').disabled).toBeTruthy()
+  })
+
+  it('should initialize select options on edit', () => {
+    component.dialogMode = EditDialogMode.EDIT
+    component.object = {
+      id: 1,
+      name: 'Field 1',
+      data_type: CustomFieldDataType.Select,
+      extra_data: {
+        select_options: [
+          { label: 'Option 1', id: '123-xyz' },
+          { label: 'Option 2', id: '456-abc' },
+          { label: 'Option 3', id: '789-123' },
+        ],
+      },
+    }
+    fixture.detectChanges()
+    component.ngOnInit()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(3)
+  })
+
+  it('should support add / remove select options', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    fixture.detectChanges()
+    component.ngOnInit()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(0)
+    component.addSelectOption()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(1)
+    component.addSelectOption()
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(2)
+    component.removeSelectOption(0)
+    expect(
+      component.objectForm.get('extra_data').get('select_options').value.length
+    ).toBe(1)
+  })
+
+  it('should focus on last select option input', () => {
+    const selectOptionInputs = component[
+      'selectOptionInputs'
+    ] as QueryList<ElementRef>
+    component.dialogMode = EditDialogMode.CREATE
+    component.objectForm.get('data_type').setValue(CustomFieldDataType.Select)
+    component.ngOnInit()
+    component.ngAfterViewInit()
+    component.addSelectOption()
+    fixture.detectChanges()
+    expect(document.activeElement).toBe(selectOptionInputs.last.nativeElement)
+  })
+
+  it('should send all select options including those changed in form on save', () => {
+    component.dialogMode = EditDialogMode.EDIT
+    component.object = {
+      id: 1,
+      name: 'Field 1',
+      data_type: CustomFieldDataType.Select,
+      extra_data: {
+        select_options: Array.from({ length: 50 }, (_, i) => ({
+          label: `Option ${i + 1}`,
+          id: `${i + 1}-xyz`,
+        })),
+      },
+    }
+    fixture.detectChanges()
+    component.ngOnInit()
+    component.selectOptionsPage = 2
+    fixture.detectChanges()
+    component.objectForm
+      .get('extra_data')
+      .get('select_options')
+      .get('0')
+      .get('label')
+      .setValue('Updated Option 9')
+    const formValues = (component as any).getFormValues()
+    // first item unchanged
+    expect(formValues.extra_data.select_options[0]).toEqual({
+      label: 'Option 1',
+      id: '1-xyz',
+    })
+    // page 2 first item updated
+    expect(
+      formValues.extra_data.select_options[component.SELECT_OPTION_PAGE_SIZE]
+    ).toEqual({
+      label: 'Updated Option 9',
+      id: '9-xyz',
+    })
+  })
+})

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

@@ -0,0 +1,192 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnInit,
+  QueryList,
+  ViewChildren,
+  inject,
+} from '@angular/core'
+import {
+  FormArray,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { takeUntil } from 'rxjs'
+import {
+  CustomField,
+  CustomFieldDataType,
+  DATA_TYPE_LABELS,
+} from 'src/app/data/custom-field'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
+
+const SELECT_OPTION_PAGE_SIZE = 8
+
+@Component({
+  selector: 'pngx-custom-field-edit-dialog',
+  templateUrl: './custom-field-edit-dialog.component.html',
+  styleUrls: ['./custom-field-edit-dialog.component.scss'],
+  imports: [
+    SelectComponent,
+    TextComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbPaginationModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class CustomFieldEditDialogComponent
+  extends EditDialogComponent<CustomField>
+  implements OnInit, AfterViewInit
+{
+  CustomFieldDataType = CustomFieldDataType
+  SELECT_OPTION_PAGE_SIZE = SELECT_OPTION_PAGE_SIZE
+
+  private _allSelectOptions: any[] = []
+  public get allSelectOptions(): any[] {
+    return this._allSelectOptions
+  }
+
+  private _selectOptionsPage: number
+  public get selectOptionsPage(): number {
+    return this._selectOptionsPage
+  }
+  public set selectOptionsPage(v: number) {
+    this._selectOptionsPage = v
+    this.updateSelectOptions()
+  }
+
+  @ViewChildren('selectOption')
+  private selectOptionInputs: QueryList<ElementRef>
+
+  private get selectOptions(): FormArray {
+    return (this.objectForm.controls.extra_data as FormGroup).controls
+      .select_options as FormArray
+  }
+
+  constructor() {
+    super()
+    this.service = inject(CustomFieldsService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit()
+    if (this.typeFieldDisabled) {
+      this.objectForm.get('data_type').disable()
+    }
+    if (this.object?.data_type === CustomFieldDataType.Select) {
+      this._allSelectOptions = [
+        ...(this.object.extra_data.select_options ?? []),
+      ]
+      this.selectOptionsPage = 1
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.selectOptionInputs.changes
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.selectOptionInputs.last?.nativeElement.focus()
+      })
+
+    this.objectForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((change) => {
+        // Update the relevant select options values if changed in the form, which is only a page of the entire list
+        this.objectForm
+          .get('extra_data.select_options')
+          ?.value.forEach((option, index) => {
+            this._allSelectOptions[
+              index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE
+            ] = option
+          })
+      })
+  }
+
+  getCreateTitle() {
+    return $localize`Create new custom field`
+  }
+
+  getEditTitle() {
+    return $localize`Edit custom field`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(null),
+      data_type: new FormControl(null),
+      extra_data: new FormGroup({
+        select_options: new FormArray([]),
+        default_currency: new FormControl(null),
+      }),
+    })
+  }
+
+  protected getFormValues() {
+    const formValues = super.getFormValues()
+    if (
+      this.objectForm.get('data_type')?.value === CustomFieldDataType.Select
+    ) {
+      // Make sure we send all select options, with updated values
+      formValues.extra_data.select_options = this._allSelectOptions
+    }
+    return formValues
+  }
+
+  getDataTypes() {
+    return DATA_TYPE_LABELS
+  }
+
+  get typeFieldDisabled(): boolean {
+    return this.dialogMode === EditDialogMode.EDIT
+  }
+
+  private updateSelectOptions() {
+    this.selectOptions.clear()
+    this._allSelectOptions
+      .slice(
+        (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE,
+        this.selectOptionsPage * SELECT_OPTION_PAGE_SIZE
+      )
+      .forEach((option) =>
+        this.selectOptions.push(
+          new FormGroup({
+            label: new FormControl(option.label),
+            id: new FormControl(option.id),
+          })
+        )
+      )
+  }
+
+  public addSelectOption() {
+    this._allSelectOptions.push({ label: null, id: null })
+    this.selectOptionsPage = Math.ceil(
+      this.allSelectOptions.length / SELECT_OPTION_PAGE_SIZE
+    )
+  }
+
+  public removeSelectOption(index: number) {
+    const globalIndex =
+      index + (this.selectOptionsPage - 1) * SELECT_OPTION_PAGE_SIZE
+    this._allSelectOptions.splice(globalIndex, 1)
+
+    const totalPages = Math.max(
+      1,
+      Math.ceil(this._allSelectOptions.length / SELECT_OPTION_PAGE_SIZE)
+    )
+    const targetPage = Math.min(this.selectOptionsPage, totalPages)
+
+    this.selectOptionsPage = targetPage
+  }
+}

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

@@ -0,0 +1,30 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    @if (object?.id) {
+      <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+    }
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+
+    <div class="col">
+      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+      <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
+      @if (patternRequired) {
+        <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+        <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+      }
+    </div>
+
+    <div *pngxIfOwner="object">
+      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
+    </div>
+
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -0,0 +1,61 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { SettingsService } from 'src/app/services/settings.service'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { EditDialogMode } from '../edit-dialog.component'
+import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog.component'
+
+describe('DocumentTypeEditDialogComponent', () => {
+  let component: DocumentTypeEditDialogComponent
+  let settingsService: SettingsService
+  let fixture: ComponentFixture<DocumentTypeEditDialogComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        DocumentTypeEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        PermissionsFormComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentTypeEditDialogComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 99, username: 'user99' }
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,59 @@
+import { Component, inject } from '@angular/core'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { DocumentType } from 'src/app/data/document-type'
+import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { CheckComponent } from '../../input/check/check.component'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+
+@Component({
+  selector: 'pngx-document-type-edit-dialog',
+  templateUrl: './document-type-edit-dialog.component.html',
+  styleUrls: ['./document-type-edit-dialog.component.scss'],
+  imports: [
+    CheckComponent,
+    SelectComponent,
+    PermissionsFormComponent,
+    TextComponent,
+    IfOwnerDirective,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
+  constructor() {
+    super()
+    this.service = inject(DocumentTypeService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new document type`
+  }
+
+  getEditTitle() {
+    return $localize`Edit document type`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      matching_algorithm: new FormControl(DEFAULT_MATCHING_ALGORITHM),
+      match: new FormControl(''),
+      is_insensitive: new FormControl(true),
+      permissions_form: new FormControl(null),
+    })
+  }
+}

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

@@ -0,0 +1,259 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import { Component } from '@angular/core'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { of } from 'rxjs'
+import {
+  DEFAULT_MATCHING_ALGORITHM,
+  MATCH_ALL,
+  MATCH_AUTO,
+  MATCH_NONE,
+} from 'src/app/data/matching-model'
+import { Tag } from 'src/app/data/tag'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { TagService } from 'src/app/services/rest/tag.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { environment } from 'src/environments/environment'
+import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
+
+@Component({
+  template: `
+    <div>
+      <h4 class="modal-title" id="modal-basic-title">{{ getTitle() }}</h4>
+    </div>
+  `,
+  imports: [FormsModule, ReactiveFormsModule],
+})
+class TestComponent extends EditDialogComponent<Tag> {
+  constructor() {
+    super()
+    this.service = TestBed.inject(TagService)
+  }
+
+  getForm(): FormGroup<any> {
+    return new FormGroup({
+      name: new FormControl(''),
+      color: new FormControl(''),
+      is_inbox_tag: new FormControl(false),
+      permissions_form: new FormControl(null),
+      matching_algorithm: new FormControl(DEFAULT_MATCHING_ALGORITHM),
+    })
+  }
+}
+
+const currentUser = {
+  id: 99,
+  username: 'user99',
+}
+
+const permissions = {
+  view: {
+    users: [11],
+    groups: [],
+  },
+  change: {
+    users: [],
+    groups: [2],
+  },
+}
+
+const tag = {
+  id: 1,
+  name: 'Tag 1',
+  color: '#fff000',
+  is_inbox_tag: false,
+  matching_algorithm: MATCH_AUTO,
+  owner: 10,
+  permissions,
+}
+
+describe('EditDialogComponent', () => {
+  let component: TestComponent
+  let fixture: ComponentFixture<TestComponent>
+  let tagService: TagService
+  let settingsService: SettingsService
+  let activeModal: NgbActiveModal
+  let httpTestingController: HttpTestingController
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule, ReactiveFormsModule, TestComponent],
+      providers: [
+        NgbActiveModal,
+        {
+          provide: UserService,
+          useValue: {
+            listAll: () =>
+              of({
+                results: [
+                  {
+                    id: 13,
+                    username: 'user1',
+                  },
+                ],
+              }),
+          },
+        },
+        SettingsService,
+        TagService,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    tagService = TestBed.inject(TagService)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = currentUser
+    activeModal = TestBed.inject(NgbActiveModal)
+    httpTestingController = TestBed.inject(HttpTestingController)
+
+    fixture = TestBed.createComponent(TestComponent)
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should interpolate object permissions', () => {
+    component.getMatchingAlgorithms() // coverage
+    component.object = tag
+    component.dialogMode = EditDialogMode.EDIT
+    component.ngOnInit()
+
+    expect(component.objectForm.get('permissions_form').value).toEqual({
+      owner: tag.owner,
+      set_permissions: permissions,
+    })
+  })
+
+  it('should delay close enabled', fakeAsync(() => {
+    expect(component.closeEnabled).toBeFalsy()
+    component.ngOnInit()
+    tick(100)
+    expect(component.closeEnabled).toBeTruthy()
+  }))
+
+  it('should set default owner when in create mode if unset', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    component.ngOnInit()
+    expect(component.objectForm.get('permissions_form').value.owner).toEqual(
+      currentUser.id
+    )
+    // cover optional chaining
+    component.objectForm.removeControl('permissions_form')
+    component.ngOnInit()
+  })
+
+  it('should set default perms when in create mode if set', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    settingsService.set(SETTINGS_KEYS.DEFAULT_PERMS_OWNER, 11)
+    settingsService.set(SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS, [1, 2])
+    settingsService.set(SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS, [3])
+    settingsService.set(SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS, [4])
+    settingsService.set(SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS, [5])
+    component.ngOnInit()
+    expect(component.objectForm.get('permissions_form').value.owner).toEqual(11)
+    expect(
+      component.objectForm.get('permissions_form').value.set_permissions
+    ).toEqual({
+      view: {
+        users: [1, 2],
+        groups: [3],
+      },
+      change: {
+        users: [4],
+        groups: [5],
+      },
+    })
+    // cover optional chaining
+    component.objectForm.removeControl('permissions_form')
+    component.ngOnInit()
+  })
+
+  it('should detect if pattern required', () => {
+    expect(component.patternRequired).toBeFalsy()
+    component.objectForm.get('matching_algorithm').setValue(MATCH_AUTO)
+    expect(component.patternRequired).toBeFalsy()
+    component.objectForm.get('matching_algorithm').setValue(MATCH_NONE)
+    expect(component.patternRequired).toBeFalsy()
+    component.objectForm.get('matching_algorithm').setValue(MATCH_ALL)
+    expect(component.patternRequired).toBeTruthy()
+    // coverage
+    component.objectForm = null
+    expect(component.patternRequired).toBeTruthy()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+    // coverage
+    component.dialogMode = null
+    fixture.detectChanges()
+  })
+
+  it('should close on cancel', () => {
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.cancel()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+
+  it('should update an object on save in edit mode', () => {
+    const updateSpy = jest.spyOn(tagService, 'update')
+    component.dialogMode = EditDialogMode.EDIT
+    component.save()
+    expect(updateSpy).toHaveBeenCalled()
+  })
+
+  it('should create an object on save in edit mode', () => {
+    const createSpy = jest.spyOn(tagService, 'create')
+    component.dialogMode = EditDialogMode.CREATE
+    component.save()
+    expect(createSpy).toHaveBeenCalled()
+  })
+
+  it('should close on successful save', () => {
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    const successSpy = jest.spyOn(component.succeeded, 'emit')
+    component.save()
+    httpTestingController.expectOne(`${environment.apiBaseUrl}tags/`).flush({})
+    expect(closeSpy).toHaveBeenCalled()
+    expect(successSpy).toHaveBeenCalled()
+  })
+
+  it('should not close on failed save', () => {
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    const failedSpy = jest.spyOn(component.failed, 'next')
+    component.save()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}tags/`)
+      .flush('error', {
+        status: 500,
+        statusText: 'error',
+      })
+    expect(closeSpy).not.toHaveBeenCalled()
+    expect(failedSpy).toHaveBeenCalled()
+    expect(component.error).toEqual('error')
+  })
+})

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

@@ -0,0 +1,193 @@
+import {
+  Directive,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  inject,
+} from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { Observable } from 'rxjs'
+import {
+  MATCHING_ALGORITHMS,
+  MATCH_AUTO,
+  MATCH_NONE,
+} from 'src/app/data/matching-model'
+import { ObjectWithId } from 'src/app/data/object-with-id'
+import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { User } from 'src/app/data/user'
+import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+import { PermissionsFormObject } from '../input/permissions/permissions-form/permissions-form.component'
+
+export enum EditDialogMode {
+  CREATE = 0,
+  EDIT = 1,
+}
+
+@Directive()
+export abstract class EditDialogComponent<
+    T extends ObjectWithPermissions | ObjectWithId,
+  >
+  extends LoadingComponentWithPermissions
+  implements OnInit
+{
+  protected service = inject<AbstractPaperlessService<T>>(
+    AbstractPaperlessService
+  )
+  protected activeModal = inject(NgbActiveModal)
+  protected userService = inject(UserService)
+  protected settingsService = inject(SettingsService)
+
+  users: User[]
+
+  @Input()
+  dialogMode: EditDialogMode = EditDialogMode.CREATE
+
+  @Input()
+  object: T
+
+  @Output()
+  succeeded = new EventEmitter<T>()
+
+  @Output()
+  failed = new EventEmitter()
+
+  networkActive = false
+
+  closeEnabled = false
+
+  error = null
+
+  abstract getForm(): FormGroup
+
+  objectForm: FormGroup = this.getForm()
+
+  ngOnInit(): void {
+    if (this.object != null && this.dialogMode !== EditDialogMode.CREATE) {
+      if ((this.object as ObjectWithPermissions).permissions) {
+        this.object['set_permissions'] = this.object['permissions']
+      }
+
+      this.object['permissions_form'] = {
+        owner: (this.object as ObjectWithPermissions).owner,
+        set_permissions: (this.object as ObjectWithPermissions).permissions,
+      }
+      this.objectForm.patchValue(this.object)
+    } else {
+      // e.g. if name was set
+      this.objectForm.patchValue(this.object)
+      // defaults from settings
+      this.objectForm.patchValue({
+        permissions_form: {
+          owner: this.settingsService.get(SETTINGS_KEYS.DEFAULT_PERMS_OWNER),
+          set_permissions: {
+            view: {
+              users: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_VIEW_USERS
+              ),
+              groups: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_VIEW_GROUPS
+              ),
+            },
+            change: {
+              users: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_EDIT_USERS
+              ),
+              groups: this.settingsService.get(
+                SETTINGS_KEYS.DEFAULT_PERMS_EDIT_GROUPS
+              ),
+            },
+          },
+        },
+      })
+    }
+
+    // wait to enable close button so it doesn't steal focus from input since its the first clickable element in the DOM
+    setTimeout(() => {
+      this.closeEnabled = true
+    })
+
+    this.userService.listAll().subscribe((r) => {
+      this.users = r.results
+    })
+  }
+
+  getCreateTitle() {
+    return $localize`Create new item`
+  }
+
+  getEditTitle() {
+    return $localize`Edit item`
+  }
+
+  getTitle() {
+    switch (this.dialogMode) {
+      case EditDialogMode.CREATE:
+        return this.getCreateTitle()
+      case EditDialogMode.EDIT:
+        return this.getEditTitle()
+      default:
+        break
+    }
+  }
+
+  getMatchingAlgorithms() {
+    return MATCHING_ALGORITHMS
+  }
+
+  get patternRequired(): boolean {
+    return (
+      this.objectForm?.value.matching_algorithm !== MATCH_AUTO &&
+      this.objectForm?.value.matching_algorithm !== MATCH_NONE
+    )
+  }
+
+  protected getFormValues(): any {
+    return Object.assign({}, this.objectForm.value)
+  }
+
+  save() {
+    this.error = null
+    const formValues = this.getFormValues()
+    const permissionsObject: PermissionsFormObject =
+      this.objectForm.get('permissions_form')?.value
+    if (permissionsObject) {
+      formValues.owner = permissionsObject.owner
+      formValues.set_permissions = permissionsObject.set_permissions
+      delete formValues.permissions_form
+    }
+
+    var newObject = Object.assign(Object.assign({}, this.object), formValues)
+    var serverResponse: Observable<T>
+    switch (this.dialogMode) {
+      case EditDialogMode.CREATE:
+        serverResponse = this.service.create(newObject)
+        break
+      case EditDialogMode.EDIT:
+        serverResponse = this.service.update(newObject)
+      default:
+        break
+    }
+    this.networkActive = true
+    serverResponse.subscribe({
+      next: (result) => {
+        this.activeModal.close()
+        this.succeeded.emit(result)
+      },
+      error: (error) => {
+        this.error = error.error
+        this.networkActive = false
+        this.failed.next(error)
+      },
+    })
+  }
+
+  cancel() {
+    this.activeModal.close()
+  }
+}

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

@@ -0,0 +1,22 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+    <div class="modal-header">
+      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+      @if (object?.id) {
+        <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+      }
+      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="row">
+        <div class="col">
+          <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+          <pngx-permissions-select i18n-title title="Permissions" formControlName="permissions" [error]="error?.permissions"></pngx-permissions-select>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+    </div>
+  </form>

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

@@ -0,0 +1,65 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { SettingsService } from 'src/app/services/settings.service'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
+import { EditDialogMode } from '../edit-dialog.component'
+import { GroupEditDialogComponent } from './group-edit-dialog.component'
+
+describe('GroupEditDialogComponent', () => {
+  let component: GroupEditDialogComponent
+  let settingsService: SettingsService
+  let fixture: ComponentFixture<GroupEditDialogComponent>
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        GroupEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        PermissionsFormComponent,
+        PermissionsSelectComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(GroupEditDialogComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 99, username: 'user99' }
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,49 @@
+import { Component, inject } from '@angular/core'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { Group } from 'src/app/data/group'
+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 { TextComponent } from '../../input/text/text.component'
+import { PermissionsSelectComponent } from '../../permissions-select/permissions-select.component'
+
+@Component({
+  selector: 'pngx-group-edit-dialog',
+  templateUrl: './group-edit-dialog.component.html',
+  styleUrls: ['./group-edit-dialog.component.scss'],
+  imports: [
+    PermissionsSelectComponent,
+    TextComponent,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class GroupEditDialogComponent extends EditDialogComponent<Group> {
+  constructor() {
+    super()
+    this.service = inject(GroupService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new user group`
+  }
+
+  getEditTitle() {
+    return $localize`Edit user group`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      permissions: new FormControl([]),
+    })
+  }
+}

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

@@ -0,0 +1,42 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    @if (object?.id) {
+      <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+    }
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col">
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+        <pngx-input-text i18n-title title="IMAP Server" formControlName="imap_server" [error]="error?.imap_server"></pngx-input-text>
+        <pngx-input-text i18n-title title="IMAP Port" formControlName="imap_port" [error]="error?.imap_port"></pngx-input-text>
+        <pngx-input-select i18n-title title="IMAP Security" [items]="imapSecurityOptions" formControlName="imap_security"></pngx-input-select>
+      </div>
+      <div class="col">
+        <pngx-input-text i18n-title title="Username" formControlName="username" [error]="error?.username"></pngx-input-text>
+        <pngx-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></pngx-input-password>
+        <pngx-input-check i18n-title title="Password is token" i18n-hint hint="Check if the password above is a token used for authentication" formControlName="is_token" [error]="error?.is_token"></pngx-input-check>
+        <pngx-input-text i18n-title title="Character Set" formControlName="character_set" [error]="error?.character_set"></pngx-input-text>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <div class="m-0 me-2">
+      @if (testResult) {
+        <ngb-alert #testResultAlert [type]="testResult" class="mb-0 py-2" (closed)="testResult = null">{{testResultMessage}}</ngb-alert>
+      }
+    </div>
+    <button type="button" class="btn btn-outline-primary" (click)="test()" [disabled]="networkActive || testActive">
+      @if (testActive) {
+        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+        <span class="visually-hidden mr-1" i18n>Loading...</span>
+      }
+      <ng-container i18n>Test</ng-container>
+    </button>
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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

@@ -0,0 +1,4 @@
+::ng-deep .alert-dismissible .btn-close {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+}

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

@@ -0,0 +1,123 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import {
+  HttpTestingController,
+  provideHttpClientTesting,
+} from '@angular/common/http/testing'
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgSelectModule } from '@ng-select/ng-select'
+import { IMAPSecurity, MailAccountType } from 'src/app/data/mail-account'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { SettingsService } from 'src/app/services/settings.service'
+import { environment } from 'src/environments/environment'
+import { CheckComponent } from '../../input/check/check.component'
+import { PasswordComponent } from '../../input/password/password.component'
+import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+import { EditDialogMode } from '../edit-dialog.component'
+import { MailAccountEditDialogComponent } from './mail-account-edit-dialog.component'
+
+describe('MailAccountEditDialogComponent', () => {
+  let component: MailAccountEditDialogComponent
+  let settingsService: SettingsService
+  let fixture: ComponentFixture<MailAccountEditDialogComponent>
+  let httpController: HttpTestingController
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        MailAccountEditDialogComponent,
+        IfPermissionsDirective,
+        IfOwnerDirective,
+        SelectComponent,
+        TextComponent,
+        CheckComponent,
+        PermissionsFormComponent,
+        PasswordComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    httpController = TestBed.inject(HttpTestingController)
+
+    fixture = TestBed.createComponent(MailAccountEditDialogComponent)
+    settingsService = TestBed.inject(SettingsService)
+    settingsService.currentUser = { id: 99, username: 'user99' }
+    component = fixture.componentInstance
+
+    fixture.detectChanges()
+  })
+
+  it('should support create and edit modes', () => {
+    component.dialogMode = EditDialogMode.CREATE
+    const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
+    const editTitleSpy = jest.spyOn(component, 'getEditTitle')
+    fixture.detectChanges()
+    expect(createTitleSpy).toHaveBeenCalled()
+    expect(editTitleSpy).not.toHaveBeenCalled()
+    component.dialogMode = EditDialogMode.EDIT
+    fixture.detectChanges()
+    expect(editTitleSpy).toHaveBeenCalled()
+  })
+
+  it('should support test mail account and show appropriate expiring alert', fakeAsync(() => {
+    component.object = {
+      name: 'example',
+      imap_server: 'imap.example.com',
+      username: 'user',
+      password: 'pass',
+      imap_port: 443,
+      imap_security: IMAPSecurity.SSL,
+      is_token: false,
+      account_type: MailAccountType.IMAP,
+    }
+
+    // success
+    component.test()
+    httpController
+      .expectOne(`${environment.apiBaseUrl}mail_accounts/test/`)
+      .flush({ success: true })
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain(
+      'Successfully connected'
+    )
+    tick(6000)
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).not.toContain(
+      'Successfully connected'
+    )
+
+    // not success
+    component.test()
+    httpController
+      .expectOne(`${environment.apiBaseUrl}mail_accounts/test/`)
+      .flush({ success: false })
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Unable to connect')
+
+    // error
+    component.test()
+    httpController
+      .expectOne(`${environment.apiBaseUrl}mail_accounts/test/`)
+      .flush({}, { status: 500, statusText: 'error' })
+    fixture.detectChanges()
+    expect(fixture.nativeElement.textContent).toContain('Unable to connect')
+    tick(6000)
+  }))
+})

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

@@ -0,0 +1,106 @@
+import { Component, ViewChild, inject } from '@angular/core'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbAlert, NgbAlertModule } from '@ng-bootstrap/ng-bootstrap'
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { IMAPSecurity, MailAccount } from 'src/app/data/mail-account'
+import { MailAccountService } from 'src/app/services/rest/mail-account.service'
+import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { CheckComponent } from '../../input/check/check.component'
+import { PasswordComponent } from '../../input/password/password.component'
+import { SelectComponent } from '../../input/select/select.component'
+import { TextComponent } from '../../input/text/text.component'
+
+const IMAP_SECURITY_OPTIONS = [
+  { id: IMAPSecurity.None, name: $localize`No encryption` },
+  { id: IMAPSecurity.SSL, name: $localize`SSL` },
+  { id: IMAPSecurity.STARTTLS, name: $localize`STARTTLS` },
+]
+
+@Component({
+  selector: 'pngx-mail-account-edit-dialog',
+  templateUrl: './mail-account-edit-dialog.component.html',
+  styleUrls: ['./mail-account-edit-dialog.component.scss'],
+  imports: [
+    TextComponent,
+    CheckComponent,
+    PasswordComponent,
+    SelectComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbAlertModule,
+  ],
+})
+export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
+  testActive: boolean = false
+  testResult: string
+  alertTimeout
+
+  @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
+
+  constructor() {
+    super()
+    this.service = inject(MailAccountService)
+    this.userService = inject(UserService)
+    this.settingsService = inject(SettingsService)
+  }
+
+  getCreateTitle() {
+    return $localize`Create new mail account`
+  }
+
+  getEditTitle() {
+    return $localize`Edit mail account`
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(null),
+      imap_server: new FormControl(null),
+      imap_port: new FormControl(null),
+      imap_security: new FormControl(IMAPSecurity.SSL),
+      username: new FormControl(null),
+      password: new FormControl(null),
+      is_token: new FormControl(false),
+      character_set: new FormControl('UTF-8'),
+    })
+  }
+
+  get imapSecurityOptions() {
+    return IMAP_SECURITY_OPTIONS
+  }
+
+  test() {
+    this.testActive = true
+    this.testResult = null
+    clearTimeout(this.alertTimeout)
+    const mailService = this.service as MailAccountService
+    const newObject = Object.assign(
+      Object.assign({}, this.object),
+      this.objectForm.value
+    )
+    mailService.test(newObject).subscribe({
+      next: (result: { success: boolean }) => {
+        this.testActive = false
+        this.testResult = result.success ? 'success' : 'danger'
+        this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
+      },
+      error: (e) => {
+        this.testActive = false
+        this.testResult = 'danger'
+        this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
+      },
+    })
+  }
+
+  get testResultMessage() {
+    return this.testResult === 'success'
+      ? $localize`Successfully connected to the mail server`
+      : $localize`Unable to connect to the mail server`
+  }
+}

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

@@ -0,0 +1,78 @@
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    @if (object?.id) {
+      <span class="badge bg-primary text-primary-text-contrast ms-2">ID: {{object.id}}</span>
+    }
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-md-4">
+        <pngx-input-text [horizontal]="true" i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
+      </div>
+      <div class="col-md-3">
+        <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
+      </div>
+      <div class="col-md-3">
+        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+      <div class="col-md-2 pt-2">
+        <pngx-input-switch [horizontal]="true" i18n-title title="Enabled" formControlName="enabled"></pngx-input-switch>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the criteria specified below.</p>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Folder" formControlName="folder" i18n-hint hint="Subfolders must be separated by a delimiter, often a dot ('.') or slash ('/'), but it varies by mail server." [error]="error?.folder"></pngx-input-text>
+        <pngx-input-number [horizontal]="true" i18n-title title="Maximum age (days)" formControlName="maximum_age" [showAdd]="false" [error]="error?.maximum_age"></pngx-input-number>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter from" formControlName="filter_from" [error]="error?.filter_from"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter to" formControlName="filter_to" [error]="error?.filter_to"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter subject" formControlName="filter_subject" [error]="error?.filter_subject"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter body" formControlName="filter_body" [error]="error?.filter_body"></pngx-input-text>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-select [horizontal]="true" i18n-title title="Consumption scope" [items]="consumptionScopeOptions" formControlName="consumption_scope" i18n-hint hint="See docs for .eml processing requirements"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Attachment type" [items]="attachmentTypeOptions" formControlName="attachment_type"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="PDF layout" [items]="pdfLayoutOptions" formControlName="pdf_layout"></pngx-input-select>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Include only files matching" formControlName="filter_attachment_filename_include" i18n-hint hint="Optional. Wildcards e.g. *.pdf or *invoice* allowed. Can be comma-separated list. Case insensitive." [error]="error?.filter_attachment_filename_include"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Exclude files matching" formControlName="filter_attachment_filename_exclude" i18n-hint hint="Optional. Wildcards e.g. *.pdf or *invoice* allowed. Can be comma-separated list. Case insensitive." [error]="error?.filter_attachment_filename_exclude"></pngx-input-text>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-select [horizontal]="true" i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Only performed if the mail is processed."></pngx-input-select>
+        @if (showActionParamField) {
+          <pngx-input-text [horizontal]="true" i18n-title title="Action parameter" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        }
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
+        <pngx-input-check [horizontal]="true" i18n-title title="Assign owner from rule" formControlName="assign_owner_from_rule"></pngx-input-check>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-tags [horizontal]="true" [allowCreate]="false" formControlName="assign_tags"></pngx-input-tags>
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
+        @if (showCorrespondentField) {
+          <pngx-input-select [horizontal]="true" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+        }
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>