Merge branch 'dev'

2025-04-02 13:45:10 -05:00 · 2023-12-27 23:09:50 -08:00 · 2023-12-27 23:09:50 -08:00 · e6a9868e86
commit e6a9868e86
parent 7ec51758eb f03592d17d
315 changed files with 17005 additions and 13933 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@ -102,3 +102,14 @@ body:
    attributes:
      label: Other
      description: Any other relevant details.
+  - type: checkboxes
+    id: required-checks
+    attributes:
+      label: Please confirm the following
+      options:
+        - label: I believe this issue is a bug that affects all users of Paperless-ngx, not something specific to my installation.
+          required: true
+        - label: I have already searched for relevant existing issues and discussions before opening this report.
+          required: true
+        - label: I have updated the title field above with a concise description.
+          required: true
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -8,7 +8,11 @@ Note: All PRs with code changes should be targeted to the `dev` branch, pure doc
 Please include a summary of the change and which issue is fixed (if any) and any relevant motivation / context. List any dependencies that are required for this change. If appropriate, please include an explanation of how your proposed change can be tested. Screenshots and / or videos can also be helpful if appropriate.
 -->

-Fixes # (issue)
+<!--
+⚠️ Important: Pull requests that implement a new feature *should almost always target an existing feature request*. This is in order to balance the work of implementing and maintaining new features vs. community-interest. If that is not currently the case, please open a feature request instead of this PR to gather feedback from both users and the project maintainers.
+-->
+
+Closes #(issue or discussion)

 ## Type of change

@ -17,10 +21,11 @@ What type of change does your PR introduce to Paperless-ngx?
 NOTE: Please check only one box!
 -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Other (please explain):
+- [ ] Bug fix: non-breaking change which fixes an issue.
+- [ ] New feature: non-breaking change which adds functionality. _Please read the important note above._
+- [ ] Breaking change: fix or feature that would cause existing functionality to not work as expected.
+- [ ] Documentation only.
+- [ ] Other. Please explain:

 ## Checklist:

--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -16,7 +16,7 @@ on:
 env:
  # This is the version of pipenv all the steps will use
  # If changing this, change Dockerfile
-  DEFAULT_PIP_ENV_VERSION: "2023.10.24"
+  DEFAULT_PIP_ENV_VERSION: "2023.11.15"
  # This is the default version of Python to use in most steps which aren't specific
  DEFAULT_PYTHON_VERSION: "3.10"

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -94,7 +94,7 @@ The following files need to be changed:

 - src-ui/angular.json (under the _projects/paperless-ui/i18n/locales_ JSON key)
 - src/paperless/settings.py (in the _LANGUAGES_ array)
- src-ui/src/app/services/settings.service.ts (inside the _getLanguageOptions_ method)
+- src-ui/src/app/services/settings.service.ts (inside the _LANGUAGE_OPTIONS_ array)
 - src-ui/src/app/app.module.ts (import locale from _angular/common/locales_ and call _registerLocaleData_)

 Please add the language in the correct order, alphabetically by locale.
--- a/16
+++ b/16
@ -12,7 +12,7 @@ COPY ./src-ui /src/src-ui
 WORKDIR /src/src-ui
 RUN set -eux \
  && npm update npm -g \
-  && npm ci --omit=optional
+  && npm ci
 RUN set -eux \
  && ./node_modules/.bin/ng build --configuration production

@ -29,7 +29,7 @@ COPY Pipfile* ./

 RUN set -eux \
  && echo "Installing pipenv" \
-    && python3 -m pip install --no-cache-dir --upgrade pipenv==2023.10.24 \
+    && python3 -m pip install --no-cache-dir --upgrade pipenv==2023.11.15 \
  && echo "Generating requirement.txt" \
    && pipenv requirements > requirements.txt

@ -39,6 +39,8 @@ RUN set -eux \
 #  - Don't leave anything extra in here
 FROM docker.io/python:3.11-slim-bookworm as main-app

+ENV PYTHONWARNINGS="ignore:::django.http.response:517"
+
 LABEL org.opencontainers.image.authors="paperless-ngx team <hello@paperless-ngx.com>"
 LABEL org.opencontainers.image.documentation="https://docs.paperless-ngx.com/"
 LABEL org.opencontainers.image.source="https://github.com/paperless-ngx/paperless-ngx"
@ -52,8 +54,8 @@ ARG TARGETARCH

 # Can be workflow provided, defaults set for manual building
 ARG JBIG2ENC_VERSION=0.29
-ARG QPDF_VERSION=11.6.3
-ARG GS_VERSION=10.02.0
+ARG QPDF_VERSION=11.6.4
+ARG GS_VERSION=10.02.1

 #
 # Begin installation and configuration
@ -123,13 +125,13 @@ RUN set -eux \
      && echo "Installing Ghostscript ${GS_VERSION}" \
        && curl --fail --silent --show-error --location \
          --output libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
        && curl --fail --silent --show-error --location \
          --output ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/ghostscript_${GS_VERSION}.dfsg-1_${TARGETARCH}.deb \
        && curl --fail --silent --show-error --location \
          --output libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
-          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
+          https://github.com/paperless-ngx/builder/releases/download/ghostscript-${GS_VERSION}/libgs10-common_${GS_VERSION}.dfsg-1_all.deb \
        && dpkg --install ./libgs10-common_${GS_VERSION}.dfsg-2_all.deb \
        && dpkg --install ./libgs10_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
        && dpkg --install ./ghostscript_${GS_VERSION}.dfsg-2_${TARGETARCH}.deb \
--- a/10
+++ b/10
@ -4,16 +4,16 @@ verify_ssl = true
 name = "pypi"

 [packages]
-dateparser = "~=1.1"
+dateparser = "~=1.2"
 # WARNING: django does not use semver.
 #          Only patch versions are guaranteed to not introduce breaking changes.
-django = "~=4.2.7"
+django = "~=4.2.8"
 django-auditlog = "*"
 django-celery-results = "*"
 django-compression-middleware = "*"
 django-cors-headers = "*"
 django-extensions = "*"
-django-filter = "~=23.3"
+django-filter = "~=23.5"
 django-guardian = "*"
 django-multiselectfield = "*"
 djangorestframework = "~=3.14"
@ -33,7 +33,7 @@ inotifyrecursive = "~=0.3"
 langdetect = "*"
 mysqlclient = "*"
 nltk = "*"
-ocrmypdf = "~=15.0"
+ocrmypdf = "~=15.4"
 pathvalidate = "*"
 pdf2image = "*"
 psycopg2 = "*"
@ -57,7 +57,7 @@ zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}

 [dev-packages]
 # Linting
-black = "*"
+black = "==23.11.0"
 pre-commit = "*"
 ruff = "*"
 # Testing
--- a/Pipfile.lock
+++ b/Pipfile.lock
--- a/docker/docker-prepare.sh
+++ b/docker/docker-prepare.sh
@ -80,7 +80,7 @@ django_checks() {

 search_index() {

-	local -r index_version=7
+	local -r index_version=8
 	local -r index_version_file=${DATA_DIR}/.index_version

 	if [[ (! -f "${index_version_file}") || $(<"${index_version_file}") != "$index_version" ]]; then
--- a/docs/administration.md
+++ b/docs/administration.md
@ -607,3 +607,10 @@ document_fuzzy_match [--ratio] [--processes N]
 | ----------- | -------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | --ratio     | No       | 85.0                | a number between 0 and 100, setting how similar a document must be for it to be reported. Higher numbers mean more similarity. |
 | --processes | No       | 1/4 of system cores | Number of processes to use for matching. Setting 1 disables multiple processes                                                 |
+| --delete    | No       | False               | If provided, one document of a matched pair above the ratio will be deleted.                                                   |
+
+!!! warning
+
+    If providing the `--delete` option, it is highly recommended to have a backup.
+    While every effort has been taken to ensure proper operation, there is always the
+    chance of deletion of a file you want to keep.
--- a/docs/api.md
+++ b/docs/api.md
@ -8,20 +8,22 @@ most of the available filters and ordering fields.

 The API provides the following main endpoints:

+- `/api/consumption_templates/`: Full CRUD support.
+- `/api/correspondents/`: Full CRUD support.
+- `/api/custom_fields/`: Full CRUD support.
 - `/api/documents/`: Full CRUD support, except POSTing new documents.
  See below.
- `/api/correspondents/`: Full CRUD support.
 - `/api/document_types/`: Full CRUD support.
+- `/api/groups/`: Full CRUD support.
 - `/api/logs/`: Read-Only.
- `/api/tags/`: Full CRUD support.
- `/api/tasks/`: Read-only.
 - `/api/mail_accounts/`: Full CRUD support.
 - `/api/mail_rules/`: Full CRUD support.
- `/api/users/`: Full CRUD support.
- `/api/groups/`: Full CRUD support.
- `/api/share_links/`: Full CRUD support.
- `/api/custom_fields/`: Full CRUD support.
 - `/api/profile/`: GET, PATCH
+- `/api/share_links/`: Full CRUD support.
+- `/api/storage_paths/`: Full CRUD support.
+- `/api/tags/`: Full CRUD support.
+- `/api/tasks/`: Read-only.
+- `/api/users/`: Full CRUD support.

 All of these endpoints except for the logging endpoint allow you to
 fetch (and edit and delete where appropriate) individual objects by
--- a/docs/assets/screenshots/custom_field2.png
+++ b/docs/assets/screenshots/custom_field2.png
--- a/docs/assets/screenshots/editing.png
+++ b/docs/assets/screenshots/editing.png
--- a/docs/assets/screenshots/permissions_document.png
+++ b/docs/assets/screenshots/permissions_document.png
--- a/docs/development.md
+++ b/docs/development.md
@ -277,27 +277,17 @@ Adding new languages requires adding the translated files in the
    }
    ```

-2.  Add the language to the available options in
+2.  Add the language to the `LANGUAGE_OPTIONS` array in
    `src-ui/src/app/services/settings.service.ts`:

-    ```typescript
-    getLanguageOptions(): LanguageOption[] {
-        return [
-            {code: "en-us", name: $localize`English (US)`, englishName: "English (US)", dateInputFormat: "mm/dd/yyyy"},
-            {code: "en-gb", name: $localize`English (GB)`, englishName: "English (GB)", dateInputFormat: "dd/mm/yyyy"},
-            {code: "de", name: $localize`German`, englishName: "German", dateInputFormat: "dd.mm.yyyy"},
-            {code: "nl", name: $localize`Dutch`, englishName: "Dutch", dateInputFormat: "dd-mm-yyyy"},
-            {code: "fr", name: $localize`French`, englishName: "French", dateInputFormat: "dd/mm/yyyy"},
-            {code: "pt-br", name: $localize`Portuguese (Brazil)`, englishName: "Portuguese (Brazil)", dateInputFormat: "dd/mm/yyyy"}
-            // Add your new language here
-        ]
-    }
    ```

    `dateInputFormat` is a special string that defines the behavior of
    the date input fields and absolutely needs to contain "dd", "mm"
    and "yyyy".

+    ```
+
 3.  Import and register the Angular data for this locale in
    `src-ui/src/app/app.module.ts`:

--- a/docs/usage.md
+++ b/docs/usage.md
@ -311,6 +311,8 @@ applied. You can use the following placeholders:
 - `{added_month_name}`: added month name
 - `{added_month_name_short}`: added month short name
 - `{added_day}`: added day
+- `{added_time}`: added time in HH:MM format
+- `{original_filename}`: original file name without extension

 ## Custom Fields {#custom-fields}

@ -343,7 +345,7 @@ The following custom field types are supported:
 - `Integer`: integer number e.g. 12
 - `Number`: float number e.g. 12.3456
 - `Monetary`: float number with exactly two decimals, e.g. 12.30
- `Document Link`: reference(s) to other document(s), displayed as links
+- `Document Link`: reference(s) to other document(s) displayed as links, automatically creates a symmetrical link in reverse

 ## Share Links

--- a/src-ui/angular.json
+++ b/src-ui/angular.json
@ -125,18 +125,18 @@
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
-            "browserTarget": "paperless-ui:build:en-US"
+            "buildTarget": "paperless-ui:build:en-US"
          },
          "configurations": {
            "production": {
-              "browserTarget": "paperless-ui:build:production"
+              "buildTarget": "paperless-ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "browserTarget": "paperless-ui:build"
+            "buildTarget": "paperless-ui:build"
          }
        },
        "test": {
--- a/src-ui/e2e/document-detail/document-detail.spec.ts
+++ b/src-ui/e2e/document-detail/document-detail.spec.ts
@ -12,13 +12,9 @@ test('should activate / deactivate save button when changes are saved', async ({
  await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
    /\w+/
  )
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeDisabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
  await page.getByTitle('Storage path').getByTitle('Clear all').click()
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeEnabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
 })

 test('should warn on unsaved changes', async ({ page }) => {
@ -27,16 +23,12 @@ test('should warn on unsaved changes', async ({ page }) => {
  await expect(page.getByTitle('Correspondent', { exact: true })).toHaveText(
    /\w+/
  )
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeDisabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeDisabled()
  await page
    .getByTitle('Storage path', { exact: true })
    .getByTitle('Clear all')
    .click()
-  await expect(
-    page.getByRole('button', { name: 'Save', exact: true })
-  ).toBeEnabled()
+  await expect(page.getByRole('button', { name: 'Save' }).nth(1)).toBeEnabled()
  await page.getByRole('button', { name: 'Close', exact: true }).click()
  await expect(page.getByRole('dialog')).toHaveText(/unsaved changes/)
  await page.getByRole('button', { name: 'Cancel' }).click()
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
--- a/src-ui/package-lock.json
+++ b/src-ui/package-lock.json
--- a/src-ui/package.json
+++ b/src-ui/package.json
@ -11,56 +11,56 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/cdk": "^16.2.11",
-    "@angular/common": "~16.2.11",
-    "@angular/compiler": "~16.2.11",
-    "@angular/core": "~16.2.11",
-    "@angular/forms": "~16.2.11",
-    "@angular/localize": "~16.2.11",
-    "@angular/platform-browser": "~16.2.11",
-    "@angular/platform-browser-dynamic": "~16.2.11",
-    "@angular/router": "~16.2.11",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
-    "@ng-select/ng-select": "^11.2.0",
+    "@angular/cdk": "^17.0.4",
+    "@angular/common": "~17.0.7",
+    "@angular/compiler": "~17.0.7",
+    "@angular/core": "~17.0.7",
+    "@angular/forms": "~17.0.7",
+    "@angular/localize": "~17.0.7",
+    "@angular/platform-browser": "~17.0.7",
+    "@angular/platform-browser-dynamic": "~17.0.7",
+    "@angular/router": "~17.0.7",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ng-select/ng-select": "^12.0.4",
    "@ngneat/dirty-check-forms": "^3.0.3",
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "file-saver": "^2.0.5",
    "mime-names": "^1.0.0",
    "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^16.0.1",
+    "ngx-cookie-service": "^17.0.1",
    "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^13.0.6",
+    "ngx-ui-tour-ng-bootstrap": "^14.0.1",
    "pdfjs-dist": "^3.11.174",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "uuid": "^9.0.1",
-    "zone.js": "^0.13.3"
+    "zone.js": "^0.14.2"
  },
  "devDependencies": {
-    "@angular-builders/jest": "16.0.1",
-    "@angular-devkit/build-angular": "~16.2.9",
-    "@angular-eslint/builder": "16.2.0",
-    "@angular-eslint/eslint-plugin": "16.2.0",
-    "@angular-eslint/eslint-plugin-template": "16.2.0",
-    "@angular-eslint/schematics": "16.2.0",
-    "@angular-eslint/template-parser": "16.2.0",
-    "@angular/cli": "~16.2.9",
-    "@angular/compiler-cli": "~16.2.3",
+    "@angular-builders/jest": "17.0.0",
+    "@angular-devkit/build-angular": "~17.0.7",
+    "@angular-eslint/builder": "17.1.1",
+    "@angular-eslint/eslint-plugin": "17.1.1",
+    "@angular-eslint/eslint-plugin-template": "17.1.1",
+    "@angular-eslint/schematics": "17.1.1",
+    "@angular-eslint/template-parser": "17.1.1",
+    "@angular/cli": "~17.0.7",
+    "@angular/compiler-cli": "~17.0.7",
    "@playwright/test": "^1.40.1",
    "@types/jest": "^29.5.10",
    "@types/node": "^20.10.2",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
    "concurrently": "^8.2.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.53.0",
    "jest": "29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "^13.1.4",
    "jest-websocket-mock": "^2.5.0",
    "patch-package": "^8.0.0",
    "ts-node": "~10.9.1",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
    "wait-on": "^7.2.0"
  }
 }
--- a/src-ui/src/app/app.component.html
+++ b/src-ui/src/app/app.component.html
@ -19,12 +19,16 @@
          </button>
        </div>
        <div class="btn-group btn-group-sm align-self-end" role="group" aria-label="Previous / Next">
-                    <button *ngIf="tourService.hasPrev(step)" class="btn btn-outline-primary" (click)="tourService.prev()">
+          @if (tourService.hasPrev(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.prev()">
              « {{ step?.prevBtnTitle }}
            </button>
-                    <button *ngIf="tourService.hasNext(step)" class="btn btn-outline-primary" (click)="tourService.next()">
+          }
+          @if (tourService.hasNext(step)) {
+            <button class="btn btn-outline-primary" (click)="tourService.next()">
              {{ step?.nextBtnTitle }} »
            </button>
+          }
        </div>
      </div>
    </div>
--- a/src-ui/src/app/app.component.ts
+++ b/src-ui/src/app/app.component.ts
@ -1,5 +1,5 @@
 import { SettingsService } from './services/settings.service'
-import { SETTINGS_KEYS } from './data/paperless-uisettings'
+import { SETTINGS_KEYS } from './data/ui-settings'
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router } from '@angular/router'
 import { Subscription, first } from 'rxjs'
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@ -107,6 +107,7 @@ import { CustomFieldsDropdownComponent } from './components/common/custom-fields
 import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
 import { PdfViewerComponent } from './components/common/pdf-viewer/pdf-viewer.component'
 import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
+import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'

 import localeAf from '@angular/common/locales/af'
 import localeAr from '@angular/common/locales/ar'
@ -261,6 +262,7 @@ function initializeApp(settings: SettingsService) {
    ProfileEditDialogComponent,
    PdfViewerComponent,
    DocumentLinkComponent,
+    PreviewPopupComponent,
  ],
  imports: [
    BrowserModule,
--- a/src-ui/src/app/components/admin/logs/logs.component.html
+++ b/src-ui/src/app/components/admin/logs/logs.component.html
@ -6,25 +6,35 @@
 </pngx-page-header>

 <ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
-  <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
+  @for (logFile of logFiles; track logFile) {
+    <li [ngbNavItem]="logFile">
      <a ngbNavLink>
        {{logFile}}.log
      </a>
    </li>
-  <div *ngIf="isLoading || !logFiles.length" class="ps-2 d-flex align-items-center">
+  }
+  @if (isLoading || !logFiles.length) {
+    <div class="ps-2 d-flex align-items-center">
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-    <ng-container *ngIf="!logFiles.length" i18n>Loading...</ng-container>
+      @if (!logFiles.length) {
+        <ng-container i18n>Loading...</ng-container>
+      }
    </div>
+  }
 </ul>

 <div [ngbNavOutlet]="nav" class="mt-2"></div>

 <div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  <div *ngIf="isLoading && logFiles.length">
+  @if (isLoading && logFiles.length) {
+    <div>
      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
      <ng-container i18n>Loading...</ng-container>
    </div>
+  }
+  @for (log of logs; track log) {
    <p
      class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    *ngFor="let log of logs">{{log}}</p>
+    >{{log}}</p>
+  }
 </div>
--- a/src-ui/src/app/components/admin/logs/logs.component.ts
+++ b/src-ui/src/app/components/admin/logs/logs.component.ts
@ -54,6 +54,7 @@ export class LogsComponent implements OnInit, AfterViewChecked, OnDestroy {
  ngOnDestroy(): void {
    this.unsubscribeNotifier.next(true)
    this.unsubscribeNotifier.complete()
+    clearInterval(this.autoRefreshInterval)
  }

  reloadLogs() {
--- a/src-ui/src/app/components/admin/settings/settings.component.html
+++ b/src-ui/src/app/components/admin/settings/settings.component.html
@ -24,10 +24,16 @@
          <div class="col">

            <select class="form-select" formControlName="displayLanguage">
-              <option *ngFor="let lang of displayLanguageOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code && currentLocale !== 'en-US'"> - {{lang.englishName}}</span></option>
+              @for (lang of displayLanguageOptions; track lang) {
+                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code && currentLocale !== 'en-US') {
+                  <span> - {{lang.englishName}}</span>
+                }</option>
+              }
            </select>

-            <small *ngIf="displayLanguageIsDirty" class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+            @if (displayLanguageIsDirty) {
+              <small class="form-text text-primary" i18n>You need to reload the page after applying a new language.</small>
+            }

          </div>
        </div>
@ -39,7 +45,11 @@
          <div class="col">

            <select class="form-select" formControlName="dateLocale">
-              <option *ngFor="let lang of dateLocaleOptions" [ngValue]="lang.code">{{lang.name}}<span *ngIf="lang.code"> - {{today | customDate:'shortDate':null:lang.code}}</span></option>
+              @for (lang of dateLocaleOptions; track lang) {
+                <option [ngValue]="lang.code">{{lang.name}}@if (lang.code) {
+                  <span> - {{today | customDate:'shortDate':null:lang.code}}</span>
+                }</option>
+              }
            </select>

          </div>
@ -281,12 +291,12 @@
          <h4 i18n>Views</h4>
          <div formGroupName="savedViews">

-            <div *ngFor="let view of savedViews" [formGroupName]="view.id" class="row">
+            @for (view of savedViews; track view) {
+              <div [formGroupName]="view.id" class="row">
                <div class="mb-3 col">
                  <label class="form-label" for="name_{{view.id}}" i18n>Name</label>
                  <input type="text" class="form-control" formControlName="name" id="name_{{view.id}}">
                </div>
-
                <div class="mb-2 col">
                  <label class="form-label" for="show_on_dashboard_{{view.id}}" i18n>&nbsp;<span class="visually-hidden">Appears on</span></label>
                  <div class="form-check form-switch">
@ -298,19 +308,23 @@
                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
                  </div>
                </div>
-
                <div class="mb-2 col-auto">
                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
                  <button type="button" class="btn btn-sm btn-outline-danger form-control" (click)="deleteSavedView(view)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }" i18n>Delete</button>
                </div>
              </div>
+            }

-            <div *ngIf="savedViews && savedViews.length === 0" i18n>No saved views defined.</div>
+            @if (savedViews && savedViews.length === 0) {
+              <div i18n>No saved views defined.</div>
+            }

-            <div *ngIf="!savedViews">
+            @if (!savedViews) {
+              <div>
                <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
                <div class="visually-hidden" i18n>Loading...</div>
              </div>
+            }

          </div>

--- a/src-ui/src/app/components/admin/settings/settings.component.spec.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.spec.ts
@ -13,8 +13,8 @@ import {
 import { NgSelectModule } from '@ng-select/ng-select'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
@ -138,7 +138,7 @@ describe('SettingsComponent', () => {
        of({
          all: savedViews.map((v) => v.id),
          count: savedViews.length,
-          results: (savedViews as PaperlessSavedView[]).concat([]),
+          results: (savedViews as SavedView[]).concat([]),
        })
      )
    }
@ -226,9 +226,7 @@ describe('SettingsComponent', () => {
    savedViewPatchSpy.mockClear()

    // succeed saved views
-    savedViewPatchSpy.mockReturnValueOnce(
-      of(savedViews as PaperlessSavedView[])
-    )
+    savedViewPatchSpy.mockReturnValueOnce(of(savedViews as SavedView[]))
    component.saveSettings()
    expect(toastErrorSpy).not.toHaveBeenCalled()
    expect(savedViewPatchSpy).toHaveBeenCalled()
@ -335,7 +333,7 @@ describe('SettingsComponent', () => {
    const toastSpy = jest.spyOn(toastService, 'showInfo')
    const deleteSpy = jest.spyOn(savedViewService, 'delete')
    deleteSpy.mockReturnValue(of(true))
-    component.deleteSavedView(savedViews[0] as PaperlessSavedView)
+    component.deleteSavedView(savedViews[0] as SavedView)
    expect(deleteSpy).toHaveBeenCalled()
    expect(toastSpy).toHaveBeenCalledWith(
      `Saved view "${savedViews[0].name}" deleted.`
--- a/src-ui/src/app/components/admin/settings/settings.component.ts
+++ b/src-ui/src/app/components/admin/settings/settings.component.ts
@ -21,10 +21,10 @@ import {
  takeUntil,
  tap,
 } from 'rxjs'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { Group } from 'src/app/data/group'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { User } from 'src/app/data/user'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
  PermissionsService,
@ -48,6 +48,12 @@ enum SettingsNavIDs {
  SavedViews = 4,
 }

+const systemLanguage = { code: '', name: $localize`Use system language` }
+const systemDateFormat = {
+  code: '',
+  name: $localize`Use date format of display language`,
+}
+
@Component({
  selector: 'pngx-settings',
  templateUrl: './settings.component.html',
@ -92,7 +98,7 @@ export class SettingsComponent
    savedViews: this.savedViewGroup,
  })

-  savedViews: PaperlessSavedView[]
+  savedViews: SavedView[]

  store: BehaviorSubject<any>
  storeSub: Subscription
@ -101,8 +107,8 @@ export class SettingsComponent
  unsubscribeNotifier: Subject<any> = new Subject()
  savePending: boolean = false

-  users: PaperlessUser[]
-  groups: PaperlessGroup[]
+  users: User[]
+  groups: Group[]

  get computedDateLocale(): string {
    return (
@ -362,7 +368,7 @@ export class SettingsComponent
    this.settings.organizingSidebarSavedViews = false
  }

-  deleteSavedView(savedView: PaperlessSavedView) {
+  deleteSavedView(savedView: SavedView) {
    this.savedViewService.delete(savedView).subscribe(() => {
      this.savedViewGroup.removeControl(savedView.id.toString())
      this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
@ -512,15 +518,11 @@ export class SettingsComponent
  }

  get displayLanguageOptions(): LanguageOption[] {
-    return [{ code: '', name: $localize`Use system language` }].concat(
-      this.settings.getLanguageOptions()
-    )
+    return [systemLanguage].concat(this.settings.getLanguageOptions())
  }

  get dateLocaleOptions(): LanguageOption[] {
-    return [
-      { code: '', name: $localize`Use date format of display language` },
-    ].concat(this.settings.getDateLocaleOptions())
+    return [systemDateFormat].concat(this.settings.getDateLocaleOptions())
  }

  get today() {
@ -529,7 +531,7 @@ export class SettingsComponent

  saveSettings() {
    // only patch views that have actually changed
-    const changed: PaperlessSavedView[] = []
+    const changed: SavedView[] = []
    Object.values(this.savedViewGroup.controls)
      .filter((g: FormGroup) => !g.pristine)
      .forEach((group: FormGroup) => {
--- a/src-ui/src/app/components/admin/tasks/tasks.component.html
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.html
@ -17,10 +17,10 @@
      </div>
    </pngx-page-header>

-<ng-container *ngIf="!tasksService.completedFileTasks && tasksService.loading">
+    @if (!tasksService.completedFileTasks && tasksService.loading) {
      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
      <div class="visually-hidden" i18n>Loading...</div>
-</ng-container>
+    }

    <ng-template let-tasks="tasks" #tasksTemplate>
      <table class="table table-striped align-middle border shadow-sm">
@ -34,13 +34,15 @@
            </th>
            <th scope="col" i18n>Name</th>
            <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'" i18n>Results</th>
+            @if (activeTab !== 'started' && activeTab !== 'queued') {
+              <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+            }
            <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
            <th scope="col" i18n>Actions</th>
          </tr>
        </thead>
        <tbody>
-      <ng-container *ngFor="let task of tasks | slice: (page-1) * pageSize : page * pageSize">
+          @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
            <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
              <td>
                <div class="form-check">
@ -50,17 +52,27 @@
              </td>
              <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
              <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-        <td class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'">
-          <div *ngIf="task.result?.length > 50" class="result" (click)="expandTask(task); $event.stopPropagation();"
+              @if (activeTab !== 'started' && activeTab !== 'queued') {
+                <td class="d-none d-lg-table-cell">
+                  @if (task.result?.length > 50) {
+                    <div class="result" (click)="expandTask(task); $event.stopPropagation();"
                      [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
                      <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
                    </div>
-          <span *ngIf="task.result?.length <= 50" class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+                  }
+                  @if (task.result?.length <= 50) {
+                    <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+                  }
                  <ng-template #resultPopover>
-            <pre class="small mb-0">{{ task.result | slice:0:300 }}<ng-container *ngIf="task.result.length > 300">&hellip;</ng-container></pre>
-            <ng-container *ngIf="task.result?.length > 300"><br/><em>(<ng-container i18n>click for full output</ng-container>)</em></ng-container>
+                    <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
+                      &hellip;
+                    }</pre>
+                    @if (task.result?.length > 300) {
+                      <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                    }
                  </ng-template>
                </td>
+              }
              <td class="d-lg-none">
                <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
                  <svg fill="currentColor" class="" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
@ -76,11 +88,13 @@
                      </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
                    </button>
                    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-              <button *ngIf="task.related_document" class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                      @if (task.related_document) {
+                        <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
                          <svg class="sidebaricon" fill="currentColor">
                            <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
                            </svg>&nbsp;<ng-container i18n>Open Document</ng-container>
                          </button>
+                        }
                      </ng-container>
                    </div>
                  </td>
@ -90,37 +104,49 @@
                    <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
                  </td>
                </tr>
-      </ng-container>
+              }
            </tbody>
          </table>

          <div class="pb-3 d-sm-flex justify-content-between align-items-center">
-    <div class="pb-2 pb-sm-0" i18n *ngIf="tasks.length > 0">{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</div>
-    <ngb-pagination *ngIf="tasks.length > pageSize" [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
+            @if (tasks.length > 0) {
+              <div class="pb-2 pb-sm-0" i18n>{tasks.length, plural, =1 {One {{this.activeTabLocalized}} task} other {{{tasks.length || 0}} total {{this.activeTabLocalized}} tasks}}</div>
+            }
+            @if (tasks.length > pageSize) {
+              <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="tasks.length" maxSize="8" size="sm"></ngb-pagination>
+            }
          </div>
        </ng-template>

        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
          <li ngbNavItem="failed">
-    <a ngbNavLink i18n>Failed<span *ngIf="tasksService.failedFileTasks.length > 0" class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></a>
+            <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
+<span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
+}</a>
            <ng-template ngbNavContent>
              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
            </ng-template>
          </li>
          <li ngbNavItem="completed">
-    <a ngbNavLink i18n>Complete<span *ngIf="tasksService.completedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span></a>
+            <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
+}</a>
            <ng-template ngbNavContent>
              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
            </ng-template>
          </li>
          <li ngbNavItem="started">
-    <a ngbNavLink i18n>Started<span *ngIf="tasksService.startedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span></a>
+            <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
+}</a>
            <ng-template ngbNavContent>
              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
            </ng-template>
          </li>
          <li ngbNavItem="queued">
-    <a ngbNavLink i18n>Queued<span *ngIf="tasksService.queuedFileTasks.length > 0" class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span></a>
+            <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
+}</a>
            <ng-template ngbNavContent>
              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
            </ng-template>
--- a/src-ui/src/app/components/admin/tasks/tasks.component.ts
+++ b/src-ui/src/app/components/admin/tasks/tasks.component.ts
@ -46,6 +46,7 @@ export class TasksComponent

  ngOnDestroy() {
    this.tasksService.cancelPending()
+    clearInterval(this.autoRefreshInterval)
  }

  dismissTask(task: PaperlessTask) {
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.html
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.html
@ -1,7 +1,7 @@
 <pngx-page-header title="Users & Groups" i18n-title>
 </pngx-page-header>

-<ng-container *ngIf="users">
+@if (users) {
  <h4 class="d-flex">
    <ng-container i18n>Users</ng-container>
    <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
@ -20,8 +20,8 @@
        <div class="col" i18n>Actions</div>
      </div>
    </li>
-
-        <li *ngFor="let user of users" class="list-group-item">
+    @for (user of users; track user) {
+      <li class="list-group-item">
        <div class="row">
          <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editUser(user)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.User)">{{user.username}}</button></div>
          <div class="col d-flex align-items-center">{{user.first_name}} {{user.last_name}}</div>
@ -42,10 +42,11 @@
              </div>
            </div>
          </li>
+        }
      </ul>
-</ng-container>
+    }

-<ng-container *ngIf="groups">
+    @if (groups) {
      <h4 class="mt-4 d-flex">
        <ng-container i18n>Groups</ng-container>
        <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
@ -55,7 +56,8 @@
          <ng-container i18n>Add Group</ng-container>
        </button>
      </h4>
-    <ul *ngIf="groups.length > 0" class="list-group">
+      @if (groups.length > 0) {
+        <ul class="list-group">
          <li class="list-group-item">
            <div class="row">
              <div class="col" i18n>Name</div>
@ -64,8 +66,8 @@
              <div class="col" i18n>Actions</div>
            </div>
          </li>
-
-        <li *ngFor="let group of groups" class="list-group-item">
+          @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" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
                <div class="col"></div>
@ -86,12 +88,17 @@
                    </div>
                  </div>
                </li>
-        <li *ngIf="groups.length === 0" class="list-group-item" i18n>No groups defined</li>
+              }
+              @if (groups.length === 0) {
+                <li class="list-group-item" i18n>No groups defined</li>
+              }
            </ul>
+          }
+        }

-</ng-container>
-
-<div *ngIf="!users || !groups">
+        @if (!users || !groups) {
+          <div>
            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
            <div class="visually-hidden" i18n>Loading...</div>
          </div>
+        }
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.spec.ts
@ -41,8 +41,8 @@ import { TextComponent } from '../../common/input/text/text.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { SettingsComponent } from '../settings/settings.component'
 import { UsersAndGroupsComponent } from './users-groups.component'
-import { PaperlessUser } from 'src/app/data/paperless-user'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
+import { User } from 'src/app/data/user'
+import { Group } from 'src/app/data/group'

 const users = [
  { id: 1, username: 'user1', is_superuser: false },
@ -119,7 +119,7 @@ describe('UsersAndGroupsComponent', () => {
        of({
          all: users.map((a) => a.id),
          count: users.length,
-          results: (users as PaperlessUser[]).concat([]),
+          results: (users as User[]).concat([]),
        })
      )
    }
@ -128,7 +128,7 @@ describe('UsersAndGroupsComponent', () => {
        of({
          all: groups.map((r) => r.id),
          count: groups.length,
-          results: (groups as PaperlessGroup[]).concat([]),
+          results: (groups as Group[]).concat([]),
        })
      )
    }
--- a/src-ui/src/app/components/admin/users-groups/users-groups.component.ts
+++ b/src-ui/src/app/components/admin/users-groups/users-groups.component.ts
@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
@ -23,8 +23,8 @@ export class UsersAndGroupsComponent
  extends ComponentWithPermissions
  implements OnInit, OnDestroy
 {
-  users: PaperlessUser[]
-  groups: PaperlessGroup[]
+  users: User[]
+  groups: Group[]

  unsubscribeNotifier: Subject<any> = new Subject()

@ -69,7 +69,7 @@ export class UsersAndGroupsComponent
    this.unsubscribeNotifier.next(true)
  }

-  editUser(user: PaperlessUser = null) {
+  editUser(user: User = null) {
    var modal = this.modalService.open(UserEditDialogComponent, {
      backdrop: 'static',
      size: 'xl',
@ -80,7 +80,7 @@ export class UsersAndGroupsComponent
    modal.componentInstance.object = user
    modal.componentInstance.succeeded
      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((newUser: PaperlessUser) => {
+      .subscribe((newUser: User) => {
        if (
          newUser.id === this.settings.currentUser.id &&
          (modal.componentInstance as UserEditDialogComponent).passwordIsSet
@ -107,7 +107,7 @@ export class UsersAndGroupsComponent
      })
  }

-  deleteUser(user: PaperlessUser) {
+  deleteUser(user: User) {
    let modal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
    })
@ -133,7 +133,7 @@ export class UsersAndGroupsComponent
    })
  }

-  editGroup(group: PaperlessGroup = null) {
+  editGroup(group: Group = null) {
    var modal = this.modalService.open(GroupEditDialogComponent, {
      backdrop: 'static',
      size: 'lg',
@ -157,7 +157,7 @@ export class UsersAndGroupsComponent
      })
  }

-  deleteGroup(group: PaperlessGroup) {
+  deleteGroup(group: Group) {
    let modal = this.modalService.open(ConfirmDialogComponent, {
      backdrop: 'static',
    })
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@ -4,24 +4,32 @@
    (click)="isMenuCollapsed = !isMenuCollapsed">
    <span class="navbar-toggler-icon"></span>
  </button>
-  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard" tourAnchor="tour.intro">
+  <a class="navbar-brand col-auto col-md-3 col-lg-2 me-0 px-3 py-3 order-sm-0"
+    [ngClass]="slimSidebarEnabled ? 'slim' : 'col-auto col-md-3 col-lg-2'" routerLink="/dashboard"
+    tourAnchor="tour.intro">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.43 238.91" width="1em" class="me-2" fill="currentColor">
-      <path d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z" transform="translate(0 0)"/>
+      <path
+        d="M194.7,0C164.22,70.94,17.64,79.74,64.55,194.06c.58,1.47-10.85,17-18.47,29.9-1.76-6.45-3.81-13.48-3.52-14.07,38.11-45.14-27.26-70.65-30.78-107.58C-4.64,131.62-10.5,182.92,39,212.53c.3,0,2.64,11.14,3.81,16.71a58.55,58.55,0,0,0-2.93,6.45c-1.17,2.93,7.62,2.64,7.62,3.22.88-.29,21.7-36.93,22.28-37.23C187.67,174.72,208.48,68.6,194.7,0ZM134.61,74.75C79.5,124,70.12,160.64,71.88,178.53,53.41,134.85,107.64,86.77,134.61,74.75ZM28.2,145.11c10.55,9.67,28.14,39.28,13.19,56.57C44.91,193.77,46.08,175.89,28.2,145.11Z"
+        transform="translate(0 0)" />
    </svg>
    <span class="ms-2" [class.visually-hidden]="slimSidebarEnabled" i18n="app title">Paperless-ngx</span>
  </a>
-  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+  <div class="search-form-container flex-grow-1 py-2 pb-3 pb-sm-2 px-3 ps-md-4 me-sm-auto order-3 order-sm-1"
+    *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
    <form (ngSubmit)="search()" class="form-inline flex-grow-1">
      <svg width="1em" height="1em" fill="currentColor">
        <use xlink:href="assets/bootstrap-icons.svg#search" />
      </svg>
      <input class="form-control form-control-sm" type="text" placeholder="Search documents" aria-label="Search"
-        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)" (selectItem)="itemSelected($event)" i18n-placeholder>
-      <button type="button" *ngIf="!searchFieldEmpty" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
+        [formControl]="searchField" [ngbTypeahead]="searchAutoComplete" (keyup)="searchFieldKeyup($event)"
+        (selectItem)="itemSelected($event)" i18n-placeholder>
+      @if (!searchFieldEmpty) {
+        <button type="button" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0" (click)="resetSearchField()">
          <svg fill="currentColor" class="buttonicon-sm me-1">
            <use xlink:href="assets/bootstrap-icons.svg#x" />
          </svg>
        </button>
+      }
    </form>
  </div>
  <ul ngbNav class="order-sm-3">
@ -44,7 +52,8 @@
            <use xlink:href="assets/bootstrap-icons.svg#person" />
          </svg><ng-container i18n>My Profile</ng-container>
        </button>
-        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
+        <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
+          *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }">
          <svg class="sidebaricon me-2" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#gear" />
          </svg><ng-container i18n>Settings</ng-container>
@ -55,7 +64,8 @@
          </svg><ng-container i18n>Logout</ng-container>
        </a>
        <div class="dropdown-divider"></div>
-        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com">
+        <a ngbDropdownItem class="nav-link" target="_blank" rel="noopener noreferrer"
+          href="https://docs.paperless-ngx.com">
          <svg class="sidebaricon me-2" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
          </svg><ng-container i18n>Documentation</ng-container>
@ -67,24 +77,33 @@

 <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">
+    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse"
+      [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating"
+      [ngbCollapse]="isMenuCollapsed">
      <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
        <svg class="sidebaricon-sm" fill="currentColor">
-          <use *ngIf="slimSidebarEnabled" xlink:href="assets/bootstrap-icons.svg#chevron-double-right"/>
-          <use *ngIf="!slimSidebarEnabled" xlink:href="assets/bootstrap-icons.svg#chevron-double-left"/>
+          @if (slimSidebarEnabled) {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-right" />
+          } @else {
+            <use xlink:href="assets/bootstrap-icons.svg#chevron-double-left" />
+          }
        </svg>
      </button>
      <div class="sidebar-sticky pt-3 d-flex flex-column justify-space-around">
        <ul class="nav flex-column">
          <li class="nav-item">
-            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#house" />
              </svg><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
            </a>
          </li>
          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#files" />
              </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
@ -92,39 +111,52 @@
          </li>
        </ul>
        <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted" *ngIf='savedViewService.loading || savedViewService.sidebarViews?.length > 0'>
+          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
              <span i18n>Saved views</span>
-            <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+              @if (savedViewService.loading) {
+                <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
+              }
            </h6>
+          }
          <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
-            <li class="nav-item w-100" *ngFor="let view of savedViewService.sidebarViews"
-              cdkDrag
-              [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
-              cdkDragPreviewContainer="parent"
-              cdkDragPreviewClass="navItemDrag"
-              (cdkDragStarted)="onDragStart($event)"
+            @for (view of savedViewService.sidebarViews; track view) {
+              <li class="nav-item w-100" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
+                cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
                (cdkDragEnded)="onDragEnd($event)">
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
                  <svg class="sidebaricon" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#funnel" />
                  </svg><span>&nbsp;{{view.name}}</span>
                </a>
-              <div *ngIf="settingsService.organizingSidebarSavedViews" class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                @if (settingsService.organizingSidebarSavedViews) {
+                  <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
                    <svg class="sidebaricon text-muted" fill="currentColor">
                      <use xlink:href="assets/bootstrap-icons.svg#grip-vertical" />
                    </svg>
                  </div>
+                }
              </li>
+            }
          </ul>
        </ng-container>

        <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
-          <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted" *ngIf='openDocuments.length > 0'>
+          @if (openDocuments.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
              <span i18n>Open documents</span>
            </h6>
+          }
          <ul class="nav flex-column mb-2">
-            <li class="nav-item w-100" *ngFor='let d of openDocuments'>
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}" routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle" [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            @for (d of openDocuments; track d) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="documents/{{d.id}}"
+                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                  popoverClass="popover-slim">
                  <svg class="sidebaricon" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#file-text" />
                  </svg><span>&nbsp;{{d.title | documentTitle}}</span>
@ -135,13 +167,18 @@
                  </span>
                </a>
              </li>
-            <li class="nav-item w-100" *ngIf="openDocuments.length >= 1">
-              <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()" ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            }
+            @if (openDocuments.length >= 1) {
+              <li class="nav-item w-100">
+                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
+                  ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                  container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                  <svg class="sidebaricon" fill="currentColor">
                    <use xlink:href="assets/bootstrap-icons.svg#x" />
                  </svg><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
                </a>
              </li>
+            }
          </ul>
        </ng-container>

@ -149,50 +186,70 @@
          <span i18n>Manage</span>
        </h6>
        <ul class="nav flex-column mb-2">
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-            <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+            <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#person" />
              </svg><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
            </a>
          </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }" tourAnchor="tour.tags">
-            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
+            tourAnchor="tour.tags">
+            <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#tags" />
              </svg><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
            </a>
          </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+            <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#hash" />
              </svg><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
            </a>
          </li>
          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#folder" />
              </svg><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
            </a>
          </li>
          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
-            <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
              </svg><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
            </a>
          </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }" tourAnchor="tour.consumption-templates">
-            <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ConsumptionTemplate }"
+            tourAnchor="tour.consumption-templates">
+            <a class="nav-link" routerLink="templates" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Consumption templates" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#file-earmark-ruled" />
              </svg><span>&nbsp;<ng-container i18n>Templates</ng-container></span>
            </a>
          </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }" tourAnchor="tour.mail">
-            <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
+            tourAnchor="tour.mail">
+            <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#envelope" />
              </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
@ -204,37 +261,55 @@
          <span i18n>Administration</span>
        </h6>
        <ul class="nav flex-column mb-2">
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }" tourAnchor="tour.settings">
-            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"
+            tourAnchor="tour.settings">
+            <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#gear" />
              </svg><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
            </a>
          </li>
          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-            <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#people" />
              </svg><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
            </a>
          </li>
-          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }" tourAnchor="tour.file-tasks">
-            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()" ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <span *ngIf="tasksService.failedFileTasks.length > 0 && slimSidebarEnabled" class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
+          <li class="nav-item"
+            *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.PaperlessTask }"
+            tourAnchor="tour.file-tasks">
+            <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
+              ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+              container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+              @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
+                <span class="badge bg-danger position-absolute top-0 end-0">{{tasksService.failedFileTasks.length}}</span>
+              }
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#list-task" />
-              </svg><span>&nbsp;<ng-container i18n>File Tasks<span *ngIf="tasksService.failedFileTasks.length > 0"><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span></ng-container></span>
+              </svg><span>&nbsp;<ng-container i18n>File Tasks@if (tasksService.failedFileTasks.length > 0) {
+                    <span><span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span></span>
+                  }</ng-container></span>
            </a>
          </li>
          <li class="nav-item" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }">
-            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#text-left" />
              </svg><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
            </a>
          </li>
          <li class="nav-item mt-2" tourAnchor="tour.outro">
-            <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+            <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
+              target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
+              i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+              triggers="mouseenter:mouseleave" popoverClass="popover-slim">
              <svg class="sidebaricon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
              </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
@ -243,13 +318,18 @@
          <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
            <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
              <div class="me-3">
-                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
+                  href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
+                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                  triggers="mouseenter:mouseleave" popoverClass="popover-slim">
                  {{ versionString }}
                </a>
              </div>
-              <div *ngIf="!settingsService.updateCheckingIsSet || appRemoteVersion" class="version-check">
+              @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                <div class="version-check">
                  <ng-template #updateAvailablePopContent>
-                  <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is available.</ng-container><br/><ng-container i18n>Click to view.</ng-container></span>
+                    <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                        available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>
                  </ng-template>
                  <ng-template #updateCheckingNotEnabledPopContent>
                    <p class="small mb-2">
@ -265,31 +345,41 @@
                      </a>
                    </p>
                  </ng-template>
-                <ng-container *ngIf="settingsService.updateCheckingIsSet; else updateCheckNotSet">
-                  <a *ngIf="appRemoteVersion.update_available" 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">
-                    <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+                  @if (settingsService.updateCheckingIsSet) {
+                    @if (appRemoteVersion.update_available) {
+                      <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer"
+                        href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                        [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
+                        container="body">
+                        <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
+                          viewBox="0 0 16 16">
                          <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
                        </svg>
-                    <ng-container *ngIf="appRemoteVersion?.update_available" i18n>Update available</ng-container>
+                        @if (appRemoteVersion?.update_available) {
+                        <ng-container i18n>Update available</ng-container>
+                        }
                      </a>
-                </ng-container>
-                <ng-template #updateCheckNotSet>
+                    }
+                  } @else {
                    <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
-                  [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter" container="body">
-                    <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+                      [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
+                      container="body">
+                      <svg fill="currentColor" class="me-1" width="1.2em" height="1.2em" style="vertical-align: text-top;"
+                        viewBox="0 0 16 16">
                        <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
                      </svg>
                    </a>
-                </ng-template>
+                  }
                </div>
+              }
            </div>
          </li>
        </ul>
      </div>
    </nav>

-    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
+    <main role="main" class="ms-sm-auto px-md-4"
+      [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
      <router-outlet></router-outlet>
    </main>
  </div>
--- a/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.spec.ts
@ -15,11 +15,11 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { PermissionsService } from 'src/app/services/permissions.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { Observable, of, tap, throwError } from 'rxjs'
+import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
@ -31,7 +31,7 @@ import { FILTER_FULLTEXT_QUERY } from 'src/app/data/filter-rule-type'
 import { routes } from 'src/app/app-routing.module'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { SavedView } from 'src/app/data/saved-view'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'

 const saved_views = [
@ -356,7 +356,7 @@ describe('AppFrameComponent', () => {
    const toastSpy = jest.spyOn(toastService, 'showInfo')
    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
    component.onDrop({ previousIndex: 0, currentIndex: 1 } as CdkDragDrop<
-      PaperlessSavedView[]
+      SavedView[]
    >)
    expect(settingsSpy).toHaveBeenCalledWith([
      saved_views[2],
@ -379,7 +379,7 @@ describe('AppFrameComponent', () => {
      .spyOn(settingsService, 'storeSettings')
      .mockReturnValue(throwError(() => new Error('unable to save')))
    component.onDrop({ previousIndex: 0, currentIndex: 2 } as CdkDragDrop<
-      PaperlessSavedView[]
+      SavedView[]
    >)
    expect(toastSpy).toHaveBeenCalled()
  })
--- a/src-ui/src/app/components/app-frame/app-frame.component.ts
+++ b/src-ui/src/app/components/app-frame/app-frame.component.ts
@ -10,7 +10,7 @@ import {
  first,
  catchError,
 } from 'rxjs/operators'
-import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { Document } from 'src/app/data/document'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
@ -25,7 +25,7 @@ import {
 import { SettingsService } from 'src/app/services/settings.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { ToastService } from 'src/app/services/toast.service'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import {
@ -33,7 +33,7 @@ import {
  PermissionsService,
  PermissionType,
 } from 'src/app/services/permissions.service'
-import { PaperlessSavedView } from 'src/app/data/paperless-saved-view'
+import { SavedView } from 'src/app/data/saved-view'
 import {
  CdkDragStart,
  CdkDragEnd,
@ -132,7 +132,7 @@ export class AppFrameComponent
    this.closeMenu()
  }

-  get openDocuments(): PaperlessDocument[] {
+  get openDocuments(): Document[] {
    return this.openDocumentsService.getOpenDocuments()
  }

@ -200,7 +200,7 @@ export class AppFrameComponent
    ])
  }

-  closeDocument(d: PaperlessDocument) {
+  closeDocument(d: Document) {
    this.openDocumentsService
      .closeDocument(d)
      .pipe(first())
@ -250,7 +250,7 @@ export class AppFrameComponent
    this.settingsService.globalDropzoneEnabled = true
  }

-  onDrop(event: CdkDragDrop<PaperlessSavedView[]>) {
+  onDrop(event: CdkDragDrop<SavedView[]>) {
    const sidebarViews = this.savedViewService.sidebarViews.concat([])
    moveItemInArray(sidebarViews, event.previousIndex, event.currentIndex)

--- a/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
+++ b/src-ui/src/app/components/common/clearable-badge/clearable-badge.component.html
@ -1,9 +1,15 @@
-<button *ngIf="active" 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)">
-    <svg *ngIf="!isNumbered && selected" width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+@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) {
+      <svg width="1em" height="1em" class="check m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="assets/bootstrap-icons.svg#check-lg"/>
      </svg>
-    <div *ngIf="isNumbered" class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    }
+    @if (isNumbered) {
+      <div class="number">{{number}}<span class="visually-hidden">selected</span></div>
+    }
    <svg width=".9em" height="1em" class="x m-0 p-0 opacity-75" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
    </svg>
  </button>
+}
--- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html
@ -4,8 +4,12 @@
  </button>
 </div>
 <div class="modal-body">
-      <p *ngIf="messageBold"><b>{{messageBold}}</b></p>
-      <p class="mb-0" *ngIf="message" [innerHTML]="message | safeHtml"></p>
+  @if (messageBold) {
+    <p><b>{{messageBold}}</b></p>
+  }
+  @if (message) {
+    <p class="mb-0" [innerHTML]="message | safeHtml"></p>
+  }
 </div>
 <div class="modal-footer">
  <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>
@ -16,9 +20,13 @@
      {{btnCaption}}
      <span class="visually-hidden">{{ seconds | number: '1.0-0' }} seconds</span>
    </span>
-        <ngb-progressbar *ngIf="!confirmButtonEnabled" style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+    @if (!confirmButtonEnabled) {
+      <ngb-progressbar style="height: 1px;" type="dark" [max]="secondsTotal" [value]="seconds"></ngb-progressbar>
+    }
  </button>
-      <button *ngIf="alternativeBtnCaption" type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
+  @if (alternativeBtnCaption) {
+    <button type="button" class="btn" [class]="alternativeBtnClass" (click)="alternative()" [disabled]="!alternativeButtonEnabled || !buttonsEnabled">
      {{alternativeBtnCaption}}
    </button>
+  }
 </div>
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
@ -8,10 +8,7 @@ import {
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { of } from 'rxjs'
-import {
-  PaperlessCustomField,
-  PaperlessCustomFieldDataType,
-} from 'src/app/data/paperless-custom-field'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { SelectComponent } from '../input/select/select.component'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@ -24,16 +21,16 @@ import {
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { By } from '@angular/platform-browser'

-const fields: PaperlessCustomField[] = [
+const fields: CustomField[] = [
  {
    id: 0,
    name: 'Field 1',
-    data_type: PaperlessCustomFieldDataType.Integer,
+    data_type: CustomFieldDataType.Integer,
  },
  {
    id: 1,
    name: 'Field 2',
-    data_type: PaperlessCustomFieldDataType.String,
+    data_type: CustomFieldDataType.String,
  },
 ]

--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
+++ b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
@ -7,8 +7,8 @@ import {
 } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject, first, takeUntil } from 'rxjs'
-import { PaperlessCustomField } from 'src/app/data/paperless-custom-field'
-import { PaperlessCustomFieldInstance } from 'src/app/data/paperless-custom-field-instance'
+import { CustomField } from 'src/app/data/custom-field'
+import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { CustomFieldEditDialogComponent } from '../edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
@ -31,16 +31,16 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
  disabled: boolean = false

  @Input()
-  existingFields: PaperlessCustomFieldInstance[] = []
+  existingFields: CustomFieldInstance[] = []

  @Output()
-  added: EventEmitter<PaperlessCustomField> = new EventEmitter()
+  added: EventEmitter<CustomField> = new EventEmitter()

  @Output()
-  created: EventEmitter<PaperlessCustomField> = new EventEmitter()
+  created: EventEmitter<CustomField> = new EventEmitter()

-  private customFields: PaperlessCustomField[] = []
-  public unusedFields: PaperlessCustomField[]
+  private customFields: CustomField[] = []
+  public unusedFields: CustomField[]

  public name: string

@ -88,8 +88,8 @@ export class CustomFieldsDropdownComponent implements OnDestroy {
  }

  public getCustomFieldFromInstance(
-    instance: PaperlessCustomFieldInstance
-  ): PaperlessCustomField {
+    instance: CustomFieldInstance
+  ): CustomField {
    return this.customFields.find((f) => f.id === instance.field)
  }

--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@ -5,11 +5,14 @@
  </button>
  <div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
    <div class="list-group list-group-flush">
-        <button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
+      @for (rd of relativeDates; track rd) {
+        <button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
          <div class="selected-icon">
-            <svg *ngIf="relativeDate === rd.id" fill="currentColor" class="buttonicon-sm">
+            @if (relativeDate === rd.id) {
+              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#check"/>
              </svg>
+            }
          </div>
          <div class="d-flex justify-content-between w-100 align-items-center ps-2">
            <div class="pe-2 pe-lg-4">
@ -22,16 +25,19 @@
            </div>
          </div>
        </button>
+      }
      <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">

        <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
          <div i18n>After</div>
-            <a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
+          @if (dateAfter) {
+            <a class="btn btn-link p-0 m-0" (click)="clearAfter()">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>
              <small i18n>Clear</small>
            </a>
+          }
        </div>

        <div class="input-group input-group-sm">
@ -49,12 +55,14 @@

        <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
          <div i18n>Before</div>
-            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+          @if (dateBefore) {
+            <a class="btn btn-link p-0 m-0" (click)="clearBefore()">
              <svg fill="currentColor" class="buttonicon-sm">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>
              <small i18n>Clear</small>
            </a>
+          }
        </div>

        <div class="input-group input-group-sm">
--- a/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.html
@ -86,7 +86,9 @@
    </div>
  </div>
  <div class="modal-footer">
-      <span class="text-danger" *ngIf="error?.non_field_errors"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
  </div>
--- a/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/consumption-template-edit-dialog/consumption-template-edit-dialog.component.ts
@ -4,11 +4,11 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import {
  DocumentSource,
-  PaperlessConsumptionTemplate,
-} from 'src/app/data/paperless-consumption-template'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
-import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+  ConsumptionTemplate,
+} from 'src/app/data/consumption-template'
+import { Correspondent } from 'src/app/data/correspondent'
+import { DocumentType } from 'src/app/data/document-type'
+import { StoragePath } from 'src/app/data/storage-path'
 import { ConsumptionTemplateService } from 'src/app/services/rest/consumption-template.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
@ -17,9 +17,9 @@ import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { EditDialogComponent } from '../edit-dialog.component'
 import { MailRuleService } from 'src/app/services/rest/mail-rule.service'
-import { PaperlessMailRule } from 'src/app/data/paperless-mail-rule'
+import { MailRule } from 'src/app/data/mail-rule'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
-import { PaperlessCustomField } from 'src/app/data/paperless-custom-field'
+import { CustomField } from 'src/app/data/custom-field'

 export const DOCUMENT_SOURCE_OPTIONS = [
  {
@ -41,13 +41,13 @@ export const DOCUMENT_SOURCE_OPTIONS = [
  templateUrl: './consumption-template-edit-dialog.component.html',
  styleUrls: ['./consumption-template-edit-dialog.component.scss'],
 })
-export class ConsumptionTemplateEditDialogComponent extends EditDialogComponent<PaperlessConsumptionTemplate> {
-  templates: PaperlessConsumptionTemplate[]
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[]
-  storagePaths: PaperlessStoragePath[]
-  mailRules: PaperlessMailRule[]
-  customFields: PaperlessCustomField[]
+export class ConsumptionTemplateEditDialogComponent extends EditDialogComponent<ConsumptionTemplate> {
+  templates: ConsumptionTemplate[]
+  correspondents: Correspondent[]
+  documentTypes: DocumentType[]
+  storagePaths: StoragePath[]
+  mailRules: MailRule[]
+  customFields: CustomField[]

  constructor(
    service: ConsumptionTemplateService,
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.html
@ -8,8 +8,12 @@

    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive" novalidate></pngx-input-check>
+    }

    <div *pngxIfOwner="object">
      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
--- a/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component.ts
@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
+import { Correspondent } from 'src/app/data/correspondent'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
  templateUrl: './correspondent-edit-dialog.component.html',
  styleUrls: ['./correspondent-edit-dialog.component.scss'],
 })
-export class CorrespondentEditDialogComponent extends EditDialogComponent<PaperlessCorrespondent> {
+export class CorrespondentEditDialogComponent extends EditDialogComponent<Correspondent> {
  constructor(
    service: CorrespondentService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html
@ -7,7 +7,9 @@
  <div class="modal-body">
    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
    <pngx-input-select i18n-title title="Data type" [items]="getDataTypes()" formControlName="data_type"></pngx-input-select>
-    <small class="d-block mt-n2" *ngIf="typeFieldDisabled" i18n>Data type cannot be changed after a field is created</small>
+    @if (typeFieldDisabled) {
+      <small class="d-block mt-n2" i18n>Data type cannot be changed after a field is created</small>
+    }
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
--- a/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.ts
@ -1,10 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { FormGroup, FormControl } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import {
-  DATA_TYPE_LABELS,
-  PaperlessCustomField,
-} from 'src/app/data/paperless-custom-field'
+import { DATA_TYPE_LABELS, CustomField } from 'src/app/data/custom-field'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -16,7 +13,7 @@ import { EditDialogComponent, EditDialogMode } from '../edit-dialog.component'
  styleUrls: ['./custom-field-edit-dialog.component.scss'],
 })
 export class CustomFieldEditDialogComponent
-  extends EditDialogComponent<PaperlessCustomField>
+  extends EditDialogComponent<CustomField>
  implements OnInit
 {
  constructor(
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.html
@ -9,8 +9,12 @@
    <div class="col">
      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
      <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-        <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-        <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+      @if (patternRequired) {
+        <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+      }
+      @if (patternRequired) {
+        <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+      }
    </div>

    <div *pngxIfOwner="object">
--- a/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.ts
@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
+import { DocumentType } from 'src/app/data/document-type'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
  templateUrl: './document-type-edit-dialog.component.html',
  styleUrls: ['./document-type-edit-dialog.component.scss'],
 })
-export class DocumentTypeEditDialogComponent extends EditDialogComponent<PaperlessDocumentType> {
+export class DocumentTypeEditDialogComponent extends EditDialogComponent<DocumentType> {
  constructor(
    service: DocumentTypeService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.spec.ts
@ -23,8 +23,8 @@ import {
  MATCH_NONE,
  MATCH_ALL,
 } from 'src/app/data/matching-model'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { Tag } from 'src/app/data/tag'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -38,7 +38,7 @@ import { EditDialogComponent, EditDialogMode } from './edit-dialog.component'
    </div>
  `,
 })
-class TestComponent extends EditDialogComponent<PaperlessTag> {
+class TestComponent extends EditDialogComponent<Tag> {
  constructor(
    service: TagService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts
@ -9,12 +9,12 @@ import {
 } from 'src/app/data/matching-model'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { PermissionsFormObject } from '../input/permissions/permissions-form/permissions-form.component'
 import { SettingsService } from 'src/app/services/settings.service'
-import { SETTINGS_KEYS } from 'src/app/data/paperless-uisettings'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'

 export enum EditDialogMode {
  CREATE = 0,
@ -33,7 +33,7 @@ export abstract class EditDialogComponent<
    private settingsService: SettingsService
  ) {}

-  users: PaperlessUser[]
+  users: User[]

  @Input()
  dialogMode: EditDialogMode = EditDialogMode.CREATE
--- a/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component.ts
@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
+import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -12,7 +12,7 @@ import { SettingsService } from 'src/app/services/settings.service'
  templateUrl: './group-edit-dialog.component.html',
  styleUrls: ['./group-edit-dialog.component.scss'],
 })
-export class GroupEditDialogComponent extends EditDialogComponent<PaperlessGroup> {
+export class GroupEditDialogComponent extends EditDialogComponent<Group> {
  constructor(
    service: GroupService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.html
@ -22,13 +22,15 @@
  </div>
  <div class="modal-footer">
    <div class="m-0 me-2">
-      <ngb-alert #testResultAlert *ngIf="testResult" [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 = null">{{testResultMessage}}</ngb-alert>
+      }
    </div>
    <button type="button" class="btn btn-outline-primary" (click)="test()" [disabled]="networkActive || testActive">
-      <ng-container *ngIf="testActive">
+      @if (testActive) {
        <div class="spinner-border spinner-border-sm me-2" role="status"></div>
        <span class="visually-hidden mr-1" i18n>Loading...</span>
-      </ng-container>
+      }
      <ng-container i18n>Test</ng-container>
    </button>
    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
--- a/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.spec.ts
@ -11,7 +11,7 @@ import {
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { IMAPSecurity } from 'src/app/data/paperless-mail-account'
+import { IMAPSecurity } from 'src/app/data/mail-account'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
--- a/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component.ts
@ -2,10 +2,7 @@ import { Component, ViewChild } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal, NgbAlert } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import {
-  IMAPSecurity,
-  PaperlessMailAccount,
-} from 'src/app/data/paperless-mail-account'
+import { IMAPSecurity, MailAccount } from 'src/app/data/mail-account'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -21,7 +18,7 @@ const IMAP_SECURITY_OPTIONS = [
  templateUrl: './mail-account-edit-dialog.component.html',
  styleUrls: ['./mail-account-edit-dialog.component.scss'],
 })
-export class MailAccountEditDialogComponent extends EditDialogComponent<PaperlessMailAccount> {
+export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
  testActive: boolean = false
  testResult: string
  alertTimeout
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.html
@ -26,19 +26,25 @@
      </div>
      <div class="col-md-4">
        <pngx-input-select i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Action is only performed when documents are consumed from the mail. Mails without attachments remain entirely untouched."></pngx-input-select>
-        <pngx-input-text i18n-title title="Action parameter" *ngIf="showActionParamField" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        @if (showActionParamField) {
+          <pngx-input-text i18n-title title="Action parameter" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+        }
        <p class="small fst-italic mt-5" i18n>Assignments specified here will supersede any consumption templates.</p>
        <pngx-input-select i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
        <pngx-input-tags [allowCreate]="false" 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 from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
-        <pngx-input-select *ngIf="showCorrespondentField" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+        @if (showCorrespondentField) {
+          <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+        }
        <pngx-input-check i18n-title title="Assign owner from rule" formControlName="assign_owner_from_rule"></pngx-input-check>
      </div>
    </div>
  </div>
  <div class="modal-footer">
-    <span class="text-danger" *ngIf="error?.non_field_errors"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
  </div>
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.spec.ts
@ -7,7 +7,7 @@ import { of } from 'rxjs'
 import {
  MailMetadataCorrespondentOption,
  MailAction,
-} from 'src/app/data/paperless-mail-rule'
+} from 'src/app/data/mail-rule'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
--- a/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component.ts
@ -3,17 +3,17 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent'
-import { PaperlessDocumentType } from 'src/app/data/paperless-document-type'
-import { PaperlessMailAccount } from 'src/app/data/paperless-mail-account'
+import { Correspondent } from 'src/app/data/correspondent'
+import { DocumentType } from 'src/app/data/document-type'
+import { MailAccount } from 'src/app/data/mail-account'
 import {
  MailAction,
  MailFilterAttachmentType,
  MailMetadataCorrespondentOption,
  MailMetadataTitleOption,
-  PaperlessMailRule,
+  MailRule,
  MailRuleConsumptionScope,
-} from 'src/app/data/paperless-mail-rule'
+} from 'src/app/data/mail-rule'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
 import { MailAccountService } from 'src/app/services/rest/mail-account.service'
@ -109,10 +109,10 @@ const METADATA_CORRESPONDENT_OPTIONS = [
  templateUrl: './mail-rule-edit-dialog.component.html',
  styleUrls: ['./mail-rule-edit-dialog.component.scss'],
 })
-export class MailRuleEditDialogComponent extends EditDialogComponent<PaperlessMailRule> {
-  accounts: PaperlessMailAccount[]
-  correspondents: PaperlessCorrespondent[]
-  documentTypes: PaperlessDocumentType[]
+export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
+  accounts: MailAccount[]
+  correspondents: Correspondent[]
+  documentTypes: DocumentType[]

  constructor(
    service: MailRuleService,
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.html
@ -9,8 +9,12 @@
    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
    <pngx-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-text>
    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-    <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-    <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    }

    <div *pngxIfOwner="object">
      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
--- a/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component.ts
@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
-import { PaperlessStoragePath } from 'src/app/data/paperless-storage-path'
+import { StoragePath } from 'src/app/data/storage-path'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -13,7 +13,7 @@ import { SettingsService } from 'src/app/services/settings.service'
  templateUrl: './storage-path-edit-dialog.component.html',
  styleUrls: ['./storage-path-edit-dialog.component.scss'],
 })
-export class StoragePathEditDialogComponent extends EditDialogComponent<PaperlessStoragePath> {
+export class StoragePathEditDialogComponent extends EditDialogComponent<StoragePath> {
  constructor(
    service: StoragePathService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.html
@ -11,8 +11,12 @@

    <pngx-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></pngx-input-check>
    <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
-      <pngx-input-text *ngIf="patternRequired" i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
-      <pngx-input-check *ngIf="patternRequired" i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    @if (patternRequired) {
+      <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>
+    }
+    @if (patternRequired) {
+      <pngx-input-check i18n-title title="Case insensitive" formControlName="is_insensitive"></pngx-input-check>
+    }

    <div *pngxIfOwner="object">
      <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
--- a/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component.ts
@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { randomColor } from 'src/app/utils/color'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
@ -14,7 +14,7 @@ import { SettingsService } from 'src/app/services/settings.service'
  templateUrl: './tag-edit-dialog.component.html',
  styleUrls: ['./tag-edit-dialog.component.scss'],
 })
-export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
+export class TagEditDialogComponent extends EditDialogComponent<Tag> {
  constructor(
    service: TagService,
    activeModal: NgbActiveModal,
--- a/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component.ts
@ -3,8 +3,8 @@ import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { first } from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { Group } from 'src/app/data/group'
+import { User } from 'src/app/data/user'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@ -15,10 +15,10 @@ import { SettingsService } from 'src/app/services/settings.service'
  styleUrls: ['./user-edit-dialog.component.scss'],
 })
 export class UserEditDialogComponent
-  extends EditDialogComponent<PaperlessUser>
+  extends EditDialogComponent<User>
  implements OnInit
 {
-  groups: PaperlessGroup[]
+  groups: Group[]
  passwordIsSet: boolean = false

  constructor(
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@ -4,13 +4,14 @@
      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
    </svg>
    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
-    <ng-container *ngIf="!editing && selectionModel.totalCount > 0">
+    @if (!editing && selectionModel.totalCount > 0) {
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
-    </ng-container>
+    }
  </button>
  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
    <div class="list-group list-group-flush">
-      <div *ngIf="!editing && manyToOne" class="list-group-item d-flex">
+      @if (!editing && manyToOne) {
+        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
            <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
@ -18,7 +19,9 @@
            <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
          </div>
        </div>
-      <div *ngIf="!editing && !manyToOne" class="list-group-item d-flex">
+      }
+      @if (!editing && !manyToOne) {
+        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
            <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
@ -26,27 +29,36 @@
            <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
          </div>
        </div>
+      }
      <div class="list-group-item">
        <div class="input-group input-group-sm">
          <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
        </div>
      </div>
-      <div *ngIf="selectionModel.items" class="items" #buttonItems>
-        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText; let i = index">
+      @if (selectionModel.items) {
+        <div class="items" #buttonItems>
+          @for (item of selectionModel.itemsSorted | filter: filterText; track item; let i = $index) {
+            @if (allowSelectNone || item.id) {
              <pngx-toggleable-dropdown-button
-            *ngIf="allowSelectNone || item.id" [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
+                [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
              </pngx-toggleable-dropdown-button>
-        </ng-container>
+            }
+          }
        </div>
-      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
+      }
+      @if (editing) {
+        <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
          <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
          <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
          </svg>
        </button>
-      <div *ngIf="!editing && manyToOne" class="list-group-item list-group-item-note pt-1 pb-2">
+      }
+      @if (!editing && manyToOne) {
+        <div class="list-group-item list-group-item-note pt-1 pb-2">
          <small i18n>Click again to exclude items.</small>
        </div>
+      }
    </div>
  </div>
 </div>
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
@ -13,7 +13,7 @@ import {
 } from './filterable-dropdown.component'
 import { FilterPipe } from 'src/app/pipes/filter.pipe'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import {
  DEFAULT_MATCHING_ALGORITHM,
  MATCH_ALL,
@ -26,7 +26,7 @@ import { TagComponent } from '../tag/tag.component'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'

-const items: PaperlessTag[] = [
+const items: Tag[] = [
  {
    id: 1,
    name: 'Tag1',
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
@ -1,24 +1,29 @@
 <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="toggleItem($event)" [disabled]="disabled">
  <div class="selected-icon me-1">
-    <ng-container *ngIf="isChecked()">
+    @if (isChecked()) {
      <svg fill="currentColor" class="buttonicon-sm bi-check">
        <use xlink:href="assets/bootstrap-icons.svg#check"/>
      </svg>
-    </ng-container>
-    <ng-container *ngIf="isPartiallyChecked()">
+    }
+    @if (isPartiallyChecked()) {
      <svg fill="currentColor" class="buttonicon-sm bi-dash">
        <use xlink:href="assets/bootstrap-icons.svg#dash"/>
      </svg>
-    </ng-container>
-    <ng-container *ngIf="isExcluded()">
+    }
+    @if (isExcluded()) {
      <svg fill="currentColor" class="buttonicon-sm bi-x">
        <use xlink:href="assets/bootstrap-icons.svg#x"/>
      </svg>
-    </ng-container>
+    }
  </div>
  <div class="me-1">
-    <pngx-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="false"></pngx-tag>
-    <ng-template #displayName><small>{{item.name}}</small></ng-template>
+    @if (isTag) {
+      <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
+    } @else {
+      <small>{{item.name}}</small>
+    }
  </div>
-  <div *ngIf="!hideCount" class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
+  @if (!hideCount) {
+    <div class="badge bg-light text-dark rounded-pill ms-auto me-1">{{count ?? item.document_count}}</div>
+  }
 </button>
--- a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts
@ -4,7 +4,7 @@ import {
  ToggleableItemState,
 } from './toggleable-dropdown-button.component'
 import { TagComponent } from '../../tag/tag.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'

 describe('ToggleableDropdownButtonComponent', () => {
  let component: ToggleableDropdownButtonComponent
@ -26,7 +26,7 @@ describe('ToggleableDropdownButtonComponent', () => {
      id: 1,
      name: 'Test Tag',
      is_inbox_tag: false,
-    } as PaperlessTag
+    } as Tag

    fixture.detectChanges()
    expect(component.isTag).toBeTruthy()
--- a/src-ui/src/app/components/common/input/check/check.component.html
+++ b/src-ui/src/app/components/common/input/check/check.component.html
@ -1,18 +1,26 @@
 <div class="mb-3">
  <div class="row">
-    <div *ngIf="horizontal" class="d-flex align-items-center position-relative hidden-button-container col-md-3">
+    @if (horizontal) {
+      <div class="d-flex align-items-center position-relative hidden-button-container col-md-3">
        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
            <svg class="sidebaricon" fill="currentColor">
              <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>&nbsp;<ng-container i18n>Remove</ng-container>
            </button>
+          }
        </div>
+      }
      <div [ngClass]="{'col-md-9': horizontal, 'align-items-center': horizontal, 'd-flex': horizontal}">
        <div class="form-check">
          <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-        <label *ngIf="!horizontal" class="form-check-label" [for]="inputId">{{title}}</label>
-        <div *ngIf="hint" class="form-text text-muted">{{hint}}</div>
+          @if (!horizontal) {
+            <label class="form-check-label" [for]="inputId">{{title}}</label>
+          }
+          @if (hint) {
+            <div class="form-text text-muted">{{hint}}</div>
+          }
        </div>
      </div>
    </div>
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@ -1,5 +1,7 @@
 <div class="mb-3">
-  <label *ngIf="title" [for]="inputId">{{title}}</label>
+  @if (title) {
+    <label [for]="inputId">{{title}}</label>
+  }

  <div class="input-group" [class.is-invalid]="error">
    <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
@ -21,7 +23,9 @@
    </button>

  </div>
-    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+  @if (hint) {
+    <small class="form-text text-muted">{{hint}}</small>
+  }
  <div class="invalid-feedback">
    {{error}}
  </div>
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@ -2,11 +2,13 @@
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div class="position-relative" [class.col-md-9]="horizontal">
        <div class="input-group" [class.is-invalid]="error">
@ -18,20 +20,26 @@
              <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
            </svg>
          </button>
-        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ fitlerButtonTitle }}">
+          @if (showFilter) {
+            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ filterButtonTitle }}">
              <svg class="buttonicon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#filter" />
              </svg>
            </button>
+          }
        </div>
        <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0">
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+        @if (getSuggestions().length > 0) {
+          <small>
            <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let s of getSuggestions()">
+            @for (s of getSuggestions(); track s) {
              <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
-        </ng-container>
+            }
          </small>
+        }
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/common/input/date/date.component.spec.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.spec.ts
@ -81,6 +81,16 @@ describe('DateComponent', () => {
    expect(eventSpy).toHaveBeenCalled()
  })

+  it('should show allow system keyboard events', () => {
+    let event: KeyboardEvent = new KeyboardEvent('keypress', {
+      key: '9',
+      altKey: true,
+    })
+    let preventDefaultSpy = jest.spyOn(event, 'preventDefault')
+    input.dispatchEvent(event)
+    expect(preventDefaultSpy).not.toHaveBeenCalled()
+  })
+
  it('should support paste', () => {
    expect(component.value).toBeUndefined()
    const date = '5/4/20'
@ -99,5 +109,25 @@ describe('DateComponent', () => {
    event['clipboardData'] = clipboardData
    input.dispatchEvent(event)
    expect(component.value).toEqual({ day: 4, month: 5, year: 2020 })
+    // coverage
+    window['clipboardData'] = {
+      getData: (type) => '',
+    }
+    component.onPaste(new Event('foo') as any)
+  })
+
+  it('should set filter button title', () => {
+    component.title = 'foo'
+    expect(component.filterButtonTitle).toEqual(
+      'Filter documents with this foo'
+    )
+  })
+
+  it('should emit date on filter', () => {
+    let dateReceived
+    component.value = '12/16/2023'
+    component.filterDocuments.subscribe((date) => (dateReceived = date))
+    component.onFilterDocuments()
+    expect(dateReceived).toEqual([{ day: 16, month: 12, year: 2023 }])
  })
 })
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@ -90,7 +90,11 @@ export class DateComponent
  }

  onKeyPress(event: KeyboardEvent) {
-    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
+    if (
+      'Enter' !== event.key &&
+      !(event.altKey || event.metaKey || event.ctrlKey) &&
+      !/[0-9,\.\/-]+/.test(event.key)
+    ) {
      event.preventDefault()
    }
  }
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.html
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.html
@ -1,12 +1,16 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-        <label *ngIf="title" class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-        <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div [class.col-md-9]="horizontal">
        <div>
@ -44,7 +48,9 @@
              </ng-template>
            </ng-select>
          </div>
-        <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+          @if (hint) {
+            <small class="form-text text-muted">{{hint}}</small>
+          }
        </div>
      </div>
    </div>
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.scss
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.scss
@ -1,7 +1,11 @@
-::ng-deep .ng-select-container .ng-value-container .ng-value {
+::ng-deep .ng-select-container .ng-value-container {
+    overflow: hidden;
+
+    .ng-value {
        background-color: transparent !important;
        border-color: transparent;
    }
+}

 .sidebaricon {
    cursor: pointer;
@ -9,6 +13,4 @@

 .badge {
    font-size: .75rem;
-    // --bs-primary: var(--pngx-bg-alt);
-    // color: var(--pngx-primary-text-contrast);
 }
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.spec.ts
@ -20,6 +20,10 @@ const documents = [
    id: 12,
    title: 'Document 12 bar',
  },
+  {
+    id: 16,
+    title: 'Document 16 bar',
+  },
  {
    id: 23,
    title: 'Document 23 bar',
@ -48,10 +52,15 @@ describe('DocumentLinkComponent', () => {
    fixture.detectChanges()
  })

-  it('should retrieve selected documents from APIs', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+  it('should retrieve selected documents from API', () => {
+    const getSpy = jest.spyOn(documentService, 'getFew')
    getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
    })
    component.writeValue([1])
    expect(getSpy).toHaveBeenCalled()
@ -85,12 +94,18 @@ describe('DocumentLinkComponent', () => {
  })

  it('should load values correctly', () => {
-    jest.spyOn(documentService, 'getCachedMany').mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+    const getSpy = jest.spyOn(documentService, 'getFew')
+    getSpy.mockImplementation((ids) => {
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
    })
    component.writeValue([12, 23])
    expect(component.value).toEqual([12, 23])
-    expect(component.selectedDocuments).toEqual([documents[1], documents[2]])
+    expect(component.selectedDocuments).toEqual([documents[1], documents[3]])
    component.writeValue(null)
    expect(component.value).toEqual([])
    expect(component.selectedDocuments).toEqual([])
@ -100,9 +115,14 @@ describe('DocumentLinkComponent', () => {
  })

  it('should support unselect', () => {
-    const getSpy = jest.spyOn(documentService, 'getCachedMany')
+    const getSpy = jest.spyOn(documentService, 'getFew')
    getSpy.mockImplementation((ids) => {
-      return of(documents.filter((d) => ids.includes(d.id)))
+      const docs = documents.filter((d) => ids.includes(d.id))
+      return of({
+        count: docs.length,
+        all: docs.map((d) => d.id),
+        results: docs,
+      })
    })
    component.writeValue([12, 23])
    component.unselect({ id: 23 })
@ -115,4 +135,26 @@ describe('DocumentLinkComponent', () => {
    expect(component.compareDocuments(documents[0], { id: 2 })).toBeFalsy()
    expect(component.trackByFn(documents[1])).toEqual(12)
  })
+
+  it('should not include the current document or already selected documents in results', () => {
+    let foundDocs
+    component.foundDocuments$.subscribe((found) => (foundDocs = found))
+    component.parentDocumentID = 23
+    component.selectedDocuments = [documents[2]]
+    const listSpy = jest.spyOn(documentService, 'listFiltered')
+    listSpy.mockImplementation(
+      (page, pageSize, sortField, sortReverse, filterRules, extraParams) => {
+        const docs = documents.filter((d) =>
+          d.title.includes(filterRules[0].value)
+        )
+        return of({
+          count: docs.length,
+          results: docs,
+          all: docs.map((d) => d.id),
+        })
+      }
+    )
+    component.documentsInput$.next('bar')
+    expect(foundDocs).toEqual([documents[1]])
+  })
 })
--- a/src-ui/src/app/components/common/input/document-link/document-link.component.ts
+++ b/src-ui/src/app/components/common/input/document-link/document-link.component.ts
@ -13,7 +13,7 @@ import {
  catchError,
 } from 'rxjs'
 import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
-import { PaperlessDocument } from 'src/app/data/paperless-document'
+import { Document } from 'src/app/data/document'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { AbstractInputComponent } from '../abstract-input'

@ -34,15 +34,18 @@ export class DocumentLinkComponent
  implements OnInit, OnDestroy
 {
  documentsInput$ = new Subject<string>()
-  foundDocuments$: Observable<PaperlessDocument[]>
+  foundDocuments$: Observable<Document[]>
  loading = false
-  selectedDocuments: PaperlessDocument[] = []
+  selectedDocuments: Document[] = []

  private unsubscribeNotifier: Subject<any> = new Subject()

  @Input()
  notFoundText: string = $localize`No documents found`

+  @Input()
+  parentDocumentID: number
+
  constructor(private documentsService: DocumentService) {
    super()
  }
@ -58,11 +61,11 @@ export class DocumentLinkComponent
    } else {
      this.loading = true
      this.documentsService
-        .getCachedMany(documentIDs)
+        .getFew(documentIDs, { fields: 'id,title' })
        .pipe(takeUntil(this.unsubscribeNotifier))
-        .subscribe((documents) => {
+        .subscribe((documentResults) => {
          this.loading = false
-          this.selectedDocuments = documents
+          this.selectedDocuments = documentResults.results
          super.writeValue(documentIDs)
        })
    }
@ -86,7 +89,13 @@ export class DocumentLinkComponent
              { truncate_content: true }
            )
            .pipe(
-              map((results) => results.results),
+              map((results) =>
+                results.results.filter(
+                  (d) =>
+                    d.id !== this.parentDocumentID &&
+                    !this.selectedDocuments.find((sd) => sd.id === d.id)
+                )
+              ),
              catchError(() => of([])), // empty on error
              tap(() => (this.loading = false))
            )
@ -95,21 +104,18 @@ export class DocumentLinkComponent
    )
  }

-  unselect(document: PaperlessDocument): void {
+  unselect(document: Document): void {
    this.selectedDocuments = this.selectedDocuments.filter(
      (d) => d.id !== document.id
    )
    this.onChange(this.selectedDocuments.map((d) => d.id))
  }

-  compareDocuments(
-    document: PaperlessDocument,
-    selectedDocument: PaperlessDocument
-  ) {
+  compareDocuments(document: Document, selectedDocument: Document) {
    return document.id === selectedDocument.id
  }

-  trackByFn(item: PaperlessDocument) {
+  trackByFn(item: Document) {
    return item.id
  }

--- a/src-ui/src/app/components/common/input/number/number.component.html
+++ b/src-ui/src/app/components/common/input/number/number.component.html
@ -2,21 +2,27 @@
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div class="position-relative" [class.col-md-9]="horizontal">
        <div class="input-group" [class.is-invalid]="error">
          <input #inputField type="number" class="form-control" [step]="step" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
-        <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+          @if (showAdd) {
+            <button class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+          }
        </div>
        <div class="invalid-feedback position-absolute top-100">
          {{error}}
        </div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/common/input/password/password.component.html
+++ b/src-ui/src/app/components/common/input/password/password.component.html
@ -2,14 +2,18 @@
  <label class="form-label" [for]="inputId">{{title}}</label>
  <div class="input-group" [class.is-invalid]="error">
    <input #inputField [type]="showReveal && textVisible ? 'text' : 'password'" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (focus)="onFocus()" (focusout)="onFocusOut()" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
-    <button *ngIf="showReveal" type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
+    @if (showReveal) {
+      <button type="button" class="btn btn-outline-secondary" (click)="toggleVisibility()" i18n-title title="Show password" [disabled]="disabled || disableRevealToggle">
        <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#eye" />
        </svg>
      </button>
+    }
  </div>
  <div class="invalid-feedback">
    {{error}}
  </div>
-  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  @if (hint) {
+    <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+  }
 </div>
--- a/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html
+++ b/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.html
@ -1,16 +1,23 @@
-<ng-container *ngIf="!accordion">
+@if (!accordion) {
  <h5 i18n>Permissions</h5>
  <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
-</ng-container>
-<ng-container *ngIf="accordion">
-  <ngb-accordion #acc="ngbAccordion" activeIds="">
-    <ngb-panel i18n-title title="Edit Permissions">
-      <ng-template ngbPanelContent>
+}
+@if (accordion) {
+  <div ngbAccordion activeIds="">
+    <div ngbAccordionItem>
+      <h2 ngbAccordionHeader>
+        <button ngbAccordionButton i18n>Edit Permissions</button>
+      </h2>
+      <div ngbAccordionCollapse>
+        <div ngbAccordionBody>
+          <ng-template>
            <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
          </ng-template>
-    </ngb-panel>
-  </ngb-accordion>
-</ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+}

 <ng-template #permissionsForm>
  <div [formGroup]="form">
--- a/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-form/permissions-form.component.ts
@ -1,6 +1,6 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { FormControl, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import { AbstractInputComponent } from '../../abstract-input'

 export interface PermissionsFormObject {
@ -34,7 +34,7 @@ export class PermissionsFormComponent
  implements OnInit
 {
  @Input()
-  users: PaperlessUser[]
+  users: User[]

  @Input()
  accordion: boolean = false
--- a/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-group/permissions-group.component.ts
@ -1,7 +1,7 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { first } from 'rxjs/operators'
-import { PaperlessGroup } from 'src/app/data/paperless-group'
+import { Group } from 'src/app/data/group'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { AbstractInputComponent } from '../../abstract-input'

@ -17,8 +17,8 @@ import { AbstractInputComponent } from '../../abstract-input'
  templateUrl: './permissions-group.component.html',
  styleUrls: ['./permissions-group.component.scss'],
 })
-export class PermissionsGroupComponent extends AbstractInputComponent<PaperlessGroup> {
-  groups: PaperlessGroup[]
+export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
+  groups: Group[]

  constructor(groupService: GroupService) {
    super()
--- a/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts
+++ b/src-ui/src/app/components/common/input/permissions/permissions-user/permissions-user.component.ts
@ -1,7 +1,7 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { first } from 'rxjs/operators'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { AbstractInputComponent } from '../../abstract-input'
@ -18,10 +18,8 @@ import { AbstractInputComponent } from '../../abstract-input'
  templateUrl: './permissions-user.component.html',
  styleUrls: ['./permissions-user.component.scss'],
 })
-export class PermissionsUserComponent extends AbstractInputComponent<
-  PaperlessUser[]
-> {
-  users: PaperlessUser[]
+export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
+  users: User[]

  constructor(userService: UserService, settings: SettingsService) {
    super()
--- a/src-ui/src/app/components/common/input/select/select.component.html
+++ b/src-ui/src/app/components/common/input/select/select.component.html
@ -1,12 +1,16 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      <label *ngIf="title" class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div [class.col-md-9]="horizontal">
        <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
@ -30,28 +34,39 @@
            (focus)="clearLastSearchTerm()"
            (clear)="clearLastSearchTerm()"
            (blur)="onBlur()">
+            <ng-template ng-option-tmp let-item="item">
+                <span [title]="item.name">{{item.name}}</span>
+            </ng-template>
          </ng-select>
-        <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
+          @if (allowCreateNew) {
+            <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
              <svg class="buttonicon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#plus" />
              </svg>
            </button>
-        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
+          }
+          @if (showFilter) {
+            <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
              <svg class="buttonicon" fill="currentColor">
                <use xlink:href="assets/bootstrap-icons.svg#filter" />
              </svg>
            </button>
+          }
        </div>
        <div class="invalid-feedback">
          {{error}}
        </div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0">
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+        @if (getSuggestions().length > 0) {
+          <small>
            <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let s of getSuggestions()">
+            @for (s of getSuggestions(); track s) {
              <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
-        </ng-container>
+            }
          </small>
+        }
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/common/input/select/select.component.spec.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.spec.ts
@ -10,7 +10,7 @@ import {
  NG_VALUE_ACCESSOR,
 } from '@angular/forms'
 import { SelectComponent } from './select.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import {
  DEFAULT_MATCHING_ALGORITHM,
  MATCH_ALL,
@ -18,7 +18,7 @@ import {
 import { NgSelectModule } from '@ng-select/ng-select'
 import { RouterTestingModule } from '@angular/router/testing'

-const items: PaperlessTag[] = [
+const items: Tag[] = [
  {
    id: 1,
    name: 'Tag1',
--- a/src-ui/src/app/components/common/input/select/select.component.ts
+++ b/src-ui/src/app/components/common/input/select/select.component.ts
@ -122,7 +122,7 @@ export class SelectComponent extends AbstractInputComponent<number> {
    }
  }

-  addItem(name: string) {
+  addItem(name: string = null) {
    if (name) this.createNew.next(name)
    else this.createNew.next(this._lastSearchTerm)
    this.clearLastSearchTerm()
--- a/src-ui/src/app/components/common/input/tags/tags.component.html
+++ b/src-ui/src/app/components/common/input/tags/tags.component.html
@ -21,33 +21,45 @@
              <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="assets/bootstrap-icons.svg#x"/>
              </svg>
-              <pngx-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
+              @if (item.id && tags) {
+                <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
+              }
            </span>
          </ng-template>
          <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
            <div class="tag-wrap">
-              <pngx-tag *ngIf="item.id && tags" class="me-2" [tag]="getTag(item.id)"></pngx-tag>
+              @if (item.id && tags) {
+                <pngx-tag class="me-2" [tag]="getTag(item.id)"></pngx-tag>
+              }
            </div>
          </ng-template>
        </ng-select>
-        <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
+        @if (allowCreate) {
+          <button class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
            <svg class="buttonicon" fill="currentColor">
              <use xlink:href="assets/bootstrap-icons.svg#plus" />
            </svg>
          </button>
-        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
+        }
+        @if (showFilter) {
+          <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
            <svg class="buttonicon" fill="currentColor">
              <use xlink:href="assets/bootstrap-icons.svg#filter" />
            </svg>
          </button>
+        }
      </div>
-      <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0" class="position-absolute top-100">
+      @if (hint) {
+        <small class="form-text text-muted">{{hint}}</small>
+      }
+      @if (getSuggestions().length > 0) {
+        <small class="position-absolute top-100">
          <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let tag of getSuggestions()">
+          @for (tag of getSuggestions(); track tag) {
            <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
-        </ng-container>
+          }
        </small>
+      }
    </div>
  </div>
 </div>
--- a/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.spec.ts
@ -1,21 +1,16 @@
-import {
-  ComponentFixture,
-  TestBed,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
  FormsModule,
  ReactiveFormsModule,
  NG_VALUE_ACCESSOR,
 } from '@angular/forms'
 import { TagsComponent } from './tags.component'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import {
  DEFAULT_MATCHING_ALGORITHM,
  MATCH_ALL,
 } from 'src/app/data/matching-model'
-import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
+import { NgSelectModule } from '@ng-select/ng-select'
 import { RouterTestingModule } from '@angular/router/testing'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { of } from 'rxjs'
@ -36,7 +31,7 @@ import { PermissionsFormComponent } from '../permissions/permissions-form/permis
 import { SelectComponent } from '../select/select.component'
 import { SettingsService } from 'src/app/services/settings.service'

-const tags: PaperlessTag[] = [
+const tags: Tag[] = [
  {
    id: 1,
    name: 'Tag1',
--- a/src-ui/src/app/components/common/input/tags/tags.component.ts
+++ b/src-ui/src/app/components/common/input/tags/tags.component.ts
@ -9,7 +9,7 @@ import {
 } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { PaperlessTag } from 'src/app/data/paperless-tag'
+import { Tag } from 'src/app/data/tag'
 import { TagEditDialogComponent } from '../../edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { TagService } from 'src/app/services/rest/tag.service'
 import { EditDialogMode } from '../../edit-dialog/edit-dialog.component'
@ -81,13 +81,13 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
  horizontal: boolean = false

  @Output()
-  filterDocuments = new EventEmitter<PaperlessTag[]>()
+  filterDocuments = new EventEmitter<Tag[]>()

  @ViewChild('tagSelect') select: NgSelectComponent

  value: number[] = []

-  tags: PaperlessTag[] = []
+  tags: Tag[] = []

  public createTagRef: (name) => void

--- a/src-ui/src/app/components/common/input/text/text.component.html
+++ b/src-ui/src/app/components/common/input/text/text.component.html
@ -2,15 +2,19 @@
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div class="position-relative" [class.col-md-9]="horizontal">
        <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
-      <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        @if (hint) {
+          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        }
        <div class="invalid-feedback position-absolute top-100">
          {{error}}
        </div>
--- a/src-ui/src/app/components/common/input/url/url.component.html
+++ b/src-ui/src/app/components/common/input/url/url.component.html
@ -2,11 +2,13 @@
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-        <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
          <svg class="sidebaricon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
          </button>
+        }
      </div>
      <div [class.col-md-9]="horizontal">
        <div class="input-group" [class.is-invalid]="error">
@ -20,7 +22,9 @@
            {{error}}
          </div>
        </div>
-        <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        @if (hint) {
+          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        }
      </div>
    </div>
  </div>
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@ -2,7 +2,9 @@
  <div class="col-md text-truncate">
    <h3 class="text-truncate" style="line-height: 1.4">
      {{title}}
-      <span *ngIf="subTitle" class="h6 mb-0 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 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
+      }
    </h3>
  </div>
  <div class="btn-toolbar col col-md-auto">
--- a/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts
+++ b/src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.ts
@ -36,15 +36,6 @@ import { PDFSinglePageViewer } from 'pdfjs-dist/web/pdf_viewer'

 PDFJS['verbosity'] = PDFJS.VerbosityLevel.ERRORS

-// Yea this is a straight hack
-declare global {
-  interface WeakKeyTypes {
-    symbol: Object
-  }
-
-  type WeakKey = WeakKeyTypes[keyof WeakKeyTypes]
-}
-
 export enum RenderTextMode {
  DISABLED,
  ENABLED,
--- a/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.html
+++ b/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.html
@ -5,7 +5,9 @@
 </div>
 <div class="modal-body">

-    <p *ngIf="!object && message" class="mb-3" [innerHTML]="message | safeHtml"></p>
+  @if (!object && message) {
+    <p class="mb-3" [innerHTML]="message | safeHtml"></p>
+  }

  <form [formGroup]="form">
    <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
@ -13,10 +15,10 @@

 </div>
 <div class="modal-footer">
-    <ng-container *ngIf="!buttonsEnabled">
+  @if (!buttonsEnabled) {
    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
    <span class="visually-hidden" i18n>Loading...</span>
-    </ng-container>
+  }
  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
  <button type="button" class="btn btn-primary" (click)="confirmClicked.emit(permissions)" [disabled]="!buttonsEnabled" i18n>Confirm</button>
 </div>
--- a/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts
+++ b/src-ui/src/app/components/common/permissions-dialog/permissions-dialog.component.ts
@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import { UserService } from 'src/app/services/rest/user.service'

@Component({
@ -11,7 +11,7 @@ import { UserService } from 'src/app/services/rest/user.service'
  styleUrls: ['./permissions-dialog.component.scss'],
 })
 export class PermissionsDialogComponent {
-  users: PaperlessUser[]
+  users: User[]
  private o: ObjectWithPermissions = undefined

  constructor(
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html
@ -10,9 +10,11 @@
    <div class="list-group list-group-flush">
      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
        <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE" fill="currentColor" class="buttonicon-sm">
+          @if (selectionModel.ownerFilter === OwnerFilterType.NONE) {
+            <svg fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>
+          }
        </div>
        <div class="me-1">
          <small i18n>All</small>
@ -20,9 +22,11 @@
      </button>
      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
        <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.SELF" fill="currentColor" class="buttonicon-sm">
+          @if (selectionModel.ownerFilter === OwnerFilterType.SELF) {
+            <svg fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>
+          }
        </div>
        <div class="me-1">
          <small i18n>My documents</small>
@ -30,19 +34,35 @@
      </button>
      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
        <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" fill="currentColor" class="buttonicon-sm">
+          @if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+            <svg fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>
+          }
        </div>
        <div class="me-1">
          <small i18n>Shared with me</small>
        </div>
      </button>
-            <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
+      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
        <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.UNOWNED" fill="currentColor" class="buttonicon-sm">
+          @if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) {
+            <svg fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>
+          }
+        </div>
+        <div class="me-1">
+          <small i18n>Shared by me</small>
+        </div>
+      </button>
+      <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
+        <div class="selected-icon me-1">
+          @if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+            <svg fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#check"/>
+            </svg>
+          }
        </div>
        <div class="me-1">
          <small i18n>Unowned</small>
@ -50,9 +70,11 @@
      </button>
      <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
        <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.OTHERS" fill="currentColor" class="buttonicon-sm">
+          @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
+            <svg fill="currentColor" class="buttonicon-sm">
              <use xlink:href="assets/bootstrap-icons.svg#check"/>
            </svg>
+          }
        </div>
        <div class="me-1 w-100">
          <ng-select
@ -71,12 +93,14 @@
          </ng-select>
        </div>
      </button>
-            <div *ngIf="selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
+      @if (selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+        <div class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
          <div class="form-check form-switch w-100">
            <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (change)="onChange()" [disabled]="disabled">
            <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
          </div>
        </div>
+      }
    </div>
  </div>
 </div>
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.spec.ts
@ -145,6 +145,15 @@ describe('PermissionsFilterDropdownComponent', () => {
      userID: null,
    })

+    component.setFilter(OwnerFilterType.SHARED_BY_ME)
+    expect(ownerFilterSetResult).toEqual({
+      excludeUsers: [],
+      hideUnowned: false,
+      includeUsers: [],
+      ownerFilter: OwnerFilterType.SHARED_BY_ME,
+      userID: currentUserID,
+    })
+
    component.setFilter(OwnerFilterType.UNOWNED)
    expect(ownerFilterSetResult).toEqual({
      excludeUsers: [],
--- a/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
+++ b/src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.ts
@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { first } from 'rxjs'
-import { PaperlessUser } from 'src/app/data/paperless-user'
+import { User } from 'src/app/data/user'
 import {
  PermissionAction,
  PermissionType,
@ -32,6 +32,7 @@ export enum OwnerFilterType {
  NOT_SELF = 2,
  OTHERS = 3,
  UNOWNED = 4,
+  SHARED_BY_ME = 5,
 }

@Component({
@ -54,7 +55,7 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
  @Output()
  ownerFilterSet = new EventEmitter<PermissionsSelectionModel>()

-  users: PaperlessUser[]
+  users: User[]

  hideUnowned: boolean

@ -108,6 +109,13 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
      this.selectionModel.includeUsers = []
      this.selectionModel.excludeUsers = []
      this.selectionModel.hideUnowned = false
+    } else if (
+      this.selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME
+    ) {
+      this.selectionModel.userID = this.settingsService.currentUser.id
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
    } else if (this.selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
      this.selectionModel.userID = null
      this.selectionModel.includeUsers = []
--- a/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
+++ b/src-ui/src/app/components/common/permissions-select/permissions-select.component.html
@ -9,19 +9,23 @@
      <div class="col" i18n>Delete</div>
      <div class="col" i18n>View</div>
    </li>
-    <li class="list-group-item d-flex" *ngFor="let type of PermissionType | keyvalue" [formGroupName]="type.key">
+    @for (type of PermissionType | keyvalue; track type) {
+      <li class="list-group-item d-flex" [formGroupName]="type.key">
        <div class="col-3">{{type.key}}:</div>
-
        <div class="col form-check form-check-inline form-switch" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key)" placement="left" triggers="mouseenter:mouseleave">
          <input type="checkbox" class="form-check-input" id="{{type.key}}_all" (change)="toggleAll($event, type.key)" [checked]="typesWithAllActions.has(type.key) || isInherited(type.key)" [attr.disabled]="disabled || isInherited(type.key) ? true : null">
          <label class="form-check-label visually-hidden" for="{{type.key}}_all" i18n>All</label>
        </div>
-
-      <div *ngFor="let action of PermissionAction | keyvalue" class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
+        @for (action of PermissionAction | keyvalue; track action) {
+          <div class="col form-check form-check-inline" [ngbPopover]="inheritedWarning" [disablePopover]="!isInherited(type.key, action.key)" placement="left" triggers="mouseenter:mouseleave">
            <input type="checkbox" class="form-check-input" id="{{type.key}}_{{action.key}}" formControlName="{{action.key}}">
            <label class="form-check-label visually-hidden" for="{{type.key}}_{{action.key}}" i18n>{{action.key}}</label>
          </div>
+        }
      </li>
-    <div *ngIf="error" class="invalid-feedback d-block">{{error}}</div>
+    }
+    @if (error) {
+      <div class="invalid-feedback d-block">{{error}}</div>
+    }
  </ul>
 </form>
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@ -0,0 +1,28 @@
+<div class="preview-popup-container">
+  @if (error) {
+    <div class="w-100 h-100 position-relative">
+      <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>
+    </div>
+  } @else {
+    @if (renderAsObject) {
+      <object [data]="previewURL | safeUrl" width="100%" class="bg-light" [class.p-2]="!isPdf"></object>
+    } @else {
+      @if (requiresPassword) {
+        <div class="w-100 h-100 position-relative">
+          <svg width="2em" height="2em" fill="currentColor" class="position-absolute top-50 start-50 translate-middle">
+            <use xlink:href="assets/bootstrap-icons.svg#file-earmark-lock"/>
+          </svg>
+        </div>
+      }
+      @if (!requiresPassword) {
+        <pngx-pdf-viewer
+          [src]="previewURL"
+          [original-size]="false"
+          [show-borders]="true"
+          [show-all]="true"
+          (error)="onError($event)">
+        </pngx-pdf-viewer>
+      }
+    }
+  }
+</div>
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.scss
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.scss
@ -0,0 +1,9 @@
+.preview-popup-container > * {
+    width: 30rem !important;
+    height: 22rem !important;
+    overflow-y: scroll;
+}
+
+::ng-deep .popover.popover-preview {
+    max-width: 32rem;
+}
--- a/Show More
+++ b/Show More