Fix logs loading

document list
dashboard / widget frame
stats

src-ui/angular.json

@@ -155,7 +155,9 @@
           "builder": "@angular-builders/jest:run",
           "options": {
             "tsConfig": "tsconfig.spec.json",
-            "zoneless": false
+            "zoneless": true,
+            "watch": false,
+            "coverage": true
           }
         },
         "lint": {

src-ui/eslint.config.js

@@ -3,6 +3,27 @@ const angularTemplatePlugin = require('@angular-eslint/eslint-plugin-template')
 const angularTemplateParser = require('@angular-eslint/template-parser')
 const tsParser = require('@typescript-eslint/parser')
 
+const angularTsRecommendedRules = {
+  '@angular-eslint/contextual-lifecycle': 'error',
+  '@angular-eslint/no-empty-lifecycle-method': 'error',
+  '@angular-eslint/no-input-rename': 'error',
+  '@angular-eslint/no-inputs-metadata-property': 'error',
+  '@angular-eslint/no-output-native': 'error',
+  '@angular-eslint/no-output-on-prefix': 'error',
+  '@angular-eslint/no-output-rename': 'error',
+  '@angular-eslint/no-outputs-metadata-property': 'error',
+  '@angular-eslint/prefer-inject': 'error',
+  '@angular-eslint/prefer-standalone': 'error',
+  '@angular-eslint/use-pipe-transform-interface': 'error',
+  '@angular-eslint/use-lifecycle-interface': 'warn',
+}
+const angularTemplateRecommendedRules = {
+  '@angular-eslint/template/banana-in-box': 'error',
+  '@angular-eslint/template/eqeqeq': 'error',
+  '@angular-eslint/template/no-negated-async': 'error',
+  '@angular-eslint/template/prefer-control-flow': 'error',
+}
+
 module.exports = [
   {
     ignores: ['projects/**/*', 'src/app/components/common/pdf-viewer/**'],
@@ -12,8 +33,6 @@ module.exports = [
     languageOptions: {
       parser: tsParser,
       parserOptions: {
-        project: ['tsconfig.json'],
-        createDefaultProgram: true,
         ecmaVersion: 2020,
         sourceType: 'module',
       },
@@ -22,9 +41,9 @@ module.exports = [
       '@angular-eslint': angularEslintPlugin,
       '@angular-eslint/template': angularTemplatePlugin,
     },
-    processor: '@angular-eslint/template/extract-inline-html',
+    processor: angularTemplatePlugin.processors['extract-inline-html'],
     rules: {
-      ...angularEslintPlugin.configs.recommended.rules,
+      ...angularTsRecommendedRules,
       '@angular-eslint/directive-selector': [
         'error',
         {
@@ -52,7 +71,7 @@ module.exports = [
       '@angular-eslint/template': angularTemplatePlugin,
     },
     rules: {
-      ...angularTemplatePlugin.configs.recommended.rules,
+      ...angularTemplateRecommendedRules,
     },
   },
 ]

src-ui/package.json

@@ -6,22 +6,22 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test --no-watch --coverage",
+    "test": "ng test",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^21.2.12",
-    "@angular/common": "~21.2.17",
-    "@angular/compiler": "~21.2.17",
-    "@angular/core": "~21.2.17",
-    "@angular/forms": "~21.2.14",
-    "@angular/localize": "~21.2.14",
-    "@angular/platform-browser": "~21.2.14",
-    "@angular/platform-browser-dynamic": "~21.2.14",
-    "@angular/router": "~21.2.14",
-    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@ng-select/ng-select": "^21.8.2",
+    "@angular/cdk": "^22.0.3",
+    "@angular/common": "~22.0.5",
+    "@angular/compiler": "~22.0.5",
+    "@angular/core": "~22.0.5",
+    "@angular/forms": "~22.0.5",
+    "@angular/localize": "~22.0.5",
+    "@angular/platform-browser": "~22.0.5",
+    "@angular/platform-browser-dynamic": "~22.0.5",
+    "@angular/router": "~22.0.5",
+    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
+    "@ng-select/ng-select": "^23.2.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
@@ -29,30 +29,29 @@
     "mime-names": "^1.0.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^10.1.0",
-    "ngx-cookie-service": "^21.3.1",
-    "ngx-device-detector": "^11.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^18.0.0",
+    "ngx-cookie-service": "^22.0.0",
+    "ngx-device-detector": "^12.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^19.0.0",
     "normalize-diacritics": "^5.0.0",
     "pdfjs-dist": "^6.0.227",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
-    "uuid": "^14.0.1",
-    "zone.js": "^0.16.2"
+    "uuid": "^14.0.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^21.0.3",
-    "@angular-builders/jest": "^21.0.3",
-    "@angular-devkit/core": "^21.2.12",
-    "@angular-devkit/schematics": "^21.2.12",
-    "@angular-eslint/builder": "21.4.0",
-    "@angular-eslint/eslint-plugin": "21.4.0",
-    "@angular-eslint/eslint-plugin-template": "21.4.0",
-    "@angular-eslint/schematics": "21.4.0",
-    "@angular-eslint/template-parser": "21.4.0",
-    "@angular/build": "^21.2.12",
-    "@angular/cli": "~21.2.12",
-    "@angular/compiler-cli": "~21.2.14",
+    "@angular-builders/custom-webpack": "^22.0.1",
+    "@angular-builders/jest": "^22.0.1",
+    "@angular-devkit/core": "^22.0.5",
+    "@angular-devkit/schematics": "^22.0.5",
+    "@angular-eslint/builder": "22.0.0",
+    "@angular-eslint/eslint-plugin": "22.0.0",
+    "@angular-eslint/eslint-plugin-template": "22.0.0",
+    "@angular-eslint/schematics": "22.0.0",
+    "@angular-eslint/template-parser": "22.0.0",
+    "@angular/build": "^22.0.5",
+    "@angular/cli": "~22.0.5",
+    "@angular/compiler-cli": "~22.0.5",
     "@codecov/webpack-plugin": "^2.0.1",
     "@playwright/test": "^1.61.1",
     "@types/jest": "^30.0.0",
@@ -68,17 +67,8 @@
     "jest-websocket-mock": "^2.5.0",
     "prettier-plugin-organize-imports": "^4.3.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.3",
     "webpack": "^5.107.2"
   },
-  "packageManager": "pnpm@10.17.1",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "canvas",
-      "esbuild",
-      "lmdb",
-      "msgpackr-extract"
-    ]
-  }
+  "packageManager": "pnpm@10.17.1"
 }

src-ui/pnpm-workspace.yaml

@@ -0,0 +1,19 @@
+packages:
+  - "."
+allowBuilds:
+  "@parcel/watcher": true
+  canvas: true
+  esbuild: true
+  lmdb: true
+  msgpackr-extract: true
+  normalize-diacritics: false
+  unrs-resolver: false
+onlyBuiltDependencies:
+  - "@parcel/watcher"
+  - canvas
+  - esbuild
+  - lmdb
+  - msgpackr-extract
+ignoredBuiltDependencies:
+  - normalize-diacritics
+  - unrs-resolver

src-ui/setup-jest.ts

@@ -1,9 +1,9 @@
 import '@angular/localize/init'
 import { jest } from '@jest/globals'
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'
+import { setupZonelessTestEnv } from 'jest-preset-angular/setup-env/zoneless'
 import { TextDecoder, TextEncoder } from 'node:util'
 if (process.env.NODE_ENV === 'test') {
-  setupZoneTestEnv()
+  setupZonelessTestEnv()
 }
 ;(globalThis as any).TextEncoder = TextEncoder as unknown as {
   new (): TextEncoder

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

@@ -1,11 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -72,7 +67,8 @@ describe('AppComponent', () => {
     component = fixture.componentInstance
   })
 
-  it('should initialize the tour service & toggle class on body for styling', fakeAsync(() => {
+  it('should initialize the tour service & toggle class on body for styling', () => {
+    jest.useFakeTimers()
     jest.spyOn(console, 'warn').mockImplementation(() => {})
     fixture.detectChanges()
     const tourSpy = jest.spyOn(tourService, 'initialize')
@@ -81,9 +77,10 @@ describe('AppComponent', () => {
     tourService.start()
     expect(document.body.classList).toContain('tour-active')
     tourService.end()
-    tick(500)
+    jest.advanceTimersByTime(500)
     expect(document.body.classList).not.toContain('tour-active')
-  }))
+    jest.useRealTimers()
+  })
 
   it('should display toast on document consumed with link if user has access', () => {
     const navigateSpy = jest.spyOn(router, 'navigate')

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

@@ -97,11 +97,11 @@ export class ConfigComponent
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (config) => {
-          this.loading = false
+          this.loading.set(false)
           this.initialize(config)
         },
         error: (e) => {
-          this.loading = false
+          this.loading.set(false)
           this.toastService.showError($localize`Error retrieving config`, e)
         },
       })
@@ -162,20 +162,20 @@ export class ConfigComponent
   }
 
   public saveConfig() {
-    this.loading = true
+    this.loading.set(true)
     this.configService
       .saveConfig(this.configForm.value as PaperlessConfig)
       .pipe(takeUntil(this.unsubscribeNotifier), first())
       .subscribe({
         next: (config) => {
-          this.loading = false
+          this.loading.set(false)
           this.initialize(config)
           this.store.next(config)
           this.settingsService.initializeSettings().subscribe()
           this.toastService.showInfo($localize`Configuration updated`)
         },
         error: (e) => {
-          this.loading = false
+          this.loading.set(false)
           this.toastService.showError(
             $localize`An error occurred updating configuration`,
             e
@@ -189,20 +189,20 @@ export class ConfigComponent
   }
 
   public uploadFile(file: File, key: string) {
-    this.loading = true
+    this.loading.set(true)
     this.configService
       .uploadFile(file, this.configForm.value['id'], key)
       .pipe(takeUntil(this.unsubscribeNotifier), first())
       .subscribe({
         next: (config) => {
-          this.loading = false
+          this.loading.set(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.loading.set(false)
           this.toastService.showError(
             $localize`An error occurred uploading file`,
             e

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

@@ -11,30 +11,30 @@
         type="number"
         min="100"
         step="100"
-        [(ngModel)]="limit"
-        (ngModelChange)="onLimitChange($event)"
+        [ngModel]="limit()"
+        (ngModelChange)="limit.set($event); onLimitChange($event)"
         style="width: 100px;">
       <span class="input-group-text text-muted" i18n>lines</span>
     </div>
     <div class="form-check form-switch mt-1">
-      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
+      <input class="form-check-input" type="checkbox" role="switch" [ngModel]="autoRefreshEnabled()" (ngModelChange)="autoRefreshEnabled.set($event)">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>
 </pngx-page-header>
 
-<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
-  @for (logFile of logFiles; track logFile) {
+<ul ngbNav #nav="ngbNav" [activeId]="activeLog()" (activeIdChange)="activeLog.set($event); reloadLogs()" class="nav-tabs">
+  @for (logFile of logFiles(); track logFile) {
     <li [ngbNavItem]="logFile">
       <a ngbNavLink>
         {{logFile}}.log
       </a>
     </li>
   }
-  @if (loading || !logFiles.length) {
+  @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) {
+      @if (!logFiles().length) {
         <ng-container i18n>Loading...</ng-container>
       }
     </div>
@@ -42,13 +42,13 @@
 </ul>
 
 <div #logContainer class="bg-dark text-light font-monospace log-container p-3" (scroll)="onScroll()">
-  @if (loading && !logFiles.length) {
+  @if (loading && !logFiles().length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </div>
   } @else {
-    @for (log of logs; track log) {
+    @for (log of logs(); track log) {
       <p class="m-0 p-0" [ngClass]="'log-entry-' + log.level">{{log.message}}</p>
     }
   }
@@ -56,7 +56,7 @@
 <button
   type="button"
   class="btn btn-sm btn-secondary jump-to-bottom position-fixed bottom-0 end-0 m-5"
-  [class.visible]="showJumpToBottom"
+  [class.visible]="showJumpToBottom()"
   (click)="scrollToBottom()"
 >
   ↓ <span i18n>Jump to bottom</span>

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

@@ -86,7 +86,7 @@ describe('LogsComponent', () => {
       throwError(() => new Error('error getting logs'))
     )
     component.reloadLogs()
-    expect(component.logs).toHaveLength(0)
+    expect(component.logs()).toHaveLength(0)
   })
 
   it('should auto refresh, allow toggle', () => {
@@ -97,7 +97,7 @@ describe('LogsComponent', () => {
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
 
-    component.autoRefreshEnabled = false
+    component.autoRefreshEnabled.set(false)
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })
@@ -112,9 +112,9 @@ describe('LogsComponent', () => {
   })
 
   it('should update jump to bottom visibility on scroll', () => {
-    component.showJumpToBottom = false
+    component.showJumpToBottom.set(false)
     jest.spyOn(component as any, 'isNearBottom').mockReturnValue(false)
     component.onScroll()
-    expect(component.showJumpToBottom).toBe(true)
+    expect(component.showJumpToBottom()).toBe(true)
   })
 })

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

@@ -7,6 +7,7 @@ import {
   OnInit,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
@@ -34,17 +35,17 @@ export class LogsComponent
   private logService = inject(LogService)
   private changedetectorRef = inject(ChangeDetectorRef)
 
-  public logs: Array<{ message: string; level: number }> = []
+  readonly logs = signal<Array<{ message: string; level: number }>>([])
 
-  public logFiles: string[] = []
+  readonly logFiles = signal<string[]>([])
 
-  public activeLog: string
+  readonly activeLog = signal<string>(undefined)
 
-  public autoRefreshEnabled: boolean = true
+  readonly autoRefreshEnabled = signal<boolean>(true)
 
-  public limit: number = 5000
+  readonly limit = signal<number>(5000)
 
-  public showJumpToBottom = false
+  readonly showJumpToBottom = signal<boolean>(false)
 
   private readonly limitChange$ = new Subject<number>()
 
@@ -59,15 +60,15 @@ export class LogsComponent
       .list()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result) => {
-        this.logFiles = result
-        this.loading = false
-        if (this.logFiles.length > 0) {
-          this.activeLog = this.logFiles[0]
+        this.logFiles.set(result)
+        this.loading.set(false)
+        if (this.logFiles().length > 0) {
+          this.activeLog.set(this.logFiles()[0])
           this.reloadLogs()
         }
         timer(5000, 5000)
           .pipe(
-            filter(() => this.autoRefreshEnabled),
+            filter(() => this.autoRefreshEnabled()),
             takeUntil(this.unsubscribeNotifier)
           )
           .subscribe(() => {
@@ -85,19 +86,19 @@ export class LogsComponent
   }
 
   reloadLogs() {
-    this.loading = true
+    this.loading.set(true)
     const shouldStickToBottom = this.isNearBottom()
     this.logService
-      .get(this.activeLog, this.limit)
+      .get(this.activeLog(), this.limit())
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
-          this.loading = false
+          this.loading.set(false)
           const parsed = this.parseLogsWithLevel(result)
           const hasChanges =
-            parsed.length !== this.logs.length ||
+            parsed.length !== this.logs().length ||
             parsed.some((log, idx) => {
-              const current = this.logs[idx]
+              const current = this.logs()[idx]
               return (
                 !current ||
                 current.message !== log.message ||
@@ -105,16 +106,16 @@ export class LogsComponent
               )
             })
           if (hasChanges) {
-            this.logs = parsed
+            this.logs.set(parsed)
             if (shouldStickToBottom) {
               this.scrollToBottom()
             }
-            this.showJumpToBottom = !shouldStickToBottom
+            this.showJumpToBottom.set(!shouldStickToBottom)
           }
         },
         error: () => {
-          this.logs = []
-          this.loading = false
+          this.logs.set([])
+          this.loading.set(false)
         },
       })
   }
@@ -149,7 +150,7 @@ export class LogsComponent
     }
     this.changedetectorRef.detectChanges()
     viewport.scrollTop = viewport.scrollHeight
-    this.showJumpToBottom = false
+    this.showJumpToBottom.set(false)
   }
 
   private isNearBottom(): boolean {
@@ -162,6 +163,6 @@ export class LogsComponent
   }
 
   onScroll(): void {
-    this.showJumpToBottom = !this.isNearBottom()
+    this.showJumpToBottom.set(!this.isNearBottom())
   }
 }

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

@@ -99,6 +99,13 @@ const status: SystemStatus = {
     llmindex_status: SystemStatusItemStatus.DISABLED,
     llmindex_last_modified: new Date().toISOString(),
     llmindex_error: null,
+    summary: {
+      days: 30,
+      total_count: 12,
+      pending_count: 1,
+      success_count: 10,
+      failure_count: 1,
+    },
   },
 }
 
@@ -161,7 +168,7 @@ describe('SettingsComponent', () => {
     viewportScroller = TestBed.inject(ViewportScroller)
     toastService = TestBed.inject(ToastService)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = users[0]
+    settingsService.currentUser.set(users[0])
     userService = TestBed.inject(UserService)
     permissionsService = TestBed.inject(PermissionsService)
     modalService = TestBed.inject(NgbModal)
@@ -202,7 +209,7 @@ describe('SettingsComponent', () => {
     fixture.detectChanges()
   }
 
-  it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', () => {
+  it('should support tabbed settings & change URL, prevent navigation if dirty confirmation rejected', async () => {
     completeSetup()
     const navigateSpy = jest.spyOn(router, 'navigate')
     const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
@@ -210,16 +217,19 @@ describe('SettingsComponent', () => {
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'documents'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
+    await fixture.whenStable()
 
     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'))
+    await fixture.whenStable()
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'general'])
     expect(initSpy).not.toHaveBeenCalled()
 
     navigateSpy.mockResolvedValueOnce(true) // nav accepted even though dirty
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
+    await fixture.whenStable()
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     expect(initSpy).toHaveBeenCalled()
   })

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

@@ -664,6 +664,6 @@ export class SettingsComponent
         size: 'xl',
       }
     )
-    modal.componentInstance.status = this.systemStatus
+    modal.componentInstance.status.set(this.systemStatus)
   }
 }

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

@@ -11,7 +11,7 @@
     <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="visibleTasks.length === 0">
       <i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
     </button>
-    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks === 0">
+    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissAllTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="totalTasks() === 0">
       <i-bs name="check2-all" class="me-1"></i-bs><ng-container i18n>Dismiss all</ng-container>
     </button>
     <div class="form-check form-switch mb-0 ms-2">
@@ -107,7 +107,7 @@
 
   <ngb-pagination
     [pageSize]="pageSize"
-    [collectionSize]="totalTasks"
+    [collectionSize]="totalTasks()"
     [page]="page"
     [maxSize]="5"
     [rotate]="true"

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

@@ -362,7 +362,7 @@ describe('TasksComponent', () => {
     )
 
     req.flush({ count: 2, results: [tasks[0], tasks[1]] })
-    expect(component.totalTasks).toBe(2)
+    expect(component.totalTasks()).toBe(2)
   })
 
   it('should apply task type and trigger source filters to the server-side task query', () => {
@@ -435,8 +435,8 @@ describe('TasksComponent', () => {
       .flush(pageTwoTasks)
 
     expect(component.page).toBe(2)
-    expect(component.totalTasks).toBe(30)
-    expect(component.pagedTasks).toEqual([tasks[0]])
+    expect(component.totalTasks()).toBe(30)
+    expect(component.pagedTasks()).toEqual([tasks[0]])
   })
 
   it('should not replace section counts with current-page counts', () => {

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

@@ -1,5 +1,5 @@
 import { JsonPipe, NgTemplateOutlet } from '@angular/common'
-import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router, RouterLink } from '@angular/router'
 import {
@@ -166,14 +166,14 @@ export class TasksComponent
   public autoRefreshEnabled: boolean = true
   public readonly pageSize = 25
   public page: number = 1
-  public totalTasks: number = 0
-  public sectionCounts: Record<TaskSection, number> = {
+  readonly totalTasks = signal(0)
+  readonly sectionCounts = signal<Record<TaskSection, number>>({
     [TaskSection.All]: 0,
     [TaskSection.NeedsAttention]: 0,
     [TaskSection.InProgress]: 0,
     [TaskSection.Completed]: 0,
-  }
-  public pagedTasks: PaperlessTask[] = []
+  })
+  readonly pagedTasks = signal<PaperlessTask[]>([])
   public selectedSection: TaskSection = TaskSection.All
   public selectedTaskType: PaperlessTaskType | null = null
   public selectedTriggerSource: PaperlessTaskTriggerSource | null = null
@@ -346,7 +346,7 @@ export class TasksComponent
       backdrop: 'static',
     })
     modal.componentInstance.title = $localize`Confirm Dismiss All`
-    modal.componentInstance.messageBold = $localize`Dismiss all ${this.totalTasks} tasks?`
+    modal.componentInstance.messageBold = $localize`Dismiss all ${this.totalTasks()} tasks?`
     modal.componentInstance.btnClass = 'btn-warning'
     modal.componentInstance.btnCaption = $localize`Dismiss`
     modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => {
@@ -465,7 +465,7 @@ export class TasksComponent
   }
 
   tasksForSection(section: TaskSection): PaperlessTask[] {
-    let tasks = this.pagedTasks.filter((task) =>
+    let tasks = this.pagedTasks().filter((task) =>
       this.taskBelongsToSection(task, section)
     )
 
@@ -477,7 +477,14 @@ export class TasksComponent
   }
 
   sectionCount(section: TaskSection): number {
-    return this.sectionCounts[section]
+    return this.sectionCounts()[section]
+  }
+
+  private setSectionCount(section: TaskSection, count: number) {
+    this.sectionCounts.update((counts) => ({
+      ...counts,
+      [section]: count,
+    }))
   }
 
   sectionShowsResults(section: TaskSection): boolean {
@@ -652,7 +659,7 @@ export class TasksComponent
         ? this.sections
         : [this.selectedSection]
 
-    return this.pagedTasks.filter(
+    return this.pagedTasks().filter(
       (task) =>
         sections.some((section) => this.taskBelongsToSection(task, section)) &&
         this.taskMatchesFilters(task, { taskType, triggerSource })
@@ -664,10 +671,12 @@ export class TasksComponent
       .statusCounts(this.getParamsForSection(TaskSection.All))
       .pipe(first(), takeUntil(this.unsubscribeNotifier))
       .subscribe((counts) => {
-        this.sectionCounts[TaskSection.All] = counts.all
-        this.sectionCounts[TaskSection.NeedsAttention] = counts.needs_attention
-        this.sectionCounts[TaskSection.InProgress] = counts.in_progress
-        this.sectionCounts[TaskSection.Completed] = counts.completed
+        this.sectionCounts.set({
+          [TaskSection.All]: counts.all,
+          [TaskSection.NeedsAttention]: counts.needs_attention,
+          [TaskSection.InProgress]: counts.in_progress,
+          [TaskSection.Completed]: counts.completed,
+        })
       })
   }
 
@@ -723,7 +732,7 @@ export class TasksComponent
 
     this.reloadSectionCounts()
 
-    this.loading = true
+    this.loading.set(true)
     this.tasksService
       .list(
         this.page,
@@ -733,24 +742,24 @@ export class TasksComponent
       .pipe(first(), takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
-          this.pagedTasks = result.results
-          this.totalTasks = result.count
-          this.sectionCounts[TaskSection.All] = result.count
+          this.pagedTasks.set(result.results)
+          this.totalTasks.set(result.count)
+          this.setSectionCount(TaskSection.All, result.count)
           if (this.selectedSection !== TaskSection.All) {
-            this.sectionCounts[this.selectedSection] = result.count
+            this.setSectionCount(this.selectedSection, result.count)
           }
-          this.loading = false
+          this.loading.set(false)
           if (
             this.page > 1 &&
-            this.pagedTasks.length === 0 &&
-            this.totalTasks > 0
+            this.pagedTasks().length === 0 &&
+            this.totalTasks() > 0
           ) {
             this.page -= 1
             this.reloadPage()
           }
         },
         error: () => {
-          this.loading = false
+          this.loading.set(false)
         },
       })
   }

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

@@ -4,22 +4,22 @@
     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">
+    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
         <i-bs name="x" class="me-1"></i-bs><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">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
         <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><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">
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
         <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
     </button>
-    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
         <i-bs name="trash" class="me-1"></i-bs><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>
+    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
 </div>
 
 <div class="card border table-responsive mb-3">
@@ -28,7 +28,7 @@
             <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();">
+                <input type="checkbox" class="form-check-input" id="all-objects" [ngModel]="allToggled()" (ngModelChange)="allToggled.set($event)" [disabled]="documentsInTrash().length === 0" (click)="toggleAll($event); $event.stopPropagation();">
                 <label class="form-check-label" for="all-objects"></label>
                 </div>
             </th>
@@ -38,7 +38,7 @@
             </tr>
         </thead>
         <tbody>
-            @if (loading) {
+            @if (loading()) {
                 <tr>
                     <td colspan="5">
                     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -46,11 +46,11 @@
                     </td>
                 </tr>
             }
-            @for (document of documentsInTrash; track document.id) {
+            @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();">
+                        <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>
@@ -91,13 +91,13 @@
 @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)
+            <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>
+        @if (documentsInTrash().length > 20) {
+            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
         }
     </div>
 }

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

@@ -60,10 +60,15 @@ describe('TrashComponent', () => {
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
     router = TestBed.inject(Router)
+    jest.spyOn(router, 'navigate').mockResolvedValue(true)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
 
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
   it('should call correct service method on reload', () => {
     jest.useFakeTimers()
     const trashSpy = jest.spyOn(trashService, 'getTrash')
@@ -77,7 +82,7 @@ describe('TrashComponent', () => {
     component.reload()
     jest.advanceTimersByTime(100)
     expect(trashSpy).toHaveBeenCalled()
-    expect(component.documentsInTrash).toEqual(documentsInTrash)
+    expect(component.documentsInTrash()).toEqual(documentsInTrash)
   })
 
   it('should support delete document, show error if needed', () => {
@@ -179,8 +184,8 @@ describe('TrashComponent', () => {
   })
 
   it('should support toggle all items in view', () => {
-    component.documentsInTrash = documentsInTrash
-    expect(component.selectedDocuments.size).toEqual(0)
+    component.documentsInTrash.set(documentsInTrash)
+    expect(component.selectedDocuments().size).toEqual(0)
     const toggleAllSpy = jest.spyOn(component, 'toggleAll')
     const checkButton = fixture.debugElement.queryAll(
       By.css('input.form-check-input')
@@ -189,21 +194,21 @@ describe('TrashComponent', () => {
     checkButton.nativeElement.checked = true
     checkButton.nativeElement.dispatchEvent(new Event('click'))
     expect(toggleAllSpy).toHaveBeenCalled()
-    expect(component.selectedDocuments.size).toEqual(documentsInTrash.length)
+    expect(component.selectedDocuments().size).toEqual(documentsInTrash.length)
   })
 
   it('should support toggle item', () => {
-    component.selectedDocuments = new Set([1])
+    component.selectedDocuments.set(new Set([1]))
     component.toggleSelected(documentsInTrash[0])
-    expect(component.selectedDocuments.size).toEqual(0)
+    expect(component.selectedDocuments().size).toEqual(0)
     component.toggleSelected(documentsInTrash[0])
-    expect(component.selectedDocuments.size).toEqual(1)
+    expect(component.selectedDocuments().size).toEqual(1)
   })
 
   it('should support clear selection', () => {
-    component.selectedDocuments = new Set([1])
+    component.selectedDocuments.set(new Set([1]))
     component.clearSelection()
-    expect(component.selectedDocuments.size).toEqual(0)
+    expect(component.selectedDocuments().size).toEqual(0)
   })
 
   it('should correctly display days remaining', () => {

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, inject } from '@angular/core'
+import { Component, OnDestroy, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -7,7 +7,7 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, takeUntil, tap } from 'rxjs'
+import { 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'
@@ -42,11 +42,11 @@ export class TrashComponent
   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
+  readonly documentsInTrash = signal<Document[]>([])
+  readonly selectedDocuments = signal<Set<number>>(new Set())
+  readonly allToggled = signal(false)
+  readonly page = signal(1)
+  readonly totalDocuments = signal<number>(undefined)
 
   constructor() {
     super()
@@ -54,20 +54,19 @@ export class TrashComponent
   }
 
   reload() {
-    this.loading = true
+    this.loading.set(true)
     this.trashService
-      .getTrash(this.page)
+      .getTrash(this.page())
       .pipe(
         tap((r) => {
-          this.documentsInTrash = r.results
-          this.totalDocuments = r.count
-          this.selectedDocuments.clear()
-          this.loading = false
-        }),
-        delay(100)
+          this.documentsInTrash.set(r.results)
+          this.totalDocuments.set(r.count)
+          this.selectedDocuments.set(new Set())
+          this.loading.set(false)
+        })
       )
       .subscribe(() => {
-        this.show = true
+        this.show.set(true)
       })
   }
 
@@ -122,7 +121,7 @@ export class TrashComponent
           .subscribe({
             next: () => {
               this.toastService.showInfo($localize`Document(s) deleted`)
-              this.allToggled = false
+              this.allToggled.set(false)
               modal.close()
               this.reload()
             },
@@ -165,7 +164,7 @@ export class TrashComponent
       .subscribe({
         next: () => {
           this.toastService.showInfo($localize`Document(s) restored`)
-          this.allToggled = false
+          this.allToggled.set(false)
           this.reload()
         },
         error: (err) => {
@@ -179,24 +178,29 @@ export class TrashComponent
 
   toggleAll(event: PointerEvent) {
     if ((event.target as HTMLInputElement).checked) {
-      this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
+      this.selectedDocuments.set(
+        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)
+    const selectedDocuments = new Set(this.selectedDocuments())
+    selectedDocuments.has(object.id)
+      ? selectedDocuments.delete(object.id)
+      : selectedDocuments.add(object.id)
+    this.selectedDocuments.set(selectedDocuments)
   }
 
   clearSelection() {
-    this.allToggled = false
-    this.selectedDocuments.clear()
+    this.allToggled.set(false)
+    this.selectedDocuments.set(new Set())
   }
 
   getDaysRemaining(document: Document): number {
+    this.settingsService.trackChanges()
     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))

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

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

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

@@ -1,12 +1,7 @@
 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 { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
@@ -57,7 +52,7 @@ describe('UsersAndGroupsComponent', () => {
     }).compileComponents()
     fixture = TestBed.createComponent(UsersAndGroupsComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = users[0]
+    settingsService.currentUser.set(users[0])
     userService = TestBed.inject(UserService)
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
@@ -109,7 +104,7 @@ describe('UsersAndGroupsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     editDialog.failed.emit()
     expect(toastErrorSpy).toHaveBeenCalled()
-    settingsService.currentUser = users[1] // simulate logged in as different user
+    settingsService.currentUser.set(users[1]) // simulate logged in as different user
     editDialog.succeeded.emit(users[0])
     expect(toastInfoSpy).toHaveBeenCalledWith(
       `Saved user "${users[0].username}".`
@@ -138,7 +133,8 @@ describe('UsersAndGroupsComponent', () => {
     expect(toastInfoSpy).toHaveBeenCalledWith('Deleted user "user1"')
   })
 
-  it('should logout current user if password changed, after delay', fakeAsync(() => {
+  it('should logout current user if password changed, after delay', () => {
+    jest.useFakeTimers()
     completeSetup()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((refs) => (modal = refs[0]))
@@ -148,14 +144,15 @@ describe('UsersAndGroupsComponent', () => {
       .mockImplementation(() => {})
     const editDialog = modal.componentInstance as UserEditDialogComponent
     editDialog.passwordIsSet = true
-    settingsService.currentUser = users[0] // simulate logged in as same user
+    settingsService.currentUser.set(users[0]) // simulate logged in as same user
     editDialog.succeeded.emit(users[0])
     fixture.detectChanges()
-    tick(2600)
+    jest.advanceTimersByTime(2600)
     expect(navSpy).toHaveBeenCalledWith(
       `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
     )
-  }))
+    jest.useRealTimers()
+  })
 
   it('should support edit / create group, show error if needed', () => {
     completeSetup()

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
@@ -43,8 +43,8 @@ export class UsersAndGroupsComponent
   permissionsService = inject(PermissionsService)
   private settings = inject(SettingsService)
 
-  users: User[]
-  groups: Group[]
+  readonly users = signal<User[]>(null)
+  readonly groups = signal<Group[]>(null)
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
@@ -69,7 +69,7 @@ export class UsersAndGroupsComponent
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
         .subscribe({
           next: (r) => {
-            this.users = r.results
+            this.users.set(r.results)
           },
           error: (e) => {
             this.toastService.showError($localize`Error retrieving users`, e)
@@ -83,7 +83,7 @@ export class UsersAndGroupsComponent
         .pipe(first(), takeUntil(this.unsubscribeNotifier))
         .subscribe({
           next: (r) => {
-            this.groups = r.results
+            this.groups.set(r.results)
           },
           error: (e) => {
             this.toastService.showError($localize`Error retrieving groups`, e)
@@ -101,15 +101,15 @@ export class UsersAndGroupsComponent
       backdrop: 'static',
       size: 'xl',
     })
-    modal.componentInstance.dialogMode = user
-      ? EditDialogMode.EDIT
-      : EditDialogMode.CREATE
+    modal.componentInstance.dialogMode.set(
+      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 &&
+          newUser.id === this.settings.currentUser().id &&
           (modal.componentInstance as UserEditDialogComponent).passwordIsSet
         ) {
           this.toastService.showInfo(
@@ -125,7 +125,7 @@ export class UsersAndGroupsComponent
             $localize`Saved user "${newUser.username}".`
           )
           this.usersService.listAll().subscribe((r) => {
-            this.users = r.results
+            this.users.set(r.results)
           })
         }
       })
@@ -152,7 +152,7 @@ export class UsersAndGroupsComponent
           modal.close()
           this.toastService.showInfo($localize`Deleted user "${user.username}"`)
           this.usersService.listAll().subscribe((r) => {
-            this.users = r.results
+            this.users.set(r.results)
           })
         },
         error: (e) => {
@@ -170,16 +170,16 @@ export class UsersAndGroupsComponent
       backdrop: 'static',
       size: 'lg',
     })
-    modal.componentInstance.dialogMode = group
-      ? EditDialogMode.EDIT
-      : EditDialogMode.CREATE
+    modal.componentInstance.dialogMode.set(
+      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
+          this.groups.set(r.results)
         })
       })
     modal.componentInstance.failed
@@ -205,7 +205,7 @@ export class UsersAndGroupsComponent
           modal.close()
           this.toastService.showInfo($localize`Deleted group "${group.name}"`)
           this.groupsService.listAll().subscribe((r) => {
-            this.groups = r.results
+            this.groups.set(r.results)
           })
         },
         error: (e) => {
@@ -219,6 +219,6 @@ export class UsersAndGroupsComponent
   }
 
   getGroupName(id: number): string {
-    return this.groups?.find((g) => g.id === id)?.name ?? ''
+    return this.groups()?.find((g) => g.id === id)?.name ?? ''
   }
 }

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

@@ -1,7 +1,7 @@
 <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)="mobileSearchHidden = false; isMenuCollapsed = !isMenuCollapsed">
+    (click)="closeMobileSearch(); toggleMenuCollapsed()">
     <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"
@@ -23,7 +23,7 @@
     </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"
-    [class.mobile-hidden]="mobileSearchHidden">
+    [class.mobile-hidden]="mobileSearchHidden()">
     <div class="col-12 col-md-7">
       <pngx-global-search></pngx-global-search>
     </div>
@@ -68,8 +68,8 @@
 <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">
+      [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating()"
+      [ngbCollapse]="isMenuCollapsed()">
       @if (canSaveSettings) {
         <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
           @if (slimSidebarEnabled) {
@@ -104,7 +104,7 @@
             </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"
+                <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}}"
@@ -120,7 +120,7 @@
                       <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) {
+                  @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>
@@ -329,10 +329,10 @@
                     {{ versionString }}
                   </a>
                 </div>
-                @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                @if (!settingsService.updateCheckingIsSet || appRemoteVersion()) {
                   <div class="version-check">
                     <ng-template #updateAvailablePopContent>
-                      <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                      <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>
@@ -350,13 +350,13 @@
                       </p>
                     </ng-template>
                     @if (settingsService.updateCheckingIsSet) {
-                      @if (appRemoteVersion.update_available) {
+                      @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" class="me-1"></i-bs>
-                          @if (appRemoteVersion?.update_available) {
+                          @if (appRemoteVersion()?.update_available) {
                             <ng-container i18n>Update available</ng-container>
                           }
                         </a>
@@ -377,7 +377,7 @@
       </div>
     </nav>
 
-    <main role="main" class="ms-sm-auto px-md-4" [class.mobile-search-hidden]="mobileSearchHidden"
+    <main role="main" class="ms-sm-auto px-md-4" [class.mobile-search-hidden]="mobileSearchHidden()"
       [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
       <router-outlet></router-outlet>
     </main>

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

@@ -4,12 +4,7 @@ import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -244,11 +239,12 @@ describe('AppFrameComponent', () => {
     expect(toastSpy).toHaveBeenCalled()
   })
 
-  it('should support toggling slim sidebar and saving', fakeAsync(() => {
+  it('should support toggling slim sidebar and saving', () => {
+    jest.useFakeTimers()
     const saveSettingSpy = jest.spyOn(settingsService, 'set')
     settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
     expect(component.slimSidebarEnabled).toBeFalsy()
-    expect(component.slimSidebarAnimating).toBeFalsy()
+    expect(component.slimSidebarAnimating()).toBeFalsy()
     component.toggleSlimSidebar()
     const requests = httpTestingController.match(
       `${environment.apiBaseUrl}ui_settings/`
@@ -259,9 +255,9 @@ describe('AppFrameComponent', () => {
       requests[0].request.body.settings.attributes_sections_collapsed
     ).toEqual(['attributes'])
     requests[0].flush({ success: true })
-    expect(component.slimSidebarAnimating).toBeTruthy()
-    tick(200)
-    expect(component.slimSidebarAnimating).toBeFalsy()
+    expect(component.slimSidebarAnimating()).toBeTruthy()
+    jest.advanceTimersByTime(200)
+    expect(component.slimSidebarAnimating()).toBeFalsy()
     expect(component.slimSidebarEnabled).toBeTruthy()
     expect(saveSettingSpy).toHaveBeenCalledWith(
       SETTINGS_KEYS.SLIM_SIDEBAR,
@@ -271,7 +267,8 @@ describe('AppFrameComponent', () => {
       SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
       ['attributes']
     )
-  }))
+    jest.useRealTimers()
+  })
 
   it('should show error on toggle slim sidebar if store settings fails', () => {
     jest.spyOn(console, 'warn').mockImplementation(() => {})
@@ -291,9 +288,9 @@ describe('AppFrameComponent', () => {
       fixture.nativeElement as HTMLDivElement
     ).querySelector('button[data-toggle=collapse]')
     button.dispatchEvent(new MouseEvent('click'))
-    expect(component.isMenuCollapsed).toBeFalsy()
+    expect(component.isMenuCollapsed()).toBeFalsy()
     component.closeMenu()
-    expect(component.isMenuCollapsed).toBeTruthy()
+    expect(component.isMenuCollapsed()).toBeTruthy()
   })
 
   it('should hide mobile search when scrolling down and show it when scrolling up', () => {
@@ -308,14 +305,14 @@ describe('AppFrameComponent', () => {
       value: 40,
     })
     component.onWindowScroll()
-    expect(component.mobileSearchHidden).toBe(true)
+    expect(component.mobileSearchHidden()).toBe(true)
 
     Object.defineProperty(globalThis, 'scrollY', {
       configurable: true,
       value: 0,
     })
     component.onWindowScroll()
-    expect(component.mobileSearchHidden).toBe(false)
+    expect(component.mobileSearchHidden()).toBe(false)
   })
 
   it('should keep mobile search visible on desktop scroll or resize', () => {
@@ -323,13 +320,13 @@ describe('AppFrameComponent', () => {
       value: 1024,
     })
     component.ngOnInit()
-    component.mobileSearchHidden = true
+    component.mobileSearchHidden.set(true)
 
     component.onWindowScroll()
 
-    expect(component.mobileSearchHidden).toBe(false)
+    expect(component.mobileSearchHidden()).toBe(false)
 
-    component.mobileSearchHidden = true
+    component.mobileSearchHidden.set(true)
     component.onWindowResize()
   })
 
@@ -338,7 +335,7 @@ describe('AppFrameComponent', () => {
       value: 767,
     })
     component.ngOnInit()
-    component.isMenuCollapsed = false
+    component.isMenuCollapsed.set(false)
 
     Object.defineProperty(globalThis, 'scrollY', {
       configurable: true,
@@ -346,7 +343,7 @@ describe('AppFrameComponent', () => {
     })
     component.onWindowScroll()
 
-    expect(component.mobileSearchHidden).toBe(false)
+    expect(component.mobileSearchHidden()).toBe(false)
   })
 
   it('should support close document & navigate on close current doc', () => {
@@ -379,11 +376,11 @@ describe('AppFrameComponent', () => {
   })
 
   it('should disable global dropzone on start drag + drop, re-enable after', () => {
-    expect(settingsService.globalDropzoneEnabled).toBeTruthy()
+    expect(settingsService.globalDropzoneEnabled()).toBeTruthy()
     component.onDragStart(null)
-    expect(settingsService.globalDropzoneEnabled).toBeFalsy()
+    expect(settingsService.globalDropzoneEnabled()).toBeFalsy()
     component.onDragEnd(null)
-    expect(settingsService.globalDropzoneEnabled).toBeTruthy()
+    expect(settingsService.globalDropzoneEnabled()).toBeTruthy()
   })
 
   it('should update saved view sorting on drag + drop, show info', () => {

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

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, inject, OnInit } from '@angular/core'
+import { Component, HostListener, inject, OnInit, signal } from '@angular/core'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -90,14 +90,10 @@ export class AppFrameComponent
   permissionsService = inject(PermissionsService)
   private djangoMessagesService = inject(DjangoMessagesService)
 
-  appRemoteVersion: AppRemoteVersion
-
-  isMenuCollapsed: boolean = true
-
-  slimSidebarAnimating: boolean = false
-
-  public mobileSearchHidden: boolean = false
-
+  readonly appRemoteVersion = signal<AppRemoteVersion>(null)
+  readonly isMenuCollapsed = signal(true)
+  readonly slimSidebarAnimating = signal(false)
+  readonly mobileSearchHidden = signal(false)
   private lastScrollY: number = 0
 
   constructor() {
@@ -147,7 +143,7 @@ export class AppFrameComponent
   }
 
   toggleSlimSidebar(): void {
-    this.slimSidebarAnimating = true
+    this.slimSidebarAnimating.set(true)
     const slimSidebarEnabled = !this.slimSidebarEnabled
     this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, slimSidebarEnabled)
     if (slimSidebarEnabled) {
@@ -167,7 +163,7 @@ export class AppFrameComponent
         },
       })
     setTimeout(() => {
-      this.slimSidebarAnimating = false
+      this.slimSidebarAnimating.set(false)
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
@@ -177,11 +173,25 @@ export class AppFrameComponent
     this.attributesSectionsCollapsed = !this.attributesSectionsCollapsed
   }
 
+  toggleMenuCollapsed(): void {
+    this.isMenuCollapsed.set(!this.isMenuCollapsed())
+  }
+
+  closeMobileSearch(): void {
+    this.mobileSearchHidden.set(false)
+  }
+
+  setMobileSearchHidden(hidden: boolean): void {
+    this.mobileSearchHidden.set(hidden)
+  }
+
   get versionString(): string {
+    this.settingsService.trackChanges()
     return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
 
   get customAppTitle(): string {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }
 
@@ -224,6 +234,7 @@ export class AppFrameComponent
   }
 
   get slimSidebarEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
 
@@ -243,6 +254,7 @@ export class AppFrameComponent
   }
 
   get attributesSectionsCollapsed(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService
       .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
       ?.includes(CollapsibleSection.ATTRIBUTES)
@@ -268,13 +280,14 @@ export class AppFrameComponent
   }
 
   get aiEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
   @HostListener('window:resize')
   onWindowResize(): void {
     if (!this.isMobileViewport()) {
-      this.mobileSearchHidden = false
+      this.mobileSearchHidden.set(false)
     }
   }
 
@@ -282,8 +295,8 @@ export class AppFrameComponent
   onWindowScroll(): void {
     const currentScrollY = window.scrollY
 
-    if (!this.isMobileViewport() || this.isMenuCollapsed === false) {
-      this.mobileSearchHidden = false
+    if (!this.isMobileViewport() || this.isMenuCollapsed() === false) {
+      this.mobileSearchHidden.set(false)
       this.lastScrollY = currentScrollY
       return
     }
@@ -291,9 +304,9 @@ export class AppFrameComponent
     const delta = currentScrollY - this.lastScrollY
 
     if (currentScrollY <= 0 || delta < -SCROLL_THRESHOLD) {
-      this.mobileSearchHidden = false
+      this.mobileSearchHidden.set(false)
     } else if (currentScrollY > SCROLL_THRESHOLD && delta > SCROLL_THRESHOLD) {
-      this.mobileSearchHidden = true
+      this.mobileSearchHidden.set(true)
     }
 
     this.lastScrollY = currentScrollY
@@ -304,7 +317,7 @@ export class AppFrameComponent
   }
 
   closeMenu() {
-    this.isMenuCollapsed = true
+    this.isMenuCollapsed.set(true)
   }
 
   editProfile() {
@@ -367,11 +380,11 @@ export class AppFrameComponent
   }
 
   onDragStart(event: CdkDragStart) {
-    this.settingsService.globalDropzoneEnabled = false
+    this.settingsService.globalDropzoneEnabled.set(false)
   }
 
   onDragEnd(event: CdkDragEnd) {
-    this.settingsService.globalDropzoneEnabled = true
+    this.settingsService.globalDropzoneEnabled.set(true)
   }
 
   onDrop(event: CdkDragDrop<SavedView[]>) {
@@ -392,7 +405,7 @@ export class AppFrameComponent
     this.remoteVersionService
       .checkForUpdates()
       .subscribe((appRemoteVersion: AppRemoteVersion) => {
-        this.appRemoteVersion = appRemoteVersion
+        this.appRemoteVersion.set(appRemoteVersion)
       })
   }
 
@@ -419,9 +432,10 @@ export class AppFrameComponent
   }
 
   get showSidebarCounts(): boolean {
+    this.settingsService.trackChanges()
     return (
       this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
-      !this.settingsService.organizingSidebarSavedViews
+      !this.settingsService.organizingSidebarSavedViews()
     )
   }
 }

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

@@ -9,16 +9,16 @@
                     autocomplete="off"
                     spellcheck="false"
                     [(ngModel)]="query"
-                    (ngModelChange)="this.queryDebounce.next($event)"
+                    (ngModelChange)="queryDebounce.next($event)"
                     (keydown)="searchInputKeyDown($event)"
                     ngbDropdownAnchor>
                 <div class="position-absolute top-50 end-0 translate-middle">
-                    @if (loading) {
+                    @if (loading()) {
                         <div class="spinner-border spinner-border-sm text-muted mt-1"></div>
                     }
                 </div>
             </div>
-            @if (query) {
+            @if (query()) {
                 <button class="btn btn-sm btn-outline-secondary" type="button" (click)="runFullSearch()">
                     @if (useAdvancedForFullSearch) {
                         <ng-container i18n>Advanced search</ng-container>
@@ -77,88 +77,88 @@
 
     <div ngbDropdownMenu class="w-100 mh-75 overflow-y-scroll shadow-lg">
         <div (keydown)="dropdownKeyDown($event)">
-            @if (searchResults?.total === 0) {
+            @if (searchResults()?.total === 0) {
                 <h6 class="dropdown-header" i18n="@@searchResults.noResults">No results</h6>
             } @else {
-                @if (searchResults?.documents.length) {
+                @if (searchResults()?.documents.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.documents">Documents</h6>
-                    @for (document of searchResults.documents; track document.id) {
+                    @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) {
+                @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) {
+                    @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) {
+                @if (searchResults()?.tags.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.tags">Tags</h6>
-                    @for (tag of searchResults.tags; track tag.id) {
+                    @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) {
+                @if (searchResults()?.correspondents.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.correspondents">Correspondents</h6>
-                    @for (correspondent of searchResults.correspondents; track correspondent.id) {
+                    @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) {
+                @if (searchResults()?.document_types.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.documentTypes">Document types</h6>
-                    @for (documentType of searchResults.document_types; track documentType.id) {
+                    @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) {
+                @if (searchResults()?.storage_paths.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.storagePaths">Storage paths</h6>
-                    @for (storagePath of searchResults.storage_paths; track storagePath.id) {
+                    @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) {
+                @if (searchResults()?.users.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.users">Users</h6>
-                    @for (user of searchResults.users; track user.id) {
+                    @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) {
+                @if (searchResults()?.groups.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.groups">Groups</h6>
-                    @for (group of searchResults.groups; track group.id) {
+                    @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) {
+                @if (searchResults()?.custom_fields.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.customFields">Custom fields</h6>
-                    @for (customField of searchResults.custom_fields; track customField.id) {
+                    @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) {
+                @if (searchResults()?.mail_accounts.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.mailAccounts">Mail accounts</h6>
-                    @for (mailAccount of searchResults.mail_accounts; track mailAccount.id) {
+                    @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) {
+                @if (searchResults()?.mail_rules.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.mailRules">Mail rules</h6>
-                    @for (mailRule of searchResults.mail_rules; track mailRule.id) {
+                    @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) {
+                @if (searchResults()?.workflows.length) {
                     <h6 class="dropdown-header" i18n="@@searchResults.workflows">Workflows</h6>
-                    @for (workflow of searchResults.workflows; track workflow.id) {
+                    @for (workflow of searchResults().workflows; track workflow.id) {
                         <ng-container *ngTemplateOutlet="resultItemTemplate; context: {item: workflow, nameProp: 'name', type: DataType.Workflow, icon: 'boxes'}"></ng-container>
                     }
                 }

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

@@ -1,12 +1,7 @@
 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 { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -154,6 +149,7 @@ describe('GlobalSearchComponent', () => {
 
     searchService = TestBed.inject(SearchService)
     router = TestBed.inject(Router)
+    jest.spyOn(router, 'navigate').mockResolvedValue(true)
     modalService = TestBed.inject(NgbModal)
     documentService = TestBed.inject(DocumentService)
     documentListViewService = TestBed.inject(DocumentListViewService)
@@ -170,7 +166,7 @@ describe('GlobalSearchComponent', () => {
     document.dispatchEvent(new KeyboardEvent('keydown', { key: '/' }))
     expect(focusSpy).toHaveBeenCalled()
 
-    component.searchResults = searchResults as any
+    component.searchResults.set(searchResults as any)
     component.resultsDropdown.open()
     fixture.detectChanges()
 
@@ -238,26 +234,26 @@ describe('GlobalSearchComponent', () => {
     )
     expect(component['currentItemIndex']).toBe(0)
 
-    component.searchResults = { total: 1 } as any
+    component.searchResults.set({ total: 1 } as any)
     const primaryActionSpy = jest.spyOn(component, 'primaryAction')
     component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
     expect(primaryActionSpy).toHaveBeenCalled()
 
-    component.query = 'test'
+    component.query.set('test')
     const resetSpy = jest.spyOn(GlobalSearchComponent.prototype as any, 'reset')
     component.searchInputKeyDown(
       new KeyboardEvent('keydown', { key: 'Escape' })
     )
     expect(resetSpy).toHaveBeenCalled()
 
-    component.query = ''
+    component.query.set('')
     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.searchResults.set({ total: 1 } as any)
     component.resultsDropdown.open()
 
     component.searchInputKeyDown(
@@ -268,28 +264,30 @@ describe('GlobalSearchComponent', () => {
     component.dropdownKeyDown(new KeyboardEvent('keydown', { key: 'Escape' }))
     expect(closeSpy).toHaveBeenCalled()
 
-    component.searchResults = searchResults as any
+    component.searchResults.set(searchResults as any)
     component.resultsDropdown.open()
-    component.query = 'test'
+    component.query.set('test')
     const advancedSearchSpy = jest.spyOn(component, 'runFullSearch')
     component.searchInputKeyDown(new KeyboardEvent('keydown', { key: 'Enter' }))
     expect(advancedSearchSpy).toHaveBeenCalled()
   })
 
-  it('should search on query debounce', fakeAsync(() => {
+  it('should search on query debounce', () => {
+    jest.useFakeTimers()
     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)
+    jest.advanceTimersByTime(401)
     expect(searchSpy).toHaveBeenCalledWith(query)
     expect(dropdownOpenSpy).toHaveBeenCalled()
-  }))
+    jest.useRealTimers()
+  })
 
   it('should support primary action', () => {
     const object = { id: 1 }
-    const routerSpy = jest.spyOn(router, 'navigate')
+    const routerSpy = jest.mocked(router.navigate)
     const modalSpy = jest.spyOn(modalService, 'open')
 
     let modal: NgbModalRef
@@ -465,13 +463,13 @@ describe('GlobalSearchComponent', () => {
     const closeSpy = jest.spyOn(component.resultsDropdown, 'close')
     component['reset'](true)
     expect(debounce).toHaveBeenCalledWith(null)
-    expect(component.searchResults).toBeNull()
+    expect(component.searchResults()).toBeNull()
     expect(component['currentItemIndex']).toBe(-1)
     expect(closeSpy).toHaveBeenCalled()
   })
 
   it('should support focus current item', () => {
-    component.searchResults = searchResults as any
+    component.searchResults.set(searchResults as any)
     fixture.detectChanges()
     const focusSpy = jest.spyOn(
       component.primaryButtons.get(0).nativeElement,
@@ -489,7 +487,7 @@ describe('GlobalSearchComponent', () => {
   })
 
   it('should focus button on dropdown item hover', () => {
-    component.searchResults = searchResults as any
+    component.searchResults.set(searchResults as any)
     fixture.detectChanges()
     const item: ElementRef = component.resultItems.first
     const focusSpy = jest.spyOn(
@@ -515,7 +513,7 @@ describe('GlobalSearchComponent', () => {
     component.primaryAction(DataType.Document, { id: 2 }, event as any)
     expect(openSpy).toHaveBeenCalledWith('/documents/2', '_blank')
 
-    component.searchResults = searchResults as any
+    component.searchResults.set(searchResults as any)
     component.resultsDropdown.open()
     fixture.detectChanges()
 
@@ -542,7 +540,7 @@ describe('GlobalSearchComponent', () => {
 
   it('should support title content search and advanced search', () => {
     const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
-    component.query = 'test'
+    component.query.set('test')
     component.runFullSearch()
     expect(qfSpy).toHaveBeenCalledWith([
       { rule_type: FILTER_SIMPLE_TEXT, value: 'test' },
@@ -552,7 +550,7 @@ describe('GlobalSearchComponent', () => {
       SETTINGS_KEYS.SEARCH_FULL_TYPE,
       GlobalSearchType.ADVANCED
     )
-    component.query = 'test'
+    component.query.set('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

@@ -7,6 +7,7 @@ import {
   ViewChild,
   ViewChildren,
   inject,
+  signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
@@ -82,12 +83,12 @@ export class GlobalSearchComponent implements OnInit {
   private locationStrategy = inject(LocationStrategy)
 
   public DataType = DataType
-  public query: string
+  readonly query = signal<string>(null)
   public queryDebounce: Subject<string>
-  public searchResults: GlobalSearchResult
+  readonly searchResults = signal<GlobalSearchResult>(null)
   private currentItemIndex: number = -1
   private domIndex: number = -1
-  public loading: boolean = false
+  readonly loading = signal(false)
 
   @ViewChild('searchInput') searchInput: ElementRef
   @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
@@ -96,6 +97,7 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   get useAdvancedForFullSearch(): boolean {
+    this.settingsService.trackChanges()
     return (
       this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
       GlobalSearchType.ADVANCED
@@ -112,7 +114,7 @@ export class GlobalSearchComponent implements OnInit {
         distinctUntilChanged()
       )
       .subscribe((text) => {
-        this.query = text
+        this.query.set(text)
         if (text) this.search(text)
       })
   }
@@ -126,10 +128,10 @@ export class GlobalSearchComponent implements OnInit {
   }
 
   private search(query: string) {
-    this.loading = true
+    this.loading.set(true)
     this.searchService.globalSearch(query.trim()).subscribe((results) => {
-      this.searchResults = results
-      this.loading = false
+      this.searchResults.set(results)
+      this.loading.set(false)
       this.resultsDropdown.open()
     })
   }
@@ -205,7 +207,7 @@ export class GlobalSearchComponent implements OnInit {
         editDialogComponent,
         { size }
       )
-      modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
+      modalRef.componentInstance.dialogMode.set(EditDialogMode.EDIT)
       modalRef.componentInstance.object = object
       modalRef.componentInstance.succeeded.subscribe(() => {
         this.toastService.showInfo($localize`Successfully updated object.`)
@@ -243,7 +245,7 @@ export class GlobalSearchComponent implements OnInit {
         editDialogComponent,
         { size }
       )
-      modalRef.componentInstance.dialogMode = EditDialogMode.EDIT
+      modalRef.componentInstance.dialogMode.set(EditDialogMode.EDIT)
       modalRef.componentInstance.object = object
       modalRef.componentInstance.succeeded.subscribe(() => {
         this.toastService.showInfo($localize`Successfully updated object.`)
@@ -256,8 +258,8 @@ export class GlobalSearchComponent implements OnInit {
 
   private reset(close: boolean = false) {
     this.queryDebounce.next(null)
-    this.query = null
-    this.searchResults = null
+    this.query.set(null)
+    this.searchResults.set(null)
     this.currentItemIndex = -1
     if (close) {
       this.resultsDropdown.close()
@@ -292,7 +294,7 @@ export class GlobalSearchComponent implements OnInit {
   public searchInputKeyDown(event: KeyboardEvent) {
     if (
       event.key === 'ArrowDown' &&
-      this.searchResults?.total &&
+      this.searchResults()?.total &&
       this.resultsDropdown.isOpen()
     ) {
       event.preventDefault()
@@ -300,22 +302,22 @@ export class GlobalSearchComponent implements OnInit {
       this.setCurrentItem()
     } else if (
       event.key === 'ArrowUp' &&
-      this.searchResults?.total &&
+      this.searchResults()?.total &&
       this.resultsDropdown.isOpen()
     ) {
       event.preventDefault()
-      this.currentItemIndex = this.searchResults.total - 1
+      this.currentItemIndex = this.searchResults()?.total - 1
       this.setCurrentItem()
     } else if (event.key === 'Enter') {
-      if (this.searchResults?.total === 1 && this.resultsDropdown.isOpen()) {
+      if (this.searchResults()?.total === 1 && this.resultsDropdown.isOpen()) {
         this.primaryButtons.first.nativeElement.click()
         this.searchInput.nativeElement.blur()
-      } else if (this.query?.length) {
+      } else if (this.query()?.length) {
         this.runFullSearch()
         this.reset(true)
       }
     } else if (event.key === 'Escape' && !this.resultsDropdown.isOpen()) {
-      if (this.query?.length) {
+      if (this.query()?.length) {
         this.reset(true)
       } else {
         this.searchInput.nativeElement.blur()
@@ -325,14 +327,14 @@ export class GlobalSearchComponent implements OnInit {
 
   public dropdownKeyDown(event: KeyboardEvent) {
     if (
-      this.searchResults?.total &&
+      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) {
+        if (this.currentItemIndex < this.searchResults()?.total - 1) {
           this.currentItemIndex++
           this.setCurrentItem()
         } else {
@@ -412,10 +414,10 @@ export class GlobalSearchComponent implements OnInit {
       ? FILTER_FULLTEXT_QUERY
       : FILTER_SIMPLE_TEXT
     this.documentService.searchQuery = this.useAdvancedForFullSearch
-      ? this.query
+      ? this.query()
       : ''
     this.documentListViewService.quickFilter([
-      { rule_type: ruleType, value: this.query },
+      { rule_type: ruleType, value: this.query() },
     ])
     this.reset(true)
   }

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

@@ -1,7 +1,7 @@
 
 <li ngbDropdown class="nav-item mx-1" (openChange)="onOpenChange($event)">
-  @if (toasts.length) {
-    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts.length }}</span>
+  @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>
@@ -12,15 +12,15 @@
       <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"
+          [disabled]="toasts().length === 0"
           i18n>Clear All</button>
       </div>
     </div>
-    @if (toasts.length === 0) {
+    @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) {
+      @for (toast of toasts(); track toast.id) {
         <pngx-toast [autohide]="false" [toast]="toast" (hidden)="onHidden(toast)" (closed)="toastService.closeToast(toast)"></pngx-toast>
       }
       </div>

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

@@ -1,12 +1,6 @@
 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 { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
@@ -42,7 +36,8 @@ describe('ToastsDropdownComponent', () => {
   let component: ToastsDropdownComponent
   let fixture: ComponentFixture<ToastsDropdownComponent>
   let toastService: ToastService
-  let toastsSubject: Subject<Toast[]> = new Subject()
+  let toastsSubject: Subject<Toast[]>
+  let getToastsSpy: jest.SpyInstance
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -56,57 +51,43 @@ describe('ToastsDropdownComponent', () => {
       ],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(ToastsDropdownComponent)
     toastService = TestBed.inject(ToastService)
-    jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject)
+    toastsSubject = new Subject()
+    getToastsSpy = jest
+      .spyOn(toastService, 'getToasts')
+      .mockReturnValue(toastsSubject)
 
+    fixture = TestBed.createComponent(ToastsDropdownComponent)
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
-  it('should call getToasts and return toasts', fakeAsync(() => {
-    const spy = jest.spyOn(toastService, 'getToasts')
-
-    component.ngOnInit()
+  it('should call getToasts and return toasts', () => {
     toastsSubject.next(toasts)
     fixture.detectChanges()
 
-    expect(spy).toHaveBeenCalled()
-    expect(component.toasts).toContainEqual({
+    expect(getToastsSpy).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()
+  it('should show a toast', () => {
     toastsSubject.next(toasts)
     fixture.detectChanges()
 
     expect(fixture.nativeElement.textContent).toContain('foo bar')
+  })
 
-    component.ngOnDestroy()
-    flush()
-    discardPeriodicTasks()
-  }))
-
-  it('should toggle suppressPopupToasts', fakeAsync((finish) => {
-    component.ngOnInit()
+  it('should toggle suppressPopupToasts', () => {
     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

@@ -1,10 +1,11 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   NgbDropdownModule,
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { Subscription } from 'rxjs'
+import { map } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../../common/toast/toast.component'
 
@@ -19,22 +20,13 @@ import { ToastComponent } from '../../common/toast/toast.component'
     NgxBootstrapIconsModule,
   ],
 })
-export class ToastsDropdownComponent implements OnInit, OnDestroy {
+export class ToastsDropdownComponent {
   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]
-    })
-  }
+  readonly toasts = toSignal(
+    this.toastService.getToasts().pipe(map((toasts) => [...toasts])),
+    { initialValue: [] as Toast[] }
+  )
 
   onOpenChange(open: boolean): void {
     this.toastService.suppressPopupToasts = open

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

@@ -1,10 +1,10 @@
-@if (active) {
+@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) {
+    @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>
+    @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.spec.ts

@@ -21,20 +21,20 @@ describe('ClearableBadgeComponent', () => {
   })
 
   it('should support selected', () => {
-    component.selected = true
-    expect(component.active).toBeTruthy()
+    fixture.componentRef.setInput('selected', true)
+    expect(component.active()).toBeTruthy()
   })
 
   it('should support numbered', () => {
-    component.number = 3
+    fixture.componentRef.setInput('number', 3)
     fixture.detectChanges()
-    expect(component.active).toBeTruthy()
+    expect(component.active()).toBeTruthy()
     expect((fixture.nativeElement as HTMLDivElement).textContent).toContain('3')
   })
 
   it('should support selected', () => {
     let clearedResult
-    component.selected = true
+    fixture.componentRef.setInput('selected', true)
     fixture.detectChanges()
     component.cleared.subscribe((clear) => {
       clearedResult = clear

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, computed, EventEmitter, input, Output } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
@@ -8,24 +8,15 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
   imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
-  constructor() {}
-
-  @Input()
-  number: number
-
-  @Input()
-  selected: boolean
+  readonly number = input<number>(undefined)
+  readonly selected = input<boolean>(undefined)
 
   @Output()
   cleared: EventEmitter<boolean> = new EventEmitter()
 
-  get active(): boolean {
-    return this.selected || this.number > -1
-  }
+  readonly active = computed(() => this.selected() || this.number() > -1)
 
-  get isNumbered(): boolean {
-    return this.number > -1
-  }
+  readonly isNumbered = computed(() => this.number() > -1)
 
   onClick(event: PointerEvent) {
     this.cleared.emit(true)

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

@@ -23,10 +23,10 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   title = $localize`Confirmation`
 
   @Input()
-  messageBold
+  messageBold: string
 
   @Input()
-  message
+  message: string
 
   @Input()
   btnClass = 'btn-primary'
@@ -38,7 +38,7 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   alternativeBtnClass = 'btn-secondary'
 
   @Input()
-  alternativeBtnCaption
+  alternativeBtnCaption: string
 
   @Input()
   cancelBtnClass = 'btn-outline-secondary'

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

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

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

@@ -50,12 +50,12 @@ describe('MergeConfirmDialogComponent', () => {
 
     component.ngOnInit()
 
-    expect(component.documents).toEqual(documents)
-    expect(documentService.getFew).toHaveBeenCalledWith(component.documentIDs)
+    expect(component.documents()).toEqual(documents)
+    expect(documentService.getFew).toHaveBeenCalledWith(component.documentIDs())
   })
 
   it('should move documentIDs on drop', () => {
-    component.documentIDs = [1, 2, 3]
+    component.documentIDs.set([1, 2, 3])
     const event = {
       previousIndex: 1,
       currentIndex: 2,
@@ -63,7 +63,7 @@ describe('MergeConfirmDialogComponent', () => {
 
     component.onDrop(event as any)
 
-    expect(component.documentIDs).toEqual([1, 3, 2])
+    expect(component.documentIDs()).toEqual([1, 3, 2])
   })
 
   it('should get document by ID', () => {

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

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { AsyncPipe } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
@@ -36,15 +36,11 @@ export class MergeConfirmDialogComponent
   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
+  readonly documentIDs = signal<number[]>([])
+  readonly archiveFallback = signal(false)
+  readonly deleteOriginals = signal(false)
+  readonly documents = signal<Document[]>([])
+  readonly metadataDocumentID = signal(-1)
 
   constructor() {
     super()
@@ -52,23 +48,25 @@ export class MergeConfirmDialogComponent
 
   ngOnInit() {
     this.documentService
-      .getFew(this.documentIDs)
+      .getFew(this.documentIDs())
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((r) => {
-        this._documents = r.results
+        this.documents.set(r.results)
       })
   }
 
   onDrop(event: CdkDragDrop<number[]>) {
-    moveItemInArray(this.documentIDs, event.previousIndex, event.currentIndex)
+    const documentIDs = this.documentIDs().concat()
+    moveItemInArray(documentIDs, event.previousIndex, event.currentIndex)
+    this.documentIDs.set(documentIDs)
   }
 
   getDocument(documentID: number): Document {
-    return this.documents.find((d) => d.id === documentID)
+    return this.documents().find((d) => d.id === documentID)
   }
 
   get userOwnsAllDocuments(): boolean {
-    return this.documents.every((d) =>
+    return this.documents().every((d) =>
       this.permissionService.currentUserOwnsObject(d)
     )
   }

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
@@ -14,18 +14,11 @@ export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponen
   includeMetadata: boolean = true
   deleteOriginal: boolean = false
 
-  @Input()
-  override title = $localize`Remove password protection`
-
-  @Input()
-  override message =
-    $localize`Create an unprotected copy or replace the existing file.`
-
-  @Input()
-  override btnCaption = $localize`Start`
-
   constructor() {
     super()
+    this.title = $localize`Remove password protection`
+    this.message = $localize`Create an unprotected copy or replace the existing file.`
+    this.btnCaption = $localize`Start`
   }
 
   onUpdateDocumentChange(updateDocument: boolean) {

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

@@ -11,8 +11,8 @@
             </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)" />
+            @if (documentID()) {
+                <img class="w-75 m-auto" [ngStyle]="{'transform': 'rotate('+rotation()+'deg)'}" [src]="documentService.getThumbUrl(documentID())" />
             }
         </div>
         <div class="col-2 d-flex">
@@ -21,7 +21,7 @@
             </button>
         </div>
     </div>
-    @if (showPDFNote) {
+    @if (showPDFNote()) {
         <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
     }
 </div>

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

@@ -28,7 +28,7 @@ describe('RotateConfirmDialogComponent', () => {
   })
 
   it('should support rotating the image', () => {
-    component.documentID = 1
+    component.documentID.set(1)
     fixture.detectChanges()
     component.rotate()
     fixture.detectChanges()

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

@@ -1,5 +1,5 @@
 import { NgStyle } from '@angular/common'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
@@ -13,14 +13,12 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
 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
+  readonly documentID = signal<number>(undefined)
+  readonly showPDFNote = signal(true)
+  readonly rotation = signal(0)
 
   public get degrees(): number {
-    let degrees = this.rotation % 360
+    let degrees = this.rotation() % 360
     if (degrees < 0) degrees += 360
     return degrees
   }
@@ -30,6 +28,6 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   }
 
   rotate(clockwise: boolean = true) {
-    this.rotation += clockwise ? 90 : -90
+    this.rotation.update((rotation) => rotation + (clockwise ? 90 : -90))
   }
 }

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

@@ -1,11 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import {
@@ -74,7 +69,7 @@ describe('CustomFieldsDropdownComponent', () => {
       })
     )
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 1, username: 'test' }
+    settingsService.currentUser.set({ id: 1, username: 'test' })
     fixture = TestBed.createComponent(CustomFieldsDropdownComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
@@ -110,7 +105,8 @@ describe('CustomFieldsDropdownComponent', () => {
     )
   })
 
-  it('should support creating field, show error if necessary, then add', fakeAsync(() => {
+  it('should support creating field, show error if necessary, then add', () => {
+    jest.useFakeTimers()
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[m.length - 1]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
@@ -134,11 +130,12 @@ describe('CustomFieldsDropdownComponent', () => {
 
     // succeed
     editDialog.succeeded.emit(fields[0])
-    tick(100)
+    jest.advanceTimersByTime(100)
     expect(toastInfoSpy).toHaveBeenCalled()
     expect(getFieldsSpy).toHaveBeenCalled()
     expect(addFieldSpy).toHaveBeenCalled()
-  }))
+    jest.useRealTimers()
+  })
 
   it('should support creating field with name', () => {
     let modal: NgbModalRef
@@ -150,12 +147,13 @@ describe('CustomFieldsDropdownComponent', () => {
     expect(editDialog.object.name).toEqual('Foo bar')
   })
 
-  it('should support arrow keyboard navigation', fakeAsync(() => {
+  it('should support arrow keyboard navigation', () => {
+    jest.useFakeTimers()
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    jest.advanceTimersByTime(100)
     const filterInputEl: HTMLInputElement =
       component.listFilterTextInput.nativeElement
     expect(document.activeElement).toEqual(filterInputEl)
@@ -193,14 +191,16 @@ describe('CustomFieldsDropdownComponent', () => {
       new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
     )
     expect(document.activeElement).toEqual(itemButtons[0])
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should support arrow keyboard navigation after tab keyboard navigation', fakeAsync(() => {
+  it('should support arrow keyboard navigation after tab keyboard navigation', () => {
+    jest.useFakeTimers()
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    jest.advanceTimersByTime(100)
     const filterInputEl: HTMLInputElement =
       component.listFilterTextInput.nativeElement
     expect(document.activeElement).toEqual(filterInputEl)
@@ -229,9 +229,10 @@ describe('CustomFieldsDropdownComponent', () => {
       new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
     )
     expect(document.activeElement).toEqual(itemButtons[1])
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should support enter keyboard navigation', fakeAsync(() => {
+  it('should support enter keyboard navigation', () => {
     jest.spyOn(component, 'canCreateFields', 'get').mockReturnValue(true)
     const addFieldSpy = jest.spyOn(component, 'addField')
     const createFieldSpy = jest.spyOn(component, 'createField')
@@ -250,5 +251,5 @@ describe('CustomFieldsDropdownComponent', () => {
     component.listFilterEnter()
     expect(createFieldSpy).not.toHaveBeenCalled()
     expect(addFieldSpy).not.toHaveBeenCalled()
-  }))
+  })
 })

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

@@ -75,7 +75,7 @@
 
 <ng-template #queryAtom let-atom="atom">
   <div class="input-group input-group-sm">
-    <ng-select
+    <ng-select #fieldSelects
       class="paperless-input-select"
       [items]="customFields"
       [(ngModel)]="atom.field"

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

@@ -1,11 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
@@ -210,14 +205,13 @@ describe('CustomFieldsQueryDropdownComponent', () => {
     expect(component.name).toBe('test_title')
   })
 
-  it('should add a default atom on open and focus the select field', fakeAsync(() => {
+  it('should add a default atom on open', async () => {
     expect(component.selectionModel.queries.length).toBe(0)
     component.onOpenChange(true)
     fixture.detectChanges()
-    tick()
+    await fixture.whenStable()
     expect(component.selectionModel.queries.length).toBe(1)
-    expect(window.document.activeElement.tagName).toBe('INPUT')
-  }))
+  })
 
   describe('CustomFieldQueriesModel', () => {
     let model: CustomFieldQueriesModel

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

@@ -1,12 +1,7 @@
 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 { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
@@ -59,27 +54,32 @@ describe('DatesDropdownComponent', () => {
     expect(settingsSpy).toHaveBeenCalled()
   })
 
-  it('should support date input, emit change', fakeAsync(() => {
+  it('should support date input, emit change', () => {
+    jest.useFakeTimers()
     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)
+    jest.advanceTimersByTime(500)
     expect(result).not.toBeNull()
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should support date select, emit datesSet change', fakeAsync(() => {
+  it('should support date select, emit datesSet change', () => {
+    jest.useFakeTimers()
     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)
+    jest.advanceTimersByTime(500)
     expect(result).not.toBeNull()
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should support relative dates', fakeAsync(() => {
+  it('should support relative dates', () => {
+    jest.useFakeTimers()
     let result: DateSelection
     component.datesSet.subscribe((date) => (result = date))
     component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
@@ -88,7 +88,7 @@ describe('DatesDropdownComponent', () => {
     } 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)
+    jest.advanceTimersByTime(500)
     expect(result).toEqual({
       createdFrom: null,
       createdTo: null,
@@ -97,7 +97,8 @@ describe('DatesDropdownComponent', () => {
       addedTo: null,
       addedRelativeDateID: RelativeDate.WITHIN_1_WEEK,
     })
-  }))
+    jest.useRealTimers()
+  })
 
   it('should support report if active', () => {
     component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK
@@ -177,11 +178,12 @@ describe('DatesDropdownComponent', () => {
     expect(eventSpy).toHaveBeenCalled()
   })
 
-  it('should support debounce', fakeAsync(() => {
+  it('should support debounce', () => {
+    jest.useFakeTimers()
     let result: DateSelection
     component.datesSet.subscribe((date) => (result = date))
     component.onChangeDebounce()
-    tick(500)
+    jest.advanceTimersByTime(500)
     expect(result).toEqual({
       createdFrom: null,
       createdTo: null,
@@ -190,5 +192,6 @@ describe('DatesDropdownComponent', () => {
       addedTo: null,
       addedRelativeDateID: null,
     })
-  }))
+    jest.useRealTimers()
+  })
 })

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

@@ -41,20 +41,20 @@ describe('CorrespondentEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(CorrespondentEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -44,33 +44,33 @@ describe('CustomFieldEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(CustomFieldEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
 
   it('should disable data type select on edit', () => {
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(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.dialogMode.set(EditDialogMode.EDIT)
     component.object = {
       id: 1,
       name: 'Field 1',
@@ -91,7 +91,7 @@ describe('CustomFieldEditDialogComponent', () => {
   })
 
   it('should support add / remove select options', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     fixture.detectChanges()
     component.ngOnInit()
     expect(
@@ -115,7 +115,7 @@ describe('CustomFieldEditDialogComponent', () => {
     const selectOptionInputs = component[
       'selectOptionInputs'
     ] as QueryList<ElementRef>
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     component.objectForm.get('data_type').setValue(CustomFieldDataType.Select)
     component.ngOnInit()
     component.ngAfterViewInit()
@@ -125,7 +125,7 @@ describe('CustomFieldEditDialogComponent', () => {
   })
 
   it('should send all select options including those changed in form on save', () => {
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(EditDialogMode.EDIT)
     component.object = {
       id: 1,
       name: 'Field 1',

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

@@ -149,7 +149,7 @@ export class CustomFieldEditDialogComponent
   }
 
   get typeFieldDisabled(): boolean {
-    return this.dialogMode === EditDialogMode.EDIT
+    return this.dialogMode() === EditDialogMode.EDIT
   }
 
   private updateSelectOptions() {

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

@@ -41,20 +41,20 @@ describe('DocumentTypeEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(DocumentTypeEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -4,12 +4,7 @@ import {
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import { Component } from '@angular/core'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
   FormControl,
   FormGroup,
@@ -122,7 +117,7 @@ describe('EditDialogComponent', () => {
     tagService = TestBed.inject(TagService)
     permissionsService = TestBed.inject(PermissionsService)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = currentUser
+    settingsService.currentUser.set(currentUser as any)
     permissionsService.initialize([], currentUser as any)
     activeModal = TestBed.inject(NgbActiveModal)
     httpTestingController = TestBed.inject(HttpTestingController)
@@ -136,7 +131,7 @@ describe('EditDialogComponent', () => {
   it('should interpolate object permissions', () => {
     component.getMatchingAlgorithms() // coverage
     component.object = tag
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(EditDialogMode.EDIT)
     component.ngOnInit()
 
     expect(component.objectForm.get('permissions_form').value).toEqual({
@@ -145,15 +140,17 @@ describe('EditDialogComponent', () => {
     })
   })
 
-  it('should delay close enabled', fakeAsync(() => {
+  it('should delay close enabled', () => {
+    jest.useFakeTimers()
     expect(component.closeEnabled).toBeFalsy()
     component.ngOnInit()
-    tick(100)
+    jest.advanceTimersByTime(100)
     expect(component.closeEnabled).toBeTruthy()
-  }))
+    jest.useRealTimers()
+  })
 
   it('should set default owner when in create mode if unset', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     component.ngOnInit()
     expect(component.objectForm.get('permissions_form').value.owner).toEqual(
       currentUser.id
@@ -164,7 +161,7 @@ describe('EditDialogComponent', () => {
   })
 
   it('should set default perms when in create mode if set', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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])
@@ -203,18 +200,18 @@ describe('EditDialogComponent', () => {
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
     const editTitleSpy = jest.spyOn(component, 'getEditTitle')
-    fixture.detectChanges()
+    component.getTitle()
     expect(createTitleSpy).toHaveBeenCalled()
     expect(editTitleSpy).not.toHaveBeenCalled()
-    component.dialogMode = EditDialogMode.EDIT
-    fixture.detectChanges()
+    component.dialogMode.set(EditDialogMode.EDIT)
+    component.getTitle()
     expect(editTitleSpy).toHaveBeenCalled()
     // coverage
-    component.dialogMode = null
-    fixture.detectChanges()
+    component.dialogMode.set(null)
+    component.getTitle()
   })
 
   it('should close on cancel', () => {
@@ -225,14 +222,14 @@ describe('EditDialogComponent', () => {
 
   it('should update an object on save in edit mode', () => {
     const updateSpy = jest.spyOn(tagService, 'update')
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(EditDialogMode.EDIT)
     component.save()
     expect(updateSpy).toHaveBeenCalled()
   })
 
   it('should not submit owner or permissions for non-owner edits', () => {
     component.object = tag
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(EditDialogMode.EDIT)
     component.ngOnInit()
 
     component.objectForm.get('name').setValue('Updated tag')
@@ -251,7 +248,7 @@ describe('EditDialogComponent', () => {
 
   it('should create an object on save in edit mode', () => {
     const createSpy = jest.spyOn(tagService, 'create')
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     component.save()
     expect(createSpy).toHaveBeenCalled()
   })

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

@@ -5,6 +5,7 @@ import {
   OnInit,
   Output,
   inject,
+  model,
 } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -45,10 +46,7 @@ export abstract class EditDialogComponent<
   protected settingsService = inject(SettingsService)
   protected permissionsService = inject(PermissionsService)
 
-  users: User[]
-
-  @Input()
-  dialogMode: EditDialogMode = EditDialogMode.CREATE
+  dialogMode = model(EditDialogMode.CREATE)
 
   @Input()
   object: T
@@ -59,18 +57,20 @@ export abstract class EditDialogComponent<
   @Output()
   failed = new EventEmitter()
 
+  users: User[]
+
   networkActive = false
 
   closeEnabled = false
 
-  error = null
+  error: any = null
 
   abstract getForm(): FormGroup
 
   objectForm: FormGroup = this.getForm()
 
   ngOnInit(): void {
-    if (this.object != null && this.dialogMode !== EditDialogMode.CREATE) {
+    if (this.object != null && this.dialogMode() !== EditDialogMode.CREATE) {
       this.object['permissions_form'] = {
         owner: (this.object as ObjectWithPermissions).owner,
         set_permissions: (this.object as ObjectWithPermissions).permissions,
@@ -124,7 +124,7 @@ export abstract class EditDialogComponent<
   }
 
   getTitle() {
-    switch (this.dialogMode) {
+    switch (this.dialogMode()) {
       case EditDialogMode.CREATE:
         return this.getCreateTitle()
       case EditDialogMode.EDIT:
@@ -151,7 +151,7 @@ export abstract class EditDialogComponent<
 
   protected shouldSubmitPermissions(): boolean {
     return (
-      this.dialogMode === EditDialogMode.CREATE ||
+      this.dialogMode() === EditDialogMode.CREATE ||
       this.permissionsService.currentUserOwnsObject(this.object)
     )
   }
@@ -172,7 +172,7 @@ export abstract class EditDialogComponent<
       delete newObject['set_permissions']
     }
     var serverResponse: Observable<T>
-    switch (this.dialogMode) {
+    switch (this.dialogMode()) {
       case EditDialogMode.CREATE:
         serverResponse = this.service.create(newObject)
         break

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

@@ -45,20 +45,20 @@ describe('GroupEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(GroupEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -25,8 +25,8 @@
   </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>
+      @if (testResult()) {
+        <ngb-alert #testResultAlert [type]="testResult()" class="mb-0 py-2" (closed)="testResult.set(null)">{{testResultMessage}}</ngb-alert>
       }
     </div>
     <button type="button" class="btn btn-outline-primary" (click)="test()" [disabled]="networkActive || testActive">

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

@@ -3,12 +3,7 @@ import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/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'
@@ -58,25 +53,26 @@ describe('MailAccountEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(MailAccountEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
 
-  it('should support test mail account and show appropriate expiring alert', fakeAsync(() => {
+  it('should support test mail account and show appropriate expiring alert', () => {
+    jest.useFakeTimers()
     component.object = {
       name: 'example',
       imap_server: 'imap.example.com',
@@ -97,7 +93,7 @@ describe('MailAccountEditDialogComponent', () => {
     expect(fixture.nativeElement.textContent).toContain(
       'Successfully connected'
     )
-    tick(6000)
+    jest.advanceTimersByTime(6000)
     fixture.detectChanges()
     expect(fixture.nativeElement.textContent).not.toContain(
       'Successfully connected'
@@ -118,6 +114,7 @@ describe('MailAccountEditDialogComponent', () => {
       .flush({}, { status: 500, statusText: 'error' })
     fixture.detectChanges()
     expect(fixture.nativeElement.textContent).toContain('Unable to connect')
-    tick(6000)
-  }))
+    jest.advanceTimersByTime(6000)
+    jest.useRealTimers()
+  })
 })

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, inject } from '@angular/core'
+import { Component, ViewChild, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -38,7 +38,7 @@ const IMAP_SECURITY_OPTIONS = [
 })
 export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
   testActive: boolean = false
-  testResult: string
+  readonly testResult = signal<string>(undefined)
   alertTimeout
 
   @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
@@ -77,7 +77,7 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<MailAcco
 
   test() {
     this.testActive = true
-    this.testResult = null
+    this.testResult.set(null)
     clearTimeout(this.alertTimeout)
     const mailService = this.service as MailAccountService
     const newObject = Object.assign(
@@ -87,19 +87,19 @@ export class MailAccountEditDialogComponent extends EditDialogComponent<MailAcco
     mailService.test(newObject).subscribe({
       next: (result: { success: boolean }) => {
         this.testActive = false
-        this.testResult = result.success ? 'success' : 'danger'
+        this.testResult.set(result.success ? 'success' : 'danger')
         this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
       },
       error: (e) => {
         this.testActive = false
-        this.testResult = 'danger'
+        this.testResult.set('danger')
         this.alertTimeout = setTimeout(() => this.testResultAlert.close(), 5000)
       },
     })
   }
 
   get testResultMessage() {
-    return this.testResult === 'success'
+    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

@@ -13,7 +13,7 @@
         <pngx-input-text [horizontal]="true" i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
       </div>
       <div class="col-md-4">
-        <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts()" formControlName="account"></pngx-input-select>
       </div>
       <div class="col-md-2 pt-2">
         <pngx-input-switch [horizontal]="true" i18n-title title="Enabled" formControlName="enabled"></pngx-input-switch>
@@ -65,10 +65,10 @@
       </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 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>
+          <pngx-input-select [horizontal]="true" i18n-title title="Assign correspondent" [items]="correspondents()" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
         }
       </div>
     </div>

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

@@ -75,20 +75,20 @@ describe('MailRuleEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(MailRuleEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -1,11 +1,12 @@
 import { Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { first } from 'rxjs'
+import { map } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { DocumentType } from 'src/app/data/document-type'
@@ -154,37 +155,28 @@ const METADATA_CORRESPONDENT_OPTIONS = [
   ],
 })
 export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
-  private accountService: MailAccountService
-  private correspondentService: CorrespondentService
-  private documentTypeService: DocumentTypeService
+  private accountService = inject(MailAccountService)
+  private correspondentService = inject(CorrespondentService)
+  private documentTypeService = inject(DocumentTypeService)
 
-  accounts: MailAccount[]
-  correspondents: Correspondent[]
-  documentTypes: DocumentType[]
+  readonly accounts = toSignal(
+    this.accountService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as MailAccount[] }
+  )
+  readonly correspondents = toSignal(
+    this.correspondentService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as Correspondent[] }
+  )
+  readonly documentTypes = toSignal(
+    this.documentTypeService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as DocumentType[] }
+  )
 
   constructor() {
     super()
     this.service = inject(MailRuleService)
-    this.accountService = inject(MailAccountService)
-    this.correspondentService = inject(CorrespondentService)
-    this.documentTypeService = inject(DocumentTypeService)
     this.userService = inject(UserService)
     this.settingsService = inject(SettingsService)
-
-    this.accountService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.accounts = result.results))
-
-    this.correspondentService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.correspondents = result.results))
-
-    this.documentTypeService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.documentTypes = result.results))
   }
 
   getCreateTitle() {

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

@@ -30,20 +30,20 @@ describe('StoragePathEditDialogComponent', () => {
     documentService = TestBed.inject(DocumentService)
     fixture = TestBed.createComponent(StoragePathEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -67,11 +67,11 @@ export class StoragePathEditDialogComponent
   private testDocument: Document
   public testResult: string
   public testFailed: boolean = false
-  public loading = false
   public testLoading = false
 
   constructor() {
     super()
+    this.loading.set(false)
     this.service = inject(StoragePathService)
     this.userService = inject(UserService)
     this.settingsService = inject(SettingsService)
@@ -138,7 +138,7 @@ export class StoragePathEditDialogComponent
       this.documentsInput$.pipe(
         distinctUntilChanged(),
         takeUntil(this.unsubscribeNotifier),
-        tap(() => (this.loading = true)),
+        tap(() => this.loading.set(true)),
         switchMap((title) =>
           this.documentsService
             .listFiltered(
@@ -152,7 +152,7 @@ export class StoragePathEditDialogComponent
             .pipe(
               map((result) => result.results),
               catchError(() => of([])), // empty on error
-              tap(() => (this.loading = false))
+              tap(() => this.loading.set(false))
             )
         )
       )

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

@@ -48,20 +48,20 @@ describe('TagEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(TagEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })

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

@@ -31,7 +31,7 @@
             </div>
           </div>
 
-          <pngx-input-select i18n-title title="Groups" [items]="groups" multiple="true" formControlName="groups"></pngx-input-select>
+          <pngx-input-select i18n-title title="Groups" [items]="groups()" multiple="true" formControlName="groups"></pngx-input-select>
 
           @if (object?.is_mfa_enabled && currentUserIsSuperUser) {
             <label class="form-label" i18n>Two-factor Authentication</label>
@@ -42,7 +42,7 @@
               i18n-title
               buttonClasses="btn-outline-danger btn-sm"
               iconName="trash"
-              [disabled]="totpLoading"
+              [disabled]="totpLoading()"
               (confirm)="deactivateTotp()">
             </pngx-confirm-button>
           }

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

@@ -73,7 +73,7 @@ describe('UserEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(UserEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     permissionsService = TestBed.inject(PermissionsService)
     toastService = TestBed.inject(ToastService)
     component = fixture.componentInstance
@@ -82,13 +82,13 @@ describe('UserEditDialogComponent', () => {
   })
 
   it('should support create and edit modes', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(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
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
@@ -114,17 +114,17 @@ describe('UserEditDialogComponent', () => {
   it('should detect whether password was changed in form on save', () => {
     component.objectForm.get('password').setValue(null)
     component.save()
-    expect(component.passwordIsSet).toBeFalsy()
+    expect(component.passwordIsSet()).toBeFalsy()
 
     // unchanged pw
     component.objectForm.get('password').setValue('*******')
     component.save()
-    expect(component.passwordIsSet).toBeFalsy()
+    expect(component.passwordIsSet()).toBeFalsy()
 
     // unchanged pw
     component.objectForm.get('password').setValue('helloworld')
     component.save()
-    expect(component.passwordIsSet).toBeTruthy()
+    expect(component.passwordIsSet()).toBeTruthy()
   })
 
   it('should support deactivation of TOTP', () => {

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

@@ -1,11 +1,12 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule,
 } from '@angular/forms'
-import { first } from 'rxjs'
+import { first, map } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
@@ -38,22 +39,19 @@ export class UserEditDialogComponent
   implements OnInit
 {
   private toastService = inject(ToastService)
-  private groupsService: GroupService
+  private groupsService = inject(GroupService)
 
-  groups: Group[]
-  passwordIsSet: boolean = false
-  public totpLoading: boolean = false
+  readonly groups = toSignal(
+    this.groupsService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as Group[] }
+  )
+  readonly passwordIsSet = signal(false)
+  readonly totpLoading = signal(false)
 
   constructor() {
     super()
     this.service = inject(UserService)
-    this.groupsService = inject(GroupService)
     this.settingsService = inject(SettingsService)
-
-    this.groupsService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.groups = result.results))
   }
 
   ngOnInit(): void {
@@ -103,14 +101,15 @@ export class UserEditDialogComponent
     if (!groupsVal) return []
     else
       return groupsVal.flatMap(
-        (id) => this.groups.find((g) => g.id == id)?.permissions
+        (id) => this.groups()?.find((g) => g.id == id)?.permissions
       )
   }
 
   save(): void {
-    this.passwordIsSet =
+    this.passwordIsSet.set(
       this.objectForm.get('password').value?.toString().replaceAll('*', '')
         .length > 0
+    )
     super.save()
   }
 
@@ -119,13 +118,13 @@ export class UserEditDialogComponent
   }
 
   deactivateTotp() {
-    this.totpLoading = true
+    this.totpLoading.set(true)
     ;(this.service as UserService)
       .deactivateTotp(this.object)
       .pipe(first())
       .subscribe({
         next: (result) => {
-          this.totpLoading = false
+          this.totpLoading.set(false)
           if (result) {
             this.toastService.showInfo($localize`Totp deactivated`)
             this.object.is_mfa_enabled = false
@@ -134,7 +133,7 @@ export class UserEditDialogComponent
           }
         },
         error: (e) => {
-          this.totpLoading = false
+          this.totpLoading.set(false)
           this.toastService.showError($localize`Totp deactivation failed`, e)
         },
       })

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

@@ -140,7 +140,7 @@
         </div>
         @if (formGroup.get('schedule_date_field').value === 'custom_field') {
           <div class="col-4">
-            <pngx-input-select i18n-title title="Custom field" formControlName="schedule_date_custom_field" [items]="dateCustomFields" i18n-hint hint="Custom field to use for date." [error]="error?.schedule_date_custom_field"></pngx-input-select>
+            <pngx-input-select i18n-title title="Custom field" formControlName="schedule_date_custom_field" [items]="dateCustomFields()" i18n-hint hint="Custom field to use for date." [error]="error?.schedule_date_custom_field"></pngx-input-select>
           </div>
         }
       </div>
@@ -162,7 +162,7 @@
         @if (formGroup.get('type').value === WorkflowTriggerType.Consumption) {
           <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" horizontal="true" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
           <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" horizontal="true" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case-normalized." [error]="error?.filter_path"></pngx-input-text>
-          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" horizontal="true" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
+          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules()" horizontal="true" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
         }
         @if (formGroup.get('type').value === WorkflowTriggerType.DocumentAdded || formGroup.get('type').value === WorkflowTriggerType.DocumentUpdated || formGroup.get('type').value === WorkflowTriggerType.Scheduled) {
           <pngx-input-select i18n-title title="Content matching algorithm" horizontal="true" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
@@ -262,10 +262,10 @@
           <div class="col">
             <pngx-input-text i18n-title title="Assign title" formControlName="assign_title" i18n-hint hint="Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#workflows'>documentation</a>." [error]="error?.actions?.[i]?.assign_title"></pngx-input-text>
             <pngx-input-tags [allowCreate]="false" i18n-title title="Assign tags" formControlName="assign_tags"></pngx-input-tags>
-            <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
-            <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
-            <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
-            <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes()" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents()" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths()" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields()" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
             <pngx-input-custom-fields-values formControlName="assign_custom_fields_values" [selectedFields]="formGroup.get('assign_custom_fields').value" (removeSelectedField)="removeSelectedCustomField($event, formGroup)"></pngx-input-custom-fields-values>
           </div>
           <div class="col">
@@ -326,25 +326,25 @@
             <h6 class="form-label" i18n>Remove correspondents</h6>
             <pngx-input-switch i18n-title title="Remove all" [horizontal]="true" formControlName="remove_all_correspondents"></pngx-input-switch>
             <div class="mt-n3">
-              <pngx-input-select i18n-title title="" multiple="true" [items]="correspondents" formControlName="remove_correspondents"></pngx-input-select>
+              <pngx-input-select i18n-title title="" multiple="true" [items]="correspondents()" formControlName="remove_correspondents"></pngx-input-select>
             </div>
 
             <h6 class="form-label" i18n>Remove document types</h6>
             <pngx-input-switch i18n-title title="Remove all" [horizontal]="true" formControlName="remove_all_document_types"></pngx-input-switch>
             <div class="mt-n3">
-              <pngx-input-select i18n-title title="" multiple="true" [items]="documentTypes" formControlName="remove_document_types"></pngx-input-select>
+              <pngx-input-select i18n-title title="" multiple="true" [items]="documentTypes()" formControlName="remove_document_types"></pngx-input-select>
             </div>
 
             <h6 class="form-label" i18n>Remove storage paths</h6>
             <pngx-input-switch i18n-title title="Remove all" [horizontal]="true" formControlName="remove_all_storage_paths"></pngx-input-switch>
             <div class="mt-n3">
-              <pngx-input-select i18n-title title="" multiple="true" [items]="storagePaths" formControlName="remove_storage_paths"></pngx-input-select>
+              <pngx-input-select i18n-title title="" multiple="true" [items]="storagePaths()" formControlName="remove_storage_paths"></pngx-input-select>
             </div>
 
             <h6 class="form-label" i18n>Remove custom fields</h6>
             <pngx-input-switch i18n-title title="Remove all" [horizontal]="true" formControlName="remove_all_custom_fields"></pngx-input-switch>
             <div class="mt-n3">
-              <pngx-input-select i18n-title title="" multiple="true" [items]="customFields" formControlName="remove_custom_fields"></pngx-input-select>
+              <pngx-input-select i18n-title title="" multiple="true" [items]="customFields()" formControlName="remove_custom_fields"></pngx-input-select>
             </div>
           </div>
           <div class="col">

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

@@ -187,14 +187,14 @@ describe('WorkflowEditDialogComponent', () => {
 
     fixture = TestBed.createComponent(WorkflowEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 99, username: 'user99' }
+    settingsService.currentUser.set({ id: 99, username: 'user99' })
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should support create and edit modes, support adding triggers and actions on new workflow', () => {
-    component.dialogMode = EditDialogMode.CREATE
+    component.dialogMode.set(EditDialogMode.CREATE)
     const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
     const editTitleSpy = jest.spyOn(component, 'getEditTitle')
     fixture.detectChanges()
@@ -209,7 +209,7 @@ describe('WorkflowEditDialogComponent', () => {
     expect(component.object).not.toBeUndefined()
     expect(component.object.triggers).toHaveLength(1)
 
-    component.dialogMode = EditDialogMode.EDIT
+    component.dialogMode.set(EditDialogMode.EDIT)
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
@@ -771,25 +771,21 @@ describe('WorkflowEditDialogComponent', () => {
       false
     )
 
-    component.correspondents = [{ id: 1, name: 'C1' } as any]
-    component.documentTypes = [{ id: 2, name: 'DT' } as any]
-    component.storagePaths = [{ id: 3, name: 'SP' } as any]
-
     expect(
       component.getFilterSelectItems(TriggerFilterType.CorrespondentIs)
-    ).toEqual(component.correspondents)
+    ).toEqual(component.correspondents())
     expect(
       component.getFilterSelectItems(TriggerFilterType.DocumentTypeIs)
-    ).toEqual(component.documentTypes)
+    ).toEqual(component.documentTypes())
     expect(
       component.getFilterSelectItems(TriggerFilterType.DocumentTypeAny)
-    ).toEqual(component.documentTypes)
+    ).toEqual(component.documentTypes())
     expect(
       component.getFilterSelectItems(TriggerFilterType.StoragePathIs)
-    ).toEqual(component.storagePaths)
+    ).toEqual(component.storagePaths())
     expect(
       component.getFilterSelectItems(TriggerFilterType.StoragePathAny)
-    ).toEqual(component.storagePaths)
+    ).toEqual(component.storagePaths())
     expect(component.getFilterSelectItems(TriggerFilterType.TagsAll)).toEqual(
       []
     )

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

@@ -4,7 +4,8 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, computed, inject, signal } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   AbstractControl,
   FormArray,
@@ -15,7 +16,7 @@ import {
 } from '@angular/forms'
 import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { Subscription, first, takeUntil } from 'rxjs'
+import { Subscription, map, takeUntil } from 'rxjs'
 import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { DocumentType } from 'src/app/data/document-type'
@@ -470,23 +471,40 @@ export class WorkflowEditDialogComponent
   public TriggerFilterType = TriggerFilterType
   public filterDefinitions = TRIGGER_FILTER_DEFINITIONS
 
-  private correspondentService: CorrespondentService
-  private documentTypeService: DocumentTypeService
-  private storagePathService: StoragePathService
-  private mailRuleService: MailRuleService
-  private customFieldsService: CustomFieldsService
+  private correspondentService = inject(CorrespondentService)
+  private documentTypeService = inject(DocumentTypeService)
+  private storagePathService = inject(StoragePathService)
+  private mailRuleService = inject(MailRuleService)
+  private customFieldsService = inject(CustomFieldsService)
 
-  templates: Workflow[]
-  correspondents: Correspondent[]
-  documentTypes: DocumentType[]
-  storagePaths: StoragePath[]
-  mailRules: MailRule[]
-  customFields: CustomField[]
-  dateCustomFields: CustomField[]
+  readonly templates = signal<Workflow[]>(undefined)
+  readonly correspondents = toSignal(
+    this.correspondentService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as Correspondent[] }
+  )
+  readonly documentTypes = toSignal(
+    this.documentTypeService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as DocumentType[] }
+  )
+  readonly storagePaths = toSignal(
+    this.storagePathService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as StoragePath[] }
+  )
+  readonly mailRules = toSignal(
+    this.mailRuleService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as MailRule[] }
+  )
+  readonly customFields = toSignal(
+    this.customFieldsService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as CustomField[] }
+  )
+  readonly dateCustomFields = computed(() =>
+    this.customFields()?.filter((f) => f.data_type === CustomFieldDataType.Date)
+  )
 
   expandedItem: number = null
 
-  private allowedActionTypes = []
+  readonly allowedActionTypes = signal([])
 
   private readonly triggerFilterOptionsMap = new WeakMap<
     FormArray,
@@ -496,43 +514,8 @@ export class WorkflowEditDialogComponent
   constructor() {
     super()
     this.service = inject(WorkflowService)
-    this.correspondentService = inject(CorrespondentService)
-    this.documentTypeService = inject(DocumentTypeService)
-    this.storagePathService = inject(StoragePathService)
-    this.mailRuleService = inject(MailRuleService)
     this.userService = inject(UserService)
     this.settingsService = inject(SettingsService)
-    this.customFieldsService = inject(CustomFieldsService)
-
-    this.correspondentService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.correspondents = result.results))
-
-    this.documentTypeService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.documentTypes = result.results))
-
-    this.storagePathService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.storagePaths = result.results))
-
-    this.mailRuleService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.mailRules = result.results))
-
-    this.customFieldsService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => {
-        this.customFields = result.results
-        this.dateCustomFields = this.customFields?.filter(
-          (f) => f.data_type === CustomFieldDataType.Date
-        )
-      })
   }
 
   getCreateTitle() {
@@ -565,11 +548,13 @@ export class WorkflowEditDialogComponent
       this.checkRemovalActionFields.bind(this)
     )
     this.checkRemovalActionFields(this.objectForm.value)
-    this.allowedActionTypes = this.settingsService.get(
-      SETTINGS_KEYS.EMAIL_ENABLED
+    this.allowedActionTypes.set(
+      this.settingsService.get(SETTINGS_KEYS.EMAIL_ENABLED)
+        ? WORKFLOW_ACTION_OPTIONS
+        : WORKFLOW_ACTION_OPTIONS.filter(
+            (a) => a.id !== WorkflowActionType.Email
+          )
     )
-      ? WORKFLOW_ACTION_OPTIONS
-      : WORKFLOW_ACTION_OPTIONS.filter((a) => a.id !== WorkflowActionType.Email)
   }
 
   private checkRemovalActionFields(formWorkflow: Workflow) {
@@ -954,11 +939,11 @@ export class WorkflowEditDialogComponent
 
     switch (definition.selectItems) {
       case 'correspondents':
-        return this.correspondents
+        return this.correspondents()
       case 'documentTypes':
-        return this.documentTypes
+        return this.documentTypes()
       case 'storagePaths':
-        return this.storagePaths
+        return this.storagePaths()
       default:
         return []
     }
@@ -1294,7 +1279,8 @@ export class WorkflowEditDialogComponent
   }
 
   get actionTypeOptions() {
-    return this.allowedActionTypes
+    this.settingsService.trackChanges()
+    return this.allowedActionTypes()
   }
 
   getActionTypeOptionName(type: WorkflowActionType): string {

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

@@ -1,8 +1,8 @@
 <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title" i18n>{
-      documentIds.length,
+      documentIds().length,
       plural,
-      =1 {Email Document} other {Email {{documentIds.length}} Documents}
+      =1 {Email Document} other {Email {{documentIds().length}} Documents}
     }</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
@@ -23,11 +23,11 @@
 <div class="modal-footer">
     <div class="input-group">
         <div class="input-group-text flex-grow-1">
-            <input class="form-check-input mt-0 me-2" type="checkbox" role="switch" id="useArchiveVersion" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
+            <input class="form-check-input mt-0 me-2" type="checkbox" role="switch" id="useArchiveVersion" [disabled]="!hasArchiveVersion()" [ngModel]="useArchiveVersion()" (ngModelChange)="useArchiveVersion.set($event)">
             <label class="form-check-label w-100 text-start" for="useArchiveVersion" i18n>Use archive version</label>
         </div>
-        <button type="submit" class="btn btn-outline-primary" (click)="emailDocuments()" [disabled]="loading || emailAddress.length === 0 || emailMessage.length === 0 || emailSubject.length === 0">
-            @if (loading) {
+        <button type="submit" class="btn btn-outline-primary" (click)="emailDocuments()" [disabled]="loading() || emailAddress.length === 0 || emailMessage.length === 0 || emailSubject.length === 0">
+            @if (loading()) {
                 <div class="spinner-border spinner-border-sm me-2" role="status"></div>
             }
             <ng-container i18n>Send email</ng-container>

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

@@ -36,23 +36,24 @@ describe('EmailDocumentDialogComponent', () => {
     documentService = TestBed.inject(DocumentService)
     toastService = TestBed.inject(ToastService)
     component = fixture.componentInstance
-    component.documentIds = [1]
+    component.documentIds.set([1])
     fixture.detectChanges()
   })
 
   it('should set hasArchiveVersion and useArchiveVersion', () => {
-    expect(component.hasArchiveVersion).toBeTruthy()
-    expect(component.useArchiveVersion).toBeTruthy()
+    expect(component.hasArchiveVersion()).toBeTruthy()
+    expect(component.useArchiveVersion()).toBeTruthy()
 
-    component.hasArchiveVersion = false
-    expect(component.hasArchiveVersion).toBeFalsy()
-    expect(component.useArchiveVersion).toBeFalsy()
+    component.hasArchiveVersion.set(false)
+    fixture.detectChanges()
+    expect(component.hasArchiveVersion()).toBeFalsy()
+    expect(component.useArchiveVersion()).toBeFalsy()
   })
 
   it('should support sending single document via email, showing error if needed', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
-    component.documentIds = [1]
+    component.documentIds.set([1])
     component.emailAddress = 'hello@paperless-ngx.com'
     component.emailSubject = 'Hello'
     component.emailMessage = 'World'
@@ -73,7 +74,7 @@ describe('EmailDocumentDialogComponent', () => {
   it('should support sending multiple documents via email, showing appropriate messages', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
-    component.documentIds = [1, 2, 3]
+    component.documentIds.set([1, 2, 3])
     component.emailAddress = 'hello@paperless-ngx.com'
     component.emailSubject = 'Hello'
     component.emailMessage = 'World'

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

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, effect, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -17,22 +17,9 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
   private documentService = inject(DocumentService)
   private toastService = inject(ToastService)
 
-  @Input()
-  documentIds: number[]
-
-  private _hasArchiveVersion: boolean = true
-
-  @Input()
-  set hasArchiveVersion(value: boolean) {
-    this._hasArchiveVersion = value
-    this.useArchiveVersion = value
-  }
-
-  get hasArchiveVersion(): boolean {
-    return this._hasArchiveVersion
-  }
-
-  public useArchiveVersion: boolean = true
+  readonly documentIds = signal<number[]>(undefined)
+  readonly hasArchiveVersion = signal(true)
+  readonly useArchiveVersion = signal(true)
 
   public emailAddress: string = ''
   public emailSubject: string = ''
@@ -40,22 +27,25 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
 
   constructor() {
     super()
-    this.loading = false
+    this.loading.set(false)
+    effect(() => {
+      this.useArchiveVersion.set(this.hasArchiveVersion())
+    })
   }
 
   public emailDocuments() {
-    this.loading = true
+    this.loading.set(true)
     this.documentService
       .emailDocuments(
-        this.documentIds,
+        this.documentIds(),
         this.emailAddress,
         this.emailSubject,
         this.emailMessage,
-        this.useArchiveVersion
+        this.useArchiveVersion()
       )
       .subscribe({
         next: () => {
-          this.loading = false
+          this.loading.set(false)
           this.emailAddress = ''
           this.emailSubject = ''
           this.emailMessage = ''
@@ -63,9 +53,9 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
           this.toastService.showInfo($localize`Email sent`)
         },
         error: (e) => {
-          this.loading = false
+          this.loading.set(false)
           const errorMessage =
-            this.documentIds.length > 1
+            this.documentIds().length > 1
               ? $localize`Error emailing documents`
               : $localize`Error emailing document`
           this.toastService.showError(errorMessage, e)

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

@@ -1,12 +1,7 @@
 import { ScrollingModule } from '@angular/cdk/scrolling'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { NEGATIVE_NULL_FILTER_VALUE } from 'src/app/data/filter-rule-type'
 import {
@@ -52,6 +47,7 @@ const negativeNullItem = {
 }
 
 let selectionModel: FilterableDropdownSelectionModel
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () => {
   let component: FilterableDropdownComponent
@@ -255,14 +251,17 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     expect(applyResult).toEqual({ itemsToAdd: [items[0]], itemsToRemove: [] })
   })
 
-  it('should focus text filter on open, support filtering, clear on close', fakeAsync(() => {
+  it('should focus text filter on open, support filtering, clear on close', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     expect(document.activeElement).toEqual(
       component.listFilterTextInput.nativeElement
     )
@@ -270,12 +269,16 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
 
     component.filterText = 'Tag2'
     fixture.detectChanges()
-    expect(component.buttonsViewport.getRenderedRange().end).toEqual(1) // filtered
+    component.buttonsViewport.checkViewportSize()
+    fixture.detectChanges()
+    expect(component.scrollViewportHeight).toEqual(
+      component.FILTERABLE_BUTTON_HEIGHT_PX
+    ) // filtered
     component.dropdown.close()
     expect(component.filterText).toHaveLength(0)
-  }))
+  })
 
-  it('should toggle & close on enter inside filter field if 1 item remains', fakeAsync(() => {
+  it('should toggle & close on enter inside filter field if 1 item remains', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     expect(component.selectionModel.getSelectedItems()).toEqual([])
@@ -283,7 +286,10 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.filterText = 'Tag2'
     fixture.detectChanges()
     const closeSpy = jest.spyOn(component.dropdown, 'close')
@@ -291,11 +297,11 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       new KeyboardEvent('keyup', { key: 'Enter' })
     )
     expect(component.selectionModel.getSelectedItems()).toEqual([items[1]])
-    tick(300)
+    await wait(300)
     expect(closeSpy).toHaveBeenCalled()
-  }))
+  })
 
-  it('should apply & close on enter inside filter field if 1 item remains if editing', fakeAsync(() => {
+  it('should apply & close on enter inside filter field if 1 item remains if editing', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     component.editing = true
@@ -306,25 +312,31 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.filterText = 'Tag2'
     fixture.detectChanges()
     component.listFilterTextInput.nativeElement.dispatchEvent(
       new KeyboardEvent('keyup', { key: 'Enter' })
     )
     expect(component.selectionModel.getSelectedItems()).toEqual([items[1]])
-    tick(300)
+    await wait(300)
     expect(applyResult).toEqual({ itemsToAdd: [items[1]], itemsToRemove: [] })
-  }))
+  })
 
-  it('should support arrow keyboard navigation', fakeAsync(() => {
+  it('should support arrow keyboard navigation', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.buttonsViewport?.checkViewportSize()
     fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
@@ -362,16 +374,19 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
     )
     expect(document.activeElement).toEqual(itemButtons[0])
-  }))
+  })
 
-  it('should support arrow keyboard navigation after tab keyboard navigation', fakeAsync(() => {
+  it('should support arrow keyboard navigation after tab keyboard navigation', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.buttonsViewport?.checkViewportSize()
     fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
@@ -400,16 +415,19 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
     )
     expect(document.activeElement).toEqual(itemButtons[1])
-  }))
+  })
 
-  it('should support arrow keyboard navigation after click', fakeAsync(() => {
+  it('should support arrow keyboard navigation after click', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.buttonsViewport?.checkViewportSize()
     fixture.detectChanges()
     const filterInputEl: HTMLInputElement =
@@ -427,9 +445,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })
     )
     expect(document.activeElement).toEqual(itemButtons[1])
-  }))
+  })
 
-  it('should toggle logical operator', fakeAsync(() => {
+  it('should toggle logical operator', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     component.selectionModel.manyToOne = true
@@ -445,7 +463,10 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
 
     expect(component.modifierToggleEnabled).toBeTruthy()
     const operatorButtons: HTMLInputElement[] = Array.from(
@@ -456,9 +477,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     fixture.detectChanges()
     expect(selectionModel.logicalOperator).toEqual(LogicalOperator.Or)
     expect(changedResult.logicalOperator).toEqual(LogicalOperator.Or)
-  }))
+  })
 
-  it('should toggle intersection include / exclude', fakeAsync(() => {
+  it('should toggle intersection include / exclude', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     selectionModel.set(items[0].id, ToggleableItemState.Selected)
@@ -473,7 +494,10 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
 
     expect(component.modifierToggleEnabled).toBeTruthy()
     const intersectionButtons: HTMLInputElement[] = Array.from(
@@ -486,7 +510,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     expect(changedResult.intersection).toEqual(Intersection.Exclude)
     expect(changedResult.getSelectedItems()).toEqual([])
     expect(changedResult.getExcludedItems()).toEqual(items)
-  }))
+  })
 
   it('should update null item selection on toggleIntersection', () => {
     component.selectionModel.items = items
@@ -819,7 +843,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     expect(getRootDocCount(rootWithoutCounts.id)).toEqual(0)
   })
 
-  it('should set support create, keep open model and call createRef method', fakeAsync(() => {
+  it('should set support create, keep open model and call createRef method', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     component.selectionModel = selectionModel
@@ -827,7 +851,10 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
     fixture.detectChanges()
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
 
     component.filterText = 'Test Filter Text'
     component.createRef = jest.fn()
@@ -837,9 +864,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     const openSpy = jest.spyOn(component.dropdown, 'open')
     component.dropdownOpenChange(false)
     expect(openSpy).toHaveBeenCalled() // should keep open
-  }))
+  })
 
-  it('should call create on enter inside filter field if 0 items remain while editing', fakeAsync(() => {
+  it('should call create on enter inside filter field if 0 items remain while editing', async () => {
     component.selectionModel.items = items
     component.icon = 'tag-fill'
     component.editing = true
@@ -849,12 +876,15 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
-    tick(100)
+    await wait(100)
+    fixture.detectChanges()
+    component.buttonsViewport?.checkViewportSize()
+    fixture.detectChanges()
     component.filterText = 'FooBar'
     component.listFilterEnter()
     expect(component.selectionModel.getSelectedItems()).toEqual([])
     expect(createSpy).toHaveBeenCalled()
-  }))
+  })
 
   it('should exclude item and trigger change event', () => {
     const id = 1

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

@@ -1,11 +1,11 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
     <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
 </div>
 <div class="modal-body">
     <table class="table">
         <tbody>
-            @for (key of hotkeys.entries(); track key[0]) {
+            @for (key of hotkeys().entries(); track key[0]) {
                 <tr>
                   <td>{{ key[1] }}</td>
                   <td class="d-flex justify-content-end">

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

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 
 const SYMBOLS = {
@@ -20,9 +20,8 @@ const SYMBOLS = {
 })
 export class HotkeyDialogComponent {
   activeModal = inject(NgbActiveModal)
-
-  public title: string = $localize`Keyboard shortcuts`
-  public hotkeys: Map<string, string> = new Map()
+  readonly title = signal($localize`Keyboard shortcuts`)
+  readonly hotkeys = signal<Map<string, string>>(new Map())
 
   public close(): void {
     this.activeModal.close()

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.html

@@ -3,7 +3,7 @@
       <ng-select name="inputId" [(ngModel)]="value"
         [disabled]="disabled"
         clearable="true"
-        [items]="groups"
+        [items]="groups()"
         multiple="true"
         bindLabel="name"
         bindValue="id"

src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts

@@ -1,11 +1,12 @@
 import { Component, forwardRef, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { first } from 'rxjs/operators'
+import { map } from 'rxjs/operators'
 import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { AbstractInputComponent } from '../../abstract-input'
@@ -24,15 +25,9 @@ import { AbstractInputComponent } from '../../abstract-input'
   imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
-  groups: Group[]
-
-  constructor() {
-    const groupService = inject(GroupService)
-
-    super()
-    groupService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.groups = result.results))
-  }
+  private readonly groupService = inject(GroupService)
+  readonly groups = toSignal(
+    this.groupService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as Group[] }
+  )
 }

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.html

@@ -3,7 +3,7 @@
     <ng-select name="inputId" [(ngModel)]="value"
       [disabled]="disabled"
       clearable="true"
-      [items]="users"
+      [items]="users()"
       multiple="true"
       bindLabel="username"
       bindValue="id"

src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts

@@ -1,11 +1,12 @@
 import { Component, forwardRef, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgSelectComponent } from '@ng-select/ng-select'
-import { first } from 'rxjs/operators'
+import { map } from 'rxjs/operators'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
 import { AbstractInputComponent } from '../../abstract-input'
@@ -24,15 +25,9 @@ import { AbstractInputComponent } from '../../abstract-input'
   imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
-  users: User[]
-
-  constructor() {
-    const userService = inject(UserService)
-
-    super()
-    userService
-      .listAll()
-      .pipe(first())
-      .subscribe((result) => (this.users = result.results))
-  }
+  private readonly userService = inject(UserService)
+  readonly users = toSignal(
+    this.userService.listAll().pipe(map((result) => result.results)),
+    { initialValue: undefined as User[] }
+  )
 }

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

@@ -1,9 +1,4 @@
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -121,12 +116,14 @@ describe('SelectComponent', () => {
     ).toBeFalsy()
   })
 
-  it('should clear search term on blur after delay', fakeAsync(() => {
+  it('should clear search term on blur after delay', () => {
+    jest.useFakeTimers()
     const clearSpy = jest.spyOn(component, 'clearLastSearchTerm')
     component.onBlur()
-    tick(3000)
+    jest.advanceTimersByTime(3000)
     expect(clearSpy).toHaveBeenCalled()
-  }))
+    jest.useRealTimers()
+  })
 
   it('should emit filtered documents', () => {
     component.value = 10

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

@@ -106,7 +106,7 @@ describe('TagsComponent', () => {
 
     modalService = TestBed.inject(NgbModal)
     settingsService = TestBed.inject(SettingsService)
-    settingsService.currentUser = { id: 1 }
+    settingsService.currentUser.set({ id: 1 } as any)
     fixture = TestBed.createComponent(TagsComponent)
     fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
     component = fixture.componentInstance
@@ -136,20 +136,13 @@ describe('TagsComponent', () => {
   })
 
   it('should support create new using last search term and open a modal', () => {
-    settingsService.currentUser = { id: 1 }
+    settingsService.currentUser.set({ id: 1 })
     let activeInstances: NgbModalRef[]
     modalService.activeInstances.subscribe((v) => (activeInstances = v))
     component.select.filter('foobar')
     component.createTag()
     expect(modalService.hasOpenModals()).toBeTruthy()
     expect(activeInstances[0].componentInstance.object.name).toEqual('foobar')
-    const editDialog = activeInstances[0]
-      .componentInstance as TagEditDialogComponent
-    editDialog.save() // create is mocked
-    fixture.detectChanges()
-    fixture.whenStable().then(() => {
-      expect(fixture.debugElement.nativeElement.textContent).toContain('foobar')
-    })
   })
 
   it('support remove tags', () => {

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

@@ -176,7 +176,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
     var modal = this.modalService.open(TagEditDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.dialogMode = EditDialogMode.CREATE
+    modal.componentInstance.dialogMode.set(EditDialogMode.CREATE)
     if (name) modal.componentInstance.object = { name: name }
     else if (this.select.searchTerm)
       modal.componentInstance.object = { name: this.select.searchTerm }

src-ui/src/app/components/common/logo/logo.component.html

@@ -1,7 +1,7 @@
 @if (customLogo) {
-    <img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height" />
+    <img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height()" />
 } @else {
-    <svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height">
+    <svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height()">
       <path class="leaf" style="fill:#005616;" d="M2227.4,821.2c-6.1-17.8-18.1-53.6-19.2-53.4-174.7-77.8-159.8-201.2-117.5-304.2,26.3,120.1,235.3,130.3,128,294.1-.7,2,8.8,24.3,17.1,44.9,19.9-45.4,51.3-101.1,48.8-105.7-199.9-357.4,278.8-444.7,350.7-690.2,72.6,220.1,46.5,577.5-330.4,713.3-1.8,1.2-55.6,130-58.5,131.4-.2-1.9-29.1,2.5-26.4-7.6,1.4-6.2,4.2-14.2,7.2-22.4h0v-.2h.2,0ZM2211.7,731.2c42.3-62.9-11.1-105.7-49.8-133.2,71,94,58.1,105.7,49.8,133.2h0Z"/>
       <g class="text" style="fill: #000;">
         <path class="st1" d="M654.6,393.2l-.7,137.7h-85.5V188.7h85.4c.4,11.3-.3,21.7,1.3,33.8,23.1-34.1,62.3-50,101.1-38.3,16.5,5,29.6,16.4,39.7,30,34.4,46.5,35.1,134,3.6,182.2-10.1,14.4-22.5,26.9-39,33.4-39.5,15.7-81,1.1-105.9-36.6h0ZM721,362.2c21-26.1,21-82.7-.4-108.4-13.2-15.9-36.4-16.1-49.9-.4-22.2,25.8-21.7,85.3.5,110.1,13.6,15.2,36.6,15,49.7-1.3h.1Z"/>

src-ui/src/app/components/common/logo/logo.component.spec.ts

@@ -28,7 +28,7 @@ describe('LogoComponent', () => {
 
   it('should support extra classes', () => {
     expect(fixture.debugElement.queryAll(By.css('.foo'))).toHaveLength(0)
-    component.extra_classes = 'foo'
+    fixture.componentRef.setInput('extra_classes', 'foo')
     fixture.detectChanges()
     expect(fixture.debugElement.queryAll(By.css('.foo'))).toHaveLength(1)
   })
@@ -37,7 +37,7 @@ describe('LogoComponent', () => {
     expect(fixture.debugElement.query(By.css('svg')).attributes.style).toEqual(
       'height:6em'
     )
-    component.height = '10em'
+    fixture.componentRef.setInput('height', '10em')
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('svg')).attributes.style).toEqual(
       'height:10em'

src-ui/src/app/components/common/logo/logo.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, inject, input } from '@angular/core'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
@@ -10,12 +10,8 @@ import { environment } from 'src/environments/environment'
 })
 export class LogoComponent {
   private settingsService = inject(SettingsService)
-
-  @Input()
-  extra_classes: string
-
-  @Input()
-  height = '6em'
+  readonly extra_classes = input<string>(undefined)
+  readonly height = input('6em')
 
   get customLogo(): string {
     return this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length
@@ -27,6 +23,6 @@ export class LogoComponent {
   }
 
   getClasses() {
-    return ['logo'].concat(this.extra_classes).join(' ')
+    return ['logo'].concat(this.extra_classes()).join(' ')
   }
 }

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

@@ -1,32 +1,32 @@
 <div class="row pt-3 pb-3 pb-md-2 align-items-center">
   <div class="col-md text-truncate">
     <h3 class="d-flex align-items-center mb-1" style="line-height: 1.4">
-      <span class="text-truncate">{{title}}</span>
-      @if (id) {
+      <span class="text-truncate">{{title()}}</span>
+      @if (id()) {
         <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
-          @if (copied) {
+          @if (copied()) {
             <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
           } @else {
-            ID: {{id}}
+            ID: {{id()}}
           }
         </span>
       }
-      @if (subTitle) {
-        <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
+      @if (subTitle()) {
+        <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle()}}</span>
       }
-      @if (info) {
+      @if (info()) {
         <button class="btn btn-sm btn-link text-muted p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
           <i-bs name="question-circle"></i-bs>
         </button>
         <ng-template #infoPopover>
-          <p [class.mb-0]="!infoLink" [innerHTML]="info"></p>
-          @if (infoLink) {
-            <a href="https://docs.paperless-ngx.com/{{infoLink}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
+          <p [class.mb-0]="!infoLink()" [innerHTML]="info()"></p>
+          @if (infoLink()) {
+            <a href="https://docs.paperless-ngx.com/{{infoLink()}}" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
             <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
           }
         </ng-template>
       }
-      @if (loading) {
+      @if (loading()) {
         <output class="spinner-border spinner-border-sm fs-6 fw-normal" aria-hidden="true"><span class="visually-hidden" i18n>Loading...</span></output>
       }
     </h3>

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

@@ -1,6 +1,7 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { Title } from '@angular/platform-browser'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { environment } from 'src/environments/environment'
 import { PageHeaderComponent } from './page-header.component'
 
@@ -13,7 +14,7 @@ describe('PageHeaderComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       providers: [],
-      imports: [PageHeaderComponent],
+      imports: [NgxBootstrapIconsModule.pick(allIcons), PageHeaderComponent],
     }).compileComponents()
 
     titleService = TestBed.inject(Title)
@@ -23,9 +24,13 @@ describe('PageHeaderComponent', () => {
     fixture.detectChanges()
   })
 
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
   it('should display title + subtitle', () => {
-    component.title = 'Foo'
-    component.subTitle = 'Bar'
+    fixture.componentRef.setInput('title', 'Foo')
+    fixture.componentRef.setInput('subTitle', 'Bar')
     fixture.detectChanges()
     expect(fixture.nativeElement.textContent).toContain('Foo')
     expect(fixture.nativeElement.textContent).toContain('Bar')
@@ -33,19 +38,20 @@ describe('PageHeaderComponent', () => {
 
   it('should set html title', () => {
     const titleSpy = jest.spyOn(titleService, 'setTitle')
-    component.title = 'Foo Bar'
+    fixture.componentRef.setInput('title', 'Foo Bar')
+    fixture.detectChanges()
     expect(titleSpy).toHaveBeenCalledWith(`Foo Bar - ${environment.appTitle}`)
   })
 
   it('should copy id to clipboard, reset after 3 seconds', () => {
     jest.useFakeTimers()
-    component.id = 42 as any
+    fixture.componentRef.setInput('id', 42)
     jest.spyOn(clipboard, 'copy').mockReturnValue(true)
     component.copyID()
     expect(clipboard.copy).toHaveBeenCalledWith('42')
-    expect(component.copied).toBe(true)
+    expect(component.copied()).toBe(true)
 
     jest.advanceTimersByTime(3000)
-    expect(component.copied).toBe(false)
+    expect(component.copied()).toBe(false)
   })
 })

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, inject } from '@angular/core'
+import { Component, effect, inject, input, signal } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,40 +16,26 @@ export class PageHeaderComponent {
   private titleService = inject(Title)
   private clipboard = inject(Clipboard)
 
-  private _title = ''
-  public copied: boolean = false
+  readonly id = input<number>(undefined)
+  readonly subTitle = input('')
+  readonly info = input<string>(undefined)
+  readonly infoLink = input<string>(undefined)
+  readonly loading = input(false)
+  readonly title = input('')
+  readonly copied = signal(false)
   private copyTimeout: any
 
-  @Input()
-  set title(title: string) {
-    this._title = title
-    this.titleService.setTitle(`${this.title} - ${environment.appTitle}`)
+  constructor() {
+    effect(() => {
+      this.titleService.setTitle(`${this.title()} - ${environment.appTitle}`)
+    })
   }
 
-  get title() {
-    return this._title
-  }
-
-  @Input()
-  id: number
-
-  @Input()
-  subTitle: string = ''
-
-  @Input()
-  info: string
-
-  @Input()
-  infoLink: string
-
-  @Input()
-  loading: boolean = false
-
   public copyID() {
-    this.copied = this.clipboard.copy(this.id.toString())
+    this.copied.set(this.clipboard.copy(this.id().toString()))
     clearTimeout(this.copyTimeout)
     this.copyTimeout = setTimeout(() => {
-      this.copied = false
+      this.copied.set(false)
     }, 3000)
   }
 }

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

@@ -146,8 +146,8 @@ describe('PDFEditorComponent', () => {
     const previewSpy = jest
       .spyOn(documentService, 'getPreviewUrl')
       .mockReturnValue('preview-version')
-    component.documentID = 3
-    component.versionID = 10
+    component.documentID.set(3)
+    component.versionID.set(10)
 
     expect(component.pdfSrc).toBe('preview-version')
     expect(previewSpy).toHaveBeenCalledWith(3, false, 10)

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

@@ -3,7 +3,7 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -45,8 +45,9 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
   private readonly settingsService = inject(SettingsService)
   activeModal: NgbActiveModal = inject(NgbActiveModal)
 
-  documentID: number
-  versionID?: number
+  readonly documentID = signal<number>(undefined)
+  readonly versionID = signal<number>(undefined)
+
   pages: PageOperation[] = []
   totalPages = 0
   editMode: PdfEditorEditMode = this.settingsService.get(
@@ -57,9 +58,9 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
 
   get pdfSrc(): string {
     return this.documentService.getPreviewUrl(
-      this.documentID,
+      this.documentID(),
       false,
-      this.versionID
+      this.versionID()
     )
   }
 

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

@@ -1,5 +1,5 @@
 <div class="modal-header">
-  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="cancelClicked()">
   </button>
 </div>
@@ -7,7 +7,7 @@
 
   <form [formGroup]="form">
     <div class="form-group">
-      <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
+      <pngx-permissions-form [users]="users()" formControlName="permissions_form"></pngx-permissions-form>
     </div>
     <div class="form-group mt-4">
       <div class="offset-lg-3 row">
@@ -16,18 +16,18 @@
     </div>
   </form>
 
-  @if (note) {
+  @if (note()) {
     <div class="small text-muted fst-italic mt-2">
-      {{ note }}
+      {{ note() }}
     </div>
   }
 
 </div>
 <div class="modal-footer">
-  @if (!buttonsEnabled) {
+  @if (!buttonsEnabled()) {
     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
     <span class="visually-hidden" i18n>Loading...</span>
   }
-  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
-  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled" i18n>Confirm</button>
+  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled()" i18n>Confirm</button>
 </div>

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

@@ -109,7 +109,7 @@ describe('PermissionsDialogComponent', () => {
       permissions: set_permissions.set_permissions,
     }
     component.object = obj
-    expect(component.title).toEqual(`Edit permissions for ${obj.name}`)
+    expect(component.title()).toEqual(`Edit permissions for ${obj.name}`)
     expect(component.permissions).toEqual(set_permissions)
   })
 

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

@@ -1,4 +1,12 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   FormControl,
   FormGroup,
@@ -6,6 +14,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { map } from 'rxjs'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
 import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -27,26 +36,22 @@ export class PermissionsDialogComponent {
   activeModal = inject(NgbActiveModal)
   private userService = inject(UserService)
 
-  users: User[]
+  readonly users = toSignal(
+    this.userService.listAll().pipe(map((r) => r.results)),
+    { initialValue: undefined as User[] }
+  )
+  readonly title = signal($localize`Set permissions`)
+  readonly note = signal<string>(null)
+  readonly buttonsEnabled = signal(true)
   private o: ObjectWithPermissions = undefined
 
-  constructor() {
-    this.userService.listAll().subscribe((r) => (this.users = r.results))
-  }
-
   @Output()
   public confirmClicked = new EventEmitter()
 
-  @Input()
-  title = $localize`Set permissions`
-
-  @Input()
-  note: string = null
-
   @Input()
   set object(o: ObjectWithPermissions) {
     this.o = o
-    this.title = $localize`Edit permissions for ` + o['name']
+    this.title.set($localize`Edit permissions for ` + o['name'])
     this.form.patchValue({
       merge: true,
       permissions_form: {
@@ -65,8 +70,6 @@ export class PermissionsDialogComponent {
     merge: new FormControl(true),
   })
 
-  buttonsEnabled: boolean = true
-
   get permissions() {
     return {
       owner: this.form.get('permissions_form').value?.owner ?? null,

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

@@ -64,9 +64,9 @@ describe('PermissionsFilterDropdownComponent', () => {
         {
           provide: SettingsService,
           useValue: {
-            currentUser: {
+            currentUser: () => ({
               id: currentUserID,
-            },
+            }),
           },
         },
         provideHttpClient(withInterceptorsFromDi()),

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts

@@ -117,12 +117,12 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     if (this.selectionModel.ownerFilter === OwnerFilterType.SELF) {
       this.selectionModel.includeUsers = []
       this.selectionModel.excludeUsers = []
-      this.selectionModel.userID = this.settingsService.currentUser.id
+      this.selectionModel.userID = this.settingsService.currentUser().id
       this.selectionModel.hideUnowned = false
     } else if (this.selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
       this.selectionModel.userID = null
       this.selectionModel.includeUsers = []
-      this.selectionModel.excludeUsers = [this.settingsService.currentUser.id]
+      this.selectionModel.excludeUsers = [this.settingsService.currentUser().id]
       this.selectionModel.hideUnowned = false
     } else if (this.selectionModel.ownerFilter === OwnerFilterType.NONE) {
       this.selectionModel.userID = null
@@ -132,7 +132,7 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     } else if (
       this.selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME
     ) {
-      this.selectionModel.userID = this.settingsService.currentUser.id
+      this.selectionModel.userID = this.settingsService.currentUser()?.id
       this.selectionModel.includeUsers = []
       this.selectionModel.excludeUsers = []
       this.selectionModel.hideUnowned = false

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

@@ -7,38 +7,38 @@
   <div class="modal-body">
     <div class="row">
       <div class="col-12 col-md-6">
-        <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error?.email"></pngx-input-text>
+        <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error()?.email"></pngx-input-text>
         <div ngbAccordion>
-          <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm" class="border-0 bg-transparent">
+          <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm()" class="border-0 bg-transparent">
             <div ngbAccordionCollapse>
               <div ngbAccordionBody class="p-0 pb-3">
-                <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" autocomplete="email" [error]="error?.email_confirm"></pngx-input-text>
+                <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" autocomplete="email" [error]="error()?.email_confirm"></pngx-input-text>
               </div>
             </div>
           </div>
         </div>
-        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" autocomplete="current-password" [error]="error?.password"></pngx-input-password>
+        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [showReveal]="true" autocomplete="current-password" [error]="error()?.password"></pngx-input-password>
         <div ngbAccordion>
-          <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
+          <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm()" class="border-0 bg-transparent">
             <div ngbAccordionCollapse>
               <div ngbAccordionBody class="p-0 pb-3">
-                <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" autocomplete="new-password" [error]="error?.password_confirm"></pngx-input-password>
+                <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" autocomplete="new-password" [error]="error()?.password_confirm"></pngx-input-password>
               </div>
             </div>
           </div>
         </div>
-        <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
-        <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
+        <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error()?.first_name"></pngx-input-text>
+        <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error()?.first_name"></pngx-input-text>
         <div class="mb-3">
           <label class="form-label" i18n>API Auth Token</label>
           <div class="position-relative">
             <div class="input-group">
               <input type="text" class="form-control" formControlName="auth_token" readonly>
               <button type="button" class="btn btn-outline-secondary" (click)="copyAuthToken()" i18n-title title="Copy">
-                  @if (!copied) {
+                  @if (!copied()) {
                     <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
                   }
-                  @if (copied) {
+                  @if (copied()) {
                     <i-bs width="1em" height="1em" name="clipboard-check-fill"></i-bs>
                   }
                   <span class="visually-hidden" i18n>Copy</span>
@@ -51,7 +51,7 @@
                   (confirm)="generateAuthToken()">
                 </pngx-confirm-button>
               </div>
-              <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied" i18n>Copied!</span>
+              <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied()" i18n>Copied!</span>
             </div>
             <div class="form-text text-muted text-end fst-italic" i18n>Warning: changing the token cannot be undone</div>
           </div>
@@ -155,10 +155,10 @@
                   }
               </ul>
               <button type="button" class="btn btn-sm btn-outline-secondary ms-2" (click)="copyRecoveryCodes()" i18n-title title="Copy">
-                @if (!codesCopied) {
+                @if (!codesCopied()) {
                   <i-bs width="1em" height="1em" name="clipboard-fill" class="me-1"></i-bs><span i18n>Copy codes</span>
                 }
-                @if (codesCopied) {
+                @if (codesCopied()) {
                   <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary me-1"></i-bs><span class="text-primary" i18n>Copied!</span>
                 }
               </button>

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

@@ -1,9 +1,4 @@
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Clipboard } from '@angular/cdk/clipboard'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
@@ -191,7 +186,8 @@ describe('ProfileEditDialogComponent', () => {
     expect(component.saveDisabled).toBeFalsy()
   })
 
-  it('should logout on save if password changed', fakeAsync(() => {
+  it('should logout on save if password changed', () => {
+    jest.useFakeTimers()
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
     const getProvidersSpy = jest.spyOn(
@@ -211,13 +207,15 @@ describe('ProfileEditDialogComponent', () => {
       .mockImplementation(() => {})
     component.save()
     expect(updateSpy).toHaveBeenCalled()
-    tick(2600)
+    jest.advanceTimersByTime(2600)
     expect(navSpy).toHaveBeenCalledWith(
       `${window.location.origin}/accounts/logout/?next=/accounts/login/?next=/`
     )
-  }))
+    jest.useRealTimers()
+  })
 
-  it('should support auth token copy', fakeAsync(() => {
+  it('should support auth token copy', () => {
+    jest.useFakeTimers()
     const getSpy = jest.spyOn(profileService, 'get')
     getSpy.mockReturnValue(of(profile))
     const getProvidersSpy = jest.spyOn(
@@ -229,10 +227,11 @@ describe('ProfileEditDialogComponent', () => {
     const copySpy = jest.spyOn(clipboard, 'copy')
     component.copyAuthToken()
     expect(copySpy).toHaveBeenCalledWith(profile.auth_token)
-    expect(component.copied).toBeTruthy()
-    tick(3000)
-    expect(component.copied).toBeFalsy()
-  }))
+    expect(component.copied()).toBeTruthy()
+    jest.advanceTimersByTime(3000)
+    expect(component.copied()).toBeFalsy()
+    jest.useRealTimers()
+  })
 
   it('should support generate token, display error if needed', () => {
     const getSpy = jest.spyOn(profileService, 'get')
@@ -366,11 +365,13 @@ describe('ProfileEditDialogComponent', () => {
     expect(component.isTotpEnabled).toBeFalsy()
   })
 
-  it('should copy recovery codes', fakeAsync(() => {
+  it('should copy recovery codes', () => {
+    jest.useFakeTimers()
     const copySpy = jest.spyOn(clipboard, 'copy')
     component.recoveryCodes = ['1', '2', '3']
     component.copyRecoveryCodes()
     expect(copySpy).toHaveBeenCalledWith('1\n2\n3')
-    tick(3000)
-  }))
+    jest.advanceTimersByTime(3000)
+    jest.useRealTimers()
+  })
 })

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -50,8 +50,12 @@ export class ProfileEditDialogComponent
   private toastService = inject(ToastService)
   private clipboard = inject(Clipboard)
 
-  public networkActive: boolean = false
-  public error: any
+  readonly networkActive = signal(false)
+  readonly error = signal<any>(undefined)
+  readonly showPasswordConfirm = signal(false)
+  readonly showEmailConfirm = signal(false)
+  readonly copied = signal(false)
+  readonly codesCopied = signal(false)
 
   public form = new FormGroup({
     email: new FormControl(''),
@@ -67,23 +71,18 @@ export class ProfileEditDialogComponent
   private currentPassword: string
   private newPassword: string
   private passwordConfirm: string
-  public showPasswordConfirm: boolean = false
+
   public hasUsablePassword: boolean = false
 
   private currentEmail: string
   private newEmail: string
   private emailConfirm: string
-  public showEmailConfirm: boolean = false
 
   public isTotpEnabled: boolean = false
   public totpSettings: TotpSettings
   public totpSettingsLoading: boolean = false
   public totpLoading: boolean = false
   public recoveryCodes: string[]
-
-  public copied: boolean = false
-  public codesCopied: boolean = false
-
   public socialAccounts: SocialAccount[] = []
   public socialAccountProviders: SocialAccountProvider[] = []
 
@@ -95,12 +94,12 @@ export class ProfileEditDialogComponent
   }
 
   ngOnInit(): void {
-    this.networkActive = true
+    this.networkActive.set(true)
     this.profileService
       .get()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((profile) => {
-        this.networkActive = false
+        this.networkActive.set(false)
         this.form.patchValue(profile)
         this.currentEmail = profile.email
         this.form.get('email').valueChanges.subscribe((newEmail) => {
@@ -126,7 +125,7 @@ export class ProfileEditDialogComponent
   }
 
   get saveDisabled(): boolean {
-    return this.error?.password_confirm || this.error?.email_confirm
+    return this.error()?.password_confirm || this.error()?.email_confirm
   }
 
   onEmailKeyUp(event: KeyboardEvent): void {
@@ -140,18 +139,17 @@ export class ProfileEditDialogComponent
   }
 
   onEmailChange(): void {
-    this.showEmailConfirm = this.currentEmail !== this.newEmail
-    if (this.showEmailConfirm) {
+    this.showEmailConfirm.set(this.currentEmail !== this.newEmail)
+    if (this.showEmailConfirm()) {
       this.form.get('email_confirm').enable()
       if (this.newEmail !== this.emailConfirm) {
-        if (!this.error) this.error = {}
-        this.error.email_confirm = $localize`Emails must match`
+        this.setFieldError('email_confirm', $localize`Emails must match`)
       } else {
-        delete this.error?.email_confirm
+        this.clearFieldError('email_confirm')
       }
     } else {
       this.form.get('email_confirm').disable()
-      delete this.error?.email_confirm
+      this.clearFieldError('email_confirm')
     }
   }
 
@@ -167,29 +165,42 @@ export class ProfileEditDialogComponent
   }
 
   onPasswordChange(): void {
-    this.showPasswordConfirm = this.currentPassword !== this.newPassword
+    this.showPasswordConfirm.set(this.currentPassword !== this.newPassword)
 
-    if (this.showPasswordConfirm) {
+    if (this.showPasswordConfirm()) {
       this.form.get('password_confirm').enable()
       if (this.newPassword !== this.passwordConfirm) {
-        if (!this.error) this.error = {}
-        this.error.password_confirm = $localize`Passwords must match`
+        this.setFieldError('password_confirm', $localize`Passwords must match`)
       } else {
-        delete this.error?.password_confirm
+        this.clearFieldError('password_confirm')
       }
     } else {
       this.form.get('password_confirm').disable()
-      delete this.error?.password_confirm
+      this.clearFieldError('password_confirm')
     }
   }
 
+  private setFieldError(fieldName: string, message: string): void {
+    this.error.set({
+      ...(this.error() ?? {}),
+      [fieldName]: message,
+    })
+  }
+
+  private clearFieldError(fieldName: string): void {
+    if (!this.error()) return
+    const error = { ...this.error() }
+    delete error[fieldName]
+    this.error.set(Object.keys(error).length ? error : undefined)
+  }
+
   save(): void {
     const passwordChanged =
       this.newPassword && this.currentPassword !== this.newPassword
     const profile = Object.assign({}, this.form.value)
     delete profile.totp_code
-    this.error = null
-    this.networkActive = true
+    this.error.set(null)
+    this.networkActive.set(true)
     this.profileService
       .update(profile)
       .pipe(takeUntil(this.unsubscribeNotifier))
@@ -210,8 +221,8 @@ export class ProfileEditDialogComponent
         },
         error: (error) => {
           this.toastService.showError($localize`Error saving profile`, error)
-          this.error = error?.error
-          this.networkActive = false
+          this.error.set(error?.error)
+          this.networkActive.set(false)
         },
       })
   }
@@ -236,9 +247,9 @@ export class ProfileEditDialogComponent
 
   copyAuthToken(): void {
     this.clipboard.copy(this.form.get('auth_token').value)
-    this.copied = true
+    this.copied.set(true)
     setTimeout(() => {
-      this.copied = false
+      this.copied.set(false)
     }, 3000)
   }
 
@@ -330,9 +341,9 @@ export class ProfileEditDialogComponent
 
   public copyRecoveryCodes(): void {
     this.clipboard.copy(this.recoveryCodes.join('\n'))
-    this.codesCopied = true
+    this.codesCopied.set(true)
     setTimeout(() => {
-      this.codesCopied = false
+      this.codesCopied.set(false)
     }, 3000)
   }
 }

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

@@ -8,18 +8,18 @@
       <div>
         <p class="mb-1">
           <ng-container i18n>Selected documents:</ng-container>
-          {{ selectionCount }}
+          {{ selectionCount() }}
         </p>
-        @if (documentPreview.length > 0) {
+        @if (documentPreview().length > 0) {
           <ul class="list-unstyled small mb-0">
-            @for (doc of documentPreview; track doc.id) {
+            @for (doc of documentPreview(); track doc.id) {
               <li>
                 <strong>{{ doc.title | documentTitle }}</strong>
               </li>
             }
-            @if (selectionCount > documentPreview.length) {
+            @if (selectionCount() > documentPreview().length) {
               <li>
-                <ng-container i18n>+ {{ selectionCount - documentPreview.length }} more…</ng-container>
+                <ng-container i18n>+ {{ selectionCount() - documentPreview().length }} more…</ng-container>
               </li>
             }
           </ul>
@@ -72,10 +72,10 @@
               type="button"
               (click)="copy(createdBundle)"
             >
-              @if (copied) {
+              @if (copied()) {
                 <i-bs name="clipboard-check"></i-bs>
               }
-              @if (!copied) {
+              @if (!copied()) {
                 <i-bs name="clipboard"></i-bs>
               }
               <span class="visually-hidden" i18n>Copy link</span>
@@ -118,8 +118,8 @@
         type="button"
         class="btn btn-primary btn-sm d-inline-flex align-items-center gap-2 text-nowrap"
         (click)="submit()"
-        [disabled]="loading || !buttonsEnabled">
-        @if (loading) {
+        [disabled]="loading() || !buttonsEnabled">
+        @if (loading()) {
           <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
         }
         {{ btnCaption }}

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

@@ -1,10 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { FileVersion } from 'src/app/data/share-link'
@@ -58,10 +53,10 @@ describe('ShareLinkBundleDialogComponent', () => {
 
   it('builds payload and emits confirm on submit', () => {
     const confirmSpy = jest.spyOn(component.confirmClicked, 'emit')
-    component.documents = [
+    component.setDocuments([
       { id: 1, title: 'Doc 1' } as any,
       { id: 2, title: 'Doc 2' } as any,
-    ]
+    ])
     component.form.setValue({
       shareArchiveVersion: false,
       expirationDays: 3,
@@ -101,14 +96,15 @@ describe('ShareLinkBundleDialogComponent', () => {
     const docs = Array.from({ length: 12 }).map((_, index) => ({
       id: index + 1,
     }))
-    component.documents = docs as any
+    component.setDocuments(docs as any)
 
-    expect(component.selectionCount).toBe(12)
-    expect(component.documentPreview).toHaveLength(10)
-    expect(component.documentPreview[0].id).toBe(1)
+    expect(component.selectionCount()).toBe(12)
+    expect(component.documentPreview()).toHaveLength(10)
+    expect(component.documentPreview()[0].id).toBe(1)
   })
 
-  it('copies share link and resets state after timeout', fakeAsync(() => {
+  it('copies share link and resets state after timeout', () => {
+    jest.useFakeTimers()
     const copySpy = jest.spyOn(clipboard, 'copy').mockReturnValue(true)
     const bundle = {
       slug: 'bundle-slug',
@@ -118,12 +114,13 @@ describe('ShareLinkBundleDialogComponent', () => {
     component.copy(bundle)
 
     expect(copySpy).toHaveBeenCalledWith(component.getShareUrl(bundle))
-    expect(component.copied).toBe(true)
+    expect(component.copied()).toBe(true)
     expect(toastService.showInfo).toHaveBeenCalled()
 
-    tick(3000)
-    expect(component.copied).toBe(false)
-  }))
+    jest.advanceTimersByTime(3000)
+    expect(component.copied()).toBe(false)
+    jest.useRealTimers()
+  })
 
   it('generates share URLs based on API base URL', () => {
     environment.apiBaseUrl = 'https://example.com/api/'

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

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { CommonModule } from '@angular/common'
-import { Component, Input, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Document } from 'src/app/data/document'
@@ -38,10 +38,11 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
   private readonly clipboard = inject(Clipboard)
   private readonly toastService = inject(ToastService)
 
-  private _documents: Document[] = []
+  readonly documents = signal<Document[]>([])
+  readonly selectionCount = signal(0)
+  readonly documentPreview = signal<Document[]>([])
+  readonly copied = signal(false)
 
-  selectionCount = 0
-  documentPreview: Document[] = []
   form: FormGroup = this.formBuilder.group({
     shareArchiveVersion: true,
     expirationDays: [7],
@@ -51,28 +52,27 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
   readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
 
   createdBundle: ShareLinkBundleSummary | null = null
-  copied = false
   onOpenManage?: () => void
   readonly statuses = ShareLinkBundleStatus
 
   constructor() {
     super()
-    this.loading = false
+    this.loading.set(false)
     this.title = $localize`Create share link bundle`
     this.btnCaption = $localize`Create link`
   }
 
-  @Input()
-  set documents(docs: Document[]) {
-    this._documents = docs.concat()
-    this.selectionCount = this._documents.length
-    this.documentPreview = this._documents.slice(0, 10)
+  setDocuments(docs: Document[]) {
+    const documents = docs.concat()
+    this.documents.set(documents)
+    this.selectionCount.set(documents.length)
+    this.documentPreview.set(documents.slice(0, 10))
   }
 
   submit() {
     if (this.createdBundle) return
     this.payload = {
-      document_ids: this._documents.map((doc) => doc.id),
+      document_ids: this.documents().map((doc) => doc.id),
       file_version: this.form.value.shareArchiveVersion
         ? FileVersion.Archive
         : FileVersion.Original,
@@ -92,10 +92,10 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
   copy(bundle: ShareLinkBundleSummary): void {
     const success = this.clipboard.copy(this.getShareUrl(bundle))
     if (success) {
-      this.copied = true
+      this.copied.set(true)
       this.toastService.showInfo($localize`Share link copied to clipboard.`)
       setTimeout(() => {
-        this.copied = false
+        this.copied.set(false)
       }, 3000)
     }
   }