Merge branch 'dev'

.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

.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:
 

.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"
 

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.

Dockerfile

@@ -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 \

Pipfile

@@ -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

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

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.

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

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`:
 

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
 

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": {

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()

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"
   }
 }

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

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

src-ui/src/app/app.component.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'

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,

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">
-    <a ngbNavLink>
-      {{logFile}}.log
-    </a>
-  </li>
-  <div *ngIf="isLoading || !logFiles.length" 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>
-  </div>
+  @for (logFile of logFiles; track logFile) {
+    <li [ngbNavItem]="logFile">
+      <a ngbNavLink>
+        {{logFile}}.log
+      </a>
+    </li>
+  }
+  @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>
+      @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">
-    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-    <ng-container i18n>Loading...</ng-container>
-  </div>
-  <p
-    class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    *ngFor="let log of logs">{{log}}</p>
+  @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)}}"
+    >{{log}}</p>
+  }
 </div>

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() {

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

@@ -1,10 +1,10 @@
 <pngx-page-header title="Settings" i18n-title>
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()"><ng-container i18n>Start tour</ng-container></button>
   <a *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Admin }" class="btn btn-sm btn-primary ms-3" href="admin/" target="_blank">
-      <ng-container i18n>Open Django Admin</ng-container>
-      <svg class="sidebaricon ms-1" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
-      </svg>
+    <ng-container i18n>Open Django Admin</ng-container>
+    <svg class="sidebaricon ms-1" fill="currentColor">
+      <use xlink:href="assets/bootstrap-icons.svg#arrow-up-right"/>
+    </svg>
   </a>
 </pngx-page-header>
 
@@ -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>
@@ -127,198 +137,202 @@
             <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
               <svg fill="currentColor" class="buttonicon-sm me-1">
                 <use xlink:href="assets/bootstrap-icons.svg#x"/>
-              </svg><ng-container i18n>Reset</ng-container>
-            </button>
+                </svg><ng-container i18n>Reset</ng-container>
+              </button>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
+          <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <p i18n>
               Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
               Actual updating of the app must still be performed manually.
             </p>
-            <p i18n>
+              <p i18n>
               <em>No tracking data is collected by the app in any way.</em>
             </p>
-            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+              <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" i18n>Bulk editing</h4>
+          <h4 class="mt-4" i18n>Bulk editing</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
-            <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
+              <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-        <h4 class="mt-4" i18n>Notes</h4>
+          <h4 class="mt-4" i18n>Notes</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
+            </div>
           </div>
-        </div>
 
-      </ng-template>
-    </li>
+        </ng-template>
+      </li>
 
-    <li [ngbNavItem]="SettingsNavIDs.Permissions">
-      <a ngbNavLink i18n>Permissions</a>
-      <ng-template ngbNavContent>
+      <li [ngbNavItem]="SettingsNavIDs.Permissions">
+        <a ngbNavLink i18n>Permissions</a>
+        <ng-template ngbNavContent>
 
-        <h4 i18n>Default Permissions</h4>
+          <h4 i18n>Default Permissions</h4>
 
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <p i18n>
               Settings apply to this user account for objects (Tags, Mail Rules, etc.) created via the web UI
             </p>
-          </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default Owner</span>
-          </div>
-          <div class="col-md-5">
-            <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
-            <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
-          </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default View Permissions</span>
-          </div>
-          <div class="col-md-5">
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Users:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-                  <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
-                </ng-container>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Groups:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
-                  <pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
-                </ng-container>
-              </div>
             </div>
           </div>
-        </div>
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Default Edit Permissions</span>
-          </div>
-          <div class="col-md-5">
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Users:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
-                  <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
-                </ng-container>
-              </div>
+          <div class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default Owner</span>
             </div>
-            <div class="row">
-              <div class="col-3">
-                <span class="d-block pt-1" i18n>Groups:</span>
-              </div>
-              <div class="col">
-                <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
-                  <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
-                </ng-container>
-              </div>
-            </div>
-            <div class="row">
-              <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+            <div class="col-md-5">
+              <pngx-input-select [items]="users" bindLabel="username" formControlName="defaultPermsOwner" [allowNull]="true"></pngx-input-select>
+              <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
             </div>
           </div>
-        </div>
-      </ng-template>
-    </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.Notifications">
-      <a ngbNavLink i18n>Notifications</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Document processing</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
-            <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
-            <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
-            <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
-          </div>
-        </div>
-
-      </ng-template>
-    </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews">
-      <a ngbNavLink i18n>Saved views</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Settings</h4>
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 i18n>Views</h4>
-        <div formGroupName="savedViews">
-
-            <div *ngFor="let view of savedViews" [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">
-                  <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                  <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+          <div class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default View Permissions</span>
+            </div>
+            <div class="col-md-5">
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Users:</span>
                 </div>
-                <div class="form-check form-switch">
-                  <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                  <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                    <pngx-permissions-user type="view" formControlName="defaultPermsViewUsers"></pngx-permissions-user>
+                  </ng-container>
                 </div>
               </div>
-
-              <div class="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 class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Groups:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                    <pngx-permissions-group type="view" formControlName="defaultPermsViewGroups"></pngx-permissions-group>
+                  </ng-container>
+                </div>
               </div>
             </div>
-
-            <div *ngIf="savedViews && savedViews.length === 0" i18n>No saved views defined.</div>
-
-            <div *ngIf="!savedViews">
-              <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 class="row mb-3">
+            <div class="col-md-3 col-form-label pt-0">
+              <span i18n>Default Edit Permissions</span>
             </div>
+            <div class="col-md-5">
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Users:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
+                    <pngx-permissions-user type="view" formControlName="defaultPermsEditUsers"></pngx-permissions-user>
+                  </ng-container>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-3">
+                  <span class="d-block pt-1" i18n>Groups:</span>
+                </div>
+                <div class="col">
+                  <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Group }">
+                    <pngx-permissions-group type="view" formControlName="defaultPermsEditGroups"></pngx-permissions-group>
+                  </ng-container>
+                </div>
+              </div>
+              <div class="row">
+                <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+              </div>
+            </div>
+          </div>
+        </ng-template>
+      </li>
 
-        </div>
+      <li [ngbNavItem]="SettingsNavIDs.Notifications">
+        <a ngbNavLink i18n>Notifications</a>
+        <ng-template ngbNavContent>
 
-      </ng-template>
-    </li>
-  </ul>
+          <h4 i18n>Document processing</h4>
 
-  <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
+              <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
+              <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
+              <pngx-input-check i18n-title title="Suppress notifications on dashboard" formControlName="notificationsConsumerSuppressOnDashboard" i18n-hint hint="This will suppress all messages about document processing status on the dashboard."></pngx-input-check>
+            </div>
+          </div>
 
-  <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
-</form>
+        </ng-template>
+      </li>
+
+      <li [ngbNavItem]="SettingsNavIDs.SavedViews">
+        <a ngbNavLink i18n>Saved views</a>
+        <ng-template ngbNavContent>
+
+          <h4 i18n>Settings</h4>
+          <div class="row mb-3">
+            <div class="offset-md-3 col">
+              <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+            </div>
+          </div>
+
+          <h4 i18n>Views</h4>
+          <div formGroupName="savedViews">
+
+            @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">
+                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
+                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
+                  </div>
+                  <div class="form-check form-switch">
+                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
+                    <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>
+            }
+
+            @if (savedViews && savedViews.length === 0) {
+              <div i18n>No saved views defined.</div>
+            }
+
+            @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>
+
+        </ng-template>
+      </li>
+    </ul>
+
+    <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>
+
+    <button type="submit" class="btn btn-primary mb-2" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" [disabled]="(isDirty$ | async) === false" i18n>Save</button>
+  </form>

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.`

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) => {

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

@@ -3,127 +3,153 @@
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <svg class="sidebaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#x"/>
-      </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
-    </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-      <svg class="sidebaricon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
-      </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
-    </button>
-    <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
-      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
-      <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
-    </div>
-  </div>
-</pngx-page-header>
+        </svg>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      </button>
+      <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+        <svg class="sidebaricon" fill="currentColor">
+          <use xlink:href="assets/bootstrap-icons.svg#check2-all"/>
+          </svg>&nbsp;<ng-container i18n>{{dismissButtonText}}</ng-container>
+        </button>
+        <div class="form-check form-switch mb-0" (click)="toggleAutoRefresh()">
+          <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" [attr.checked]="autoRefreshInterval">
+          <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
+        </div>
+      </div>
+    </pngx-page-header>
 
-<ng-container *ngIf="!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>
+    @if (!tasksService.completedFileTasks && tasksService.loading) {
+      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+      <div class="visually-hidden" i18n>Loading...</div>
+    }
 
-<ng-template let-tasks="tasks" #tasksTemplate>
-  <table class="table table-striped align-middle border shadow-sm">
-    <thead>
-      <tr>
-        <th scope="col">
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
-            <label class="form-check-label" for="all-tasks"></label>
-          </div>
-        </th>
-        <th scope="col" i18n>Name</th>
-        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
-        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab !== 'started' && activeTab !== 'queued'" 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">
-      <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
-        <td>
-          <div class="form-check">
-            <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
-            <label class="form-check-label" for="task{{task.id}}"></label>
-          </div>
-        </td>
-        <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
-        <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
-        <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();"
-            [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>
-          <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>
-          </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">
-              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-            </svg>
-          </button>
-        </td>
-        <td scope="row">
-          <div class="btn-group" role="group">
-            <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-              <svg class="sidebaricon" fill="currentColor">
-                <use xlink:href="assets/bootstrap-icons.svg#check"/>
-              </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();">
-                <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>
-      </tr>
-      <tr>
-        <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
-          <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
-        </td>
-      </tr>
-      </ng-container>
-    </tbody>
-  </table>
+    <ng-template let-tasks="tasks" #tasksTemplate>
+      <table class="table table-striped align-middle border shadow-sm">
+        <thead>
+          <tr>
+            <th scope="col">
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="all-tasks" [disabled]="currentTasks.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-tasks"></label>
+              </div>
+            </th>
+            <th scope="col" i18n>Name</th>
+            <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+            @if (activeTab !== 'started' && activeTab !== 'queued') {
+              <th scope="col" class="d-none d-lg-table-cell" i18n>Results</th>
+            }
+            <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+            <th scope="col" i18n>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
+            <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
+              <td>
+                <div class="form-check">
+                  <input type="checkbox" class="form-check-input" id="task{{task.id}}" [checked]="selectedTasks.has(task.id)" (click)="toggleSelected(task, $event); $event.stopPropagation();">
+                  <label class="form-check-label" for="task{{task.id}}"></label>
+                </div>
+              </td>
+              <td class="overflow-auto name-col">{{ task.task_file_name }}</td>
+              <td class="d-none d-lg-table-cell">{{ task.date_created | customDate:'short' }}</td>
+              @if (activeTab !== 'started' && activeTab !== 'queued') {
+                <td class="d-none d-lg-table-cell">
+                  @if (task.result?.length > 50) {
+                    <div class="result" (click)="expandTask(task); $event.stopPropagation();"
+                      [ngbPopover]="resultPopover" popoverClass="shadow small mobile" triggers="mouseenter:mouseleave" container="body">
+                      <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+                    </div>
+                  }
+                  @if (task.result?.length <= 50) {
+                    <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result }}</span>
+                  }
+                  <ng-template #resultPopover>
+                    <pre class="small mb-0">{{ task.result | slice:0:300 }}@if (task.result.length > 300) {
+                      &hellip;
+                    }</pre>
+                    @if (task.result?.length > 300) {
+                      <br/><em>(<ng-container i18n>click for full output</ng-container>)</em>
+                    }
+                  </ng-template>
+                </td>
+              }
+              <td class="d-lg-none">
+                <button class="btn btn-link" (click)="expandTask(task); $event.stopPropagation();">
+                  <svg fill="currentColor" class="" 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>
+                </button>
+              </td>
+              <td scope="row">
+                <div class="btn-group" role="group">
+                  <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
+                    <svg class="sidebaricon" fill="currentColor">
+                      <use xlink:href="assets/bootstrap-icons.svg#check"/>
+                      </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                    </button>
+                    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
+                      @if (task.related_document) {
+                        <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
+                          <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>
+                </tr>
+                <tr>
+                  <td class="p-0" [class.border-0]="expandedTask !== task.id" colspan="5">
+                    <pre #collapse="ngbCollapse" [ngbCollapse]="expandedTask !== task.id" class="small mb-0"><div class="small p-1 p-lg-3 ms-lg-3">{{ task.result }}</div></pre>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
 
-  <div class="pb-3 d-sm-flex justify-content-between align-items-center">
-    <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>
-  </div>
-</ng-template>
+          <div class="pb-3 d-sm-flex justify-content-between align-items-center">
+            @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>
-    <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>
-    <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>
-    <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>
-    <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
-    </ng-template>
-  </li>
-</ul>
-<div [ngbNavOutlet]="nav"></div>
+        <ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
+          <li ngbNavItem="failed">
+            <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
+<span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="completed">
+            <a ngbNavLink i18n>Complete@if (tasksService.completedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="started">
+            <a ngbNavLink i18n>Started@if (tasksService.startedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+          <li ngbNavItem="queued">
+            <a ngbNavLink i18n>Queued@if (tasksService.queuedFileTasks.length > 0) {
+<span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
+}</a>
+            <ng-template ngbNavContent>
+              <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+            </ng-template>
+          </li>
+        </ul>
+        <div [ngbNavOutlet]="nav"></div>

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) {

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

@@ -1,97 +1,104 @@
 <pngx-page-header title="Users & Groups" i18n-title>
 </pngx-page-header>
 
-<ng-container *ngIf="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 }">
-        <svg class="sidebaricon me-1" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-        </svg>
-        <ng-container i18n>Add User</ng-container>
-        </button>
-    </h4>
-    <ul class="list-group">
-        <li class="list-group-item">
+@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 }">
+      <svg class="sidebaricon me-1" fill="currentColor">
+        <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
+      </svg>
+      <ng-container i18n>Add User</ng-container>
+    </button>
+  </h4>
+  <ul class="list-group">
+    <li class="list-group-item">
+      <div class="row">
+        <div class="col" i18n>Username</div>
+        <div class="col" i18n>Name</div>
+        <div class="col" i18n>Groups</div>
+        <div class="col" i18n>Actions</div>
+      </div>
+    </li>
+    @for (user of users; track user) {
+      <li class="list-group-item">
         <div class="row">
-            <div class="col" i18n>Username</div>
-            <div class="col" i18n>Name</div>
-            <div class="col" i18n>Groups</div>
-            <div class="col" i18n>Actions</div>
-        </div>
-        </li>
-
-        <li *ngFor="let user of users" 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>
-            <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
-            <div class="col">
+          <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>
+          <div class="col d-flex align-items-center">{{user.groups?.map(getGroupName, this).join(', ')}}</div>
+          <div class="col">
             <div class="btn-group">
-                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                    </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+              <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
+                <svg class="buttonicon-sm" fill="currentColor">
+                  <use xlink:href="assets/bootstrap-icons.svg#pencil" />
+                  </svg>&nbsp;<ng-container i18n>Edit</ng-container>
                 </button>
                 <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                  <svg class="buttonicon-sm" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#trash" />
                     </svg>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
+                  </button>
+                </div>
+              </div>
             </div>
-            </div>
-        </div>
-        </li>
-    </ul>
-</ng-container>
+          </li>
+        }
+      </ul>
+    }
 
-<ng-container *ngIf="groups">
-    <h4 class="mt-4 d-flex">
+    @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 }">
-        <svg class="sidebaricon me-1" fill="currentColor">
+          <svg class="sidebaricon me-1" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#plus-circle" />
-        </svg>
-        <ng-container i18n>Add Group</ng-container>
+          </svg>
+          <ng-container i18n>Add Group</ng-container>
         </button>
-    </h4>
-    <ul *ngIf="groups.length > 0" class="list-group">
-        <li class="list-group-item">
-        <div class="row">
-            <div class="col" i18n>Name</div>
-            <div class="col"></div>
-            <div class="col"></div>
-            <div class="col" i18n>Actions</div>
-        </div>
-        </li>
-
-        <li *ngFor="let group of groups" 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>
-            <div class="col"></div>
-            <div class="col">
-            <div class="btn-group">
-                <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                    <svg class="buttonicon-sm" fill="currentColor">
+      </h4>
+      @if (groups.length > 0) {
+        <ul class="list-group">
+          <li class="list-group-item">
+            <div class="row">
+              <div class="col" i18n>Name</div>
+              <div class="col"></div>
+              <div class="col"></div>
+              <div class="col" i18n>Actions</div>
+            </div>
+          </li>
+          @for (group of groups; track group) {
+            <li class="list-group-item">
+              <div class="row">
+                <div class="col d-flex align-items-center"><button class="btn btn-link p-0" type="button" (click)="editGroup(group)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.Group)">{{group.name}}</button></div>
+                <div class="col"></div>
+                <div class="col"></div>
+                <div class="col">
+                  <div class="btn-group">
+                    <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
+                      <svg class="buttonicon-sm" fill="currentColor">
                         <use xlink:href="assets/bootstrap-icons.svg#pencil" />
-                    </svg>&nbsp;<ng-container i18n>Edit</ng-container>
-                </button>
-                <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                    <svg class="buttonicon-sm" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#trash" />
-                    </svg>&nbsp;<ng-container i18n>Delete</ng-container>
-                </button>
-            </div>
-            </div>
-        </div>
-        </li>
-        <li *ngIf="groups.length === 0" class="list-group-item" i18n>No groups defined</li>
-    </ul>
+                        </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+                      </button>
+                      <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
+                        <svg class="buttonicon-sm" fill="currentColor">
+                          <use xlink:href="assets/bootstrap-icons.svg#trash" />
+                          </svg>&nbsp;<ng-container i18n>Delete</ng-container>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              }
+              @if (groups.length === 0) {
+                <li class="list-group-item" i18n>No groups defined</li>
+              }
+            </ul>
+          }
+        }
 
-</ng-container>
-
-<div *ngIf="!users || !groups">
-    <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-    <div class="visually-hidden" i18n>Loading...</div>
-</div>
+        @if (!users || !groups) {
+          <div>
+            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+            <div class="visually-hidden" i18n>Loading...</div>
+          </div>
+        }

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

@@ -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([]),
         })
       )
     }

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

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"/>
+        <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()">
-        <svg fill="currentColor" class="buttonicon-sm me-1">
-          <use xlink:href="assets/bootstrap-icons.svg#x"/>
-        </svg>
-      </button>
+        [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">
@@ -31,7 +39,7 @@
           {{this.settingsService.displayName}}
         </span>
         <svg width="1.3em" height="1.3em" fill="currentColor">
-          <use xlink:href="assets/bootstrap-icons.svg#person-circle"/>
+          <use xlink:href="assets/bootstrap-icons.svg#person-circle" />
         </svg>
       </button>
       <div ngbDropdownMenu class="dropdown-menu-end shadow me-2" aria-labelledby="userDropdown">
@@ -41,23 +49,25 @@
         </div>
         <button ngbDropdownItem class="nav-link" (click)="editProfile()">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#person"/>
+            <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"/>
+            <use xlink:href="assets/bootstrap-icons.svg#gear" />
           </svg><ng-container i18n>Settings</ng-container>
         </a>
         <a ngbDropdownItem class="nav-link" href="accounts/logout/" (click)="onLogout()">
           <svg class="sidebaricon me-2" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#door-open"/>
+            <use xlink:href="assets/bootstrap-icons.svg#door-open" />
           </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">
+        <div class="dropdown-divider"></div>
+        <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"/>
+            <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
           </svg><ng-container i18n>Documentation</ng-container>
         </a>
       </div>
@@ -67,81 +77,108 @@
 
 <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"/>
+                <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"/>
+                <use xlink:href="assets/bootstrap-icons.svg#files" />
               </svg><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
             </a>
           </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'>
-            <span i18n>Saved views</span>
-            <div *ngIf="savedViewService.loading" class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-          </h6>
+          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 mt-3 mb-1 text-muted">
+              <span i18n>Saved views</span>
+              @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)"
-              (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">
-                <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>
-                <svg class="sidebaricon text-muted" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#grip-vertical"/>
-                </svg>
-              </div>
-            </li>
+            @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">
+                  <svg class="sidebaricon" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#funnel" />
+                  </svg><span>&nbsp;{{view.name}}</span>
+                </a>
+                @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'>
-            <span i18n>Open documents</span>
-          </h6>
+          @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">
-                <svg class="sidebaricon" fill="currentColor">
-                  <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                </svg><span>&nbsp;{{d.title | documentTitle}}</span>
-                <span class="close" (click)="closeDocument(d); $event.preventDefault()">
-                  <svg fill="currentColor" class="toolbaricon">
-                    <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                  </svg>
-                </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">
-                <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>
+            @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>
+                  <span class="close" (click)="closeDocument(d); $event.preventDefault()">
+                    <svg fill="currentColor" class="toolbaricon">
+                      <use xlink:href="assets/bootstrap-icons.svg#x" />
+                    </svg>
+                  </span>
+                </a>
+              </li>
+            }
+            @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,52 +186,72 @@
           <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+                <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"/>
+                <use xlink:href="assets/bootstrap-icons.svg#envelope" />
               </svg><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
             </a>
           </li>
@@ -204,92 +261,125 @@
           <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"/>
+                <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"/>
+                <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>
+                <use xlink:href="assets/bootstrap-icons.svg#list-task" />
+              </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"/>
+                <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"/>
+                <use xlink:href="assets/bootstrap-icons.svg#question-circle" />
               </svg><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
             </a>
           </li>
           <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
             <div class="px-3 py-0 text-muted small d-flex align-items-center flex-wrap">
               <div class="me-3">
-                <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer" href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <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">
-                <ng-template #updateAvailablePopContent>
-                  <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is available.</ng-container><br/><ng-container i18n>Click to view.</ng-container></span>
-                </ng-template>
-                <ng-template #updateCheckingNotEnabledPopContent>
-                  <p class="small mb-2">
-                    <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
-                  </p>
-                  <div class="btn-group btn-group-xs flex-fill w-100">
-                    <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
-                    <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
-                  </div>
-                  <p class="small mb-0 mt-2">
-                    <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
-                      How does this work?
+              @if (!settingsService.updateCheckingIsSet || appRemoteVersion) {
+                <div class="version-check">
+                  <ng-template #updateAvailablePopContent>
+                    <span class="small">Paperless-ngx {{ appRemoteVersion.version }} <ng-container i18n>is
+                        available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>
+                  </ng-template>
+                  <ng-template #updateCheckingNotEnabledPopContent>
+                    <p class="small mb-2">
+                      <ng-container i18n>Paperless-ngx can automatically check for updates</ng-container>
+                    </p>
+                    <div class="btn-group btn-group-xs flex-fill w-100">
+                      <button class="btn btn-outline-primary" (click)="setUpdateChecking(true)">Enable</button>
+                      <button class="btn btn-outline-secondary" (click)="setUpdateChecking(false)">Disable</button>
+                    </div>
+                    <p class="small mb-0 mt-2">
+                      <a class="small text-decoration-none fst-italic" routerLink="/settings" fragment="update-checking" i18n>
+                        How does this work?
+                      </a>
+                    </p>
+                  </ng-template>
+                  @if (settingsService.updateCheckingIsSet) {
+                    @if (appRemoteVersion.update_available) {
+                      <a class="small text-decoration-none" target="_blank" rel="noopener noreferrer"
+                        href="https://github.com/paperless-ngx/paperless-ngx/releases"
+                        [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
+                        container="body">
+                        <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>
+                        @if (appRemoteVersion?.update_available) {
+                        <ng-container i18n>Update available</ng-container>
+                        }
+                      </a>
+                    }
+                  } @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">
+                        <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+                      </svg>
                     </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">
-                      <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                    </svg>
-                    <ng-container *ngIf="appRemoteVersion?.update_available" i18n>Update available</ng-container>
-                  </a>
-                </ng-container>
-                <ng-template #updateCheckNotSet>
-                  <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">
-                      <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
-                    </svg>
-                  </a>
-                </ng-template>
-              </div>
+                  }
+                </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>

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

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)
 

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>
+      </svg>
+    }
+    @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"/>
+      <use xlink:href="assets/bootstrap-icons.svg#x-lg"/>
     </svg>
-</button>
+  </button>
+}

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

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

src-ui/src/app/components/common/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,
   },
 ]
 

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

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

@@ -1,15 +1,18 @@
-  <div class="btn-group w-100" ngbDropdown role="group">
+<div class="btn-group w-100" ngbDropdown role="group">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     {{title}}
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </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">
-              <use xlink:href="assets/bootstrap-icons.svg#check"/>
-          </svg>
+            @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,52 +25,57 @@
             </div>
           </div>
         </button>
-        <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+      }
+      <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()">
+        <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
+          <div i18n>After</div>
+          @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">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                    maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
-            <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-              </svg>
-            </button>
-          </div>
-
+          }
         </div>
-        <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>Before</div>
-            <a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
+        <div class="input-group input-group-sm">
+          <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+          <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
+            <svg fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
+            </svg>
+          </button>
+        </div>
+
+      </div>
+      <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>Before</div>
+          @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">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
-                    maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
-            <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
-              <svg fill="currentColor" class="buttonicon-sm">
-                <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
-              </svg>
-            </button>
-          </div>
-
+          }
         </div>
+
+        <div class="input-group input-group-sm">
+          <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+          <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
+            <svg fill="currentColor" class="buttonicon-sm">
+              <use xlink:href="assets/bootstrap-icons.svg#calendar"/>
+            </svg>
+          </button>
+        </div>
+
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,93 +1,95 @@
 <form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="row">
-        <div class="col-md-8">
-          <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
-        </div>
-        <div class="col">
-          <pngx-input-number i18n-title title="Sort order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
-        </div>
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="col-md-8">
+        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
       </div>
-      <div class="row">
-        <div class="col-md-4">
-          <h5 class="border-bottom pb-2" i18n>Filters</h5>
-          <p class="small" i18n>Process documents that match <em>all</em> filters specified below.</p>
-          <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
-          <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
-          <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case insensitive.</a>" [error]="error?.filter_path"></pngx-input-text>
-          <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
-        </div>
-        <div class="col">
-          <div class="row">
-            <div class="col">
-              <h5 class="border-bottom pb-2" i18n>Assignments</h5>
-            </div>
+      <div class="col">
+        <pngx-input-number i18n-title title="Sort order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-4">
+        <h5 class="border-bottom pb-2" i18n>Filters</h5>
+        <p class="small" i18n>Process documents that match <em>all</em> filters specified below.</p>
+        <pngx-input-select i18n-title title="Filter sources" [items]="sourceOptions" [multiple]="true" formControlName="sources" [error]="error?.sources"></pngx-input-select>
+        <pngx-input-text i18n-title title="Filter filename" formControlName="filter_filename" i18n-hint hint="Apply to documents that match this filename. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_filename"></pngx-input-text>
+        <pngx-input-text i18n-title title="Filter path" formControlName="filter_path" i18n-hint hint="Apply to documents that match this path. Wildcards specified as * are allowed. Case insensitive.</a>" [error]="error?.filter_path"></pngx-input-text>
+        <pngx-input-select i18n-title title="Filter mail rule" [items]="mailRules" [allowNull]="true" formControlName="filter_mailrule" i18n-hint hint="Apply to documents consumed via this mail rule." [error]="error?.filter_mailrule"></pngx-input-select>
+      </div>
+      <div class="col">
+        <div class="row">
+          <div class="col">
+            <h5 class="border-bottom pb-2" i18n>Assignments</h5>
           </div>
-          <div class="row">
-            <div class="col">
-              <pngx-input-text i18n-title title="Assign title" formControlName="assign_title" i18n-hint hint="Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#consumption-templates'>documentation</a>." [error]="error?.assign_title"></pngx-input-text>
-              <pngx-input-tags [allowCreate]="false" i18n-title title="Assign tags" formControlName="assign_tags"></pngx-input-tags>
-              <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
-              <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
+        </div>
+        <div class="row">
+          <div class="col">
+            <pngx-input-text i18n-title title="Assign title" formControlName="assign_title" i18n-hint hint="Can include some placeholders, see <a target='_blank' href='https://docs.paperless-ngx.com/usage/#consumption-templates'>documentation</a>." [error]="error?.assign_title"></pngx-input-text>
+            <pngx-input-tags [allowCreate]="false" i18n-title title="Assign tags" formControlName="assign_tags"></pngx-input-tags>
+            <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign storage path" [items]="storagePaths" [allowNull]="true" formControlName="assign_storage_path"></pngx-input-select>
+            <pngx-input-select i18n-title title="Assign custom fields" multiple="true" [items]="customFields" [allowNull]="true" formControlName="assign_custom_fields"></pngx-input-select>
           </div>
           <div class="col">
             <pngx-input-select i18n-title title="Assign owner" [items]="users" bindLabel="username" formControlName="assign_owner" [allowNull]="true"></pngx-input-select>
-              <div>
-                <label class="form-label" i18n>Assign view permissions</label>
-                <div class="mb-2">
-                  <div class="row mb-1">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-user type="view" formControlName="assign_view_users"></pngx-permissions-user>
-                    </div>
+            <div>
+              <label class="form-label" i18n>Assign view permissions</label>
+              <div class="mb-2">
+                <div class="row mb-1">
+                  <div class="col-lg-3">
+                    <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
                   </div>
-                  <div class="row">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-group type="view" formControlName="assign_view_groups"></pngx-permissions-group>
-                    </div>
+                  <div class="col-lg-9">
+                    <pngx-permissions-user type="view" formControlName="assign_view_users"></pngx-permissions-user>
                   </div>
                 </div>
-                <label class="form-label" i18n>Assign edit permissions</label>
-                <div>
-                  <div class="row mb-1">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-user type="change" formControlName="assign_change_users"></pngx-permissions-user>
-                    </div>
+                <div class="row">
+                  <div class="col-lg-3">
+                    <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
                   </div>
-                  <div class="row">
-                    <div class="col-lg-3">
-                      <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
-                    </div>
-                    <div class="col-lg-9">
-                      <pngx-permissions-group type="change" formControlName="assign_change_groups"></pngx-permissions-group>
-                    </div>
+                  <div class="col-lg-9">
+                    <pngx-permissions-group type="view" formControlName="assign_view_groups"></pngx-permissions-group>
                   </div>
-                  <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
                 </div>
               </div>
+              <label class="form-label" i18n>Assign edit permissions</label>
+              <div>
+                <div class="row mb-1">
+                  <div class="col-lg-3">
+                    <label class="form-label d-block my-2 text-nowrap" i18n>Users:</label>
+                  </div>
+                  <div class="col-lg-9">
+                    <pngx-permissions-user type="change" formControlName="assign_change_users"></pngx-permissions-user>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-lg-3">
+                    <label class="form-label d-block my-2 text-nowrap" i18n>Groups:</label>
+                  </div>
+                  <div class="col-lg-9">
+                    <pngx-permissions-group type="change" formControlName="assign_change_groups"></pngx-permissions-group>
+                  </div>
+                </div>
+                <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+              </div>
+            </div>
           </div>
         </div>
       </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>
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>
+  </div>
+  <div class="modal-footer">
+    @if (error?.non_field_errors) {
+      <span class="text-danger"><ng-container i18n>Error</ng-container>: {{error.non_field_errors}}</span>
+    }
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

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,

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>

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,

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>

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(

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

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

src-ui/src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component.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,

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,

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

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,

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>

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'

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

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>

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'

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,

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>

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,

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

@@ -1,26 +1,30 @@
-  <form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
-    <div class="modal-header">
-      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
-      <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
-      </button>
+<form [formGroup]="objectForm" (ngSubmit)="save()" autocomplete="off">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" [disabled]="!closeEnabled" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+  </div>
+  <div class="modal-body">
+    <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
+
+    <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>
+
+    <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>
+    @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>
     </div>
-    <div class="modal-body">
-      <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></pngx-input-text>
 
-      <pngx-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></pngx-input-color>
-
-      <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>
-
-      <div *pngxIfOwner="object">
-        <pngx-permissions-form [users]="users" accordion="true" formControlName="permissions_form"></pngx-permissions-form>
-      </div>
-
-    </div>
-    <div class="modal-footer">
-      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
-    </div>
-  </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
+    <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+  </div>
+</form>

src-ui/src/app/components/common/edit-dialog/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,

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(

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

@@ -4,49 +4,61 @@
       <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">
-        <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>
-          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
-          <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
+      @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>
+            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
+            <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
+          </div>
         </div>
-      </div>
-      <div *ngIf="!editing && !manyToOne" 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>
-          <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
-          <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
+      }
+      @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>
+            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
+            <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
+          </div>
         </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">
-          <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">
-          </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">
-        <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">
-        <small i18n>Click again to exclude items.</small>
-      </div>
+      @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
+                [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>
+            }
+          }
+        </div>
+      }
+      @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>
+      }
+      @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>

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',

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>

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()

src-ui/src/app/components/common/input/check/check.component.html

@@ -1,19 +1,27 @@
 <div class="mb-3">
   <div class="row">
-    <div *ngIf="horizontal" 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)">
-        <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) {
+      <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>
+        @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">
+          @if (!horizontal) {
+            <label class="form-check-label" [for]="inputId">{{title}}</label>
+          }
+          @if (hint) {
+            <div class="form-text text-muted">{{hint}}</div>
+          }
+        </div>
       </div>
     </div>
   </div>
-</div>

src-ui/src/app/components/common/input/color/color.component.html

@@ -1,28 +1,32 @@
 <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>
 
-      <ng-template #popContent>
-        <div style="min-width: 200px;" class="pb-3">
-          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
-        </div>
+    <ng-template #popContent>
+      <div style="min-width: 200px;" class="pb-3">
+        <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
+      </div>
 
-      </ng-template>
+    </ng-template>
 
-      <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
+    <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow">
 
-      <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
-          <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
-          <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
-        </svg>
-      </button>
+    <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
+        <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
+        <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+      </svg>
+    </button>
 
-    </div>
-    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-    <div class="invalid-feedback">
-      {{error}}
-    </div>
+  </div>
+  @if (hint) {
+    <small class="form-text text-muted">{{hint}}</small>
+  }
+  <div class="invalid-feedback">
+    {{error}}
+  </div>
 </div>

src-ui/src/app/components/common/input/date/date.component.html

@@ -2,36 +2,44 @@
   <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)">
-        <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 class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
-              (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
-              name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
-        <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
-            <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 }}">
-          <svg class="buttonicon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#filter" />
-          </svg>
-        </button>
+      @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 class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
+            (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
+            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
+          <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
+              <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
+            </svg>
+          </button>
+          @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>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+        @if (getSuggestions().length > 0) {
+          <small>
+            <span i18n>Suggestions:</span>&nbsp;
+            @for (s of getSuggestions(); track s) {
+              <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
+            }
+          </small>
+        }
       </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">
-        <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let s of getSuggestions()">
-          <a (click)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
-        </ng-container>
-      </small>
     </div>
   </div>
-</div>

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

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

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)">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
           <svg class="sidebaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x"/>
-          </svg>&nbsp;<ng-container i18n>Remove</ng-container>
-        </button>
+            </svg>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
       </div>
       <div [class.col-md-9]="horizontal">
         <div>
@@ -23,28 +27,30 @@
             [loading]="loading"
             [typeahead]="documentsInput$"
             (change)="onChange(selectedDocuments)">
-                <ng-template ng-label-tmp let-document="item">
-                  <div class="d-flex align-items-center">
-                    <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
-                      <use xlink:href="assets/bootstrap-icons.svg#x"/>
-                    </svg>
-                    <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
-                      <svg class="sidebaricon-sm me-1" fill="currentColor">
-                        <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
-                      </svg><span>{{document.title}}</span>
-                    </a>
-                  </div>
-                </ng-template>
-                <ng-template ng-loadingspinner-tmp>
-                  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-                  <div class="visually-hidden" i18n>Loading...</div>
-                </ng-template>
-                <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
-                  <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
-                </ng-template>
-          </ng-select>
+            <ng-template ng-label-tmp let-document="item">
+              <div class="d-flex align-items-center">
+                <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
+                  <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                </svg>
+                <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
+                  <svg class="sidebaricon-sm me-1" fill="currentColor">
+                    <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                    </svg><span>{{document.title}}</span>
+                  </a>
+                </div>
+              </ng-template>
+              <ng-template ng-loadingspinner-tmp>
+                <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                <div class="visually-hidden" i18n>Loading...</div>
+              </ng-template>
+              <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+                <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+              </ng-template>
+            </ng-select>
+          </div>
+          @if (hint) {
+            <small class="form-text text-muted">{{hint}}</small>
+          }
         </div>
-        <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
       </div>
     </div>
-  </div>

src-ui/src/app/components/common/input/document-link/document-link.component.scss

@@ -1,6 +1,10 @@
-::ng-deep .ng-select-container .ng-value-container .ng-value {
-    background-color: transparent !important;
-    border-color: transparent;
+::ng-deep .ng-select-container .ng-value-container {
+    overflow: hidden;
+
+    .ng-value {
+        background-color: transparent !important;
+        border-color: transparent;
+    }
 }
 
 .sidebaricon {
@@ -9,6 +13,4 @@
 
 .badge {
     font-size: .75rem;
-    // --bs-primary: var(--pngx-bg-alt);
-    // color: var(--pngx-primary-text-contrast);
 }

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]])
+  })
 })

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
   }
 

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)">
-        <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 (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="invalid-feedback position-absolute top-100">
-        {{error}}
+      <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">
+          @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>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
       </div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
     </div>
   </div>
-</div>

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">
-      <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#eye" />
-      </svg>
-    </button>
+    @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>

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

@@ -1,68 +1,75 @@
-<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>
-        <ng-container [ngTemplateOutlet]="permissionsForm"></ng-container>
-      </ng-template>
-    </ngb-panel>
-  </ngb-accordion>
-</ng-container>
+}
+@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>
+        </div>
+      </div>
+    </div>
+  </div>
+}
 
 <ng-template #permissionsForm>
-<div [formGroup]="form">
-  <div class="row">
-    <div class="col-lg-3">
-      <label class="form-label d-block my-2" i18n>Owner:</label>
+  <div [formGroup]="form">
+    <div class="row">
+      <div class="col-lg-3">
+        <label class="form-label d-block my-2" i18n>Owner:</label>
+      </div>
+      <div class="col-lg-9">
+        <pngx-input-select [items]="users" bindLabel="username" formControlName="owner" [allowNull]="true"></pngx-input-select>
+      </div>
     </div>
-    <div class="col-lg-9">
-      <pngx-input-select [items]="users" bindLabel="username" formControlName="owner" [allowNull]="true"></pngx-input-select>
+    <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
+    <div formGroupName="set_permissions">
+      <h6 class="mt-3" i18n>View</h6>
+      <div formGroupName="view" class="mb-2">
+        <div class="row mb-1">
+          <div class="col-lg-3">
+            <label class="form-label d-block my-2" i18n>Users:</label>
+          </div>
+          <div class="col-lg-9">
+            <pngx-permissions-user type="view" formControlName="users"></pngx-permissions-user>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-3">
+            <label class="form-label d-block my-2" i18n>Groups:</label>
+          </div>
+          <div class="col-lg-9">
+            <pngx-permissions-group type="view" formControlName="groups"></pngx-permissions-group>
+          </div>
+        </div>
+      </div>
+      <h6 class="mt-4" i18n>Edit</h6>
+      <div formGroupName="change">
+        <div class="row mb-1">
+          <div class="col-lg-3">
+            <label class="form-label d-block my-2" i18n>Users:</label>
+          </div>
+          <div class="col-lg-9">
+            <pngx-permissions-user type="change" formControlName="users"></pngx-permissions-user>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-lg-3">
+            <label class="form-label d-block my-2" i18n>Groups:</label>
+          </div>
+          <div class="col-lg-9">
+            <pngx-permissions-group type="change" formControlName="groups"></pngx-permissions-group>
+          </div>
+        </div>
+        <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
+      </div>
     </div>
   </div>
-  <small class="form-text text-muted text-end d-block mt-n2" i18n>Objects without an owner can be viewed and edited by all users</small>
-  <div formGroupName="set_permissions">
-    <h6 class="mt-3" i18n>View</h6>
-    <div formGroupName="view" class="mb-2">
-      <div class="row mb-1">
-        <div class="col-lg-3">
-          <label class="form-label d-block my-2" i18n>Users:</label>
-        </div>
-        <div class="col-lg-9">
-          <pngx-permissions-user type="view" formControlName="users"></pngx-permissions-user>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-lg-3">
-          <label class="form-label d-block my-2" i18n>Groups:</label>
-        </div>
-        <div class="col-lg-9">
-          <pngx-permissions-group type="view" formControlName="groups"></pngx-permissions-group>
-        </div>
-      </div>
-    </div>
-    <h6 class="mt-4" i18n>Edit</h6>
-    <div formGroupName="change">
-      <div class="row mb-1">
-        <div class="col-lg-3">
-          <label class="form-label d-block my-2" i18n>Users:</label>
-        </div>
-        <div class="col-lg-9">
-          <pngx-permissions-user type="change" formControlName="users"></pngx-permissions-user>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-lg-3">
-          <label class="form-label d-block my-2" i18n>Groups:</label>
-        </div>
-        <div class="col-lg-9">
-          <pngx-permissions-group type="change" formControlName="groups"></pngx-permissions-group>
-        </div>
-      </div>
-      <small class="form-text text-muted text-end d-block" i18n>Edit permissions also grant viewing permissions</small>
-    </div>
-  </div>
-</div>
 </ng-template>

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

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()

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()

src-ui/src/app/components/common/input/select/select.component.html

@@ -1,57 +1,72 @@
 <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)">
-        <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">
-        <ng-select name="inputId" [(ngModel)]="value"
-          [disabled]="disabled"
-          [style.color]="textColor"
-          [style.background]="backgroundColor"
-          [class.private]="isPrivate"
-          [clearable]="allowNull"
-          [items]="items"
-          [addTag]="allowCreateNew && addItemRef"
-          addTagText="Add item"
-          i18n-addTagText="Used for both types, correspondents, storage paths"
-          [placeholder]="placeholder"
-          [notFoundText]="notFoundText"
-          [multiple]="multiple"
-          [bindLabel]="bindLabel"
-          bindValue="id"
-          (change)="onChange(value)"
-          (search)="onSearch($event)"
-          (focus)="clearLastSearchTerm()"
-          (clear)="clearLastSearchTerm()"
-          (blur)="onBlur()">
-        </ng-select>
-        <button *ngIf="allowCreateNew" 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 }}">
-          <svg class="buttonicon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#filter" />
-          </svg>
-        </button>
+      @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="invalid-feedback">
-        {{error}}
+      <div [class.col-md-9]="horizontal">
+        <div [class.input-group]="allowCreateNew || showFilter" [class.is-invalid]="error">
+          <ng-select name="inputId" [(ngModel)]="value"
+            [disabled]="disabled"
+            [style.color]="textColor"
+            [style.background]="backgroundColor"
+            [class.private]="isPrivate"
+            [clearable]="allowNull"
+            [items]="items"
+            [addTag]="allowCreateNew && addItemRef"
+            addTagText="Add item"
+            i18n-addTagText="Used for both types, correspondents, storage paths"
+            [placeholder]="placeholder"
+            [notFoundText]="notFoundText"
+            [multiple]="multiple"
+            [bindLabel]="bindLabel"
+            bindValue="id"
+            (change)="onChange(value)"
+            (search)="onSearch($event)"
+            (focus)="clearLastSearchTerm()"
+            (clear)="clearLastSearchTerm()"
+            (blur)="onBlur()">
+            <ng-template ng-option-tmp let-item="item">
+                <span [title]="item.name">{{item.name}}</span>
+            </ng-template>
+          </ng-select>
+          @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>
+          }
+          @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>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
+        @if (getSuggestions().length > 0) {
+          <small>
+            <span i18n>Suggestions:</span>&nbsp;
+            @for (s of getSuggestions(); track s) {
+              <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
+            }
+          </small>
+        }
       </div>
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-      <small *ngIf="getSuggestions().length > 0">
-        <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let s of getSuggestions()">
-          <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
-        </ng-container>
-      </small>
     </div>
   </div>
-</div>

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',

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()

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">
-          <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">
-          <svg class="buttonicon" fill="currentColor">
-            <use xlink:href="assets/bootstrap-icons.svg#filter" />
-          </svg>
-        </button>
+        @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>
+        }
+        @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">
-        <span i18n>Suggestions:</span>&nbsp;
-        <ng-container *ngFor="let tag of getSuggestions()">
-          <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
-        </ng-container>
-      </small>
+      @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;
+          @for (tag of getSuggestions(); track tag) {
+            <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
+          }
+        </small>
+      }
     </div>
   </div>
 </div>

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',

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
 

src-ui/src/app/components/common/input/text/text.component.html

@@ -2,18 +2,22 @@
   <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)">
-        <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>
-      <div class="invalid-feedback position-absolute top-100">
-        {{error}}
+      @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">
+        @if (hint) {
+          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        }
+        <div class="invalid-feedback position-absolute top-100">
+          {{error}}
+        </div>
       </div>
     </div>
   </div>
-</div>

src-ui/src/app/components/common/input/url/url.component.html

@@ -1,12 +1,14 @@
 <div class="mb-3" [class.pb-3]="error">
-    <div class="row">
-      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-        <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)">
+  <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>
+      @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>
+            </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>

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">

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,

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

@@ -1,22 +1,24 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
-    <button type="button" class="btn-close" aria-label="Close" (click)="cancelClicked()">
-    </button>
-  </div>
-  <div class="modal-body">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancelClicked()">
+  </button>
+</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>
-    </form>
+  <form [formGroup]="form">
+    <pngx-permissions-form [users]="users" formControlName="permissions_form"></pngx-permissions-form>
+  </form>
 
-  </div>
-  <div class="modal-footer">
-    <ng-container *ngIf="!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>
+</div>
+<div class="modal-footer">
+  @if (!buttonsEnabled) {
+    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+    <span class="visually-hidden" i18n>Loading...</span>
+  }
+  <button type="button" class="btn btn-outline-primary" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="confirmClicked.emit(permissions)" [disabled]="!buttonsEnabled" i18n>Confirm</button>
+</div>

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(

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

@@ -1,82 +1,106 @@
 <div class="btn-group w-100" ngbDropdown role="group">
-    <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-        <svg class="toolbaricon" fill="currentColor">
-           <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
-        </svg>
-        <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
-      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
-    </button>
-    <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
-        <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">
-                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                    </svg>
-                </div>
-                <div class="me-1">
-                    <small i18n>All</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.SELF)" [disabled]="disabled">
-                <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.SELF" fill="currentColor" class="buttonicon-sm">
-                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                    </svg>
-                </div>
-                <div class="me-1">
-                    <small i18n>My documents</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.NOT_SELF)" [disabled]="disabled">
-                <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.NOT_SELF" 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">
-                <div class="selected-icon me-1">
-                    <svg *ngIf="selectionModel.ownerFilter === OwnerFilterType.UNOWNED" fill="currentColor" class="buttonicon-sm">
-                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                    </svg>
-                </div>
-                <div class="me-1">
-                    <small i18n>Unowned</small>
-                </div>
-            </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">
-                        <use xlink:href="assets/bootstrap-icons.svg#check"/>
-                    </svg>
-                </div>
-                <div class="me-1 w-100">
-                    <ng-select
-                        name="user"
-                        class="user-select small"
-                        [(ngModel)]="selectionModel.includeUsers"
-                        [disabled]="disabled"
-                        [clearable]="false"
-                        [items]="users"
-                        bindLabel="username"
-                        multiple="true"
-                        bindValue="id"
-                        placeholder="Users"
-                        i18n-placeholder
-                        (change)="onUserSelect()">
-                    </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">
-                <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>
+  <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="isActive ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
+    <svg class="toolbaricon" fill="currentColor">
+      <use xlink:href="assets/bootstrap-icons.svg#person-fill-lock" />
+    </svg>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+  </button>
+  <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+    <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">
+          @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>
+        </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.SELF)" [disabled]="disabled">
+        <div class="selected-icon me-1">
+          @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>
+        </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.NOT_SELF)" [disabled]="disabled">
+        <div class="selected-icon me-1">
+          @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.SHARED_BY_ME)" [disabled]="disabled">
+        <div class="selected-icon me-1">
+          @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>
+        </div>
+      </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">
+          @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
+            name="user"
+            class="user-select small"
+            [(ngModel)]="selectionModel.includeUsers"
+            [disabled]="disabled"
+            [clearable]="false"
+            [items]="users"
+            bindLabel="username"
+            multiple="true"
+            bindValue="id"
+            placeholder="Users"
+            i18n-placeholder
+            (change)="onUserSelect()">
+          </ng-select>
+        </div>
+      </button>
+      @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>

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: [],

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 = []

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">
-      <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">
-        <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>
+    @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>
+        @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>
+    }
+    @if (error) {
+      <div class="invalid-feedback d-block">{{error}}</div>
+    }
   </ul>
 </form>

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>

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;
+}