Update .mypy-baseline.txt

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

.mypy-baseline.txt

@@ -96,9 +96,7 @@ src/documents/conditionals.py:0: error: Function is missing a type annotation fo
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/conditionals.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "input_doc"  [attr-defined]
-src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "log"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
 src/documents/consumer.py:0: error: "ConsumerPluginMixin" has no attribute "metadata"  [attr-defined]
@@ -173,7 +171,6 @@ src/documents/filters.py:0: error: Function is missing a type annotation  [no-un
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/filters.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/filters.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
@@ -345,18 +342,11 @@ src/documents/migrations/0001_initial.py:0: error: Skipping analyzing "multisele
 src/documents/migrations/0008_sharelinkbundle.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/migrations/0008_sharelinkbundle.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Argument 1 to "Path" has incompatible type "Path | None"; expected "str | PathLike[str]"  [arg-type]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.deleted_objects"  [django-manager-missing]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.global_objects"  [django-manager-missing]
-src/documents/models.py:0: error: Could not resolve manager type for "documents.models.Document.objects"  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'custom_fields' for relation 'documents.models.CustomFieldInstance.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.correspondent'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.document_type'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'documents' for relation 'documents.models.Document.storage_path'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'fields' for relation 'documents.models.CustomFieldInstance.field'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'notes' for relation 'documents.models.Note.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Couldn't resolve related manager 'runs' for relation 'documents.models.WorkflowRun.workflow'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'share_links' for relation 'documents.models.ShareLink.document'.  [django-manager-missing]
-src/documents/models.py:0: error: Couldn't resolve related manager 'workflow_runs' for relation 'documents.models.WorkflowRun.document'.  [django-manager-missing]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/models.py:0: error: Function is missing a return type annotation  [no-untyped-def]
@@ -445,7 +435,6 @@ src/documents/permissions.py:0: error: Function is missing a type annotation  [n
 src/documents/permissions.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/permissions.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/permissions.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/permissions.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exclude"  [union-attr]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exists"  [union-attr]
 src/documents/permissions.py:0: error: Item "list[str]" of "Any | list[str] | QuerySet[User, User]" has no attribute "exists"  [union-attr]
@@ -599,7 +588,6 @@ src/documents/serialisers.py:0: error: Function is missing a type annotation for
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/serialisers.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/serialisers.py:0: error: Incompatible type for lookup 'pk': (got "str | None", expected "str | int")  [misc]
 src/documents/serialisers.py:0: error: Incompatible types in assignment (expression has type "PrimaryKeyRelatedField[Tag]", base class "Field" defined the type as "BaseSerializer[Any]")  [assignment]
 src/documents/serialisers.py:0: error: Incompatible types in assignment (expression has type "Sequence[str] | tuple[Lower]", variable has type "Sequence[str] | None")  [assignment]
@@ -982,10 +970,6 @@ src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annot
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
-src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_bulk_edit.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
@@ -1011,7 +995,6 @@ src/documents/tests/test_bulk_edit.py:0: error: Item "dict[Any, Any]" of "Group
 src/documents/tests/test_bulk_edit.py:0: error: Item "dict[Any, Any]" of "Group | dict[Any, Any]" has no attribute "count"  [union-attr]
 src/documents/tests/test_bulk_edit.py:0: error: Too few arguments for "count" of "list"  [call-arg]
 src/documents/tests/test_bulk_edit.py:0: error: Too few arguments for "count" of "list"  [call-arg]
-src/documents/tests/test_bulk_edit.py:0: error: Unsupported operand types for - ("None" and "int")  [operator]
 src/documents/tests/test_caching.py:0: error: Function is missing a type annotation for one or more arguments  [no-untyped-def]
 src/documents/tests/test_classifier.py:0: error: "None" has no attribute "classes_"  [attr-defined]
 src/documents/tests/test_classifier.py:0: error: "None" has no attribute "classes_"  [attr-defined]
@@ -1574,7 +1557,6 @@ src/documents/views.py:0: error: Function is missing a return type annotation  [
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
-src/documents/views.py:0: error: Function is missing a return type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]
 src/documents/views.py:0: error: Function is missing a type annotation  [no-untyped-def]

docs/advanced_usage.md

@@ -431,8 +431,10 @@ This allows for complex logic to be included in the format, including [logical s
 and [filters](https://jinja.palletsprojects.com/en/3.1.x/templates/#id11) to manipulate the [variables](#filename-format-variables)
 provided. The template is provided as a string, potentially multiline, and rendered into a single line.
 
-In addition, the entire Document instance is available to be utilized in a more advanced way, as well as some variables which only make sense to be accessed
-with more complex logic.
+In addition, a limited `document` object is available for advanced templates.
+This object includes common metadata fields such as `id`, `pk`, `title`, `content`, `page_count`, `created`, `added`, `modified`, `mime_type`,
+`checksum`, `archive_checksum`, `archive_serial_number`, `filename`, `archive_filename`, and `original_filename`.
+Related values are available as nested objects with limited fields, for example document.correspondent.name, etc.
 
 #### Custom Jinja2 Filters
 

docs/api.md

@@ -211,6 +211,21 @@ However, querying the tasks endpoint with the returned UUID e.g.
 `/api/tasks/?task_id={uuid}` will provide information on the state of the
 consumption including the ID of a created document if consumption succeeded.
 
+## Document Versions
+
+Document versions are file-level versions linked to one root document.
+
+-   Root document metadata (title, tags, correspondent, document type, storage path, custom fields, permissions) remains shared.
+-   Version-specific file data (file, mime type, checksums, archive info, extracted text content) belongs to the selected/latest version.
+
+Version-aware endpoints:
+
+-   `GET /api/documents/{id}/`: returns root document data; `content` resolves to latest version content by default. Use `?version={version_id}` to resolve content for a specific version.
+-   `PATCH /api/documents/{id}/`: content updates target the selected version (`?version={version_id}`) or latest version by default; non-content metadata updates target the root document.
+-   `GET /api/documents/{id}/download/`, `GET /api/documents/{id}/preview/`, `GET /api/documents/{id}/thumb/`, `GET /api/documents/{id}/metadata/`: accept `?version={version_id}`.
+-   `POST /api/documents/{id}/update_version/`: uploads a new version using multipart form field `document` and optional `version_label`.
+-   `DELETE /api/documents/{root_id}/versions/{version_id}/`: deletes a non-root version.
+
 ## Permissions
 
 All objects (documents, tags, etc.) allow setting object-level permissions
@@ -300,13 +315,13 @@ The following methods are supported:
             -   `"doc": OUTPUT_DOCUMENT_INDEX` Optional index of the output document for split operations.
     -   Optional `parameters`:
         -   `"delete_original": true` to delete the original documents after editing.
-        -   `"update_document": true` to update the existing document with the edited PDF.
+        -   `"update_document": true` to add the edited PDF as a new version of the root document.
         -   `"include_metadata": true` to copy metadata from the original document to the edited document.
 -   `remove_password`
     -   Requires `parameters`:
         -   `"password": "PASSWORD_STRING"` The password to remove from the PDF documents.
     -   Optional `parameters`:
-        -   `"update_document": true` to replace the existing document with the password-less PDF.
+        -   `"update_document": true` to add the password-less PDF as a new version of the root document.
         -   `"delete_original": true` to delete the original document after editing.
         -   `"include_metadata": true` to copy metadata from the original document to the new password-less document.
 -   `merge`

docs/changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## paperless-ngx 2.20.7
+
+### Bug Fixes
+
+-   Performance fix: use subqueries to improve object retrieval in large installs [@shamoon](https://github.com/shamoon) ([#11950](https://github.com/paperless-ngx/paperless-ngx/pull/11950))
+-   Fix: correct user dropdown button icon styling [@shamoon](https://github.com/shamoon) ([#12092](https://github.com/paperless-ngx/paperless-ngx/issues/12092))
+-   Fix: fix broken docker create_classifier command in 2.20.6 [@shamoon](https://github.com/shamoon) ([#11965](https://github.com/paperless-ngx/paperless-ngx/issues/11965))
+
+### All App Changes
+
+<details>
+<summary>3 changes</summary>
+
+-   Performance fix: use subqueries to improve object retrieval in large installs [@shamoon](https://github.com/shamoon) ([#11950](https://github.com/paperless-ngx/paperless-ngx/pull/11950))
+-   Fix: correct user dropdown button icon styling [@shamoon](https://github.com/shamoon) ([#12092](https://github.com/paperless-ngx/paperless-ngx/issues/12092))
+-   Fix: fix broken docker create_classifier command in 2.20.6 [@shamoon](https://github.com/shamoon) ([#11965](https://github.com/paperless-ngx/paperless-ngx/issues/11965))
+</details>
+
 ## paperless-ngx 2.20.6
 
 ### Bug Fixes

docs/usage.md

@@ -89,6 +89,16 @@ You can view the document, edit its metadata, assign tags, correspondents,
 document types, and custom fields. You can also view the document history,
 download the document or share it via a share link.
 
+### Document File Versions
+
+Think of versions as **file history** for a document.
+
+-   Versions track the underlying file and extracted text content (OCR/text).
+-   Metadata such as tags, correspondent, document type, storage path and custom fields stay on the "root" document.
+-   By default, search and document content use the latest version.
+-   In document detail, selecting a version switches the preview, file metadata and content (and download etc buttons) to that version.
+-   Deleting a non-root version keeps metadata and falls back to the latest remaining version.
+
 ### Management Lists
 
 Paperless-ngx includes management lists for tags, correspondents, document types

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "2.20.6"
+version = "2.20.7"
 description = "A community-supported supercharged document management system: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.10"

src-ui/e2e/dashboard/dashboard.spec.ts

@@ -52,11 +52,11 @@ test('dashboard saved view document links', async ({ page }) => {
 test('test slim sidebar', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
   await page.goto('/dashboard')
-  await page.locator('#sidebarMenu').getByRole('button').click()
+  await page.locator('.sidebar-slim-toggler').click()
   await expect(
     page.getByRole('link', { name: 'Dashboard' }).getByText('Dashboard')
   ).toBeHidden()
-  await page.locator('#sidebarMenu').getByRole('button').click()
+  await page.locator('.sidebar-slim-toggler').click()
   await expect(
     page.getByRole('link', { name: 'Dashboard' }).getByText('Dashboard')
   ).toBeVisible()

src-ui/e2e/permissions/global-permissions.spec.ts

@@ -33,9 +33,9 @@ test('should not allow user to view correspondents', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
-    page.getByRole('link', { name: 'Correspondents' })
+    page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
-  await page.goto('/correspondents')
+  await page.goto('/attributes/correspondents')
   await expect(page.locator('body')).toHaveText(
     /You don't have permissions to do that/i
   )
@@ -44,8 +44,10 @@ test('should not allow user to view correspondents', async ({ page }) => {
 test('should not allow user to view tags', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
-  await expect(page.getByRole('link', { name: 'Tags' })).not.toBeAttached()
-  await page.goto('/tags')
+  await expect(
+    page.getByRole('link', { name: 'Attributes' })
+  ).not.toBeAttached()
+  await page.goto('/attributes/tags')
   await expect(page.locator('body')).toHaveText(
     /You don't have permissions to do that/i
   )
@@ -55,9 +57,9 @@ test('should not allow user to view document types', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
-    page.getByRole('link', { name: 'Document Types' })
+    page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
-  await page.goto('/documenttypes')
+  await page.goto('/attributes/documenttypes')
   await expect(page.locator('body')).toHaveText(
     /You don't have permissions to do that/i
   )
@@ -67,9 +69,9 @@ test('should not allow user to view storage paths', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
-    page.getByRole('link', { name: 'Storage Paths' })
+    page.getByRole('link', { name: 'Attributes' })
   ).not.toBeAttached()
-  await page.goto('/storagepaths')
+  await page.goto('/attributes/storagepaths')
   await expect(page.locator('body')).toHaveText(
     /You don't have permissions to do that/i
   )

src-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "2.20.6",
+  "version": "2.20.7",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",

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

@@ -11,13 +11,9 @@ import { DashboardComponent } from './components/dashboard/dashboard.component'
 import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
 import { DocumentListComponent } from './components/document-list/document-list.component'
-import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
+import { DocumentAttributesComponent } from './components/manage/document-attributes/document-attributes.component'
 import { MailComponent } from './components/manage/mail/mail.component'
 import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
-import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
 import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
 import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
@@ -106,52 +102,76 @@ export const routes: Routes = [
         },
       },
       {
-        path: 'tags',
-        component: TagListComponent,
+        path: 'attributes',
+        component: DocumentAttributesComponent,
         canActivate: [PermissionsGuard],
         data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.Tag,
-          },
-          componentName: 'TagListComponent',
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.Correspondent,
+            },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+            { action: PermissionAction.View, type: PermissionType.StoragePath },
+            { action: PermissionAction.View, type: PermissionType.CustomField },
+          ],
+          componentName: 'DocumentAttributesComponent',
         },
       },
       {
-        path: 'documenttypes',
-        component: DocumentTypeListComponent,
+        path: 'attributes/:section',
+        component: DocumentAttributesComponent,
         canActivate: [PermissionsGuard],
         data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.DocumentType,
-          },
-          componentName: 'DocumentTypeListComponent',
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.Correspondent,
+            },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+            { action: PermissionAction.View, type: PermissionType.StoragePath },
+            { action: PermissionAction.View, type: PermissionType.CustomField },
+          ],
+          componentName: 'DocumentAttributesComponent',
         },
       },
+      {
+        path: 'documentproperties',
+        redirectTo: '/attributes',
+        pathMatch: 'full',
+      },
+      {
+        path: 'documentproperties/:section',
+        redirectTo: '/attributes/:section',
+        pathMatch: 'full',
+      },
+      {
+        path: 'tags',
+        redirectTo: '/attributes/tags',
+        pathMatch: 'full',
+      },
       {
         path: 'correspondents',
-        component: CorrespondentListComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.Correspondent,
-          },
-          componentName: 'CorrespondentListComponent',
-        },
+        redirectTo: '/attributes/correspondents',
+        pathMatch: 'full',
+      },
+      {
+        path: 'documenttypes',
+        redirectTo: '/attributes/documenttypes',
+        pathMatch: 'full',
       },
       {
         path: 'storagepaths',
-        component: StoragePathListComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.StoragePath,
-          },
-          componentName: 'StoragePathListComponent',
-        },
+        redirectTo: '/attributes/storagepaths',
+        pathMatch: 'full',
       },
       {
         path: 'logs',
@@ -239,15 +259,8 @@ export const routes: Routes = [
       },
       {
         path: 'customfields',
-        component: CustomFieldsComponent,
-        canActivate: [PermissionsGuard],
-        data: {
-          requiredPermission: {
-            action: PermissionAction.View,
-            type: PermissionType.CustomField,
-          },
-          componentName: 'CustomFieldsComponent',
-        },
+        redirectTo: '/attributes/customfields',
+        pathMatch: 'full',
       },
       {
         path: 'workflows',

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

@@ -195,8 +195,8 @@ export class AppComponent implements OnInit, OnDestroy {
       },
       {
         anchorId: 'tour.tags',
-        content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
-        route: '/tags',
+        content: $localize`Attributes like tags, correspondents, document types, storage paths and custom fields can all be managed here. They can also be created from the document edit view.`,
+        route: '/attributes/tags',
         backdropConfig: {
           offset: 0,
         },

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

@@ -5,13 +5,13 @@
   i18n-info
   >
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
-    <i-bs class="me-1" name="airplane"></i-bs>&nbsp;<ng-container i18n>Start tour</ng-container>
+    <i-bs class="me-2" name="airplane"></i-bs><ng-container i18n>Start tour</ng-container>
   </button>
   @if (permissionsService.isAdmin()) {
     <button class="btn btn-sm btn-outline-primary position-relative ms-md-5 me-1" (click)="showSystemStatus()"
       [disabled]="!systemStatus">
       @if (!systemStatus) {
-        <div class="spinner-border spinner-border-sm me-1 h-75" role="status"></div>
+        <div class="spinner-border spinner-border-sm me-2 h-75" role="status"></div>
       } @else {
         <i-bs class="me-2" name="card-checklist"></i-bs>
         @if (systemStatusHasErrors) {
@@ -28,7 +28,7 @@
     </button>
     <a class="btn btn-sm btn-primary" href="admin/" target="_blank">
       <ng-container i18n>Open Django Admin</ng-container>
-      &nbsp;<i-bs name="arrow-up-right"></i-bs>
+      <i-bs class="ms-2" name="arrow-up-right"></i-bs>
     </a>
   }
 </pngx-page-header>

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

@@ -6,10 +6,10 @@
   >
   <div class="btn-toolbar col col-md-auto align-items-center gap-2">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
-      <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+      <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
     </button>
     <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
-      <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
+      <i-bs name="check2-all" class="me-1"></i-bs>{{dismissButtonText}}
     </button>
     <div class="form-inline d-flex align-items-center">
       <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
@@ -113,12 +113,12 @@
           <td scope="row">
             <div class="btn-group" role="group">
               <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }">
-                <i-bs name="check"></i-bs>&nbsp;<ng-container i18n>Dismiss</ng-container>
+                <i-bs name="check" class="me-1"></i-bs><ng-container i18n>Dismiss</ng-container>
               </button>
               <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
                 @if (task.related_document) {
                   <button class="btn btn-sm btn-outline-primary" (click)="dismissAndGo(task); $event.stopPropagation();">
-                    <i-bs name="file-text"></i-bs>&nbsp;<ng-container i18n>Open Document</ng-container>
+                    <i-bs name="file-text" class="me-1"></i-bs><ng-container i18n>Open Document</ng-container>
                   </button>
                 }
               </ng-container>

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

@@ -5,16 +5,16 @@
     i18n-info
     infoLink="usage/#document-trash">
     <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
-        <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+        <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
-        <i-bs name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore selected</ng-container>
+        <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete selected</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
     </button>
     <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Empty trash</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
     </button>
 </pngx-page-header>
 
@@ -75,10 +75,10 @@
                     </div>
                     <div class="btn-group d-none d-sm-block">
                         <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
-                            <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore</ng-container>
+                            <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore</ng-container>
                         </button>
                         <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
-                            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                         </button>
                     </div>
                     </td>

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

@@ -11,7 +11,7 @@
   <h4 class="d-flex">
     <ng-container i18n>Users</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editUser()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add User</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add User</ng-container>
     </button>
   </h4>
   <ul class="list-group">
@@ -32,10 +32,10 @@
           <div class="col">
             <div class="btn-group">
               <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editUser(user)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.User }">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
               </button>
               <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteUser(user)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.User }">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
               </button>
             </div>
           </div>
@@ -49,7 +49,7 @@
   <h4 class="mt-4 d-flex">
     <ng-container i18n>Groups</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editGroup()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Group }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Group</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Group</ng-container>
     </button>
   </h4>
   <ul class="list-group">
@@ -70,10 +70,10 @@
           <div class="col">
             <div class="btn-group">
               <button class="btn btn-sm btn-outline-secondary" type="button" (click)="editGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Group }">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
               </button>
               <button class="btn btn-sm btn-outline-danger" type="button" (click)="deleteGroup(group)" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Group }">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
               </button>
             </div>
           </div>

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

@@ -86,14 +86,14 @@
             <a class="nav-link" routerLink="dashboard" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Dashboard" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-1" name="house"></i-bs><span>&nbsp;<ng-container i18n>Dashboard</ng-container></span>
+              <i-bs class="me-2" name="house"></i-bs><span><ng-container i18n>Dashboard</ng-container></span>
             </a>
           </li>
           <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
             <a class="nav-link" routerLink="documents" routerLinkActive="active" (click)="closeMenu()"
               ngbPopover="Documents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
               container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-              <i-bs class="me-1" name="files"></i-bs><span>&nbsp;<ng-container i18n>Documents</ng-container></span>
+              <i-bs class="me-2" name="files"></i-bs><span><ng-container i18n>Documents</ng-container></span>
             </a>
           </li>
         </ul>
@@ -117,8 +117,7 @@
                     routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
                     [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                     popoverClass="popover-slim">
-                    <i-bs class="me-1" name="funnel"></i-bs>
-                      <span>&nbsp;<div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
+                    <i-bs class="me-2" name="funnel"></i-bs><span><div class="d-inline-flex view-name"><span class="overflow-hidden" [class.text-wrap]="!slimSidebarEnabled">{{view.name}}</span></div>
                         @if (showSidebarCounts && !slimSidebarEnabled) {
                           <span class="badge bg-info text-dark ms-2 d-inline">{{ savedViewService.getDocumentCount(view) }}</span>
                         }
@@ -151,7 +150,7 @@
                   routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="d.title | documentTitle"
                   [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
                   popoverClass="popover-slim">
-                  <i-bs class="me-1" name="file-text"></i-bs><span>&nbsp;{{d.title | documentTitle}}</span>
+                  <i-bs class="me-2" name="file-text"></i-bs><span>{{d.title | documentTitle}}</span>
                   <span class="close flex-column justify-content-center" (click)="closeDocument(d); $event.preventDefault()">
                     <i-bs name="x"></i-bs>
                   </span>
@@ -163,7 +162,7 @@
                 <a class="nav-link app-link" [class.text-truncate]="!slimSidebarEnabled" [routerLink]="[]" (click)="closeAll()"
                   ngbPopover="Close all" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                   container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-1" name="x"></i-bs><span>&nbsp;<ng-container i18n>Close all</ng-container></span>
+                  <i-bs class="me-2" name="x"></i-bs><span><ng-container i18n>Close all</ng-container></span>
                 </a>
               </li>
             }
@@ -175,49 +174,65 @@
             <span i18n>Manage</span>
           </h6>
           <ul class="nav flex-column mb-2">
-            <li class="nav-item app-link"
-              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-              <a class="nav-link" routerLink="correspondents" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Correspondents" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="person"></i-bs><span>&nbsp;<ng-container i18n>Correspondents</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"
-              tourAnchor="tour.tags">
-              <a class="nav-link" routerLink="tags" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Tags"
-                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
-                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="tags"></i-bs><span>&nbsp;<ng-container i18n>Tags</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link"
-              *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-              <a class="nav-link" routerLink="documenttypes" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Document Types" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="hash"></i-bs><span>&nbsp;<ng-container i18n>Document Types</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-              <a class="nav-link" routerLink="storagepaths" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Storage Paths" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="folder"></i-bs><span>&nbsp;<ng-container i18n>Storage Paths</ng-container></span>
-              </a>
-            </li>
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
-              <a class="nav-link" routerLink="customfields" routerLinkActive="active" (click)="closeMenu()"
-                ngbPopover="Custom Fields" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
-                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
-              </a>
-            </li>
+            @if (canManageAttributes) {
+              <li class="nav-item app-link" tourAnchor="tour.tags">
+                <div class="d-flex align-items-center attributes-row">
+                  <a class="nav-link flex-fill" routerLink="attributes" routerLinkActive="active" (click)="closeMenu()"
+                    ngbPopover="Attributes" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                    container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                    <i-bs class="me-2" name="stack"></i-bs><span><ng-container i18n>Attributes</ng-container></span>
+                  </a>
+                  @if (!slimSidebarEnabled) {
+                    <button
+                      type="button"
+                      class="btn btn-link btn-sm text-muted p-0 me-3 attributes-expand-btn"
+                      (click)="toggleAttributesSections($event)"
+                      [attr.aria-label]="attributesSectionsCollapsed ? 'Expand attributes sections' : 'Collapse attributes sections'"
+                      i18n-aria-label
+                    >
+                      <i-bs [name]="attributesSectionsCollapsed ? 'plus-circle' : 'dash-circle'"></i-bs>
+                    </button>
+                  }
+                </div>
+                <div
+                  class="attributes-submenu ms-2"
+                  [ngbCollapse]="slimSidebarEnabled || attributesSectionsCollapsed"
+                >
+                  <ul class="nav flex-column">
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
+                      <a class="nav-link py-1" routerLink="attributes/tags" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="tags"></i-bs><span><ng-container i18n>Tags</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
+                      <a class="nav-link py-1" routerLink="attributes/correspondents" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="person"></i-bs><span><ng-container i18n>Correspondents</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
+                      <a class="nav-link py-1" routerLink="attributes/documenttypes" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="hash"></i-bs><span><ng-container i18n>Document types</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
+                      <a class="nav-link py-1" routerLink="attributes/storagepaths" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="folder"></i-bs><span><ng-container i18n>Storage paths</ng-container></span>
+                      </a>
+                    </li>
+                    <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.CustomField }">
+                      <a class="nav-link py-1" routerLink="attributes/customfields" routerLinkActive="active" (click)="closeMenu()">
+                        <i-bs class="me-2" name="ui-radios"></i-bs><span><ng-container i18n>Custom fields</ng-container></span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            }
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
               <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="window-stack"></i-bs><span>&nbsp;<ng-container i18n>Saved Views</ng-container></span>
+                <i-bs class="me-2" name="window-stack"></i-bs><span><ng-container i18n>Saved Views</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link"
@@ -226,7 +241,7 @@
               <a class="nav-link" routerLink="workflows" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Workflows" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="boxes"></i-bs><span>&nbsp;<ng-container i18n>Workflows</ng-container></span>
+                <i-bs class="me-2" name="boxes"></i-bs><span><ng-container i18n>Workflows</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailAccount }"
@@ -234,14 +249,14 @@
               <a class="nav-link" routerLink="mail" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Mail"
                 i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                 triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
+                <i-bs class="me-2" name="envelope"></i-bs><span><ng-container i18n>Mail</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
               <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
                 i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                 triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
+                <i-bs class="me-2" name="trash"></i-bs><span><ng-container i18n>Trash</ng-container></span>
               </a>
             </li>
           </ul>
@@ -257,21 +272,21 @@
               <a class="nav-link" routerLink="settings" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Settings" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="gear"></i-bs><span>&nbsp;<ng-container i18n>Settings</ng-container></span>
+                <i-bs class="me-2" name="gear"></i-bs><span><ng-container i18n>Settings</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.AppConfig }">
               <a class="nav-link" routerLink="config" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Configuration" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="sliders2-vertical"></i-bs><span>&nbsp;<ng-container i18n>Configuration</ng-container></span>
+                <i-bs class="me-2" name="sliders2-vertical"></i-bs><span><ng-container i18n>Configuration</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }">
               <a class="nav-link" routerLink="usersgroups" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="Users & Groups" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="people"></i-bs><span>&nbsp;<ng-container i18n>Users & Groups</ng-container></span>
+                <i-bs class="me-2" name="people"></i-bs><span><ng-container i18n>Users & Groups</ng-container></span>
               </a>
             </li>
             <li class="nav-item app-link"
@@ -280,7 +295,7 @@
               <a class="nav-link" routerLink="tasks" routerLinkActive="active" (click)="closeMenu()"
                 ngbPopover="File Tasks" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
                 container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="list-task"></i-bs><span>&nbsp;<ng-container i18n>File Tasks</ng-container>@if (tasksService.failedFileTasks.length > 0) {
+                <i-bs class="me-2" name="list-task"></i-bs><span><ng-container i18n>File Tasks</ng-container>@if (tasksService.failedFileTasks.length > 0) {
                   <span><span class="badge bg-danger ms-2 d-inline">{{tasksService.failedFileTasks.length}}</span></span>
                 }</span>
                 @if (tasksService.failedFileTasks.length > 0 && slimSidebarEnabled) {
@@ -293,7 +308,7 @@
                 <a class="nav-link" routerLink="logs" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Logs"
                   i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                   triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                  <i-bs class="me-1" name="text-left"></i-bs><span>&nbsp;<ng-container i18n>Logs</ng-container></span>
+                  <i-bs class="me-2" name="text-left"></i-bs><span><ng-container i18n>Logs</ng-container></span>
                 </a>
               </li>
             }
@@ -302,7 +317,7 @@
                 target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
                 i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
                 triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="d-flex" name="question-circle"></i-bs><span class="ms-1">&nbsp;<ng-container i18n>Documentation</ng-container></span>
+                <i-bs class="d-flex me-2" name="question-circle"></i-bs><span><ng-container i18n>Documentation</ng-container></span>
               </a>
             </li>
             <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
@@ -341,9 +356,9 @@
                           href="https://github.com/paperless-ngx/paperless-ngx/releases"
                           [ngbPopover]="updateAvailablePopContent" popoverClass="shadow" triggers="mouseenter:mouseleave"
                           container="body">
-                          <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>
+                          <i-bs width="1.2em" height="1.2em" name="info-circle" class="me-1"></i-bs>
                           @if (appRemoteVersion?.update_available) {
-                            &nbsp;<ng-container i18n>Update available</ng-container>
+                            <ng-container i18n>Update available</ng-container>
                           }
                         </a>
                       }

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

@@ -177,6 +177,15 @@ main {
   }
 }
 
+.attributes-row .attributes-expand-btn {
+  opacity: 0.2;
+  transition: opacity 0.15s ease-in-out;
+}
+
+.attributes-row:hover .attributes-expand-btn {
+  opacity: 1;
+}
+
 .sidebar-heading {
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -281,7 +290,7 @@ main {
 .navbar .dropdown-menu {
   font-size: 0.875rem; // body size
 
-  a i-bs {
+  a i-bs, button i-bs {
     opacity: 0.6;
   }
 }

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

@@ -28,7 +28,10 @@ import {
   DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import {
+  PermissionType,
+  PermissionsService,
+} from 'src/app/services/permissions.service'
 import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
@@ -258,7 +261,7 @@ describe('AppFrameComponent', () => {
     const toastSpy = jest.spyOn(toastService, 'showError')
     component.toggleSlimSidebar()
     httpTestingController
-      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .match(`${environment.apiBaseUrl}ui_settings/`)[0]
       .flush('error', {
         status: 500,
         statusText: 'error',
@@ -373,4 +376,103 @@ describe('AppFrameComponent', () => {
   it('should call maybeRefreshDocumentCounts after saved views reload', () => {
     expect(maybeRefreshSpy).toHaveBeenCalled()
   })
+
+  it('should indicate attributes management availability when any permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Tag
+      })
+
+    expect(component.canManageAttributes).toBe(true)
+  })
+
+  it('should indicate attributes management availability for other permission types', () => {
+    const canSpy = jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Correspondent
+      })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.DocumentType
+    })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.StoragePath
+    })
+    expect(component.canManageAttributes).toBe(true)
+
+    canSpy.mockImplementation((action, type) => {
+      return type === PermissionType.CustomField
+    })
+    expect(component.canManageAttributes).toBe(true)
+  })
+
+  it('should toggle attributes sections and stop event bubbling', () => {
+    const preventDefault = jest.fn()
+    const stopPropagation = jest.fn()
+    const setSpy = jest.spyOn(settingsService, 'set')
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+
+    component.toggleAttributesSections({
+      preventDefault,
+      stopPropagation,
+    } as any)
+
+    expect(preventDefault).toHaveBeenCalled()
+    expect(stopPropagation).toHaveBeenCalled()
+    expect(setSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
+  })
+
+  it('should show error when saving slim sidebar setting fails', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    jest
+      .spyOn(settingsService, 'storeSettings')
+      .mockReturnValue(throwError(() => new Error('boom')))
+
+    component.slimSidebarEnabled = true
+
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should show error when saving attributes collapsed setting fails', () => {
+    const toastSpy = jest.spyOn(toastService, 'showError')
+    jest.spyOn(console, 'warn').mockImplementation(() => {})
+    jest
+      .spyOn(settingsService, 'storeSettings')
+      .mockReturnValue(throwError(() => new Error('boom')))
+
+    component.attributesSectionsCollapsed = true
+
+    expect(toastSpy).toHaveBeenCalled()
+  })
+
+  it('should persist attributes section collapse state', () => {
+    const setSpy = jest.spyOn(settingsService, 'set')
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+
+    component.attributesSectionsCollapsed = true
+
+    expect(setSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
+  })
+
+  it('should collapse attributes sections when enabling slim sidebar', () => {
+    jest.spyOn(settingsService, 'storeSettings').mockReturnValue(of(true))
+    settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
+    settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, false)
+
+    component.toggleSlimSidebar()
+
+    expect(component.attributesSectionsCollapsed).toBe(true)
+  })
 })

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

@@ -21,7 +21,7 @@ import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { CollapsibleSection, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
 import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
@@ -141,11 +141,20 @@ export class AppFrameComponent
   toggleSlimSidebar(): void {
     this.slimSidebarAnimating = true
     this.slimSidebarEnabled = !this.slimSidebarEnabled
+    if (this.slimSidebarEnabled) {
+      this.attributesSectionsCollapsed = true
+    }
     setTimeout(() => {
       this.slimSidebarAnimating = false
     }, 200) // slightly longer than css animation for slim sidebar
   }
 
+  toggleAttributesSections(event?: Event): void {
+    event?.preventDefault()
+    event?.stopPropagation()
+    this.attributesSectionsCollapsed = !this.attributesSectionsCollapsed
+  }
+
   get versionString(): string {
     return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
@@ -167,6 +176,31 @@ export class AppFrameComponent
     )
   }
 
+  get canManageAttributes(): boolean {
+    return (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Tag
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.Correspondent
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.DocumentType
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.StoragePath
+      ) ||
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.CustomField
+      )
+    )
+  }
+
   get slimSidebarEnabled(): boolean {
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
@@ -186,6 +220,31 @@ export class AppFrameComponent
       })
   }
 
+  get attributesSectionsCollapsed(): boolean {
+    return this.settingsService
+      .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
+      ?.includes(CollapsibleSection.ATTRIBUTES)
+  }
+
+  set attributesSectionsCollapsed(collapsed: boolean) {
+    // TODO: refactor to be able to toggle individual sections, if implemented
+    this.settingsService.set(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      collapsed ? [CollapsibleSection.ATTRIBUTES] : []
+    )
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
+  }
+
   get aiEnabled(): boolean {
     return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }

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

@@ -49,17 +49,13 @@
                 [disabled]="disablePrimaryButton(type, item)"
                 (mouseenter)="onButtonHover($event)">
                     @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                     } @else if (type === DataType.SavedView) {
-                        <i-bs width="1em" height="1em" name="eye"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="eye" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                     } @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
-                        <i-bs width="1em" height="1em" name="pencil"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                        <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                     } @else {
-                        <i-bs width="1em" height="1em" name="filter"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Filter documents</ng-container></span>
+                        <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><span><ng-container i18n>Filter documents</ng-container></span>
                     }
                 </button>
                 @if (type !== DataType.SavedView && type !== DataType.Workflow && type !== DataType.CustomField && type !== DataType.Group && type !== DataType.User && type !== DataType.MailAccount && type !== DataType.MailRule) {
@@ -69,11 +65,9 @@
                     [disabled]="disableSecondaryButton(type, item)"
                     (mouseenter)="onButtonHover($event)">
                         @if (type === DataType.Document) {
-                            <i-bs width="1em" height="1em" name="download"></i-bs>
-                            <span>&nbsp;<ng-container i18n>Download</ng-container></span>
+                            <i-bs width="1em" height="1em" name="download" class="me-1"></i-bs><span><ng-container i18n>Download</ng-container></span>
                         } @else {
-                            <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
-                            <span>&nbsp;<ng-container i18n>Open</ng-container></span>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext" class="me-1"></i-bs><span><ng-container i18n>Open</ng-container></span>
                         }
                     </button>
                 }

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

@@ -20,7 +20,7 @@
                     @for (docId of value; track docId) {
                       @if (getDocumentTitle(docId)) {
                           <a routerLink="/documents/{{docId}}" class="badge bg-body text-primary" title="View" i18n-title>
-                              <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{ getDocumentTitle(docId) }}</span>
+                              <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{ getDocumentTitle(docId) }}</span>
                           </a>
                       }
                     }

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

@@ -1,7 +1,6 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions">
     <button type="button" class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
-      <i-bs name="ui-radios"></i-bs>
-      <div class="d-none d-lg-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
+      <i-bs name="ui-radios"></i-bs><div class="d-none d-lg-inline ms-1"><ng-container i18n>Custom Fields</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
         <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
@@ -18,7 +17,7 @@
             @if (!filterText?.length || filteredFields.length === 0) {
                 <button class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
                     <small>
-                        <i-bs width=".9em" height=".9em" name="asterisk"></i-bs>&nbsp;<ng-container i18n>Create new field</ng-container>
+                        <i-bs width=".9em" height=".9em" name="asterisk" class="me-1"></i-bs><ng-container i18n>Create new field</ng-container>
                     </small>
                 </button>
             }

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

@@ -1,8 +1,7 @@
 @if (useDropdown) {
   <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
     <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
-      <i-bs name="{{icon}}"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+      <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
       @if (isActive) {
         <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
       }

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

@@ -1,7 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions" [placement]="placement">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateTo || createdDateFrom ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
   <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">

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

@@ -17,7 +17,7 @@
       @switch (objectForm.get('data_type').value) {
         @case (CustomFieldDataType.Select) {
           <button type="button" class="btn btn-sm btn-primary my-2" (click)="addSelectOption()">
-            <span i18n>Add option</span>&nbsp;<i-bs name="plus-circle"></i-bs>
+            <span i18n>Add option</span><i-bs class="ms-1" name="plus-circle"></i-bs>
           </button>
           <div formArrayName="select_options">
             @for (option of objectForm.controls.extra_data.controls.select_options.controls; track option; let i = $index) {

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

@@ -9,19 +9,24 @@
   </div>
   <div class="modal-body">
     <div class="row">
-      <div class="col-md-4">
+      <div class="col-md-6">
         <pngx-input-text [horizontal]="true" i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-4">
         <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
       </div>
-      <div class="col-md-3">
-        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
-      </div>
       <div class="col-md-2 pt-2">
         <pngx-input-switch [horizontal]="true" i18n-title title="Enabled" formControlName="enabled"></pngx-input-switch>
       </div>
     </div>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-switch [horizontal]="true" i18n-title title="Stop further processing" formControlName="stop_processing" i18n-hint hint="Stop processing further rules if this rule queues any document(s)."></pngx-input-switch>
+      </div>
+    </div>
     <hr class="mt-0"/>
     <div class="row">
       <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the criteria specified below.</p>

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

@@ -222,6 +222,7 @@ export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
       ),
       assign_correspondent: new FormControl(null),
       assign_owner_from_rule: new FormControl(true),
+      stop_processing: new FormControl(false),
     })
   }
 

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

@@ -30,7 +30,7 @@
               <div class="d-flex">
                 <p class="p-2" i18n>Trigger Workflow On:</p>
                 <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addTrigger()">
-                  <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Trigger</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Trigger</ng-container>
                 </button>
               </div>
               <div ngbAccordion [closeOthers]="true">
@@ -72,7 +72,7 @@
               <div class="d-flex">
                 <p class="p-2" i18n>Apply Actions:</p>
                 <button type="button" class="btn btn-sm btn-outline-primary ms-auto mb-3" (click)="addAction()">
-                  <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Action</ng-container>
+                  <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Action</ng-container>
                 </button>
               </div>
               <div ngbAccordion [closeOthers]="true" cdkDropList (cdkDropListDropped)="onActionDrop($event)">
@@ -187,7 +187,7 @@
                 (click)="addFilter(formGroup)"
                 [disabled]="!canAddFilter(formGroup)"
               >
-                <i-bs name="plus-circle"></i-bs>&nbsp;<span i18n>Add filter</span>
+                <i-bs name="plus-circle" class="me-1"></i-bs><span i18n>Add filter</span>
               </button>
             </div>
             <ul class="mt-2 list-group filters" formArrayName="filters">

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

@@ -1,7 +1,6 @@
 <div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
   <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
-    <i-bs name="{{icon}}"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
     @if (!editing && selectionModel.totalCount > 0) {
       <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
     }

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

@@ -5,7 +5,7 @@
         <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)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>

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

@@ -4,7 +4,7 @@
       <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)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

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

@@ -9,7 +9,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -44,11 +44,11 @@
         }
         @if (document.title) {
           <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
+            <i-bs width="0.9em" height="0.9em" name="file-text" class="me-1"></i-bs><span>{{document.title}}</span>
           </a>
         } @else {
           <span class="badge bg-light text-muted" (click)="unselect(document)" (mousedown)="$event.stopImmediatePropagation()" type="button" title="Remove link" i18n-title>
-            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill"></i-bs>&nbsp;<span i18n>Not found</span>
+            <i-bs width="0.9em" height="0.9em" name="exclamation-triangle-fill" class="me-1"></i-bs><span i18n>Not found</span>
           </span>
         }
       </div>

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

@@ -5,7 +5,7 @@
         <label class="form-label mb-0" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
       }
       <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="addEntry()">
-        <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add</ng-container>
+        <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add</ng-container>
       </button>
     </div>
     <div class="position-relative">

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

@@ -6,7 +6,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
             </button>
           }
         </div>

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

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
         </button>
       }
     </div>

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

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

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

@@ -7,7 +7,7 @@
         }
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
             </button>
         }
       </div>

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

@@ -10,7 +10,7 @@
         </label>
         @if (removable) {
           <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-            <i-bs  name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+            <i-bs  name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>
@@ -22,7 +22,7 @@
           <label class="form-check-label" [class.text-muted]="showUnsetNote && isUnset" [for]="inputId" [ngbTooltip]="showUnsetNote && isUnset ? tipContent: null" placement="end">
             {{title}}
             @if (showUnsetNote && isUnset) {
-              &nbsp;<i-bs width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
+              <i-bs class="ms-1" width="0.9em" height="0.9em" name="exclamation-triangle"></i-bs>
             }
           </label>
         }

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

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

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

@@ -6,7 +6,7 @@
       }
       @if (removable) {
         <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
           </button>
         }
       </div>

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

@@ -4,7 +4,7 @@
       <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)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Remove</ng-container>
         </button>
       }
     </div>

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

@@ -5,7 +5,7 @@
       @if (id) {
         <span class="badge bg-primary text-primary-text-contrast ms-3 small fs-normal cursor-pointer" (click)="copyID()">
           @if (copied) {
-            <i-bs width="1em" height="1em" name="clipboard-check"></i-bs>&nbsp;<ng-container i18n>Copied!</ng-container>
+            <i-bs width="1em" height="1em" name="clipboard-check" class="me-1"></i-bs><ng-container i18n>Copied!</ng-container>
           } @else {
             ID: {{id}}
           }

src-ui/src/app/components/common/pdf-viewer/pdf-viewer.component.scss

@@ -150,4 +150,8 @@
   position: absolute;
   inset: 0;
   pointer-events: none;
+
+  & .annotationTextContent {
+    opacity: 0;
+  }
 }

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

@@ -65,6 +65,13 @@ describe('PngxPdfViewerComponent', () => {
     const pageSpy = jest.fn()
     component.pageChange.subscribe(pageSpy)
 
+    // In real usage the viewer may have multiple pages; our pdfjs mock defaults
+    // to a single page, so explicitly simulate a multi-page document here.
+    const pdf = (component as any).pdf as { numPages: number }
+    pdf.numPages = 3
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.setDocument(pdf)
+
     component.zoomScale = PdfZoomScale.PageFit
     component.zoom = PdfZoomLevel.Two
     component.rotation = 90
@@ -81,7 +88,6 @@ describe('PngxPdfViewerComponent', () => {
       page: new SimpleChange(undefined, 2, false),
     })
 
-    const viewer = (component as any).pdfViewer as PDFViewer
     expect(viewer.pagesRotation).toBe(90)
     expect(viewer.currentPageNumber).toBe(2)
     expect(pageSpy).toHaveBeenCalledWith(2)
@@ -196,6 +202,8 @@ describe('PngxPdfViewerComponent', () => {
     const scaleSpy = jest.spyOn(component as any, 'applyViewerState')
     const resizeSpy = jest.spyOn(component as any, 'setupResizeObserver')
 
+    // Angular sets the input value before calling ngOnChanges; mirror that here.
+    component.src = 'test.pdf'
     component.ngOnChanges({
       src: new SimpleChange(undefined, 'test.pdf', true),
       zoomScale: new SimpleChange(
@@ -211,6 +219,25 @@ describe('PngxPdfViewerComponent', () => {
     expect(scaleSpy).not.toHaveBeenCalled()
   })
 
+  it('resets viewer state on src change', () => {
+    const mockViewer = {
+      setDocument: jest.fn(),
+      currentPageNumber: 7,
+      cleanup: jest.fn(),
+    }
+    ;(component as any).pdfViewer = mockViewer
+    ;(component as any).loadingTask = { destroy: jest.fn() }
+    jest.spyOn(component as any, 'loadDocument').mockImplementation(() => {})
+
+    component.src = 'test.pdf'
+    component.ngOnChanges({
+      src: new SimpleChange(undefined, 'test.pdf', true),
+    })
+
+    expect(mockViewer.setDocument).toHaveBeenCalledWith(null)
+    expect(mockViewer.currentPageNumber).toBe(1)
+  })
+
   it('applies viewer state after view init when already loaded', () => {
     const applySpy = jest.spyOn(component as any, 'applyViewerState')
     ;(component as any).hasLoaded = true

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

@@ -81,7 +81,7 @@ export class PngxPdfViewerComponent
     this.dispatchFindIfReady()
     this.rendered.emit()
   }
-  private readonly onPagesInit = () => this.applyScale()
+  private readonly onPagesInit = () => this.applyViewerState()
   private readonly onPageChanging = (evt: { pageNumber: number }) => {
     // Avoid [(page)] two-way binding re-triggers navigation
     this.lastViewerPage = evt.pageNumber
@@ -90,8 +90,10 @@ export class PngxPdfViewerComponent
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['src']) {
-      this.hasLoaded = false
-      this.loadDocument()
+      this.resetViewerState()
+      if (this.src) {
+        this.loadDocument()
+      }
       return
     }
 
@@ -139,6 +141,21 @@ export class PngxPdfViewerComponent
     this.pdfViewer = undefined
   }
 
+  private resetViewerState(): void {
+    this.hasLoaded = false
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+    this.lastViewerPage = undefined
+    this.loadingTask?.destroy()
+    this.loadingTask = undefined
+    this.pdf = undefined
+    this.linkService.setDocument(null)
+    if (this.pdfViewer) {
+      this.pdfViewer.setDocument(null)
+      this.pdfViewer.currentPageNumber = 1
+    }
+  }
+
   private async loadDocument(): Promise<void> {
     if (this.hasLoaded) {
       return
@@ -222,7 +239,11 @@ export class PngxPdfViewerComponent
       hasPages &&
       this.page !== this.lastViewerPage
     ) {
-      this.pdfViewer.currentPageNumber = this.page
+      const nextPage = Math.min(
+        Math.max(Math.trunc(this.page), 1),
+        this.pdfViewer.pagesCount
+      )
+      this.pdfViewer.currentPageNumber = nextPage
     }
     if (this.page === this.lastViewerPage) {
       this.lastViewerPage = undefined

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

@@ -1,7 +1,6 @@
 <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">
-    <i-bs name="person-fill-lock"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1">{{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}}">

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

@@ -90,7 +90,7 @@
             <div class="list-group">
               @for (provider of socialAccountProviders; track provider.name) {
                 <a class="list-group-item list-group-item-action text-primary d-flex align-items-center" href="{{ provider.login_url }}" rel="noopener noreferrer">
-                  {{provider.name}}&nbsp;<i-bs class="pb-1 ps-1" name="box-arrow-up-right"></i-bs>
+                  {{provider.name}}<i-bs class="pb-1 ms-2" name="box-arrow-up-right"></i-bs>
                 </a>
               }
             </div>
@@ -139,7 +139,7 @@
           <label class="d-block mb-2" i18n>Two-factor Authentication</label>
           @if (recoveryCodes) {
             <div class="alert alert-warning" role="alert">
-              <i-bs name="exclamation-triangle"></i-bs>&nbsp;<ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
+              <i-bs name="exclamation-triangle" class="me-1"></i-bs><ng-container i18n>Recovery codes will not be shown again, make sure to save them.</ng-container>
             </div>
             <div class="d-flex flex-row align-items-start mb-3">
               <ul class="list-group w-50">
@@ -156,12 +156,10 @@
               </ul>
               <button type="button" class="btn btn-sm btn-outline-secondary ms-2" (click)="copyRecoveryCodes()" i18n-title title="Copy">
                 @if (!codesCopied) {
-                  <i-bs width="1em" height="1em" name="clipboard-fill"></i-bs>
-                  &nbsp;<span i18n>Copy codes</span>
+                  <i-bs width="1em" height="1em" name="clipboard-fill" class="me-1"></i-bs><span i18n>Copy codes</span>
                 }
                 @if (codesCopied) {
-                  <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary"></i-bs>
-                  &nbsp;<span class="text-primary" i18n>Copied!</span>
+                  <i-bs width="1em" height="1em" name="clipboard-check-fill" class="text-primary me-1"></i-bs><span class="text-primary" i18n>Copied!</span>
                 }
               </button>
             </div>

src-ui/src/app/components/common/system-status-dialog/system-status-dialog.component.html

@@ -173,7 +173,7 @@
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
                     <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.IndexOptimize)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                       <ng-container i18n>Run Task</ng-container>
                     </button>
                   }
@@ -207,7 +207,7 @@
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
                     <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.TrainClassifier)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                       <ng-container i18n>Run Task</ng-container>
                     </button>
                   }
@@ -241,7 +241,7 @@
                     <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                   } @else {
                     <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.SanityCheck)">
-                      <i-bs name="play-fill"></i-bs>&nbsp;
+                      <i-bs name="play-fill" class="me-1"></i-bs>
                       <ng-container i18n>Run Task</ng-container>
                     </button>
                   }
@@ -289,7 +289,7 @@
                       <div class="spinner-border spinner-border-sm ms-2" role="status"></div>
                     } @else {
                       <button class="btn btn-sm d-flex align-items-center btn-dark small ms-2" (click)="runTask(PaperlessTaskName.LLMIndexUpdate)">
-                        <i-bs name="play-fill"></i-bs>&nbsp;
+                        <i-bs name="play-fill" class="me-1"></i-bs>
                         <ng-container i18n>Run Task</ng-container>
                       </button>
                     }
@@ -313,10 +313,10 @@
 <div class="modal-footer">
   <button class="btn btn-sm d-flex align-items-center btn-dark btn btn-sm d-flex align-items-center btn-dark btn-outline-secondary" (click)="copy()">
     @if (!copied) {
-      <i-bs name="clipboard-fill"></i-bs>&nbsp;
+      <i-bs name="clipboard-fill" class="me-1"></i-bs>
     }
     @if (copied) {
-      <i-bs name="clipboard-check-fill"></i-bs>&nbsp;
+      <i-bs name="clipboard-check-fill" class="me-1"></i-bs>
     }
     <ng-container i18n>Copy</ng-container>
   </button>

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

@@ -35,10 +35,10 @@
                     <div class="col offset-sm-3">
                     <button class="btn btn-sm btn-outline-secondary" (click)="copyError(toast.error)">
                         @if (!copied) {
-                        <i-bs name="clipboard"></i-bs>&nbsp;
+                        <i-bs name="clipboard" class="me-1"></i-bs>
                         }
                         @if (copied) {
-                        <i-bs name="clipboard-check"></i-bs>&nbsp;
+                        <i-bs name="clipboard-check" class="me-1"></i-bs>
                         }
                         <ng-container i18n>Copy Raw Error</ng-container>
                     </button>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -2,7 +2,7 @@
   <div content tourAnchor="tour.upload-widget">
     <form class="justify-content-center d-flex flex-column align-items-center">
       <button type="button" class="btn btn-outline-dark bg-light shadow-sm w-100 h-100 pt-3 pb-3" (click)="fileUpload.click()">
-        <i-bs class="text-primary" name="plus-circle"></i-bs>&nbsp;
+        <i-bs class="text-primary me-1" name="plus-circle"></i-bs>
         <span class="text-primary" i18n>Upload documents</span>
         <div class="text-muted smaller fst-italic" i18n>or drop files anywhere</div>
       </button>

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -1,7 +1,7 @@
 <pngx-page-header [(title)]="title" [id]="documentId">
   @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
     @if (previewNumPages) {
-      <div class="input-group input-group-sm d-none d-md-flex">
+      <div class="input-group input-group-sm ms-2 d-none d-md-flex">
         <div class="input-group-text" i18n>Page</div>
           <input class="form-control flex-grow-0 w-auto" type="number" min="1" [max]="previewNumPages" [(ngModel)]="previewCurrentPage" />
         <div class="input-group-text" i18n>of {{previewNumPages}}</div>
@@ -24,6 +24,16 @@
     <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="d-none d-lg-inline ps-1" i18n>Delete</span>
   </button>
 
+  <pngx-document-version-dropdown
+    [documentId]="documentId"
+    [versions]="document?.versions ?? []"
+    [selectedVersionId]="selectedVersionId"
+    [userIsOwner]="userIsOwner"
+    [userCanEdit]="userCanEdit"
+    (versionSelected)="onVersionSelected($event)"
+    (versionsUpdated)="onVersionsUpdated($event)"
+  />
+
   <div class="btn-group">
     <button (click)="download()" class="btn btn-sm btn-outline-primary" [disabled]="downloading">
       @if (downloading) {
@@ -46,29 +56,28 @@
 
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary" id="actionsDropdown" ngbDropdownToggle>
-      <i-bs name="three-dots"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+      <i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
       <button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit || !userIsOwner">
-        <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<span i18n>Reprocess</span>
+        <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><span i18n>Reprocess</span>
       </button>
 
       <button ngbDropdownItem (click)="printDocument()" [hidden]="useNativePdfViewer || isMobile">
-        <i-bs width="1em" height="1em" name="printer"></i-bs>&nbsp;<span i18n>Print</span>
+        <i-bs width="1em" height="1em" name="printer" class="me-1"></i-bs><span i18n>Print</span>
       </button>
 
       <button ngbDropdownItem (click)="moreLike()">
-        <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
+        <i-bs width="1em" height="1em" name="diagram-3" class="me-1"></i-bs><span i18n>More like this</span>
       </button>
 
       <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
-        <i-bs name="pencil"></i-bs>&nbsp;<ng-container i18n>PDF Editor</ng-container>
+        <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
       </button>
 
       @if (userIsOwner && (requiresPassword || password)) {
         <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
-          <i-bs name="unlock"></i-bs>&nbsp;<ng-container i18n>Remove Password</ng-container>
+          <i-bs name="unlock" class="me-1"></i-bs><ng-container i18n>Remove Password</ng-container>
         </button>
       }
     </div>
@@ -76,16 +85,15 @@
 
   <div class="ms-auto" ngbDropdown>
     <button class="btn btn-sm btn-outline-primary" id="sendDropdown" ngbDropdownToggle>
-      <i-bs name="send"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Send</ng-container></div>
+      <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
       <button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
-        <i-bs name="link"></i-bs>&nbsp;<span i18n>Share Links</span>
+        <i-bs name="link" class="me-1"></i-bs><span i18n>Share Links</span>
       </button>
       @if (emailEnabled) {
         <button ngbDropdownItem (click)="openEmailDocument()">
-          <i-bs name="envelope"></i-bs>&nbsp;<span i18n>Email</span>
+          <i-bs name="envelope" class="me-1"></i-bs><span i18n>Email</span>
         </button>
       }
     </div>
@@ -457,7 +465,7 @@
         @if (!useNativePdfViewer) {
           <div class="preview-sticky pdf-viewer-container">
             <pngx-pdf-viewer
-              [src]="{ url: previewUrl, password: password }"
+              [src]="pdfSource"
               [renderMode]="PdfRenderMode.All"
               [(page)]="previewCurrentPage"
               [zoomScale]="previewZoomScale"

src-ui/src/app/components/document-detail/document-detail.component.spec.ts

@@ -294,6 +294,27 @@ describe('DocumentDetailComponent', () => {
     component = fixture.componentInstance
   })
 
+  function initNormally() {
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(of(Object.assign({}, doc)))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+    fixture.detectChanges()
+  }
+
   it('should load four tabs via url params', () => {
     jest
       .spyOn(activatedRoute, 'paramMap', 'get')
@@ -354,6 +375,117 @@ describe('DocumentDetailComponent', () => {
     expect(component.document).toEqual(doc)
   })
 
+  it('should redirect to root when opening a version document id', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 10, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(throwError(() => ({ status: 404 }) as any))
+    const getRootSpy = jest
+      .spyOn(documentService, 'getRootId')
+      .mockReturnValue(of({ root_id: 3 }))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(getRootSpy).toHaveBeenCalledWith(10)
+    expect(navigateSpy).toHaveBeenCalledWith(['documents', 3, 'details'], {
+      replaceUrl: true,
+    })
+  })
+
+  it('should navigate to 404 when root lookup fails', () => {
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 10, section: 'details' })))
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValueOnce(throwError(() => ({ status: 404 }) as any))
+    jest
+      .spyOn(documentService, 'getRootId')
+      .mockReturnValue(throwError(() => new Error('boom')))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true })
+  })
+
+  it('should not render a delete button for the root/original version', () => {
+    const docWithVersions = {
+      ...doc,
+      versions: [
+        {
+          id: doc.id,
+          added: new Date('2024-01-01T00:00:00Z'),
+          version_label: 'Original',
+          checksum: 'aaaa',
+          is_root: true,
+        },
+        {
+          id: 10,
+          added: new Date('2024-01-02T00:00:00Z'),
+          version_label: 'Edited',
+          checksum: 'bbbb',
+          is_root: false,
+        },
+      ],
+    } as Document
+
+    jest
+      .spyOn(activatedRoute, 'paramMap', 'get')
+      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+    jest.spyOn(documentService, 'get').mockReturnValueOnce(of(docWithVersions))
+    jest
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValue(of({ has_archive_version: true } as any))
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+    jest
+      .spyOn(openDocumentsService, 'openDocument')
+      .mockReturnValueOnce(of(true))
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+
+    fixture.detectChanges()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+    fixture.detectChanges()
+
+    const deleteButtons = fixture.debugElement.queryAll(
+      By.css('pngx-confirm-button')
+    )
+    expect(deleteButtons.length).toEqual(1)
+  })
+
   it('should fall back to details tab when duplicates tab is active but no duplicates', () => {
     initNormally()
     component.activeNavID = component.DocumentDetailNavIDs.Duplicates
@@ -532,6 +664,18 @@ describe('DocumentDetailComponent', () => {
     expect(navigateSpy).toHaveBeenCalledWith(['404'], { replaceUrl: true })
   })
 
+  it('discard should request the currently selected version', () => {
+    initNormally()
+    const getSpy = jest.spyOn(documentService, 'get')
+    getSpy.mockClear()
+    getSpy.mockReturnValueOnce(of(doc))
+
+    component.selectedVersionId = 10
+    component.discard()
+
+    expect(getSpy).toHaveBeenCalledWith(component.documentId, 10)
+  })
+
   it('should 404 on invalid id', () => {
     const navigateSpy = jest.spyOn(router, 'navigate')
     jest
@@ -584,6 +728,18 @@ describe('DocumentDetailComponent', () => {
     )
   })
 
+  it('save should target currently selected version', () => {
+    initNormally()
+    component.selectedVersionId = 10
+    const patchSpy = jest.spyOn(documentService, 'patch')
+    patchSpy.mockReturnValue(of(doc))
+
+    component.save()
+
+    expect(patchSpy).toHaveBeenCalled()
+    expect(patchSpy.mock.calls[0][1]).toEqual(10)
+  })
+
   it('should show toast error on save if error occurs', () => {
     currentUserHasObjectPermissions = true
     initNormally()
@@ -1036,7 +1192,32 @@ describe('DocumentDetailComponent', () => {
     const metadataSpy = jest.spyOn(documentService, 'getMetadata')
     metadataSpy.mockReturnValue(of({ has_archive_version: true }))
     initNormally()
-    expect(metadataSpy).toHaveBeenCalled()
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, null)
+  })
+
+  it('should pass metadata version only for non-latest selected versions', () => {
+    const metadataSpy = jest.spyOn(documentService, 'getMetadata')
+    metadataSpy.mockReturnValue(of({ has_archive_version: true }))
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, null)
+
+    metadataSpy.mockClear()
+    component.document.versions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+    jest.spyOn(documentService, 'getPreviewUrl').mockReturnValue('preview-root')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-root')
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(of({ content: 'root' } as Document))
+
+    component.selectVersion(doc.id)
+    httpTestingController.expectOne('preview-root').flush('root')
+
+    expect(metadataSpy).toHaveBeenCalledWith(doc.id, doc.id)
   })
 
   it('should show an error if failed metadata retrieval', () => {
@@ -1441,26 +1622,88 @@ describe('DocumentDetailComponent', () => {
     expect(closeSpy).toHaveBeenCalled()
   })
 
-  function initNormally() {
-    jest
-      .spyOn(activatedRoute, 'paramMap', 'get')
-      .mockReturnValue(of(convertToParamMap({ id: 3, section: 'details' })))
+  it('selectVersion should update preview and handle preview failures', () => {
+    const previewSpy = jest.spyOn(documentService, 'getPreviewUrl')
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    previewSpy.mockReturnValueOnce('preview-version')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-version')
     jest
       .spyOn(documentService, 'get')
-      .mockReturnValueOnce(of(Object.assign({}, doc)))
-    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(null)
+      .mockReturnValue(of({ content: 'version-content' } as Document))
+
+    component.selectVersion(10)
+    httpTestingController.expectOne('preview-version').flush('version text')
+
+    expect(component.previewUrl).toBe('preview-version')
+    expect(component.thumbUrl).toBe('thumb-version')
+    expect(component.previewText).toBe('version text')
+    expect(component.documentForm.get('content').value).toBe('version-content')
+    const pdfSource = component.pdfSource as { url: string; password?: string }
+    expect(pdfSource.url).toBe('preview-version')
+    expect(pdfSource.password).toBeUndefined()
+
+    previewSpy.mockReturnValueOnce('preview-error')
+    component.selectVersion(11)
+    httpTestingController
+      .expectOne('preview-error')
+      .error(new ErrorEvent('fail'))
+
+    expect(component.previewText).toContain('An error occurred loading content')
+  })
+
+  it('selectVersion should show toast if version content retrieval fails', () => {
+    initNormally()
+    httpTestingController.expectOne(component.previewUrl).flush('preview')
+
+    jest.spyOn(documentService, 'getPreviewUrl').mockReturnValue('preview-ok')
+    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-ok')
     jest
-      .spyOn(openDocumentsService, 'openDocument')
-      .mockReturnValueOnce(of(true))
-    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
-      of({
-        count: customFields.length,
-        all: customFields.map((f) => f.id),
-        results: customFields,
-      })
+      .spyOn(documentService, 'getMetadata')
+      .mockReturnValue(of({ has_archive_version: true } as any))
+    const contentError = new Error('content failed')
+    jest
+      .spyOn(documentService, 'get')
+      .mockReturnValue(throwError(() => contentError))
+    const toastSpy = jest.spyOn(toastService, 'showError')
+
+    component.selectVersion(10)
+    httpTestingController.expectOne('preview-ok').flush('preview text')
+
+    expect(toastSpy).toHaveBeenCalledWith(
+      'Error retrieving version content',
+      contentError
     )
-    fixture.detectChanges()
-  }
+  })
+
+  it('onVersionSelected should delegate to selectVersion', () => {
+    const selectVersionSpy = jest
+      .spyOn(component, 'selectVersion')
+      .mockImplementation(() => {})
+
+    component.onVersionSelected(42)
+
+    expect(selectVersionSpy).toHaveBeenCalledWith(42)
+  })
+
+  it('onVersionsUpdated should sync open document versions and save', () => {
+    component.documentId = doc.id
+    component.document = { ...doc, versions: [] } as Document
+    const updatedVersions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+    const openDoc = { ...doc, versions: [] } as Document
+    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(openDoc)
+    const saveSpy = jest.spyOn(openDocumentsService, 'save')
+
+    component.onVersionsUpdated(updatedVersions)
+
+    expect(component.document.versions).toEqual(updatedVersions)
+    expect(openDoc.versions).toEqual(updatedVersions)
+    expect(saveSpy).toHaveBeenCalled()
+  })
 
   it('createDisabled should return true if the user does not have permission to add the specified data type', () => {
     currentUserCan = false
@@ -1554,6 +1797,70 @@ describe('DocumentDetailComponent', () => {
     expect(urlRevokeSpy).toHaveBeenCalled()
   })
 
+  it('should include version in download and print only for non-latest selected version', () => {
+    initNormally()
+    component.document.versions = [
+      { id: doc.id, is_root: true },
+      { id: 10, is_root: false },
+    ] as any
+
+    const getDownloadUrlSpy = jest
+      .spyOn(documentService, 'getDownloadUrl')
+      .mockReturnValueOnce('download-latest')
+      .mockReturnValueOnce('print-latest')
+      .mockReturnValueOnce('download-non-latest')
+      .mockReturnValueOnce('print-non-latest')
+
+    component.selectedVersionId = 10
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    httpTestingController
+      .expectOne('download-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(2, doc.id, false, null)
+    httpTestingController
+      .expectOne('print-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.selectedVersionId = doc.id
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(3, doc.id, false, doc.id)
+    httpTestingController
+      .expectOne('download-non-latest')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(4, doc.id, false, doc.id)
+    httpTestingController
+      .expectOne('print-non-latest')
+      .error(new ProgressEvent('failed'))
+  })
+
+  it('should omit version in download and print when no version is selected', () => {
+    initNormally()
+    component.document.versions = [] as any
+    ;(component as any).selectedVersionId = undefined
+
+    const getDownloadUrlSpy = jest
+      .spyOn(documentService, 'getDownloadUrl')
+      .mockReturnValueOnce('download-no-version')
+      .mockReturnValueOnce('print-no-version')
+
+    component.download()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(1, doc.id, false, null)
+    httpTestingController
+      .expectOne('download-no-version')
+      .error(new ProgressEvent('failed'))
+
+    component.printDocument()
+    expect(getDownloadUrlSpy).toHaveBeenNthCalledWith(2, doc.id, false, null)
+    httpTestingController
+      .expectOne('print-no-version')
+      .error(new ProgressEvent('failed'))
+  })
+
   it('should download a file with the correct filename', () => {
     const mockBlob = new Blob(['test content'], { type: 'text/plain' })
     const mockResponse = new HttpResponse({

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -36,7 +36,7 @@ import { Correspondent } from 'src/app/data/correspondent'
 import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
 import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { DataType } from 'src/app/data/datatype'
-import { Document } from 'src/app/data/document'
+import { Document, DocumentVersionInfo } from 'src/app/data/document'
 import { DocumentMetadata } from 'src/app/data/document-metadata'
 import { DocumentNote } from 'src/app/data/document-note'
 import { DocumentSuggestions } from 'src/app/data/document-suggestions'
@@ -110,6 +110,7 @@ import { PDFEditorComponent } from '../common/pdf-editor/pdf-editor.component'
 import { PngxPdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
 import {
   PdfRenderMode,
+  PdfSource,
   PdfZoomLevel,
   PdfZoomScale,
   PngxPdfDocumentProxy,
@@ -119,6 +120,7 @@ import { SuggestionsDropdownComponent } from '../common/suggestions-dropdown/sug
 import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import { DocumentHistoryComponent } from './document-history/document-history.component'
+import { DocumentVersionDropdownComponent } from './document-version-dropdown/document-version-dropdown.component'
 import { MetadataCollapseComponent } from './metadata-collapse/metadata-collapse.component'
 
 enum DocumentDetailNavIDs {
@@ -176,6 +178,7 @@ enum ContentRenderType {
     TextAreaComponent,
     RouterModule,
     PngxPdfViewerComponent,
+    DocumentVersionDropdownComponent,
   ],
 })
 export class DocumentDetailComponent
@@ -183,6 +186,7 @@ export class DocumentDetailComponent
   implements OnInit, OnDestroy, DirtyComponent
 {
   PdfRenderMode = PdfRenderMode
+
   documentsService = inject(DocumentService)
   private route = inject(ActivatedRoute)
   private tagService = inject(TagService)
@@ -227,12 +231,16 @@ export class DocumentDetailComponent
   title: string
   titleSubject: Subject<string> = new Subject()
   previewUrl: string
+  pdfSource?: PdfSource
   thumbUrl: string
   previewText: string
   previewLoaded: boolean = false
   tiffURL: string
   tiffError: string
 
+  // Versioning
+  selectedVersionId: number
+
   correspondents: Correspondent[]
   documentTypes: DocumentType[]
   storagePaths: StoragePath[]
@@ -310,13 +318,19 @@ export class DocumentDetailComponent
   }
 
   get archiveContentRenderType(): ContentRenderType {
-    return this.document?.archived_file_name
+    const hasArchiveVersion =
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
+    return hasArchiveVersion
       ? this.getRenderType('application/pdf')
-      : this.getRenderType(this.document?.mime_type)
+      : this.getRenderType(
+          this.metadata?.original_mime_type || this.document?.mime_type
+        )
   }
 
   get originalContentRenderType(): ContentRenderType {
-    return this.getRenderType(this.document?.mime_type)
+    return this.getRenderType(
+      this.metadata?.original_mime_type || this.document?.mime_type
+    )
   }
 
   get showThumbnailOverlay(): boolean {
@@ -345,6 +359,47 @@ export class DocumentDetailComponent
     return ContentRenderType.Other
   }
 
+  private updatePdfSource() {
+    this.pdfSource = {
+      url: this.previewUrl,
+      password: this.password,
+    }
+  }
+
+  private loadMetadataForSelectedVersion() {
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
+    this.documentsService
+      .getMetadata(this.documentId, selectedVersionId)
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (result) => {
+          this.metadata = result
+          this.tiffURL = null
+          this.tiffError = null
+          if (this.archiveContentRenderType === ContentRenderType.TIFF) {
+            this.tryRenderTiff()
+          }
+          if (
+            this.archiveContentRenderType !== ContentRenderType.PDF ||
+            this.useNativePdfViewer
+          ) {
+            this.previewLoaded = true
+          }
+        },
+        error: (error) => {
+          this.metadata = {} // allow display to fallback to <object> tag
+          this.toastService.showError(
+            $localize`Error retrieving metadata`,
+            error
+          )
+        },
+      })
+  }
+
   get isRTL() {
     if (!this.metadata || !this.metadata.lang) return false
     else {
@@ -420,7 +475,12 @@ export class DocumentDetailComponent
   }
 
   private loadDocument(documentId: number): void {
-    this.previewUrl = this.documentsService.getPreviewUrl(documentId)
+    let redirectedToRoot = false
+    this.selectedVersionId = documentId
+    this.previewUrl = this.documentsService.getPreviewUrl(
+      this.selectedVersionId
+    )
+    this.updatePdfSource()
     this.http
       .get(this.previewUrl, { responseType: 'text' })
       .pipe(
@@ -435,11 +495,29 @@ export class DocumentDetailComponent
             err.message ?? err.toString()
           }`),
       })
-    this.thumbUrl = this.documentsService.getThumbUrl(documentId)
+    this.thumbUrl = this.documentsService.getThumbUrl(this.selectedVersionId)
     this.documentsService
       .get(documentId)
       .pipe(
-        catchError(() => {
+        catchError((error) => {
+          if (error?.status === 404) {
+            // if not found, check if there's root document that exists and redirect if so
+            return this.documentsService.getRootId(documentId).pipe(
+              map((result) => {
+                const rootId = result?.root_id
+                if (rootId && rootId !== documentId) {
+                  const section =
+                    this.route.snapshot.paramMap.get('section') || 'details'
+                  redirectedToRoot = true
+                  this.router.navigate(['documents', rootId, section], {
+                    replaceUrl: true,
+                  })
+                }
+                return null
+              }),
+              catchError(() => of(null))
+            )
+          }
           // 404 is handled in the subscribe below
           return of(null)
         }),
@@ -450,6 +528,9 @@ export class DocumentDetailComponent
       .subscribe({
         next: (doc) => {
           if (!doc) {
+            if (redirectedToRoot) {
+              return
+            }
             this.router.navigate(['404'], { replaceUrl: true })
             return
           }
@@ -666,36 +747,15 @@ export class DocumentDetailComponent
 
   updateComponent(doc: Document) {
     this.document = doc
+    // Default selected version is the newest version
+    const versions = doc.versions ?? []
+    this.selectedVersionId = versions.length
+      ? Math.max(...versions.map((version) => version.id))
+      : doc.id
+    this.previewLoaded = false
     this.requiresPassword = false
     this.updateFormForCustomFields()
-    if (this.archiveContentRenderType === ContentRenderType.TIFF) {
-      this.tryRenderTiff()
-    }
-    this.documentsService
-      .getMetadata(doc.id)
-      .pipe(
-        first(),
-        takeUntil(this.unsubscribeNotifier),
-        takeUntil(this.docChangeNotifier)
-      )
-      .subscribe({
-        next: (result) => {
-          this.metadata = result
-          if (
-            this.archiveContentRenderType !== ContentRenderType.PDF ||
-            this.useNativePdfViewer
-          ) {
-            this.previewLoaded = true
-          }
-        },
-        error: (error) => {
-          this.metadata = {} // allow display to fallback to <object> tag
-          this.toastService.showError(
-            $localize`Error retrieving metadata`,
-            error
-          )
-        },
-      })
+    this.loadMetadataForSelectedVersion()
     if (
       this.permissionsService.currentUserHasObjectPermissions(
         PermissionAction.Change,
@@ -724,6 +784,78 @@ export class DocumentDetailComponent
     }
   }
 
+  // Update file preview and download target to a specific version (by document id)
+  selectVersion(versionId: number) {
+    this.selectedVersionId = versionId
+    this.previewLoaded = false
+    this.previewUrl = this.documentsService.getPreviewUrl(
+      this.documentId,
+      false,
+      this.selectedVersionId
+    )
+    this.updatePdfSource()
+    this.thumbUrl = this.documentsService.getThumbUrl(
+      this.documentId,
+      this.selectedVersionId
+    )
+    this.loadMetadataForSelectedVersion()
+    this.documentsService
+      .get(this.documentId, this.selectedVersionId, 'content')
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (doc) => {
+          const content = doc?.content ?? ''
+          this.document.content = content
+          this.documentForm.patchValue(
+            {
+              content,
+            },
+            {
+              emitEvent: false,
+            }
+          )
+        },
+        error: (error) => {
+          this.toastService.showError(
+            $localize`Error retrieving version content`,
+            error
+          )
+        },
+      })
+    // For text previews, refresh content
+    this.http
+      .get(this.previewUrl, { responseType: 'text' })
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        takeUntil(this.docChangeNotifier)
+      )
+      .subscribe({
+        next: (res) => (this.previewText = res.toString()),
+        error: (err) =>
+          (this.previewText = $localize`An error occurred loading content: ${
+            err.message ?? err.toString()
+          }`),
+      })
+  }
+
+  onVersionSelected(versionId: number) {
+    this.selectVersion(versionId)
+  }
+
+  onVersionsUpdated(versions: DocumentVersionInfo[]) {
+    this.document.versions = versions
+    const openDoc = this.openDocumentService.getOpenDocument(this.documentId)
+    if (openDoc) {
+      openDoc.versions = versions
+      this.openDocumentService.save()
+    }
+  }
+
   get customFieldFormFields(): FormArray {
     return this.documentForm.get('custom_fields') as FormArray
   }
@@ -892,7 +1024,7 @@ export class DocumentDetailComponent
 
   discard() {
     this.documentsService
-      .get(this.documentId)
+      .get(this.documentId, this.selectedVersionId)
       .pipe(
         first(),
         takeUntil(this.unsubscribeNotifier),
@@ -942,7 +1074,7 @@ export class DocumentDetailComponent
     this.networkActive = true
     ;(document.activeElement as HTMLElement)?.dispatchEvent(new Event('change'))
     this.documentsService
-      .patch(this.getChangedFields())
+      .patch(this.getChangedFields(), this.selectedVersionId)
       .pipe(first())
       .subscribe({
         next: (docValues) => {
@@ -997,7 +1129,7 @@ export class DocumentDetailComponent
     this.networkActive = true
     this.store.next(this.documentForm.value)
     this.documentsService
-      .patch(this.getChangedFields())
+      .patch(this.getChangedFields(), this.selectedVersionId)
       .pipe(
         switchMap((updateResult) => {
           this.savedViewService.maybeRefreshDocumentCounts()
@@ -1140,11 +1272,24 @@ export class DocumentDetailComponent
     })
   }
 
+  private getSelectedNonLatestVersionId(): number | null {
+    const versions = this.document?.versions ?? []
+    if (!versions.length || !this.selectedVersionId) {
+      return null
+    }
+    const latestVersionId = Math.max(...versions.map((version) => version.id))
+    return this.selectedVersionId === latestVersionId
+      ? null
+      : this.selectedVersionId
+  }
+
   download(original: boolean = false) {
     this.downloading = true
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
     const downloadUrl = this.documentsService.getDownloadUrl(
       this.documentId,
-      original
+      original,
+      selectedVersionId
     )
     this.http
       .get(downloadUrl, { observe: 'response', responseType: 'blob' })
@@ -1230,6 +1375,7 @@ export class DocumentDetailComponent
   onPasswordKeyUp(event: KeyboardEvent) {
     if ('Enter' == event.key) {
       this.password = (event.target as HTMLInputElement).value
+      this.updatePdfSource()
     }
   }
 
@@ -1575,9 +1721,11 @@ export class DocumentDetailComponent
   }
 
   printDocument() {
+    const selectedVersionId = this.getSelectedNonLatestVersionId()
     const printUrl = this.documentsService.getDownloadUrl(
       this.document.id,
-      false
+      false,
+      selectedVersionId
     )
     this.http
       .get(printUrl, { responseType: 'blob' })
@@ -1625,7 +1773,7 @@ export class DocumentDetailComponent
     const modal = this.modalService.open(ShareLinksDialogComponent)
     modal.componentInstance.documentId = this.document.id
     modal.componentInstance.hasArchiveVersion =
-      !!this.document?.archived_file_name
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
   }
 
   get emailEnabled(): boolean {
@@ -1638,7 +1786,7 @@ export class DocumentDetailComponent
     })
     modal.componentInstance.documentIds = [this.document.id]
     modal.componentInstance.hasArchiveVersion =
-      !!this.document?.archived_file_name
+      this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
   }
 
   private tryRenderTiff() {

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html

@@ -0,0 +1,97 @@
+<div class="btn-group" ngbDropdown autoClose="outside">
+  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" ngbDropdownToggle>
+    <i-bs name="file-earmark-diff"></i-bs>
+    <span class="d-none d-lg-inline ps-1" i18n>Versions</span>
+  </button>
+  <div class="dropdown-menu shadow" ngbDropdownMenu>
+    <div class="px-3 py-2">
+      @if (versionUploadState === UploadState.Idle) {
+        <div class="input-group input-group-sm mb-2">
+          <span class="input-group-text" i18n>Label</span>
+          <input
+            class="form-control"
+            type="text"
+            [(ngModel)]="newVersionLabel"
+            i18n-placeholder
+            placeholder="Optional"
+            [disabled]="!userIsOwner || !userCanEdit"
+          />
+        </div>
+        <input
+          #versionFileInput
+          type="file"
+          class="visually-hidden"
+          (change)="onVersionFileSelected($event)"
+        />
+        <button
+          class="btn btn-sm btn-outline-secondary w-100"
+          (click)="versionFileInput.click()"
+          [disabled]="!userIsOwner || !userCanEdit"
+        >
+          <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Add new version</span>
+        </button>
+      } @else {
+        @switch (versionUploadState) {
+          @case (UploadState.Uploading) {
+            <div class="small text-muted mt-1 d-flex align-items-center">
+              <output class="spinner-border spinner-border-sm me-2" aria-hidden="true"></output>
+              <span i18n>Uploading version...</span>
+            </div>
+          }
+          @case (UploadState.Processing) {
+            <div class="small text-muted mt-1 d-flex align-items-center">
+              <output class="spinner-border spinner-border-sm me-2" aria-hidden="true"></output>
+              <span i18n>Processing version...</span>
+            </div>
+          }
+          @case (UploadState.Failed) {
+            <div class="small text-danger mt-1 d-flex align-items-center justify-content-between">
+              <span i18n>Version upload failed.</span>
+              <button type="button" class="btn btn-link btn-sm p-0 ms-2" (click)="clearVersionUploadStatus()" i18n>Dismiss</button>
+            </div>
+            @if (versionUploadError) {
+              <div class="small text-muted mt-1">{{ versionUploadError }}</div>
+            }
+          }
+        }
+      }
+    </div>
+    <div class="dropdown-divider"></div>
+    @for (version of versions; track version.id) {
+      <div class="dropdown-item">
+        <div class="d-flex align-items-center w-100 version-item">
+          <button type="button" class="btn btn-link link-underline link-underline-opacity-0 d-flex align-items-center flex-grow-1 small ps-0 text-start" (click)="selectVersion(version.id)">
+            <div class="badge bg-light text-lowercase text-muted">
+              {{ version.checksum | slice:0:8 }}
+            </div>
+            <div class="d-flex flex-column small ms-2">
+              <div>
+                @if (version.version_label) {
+                  {{ version.version_label }}
+                } @else {
+                  <span i18n>ID</span> #{{version.id}}
+                }
+              </div>
+              <div class="text-muted">
+                {{ version.added | customDate:'short' }}
+              </div>
+            </div>
+          </button>
+          @if (selectedVersionId === version.id) { <span class="ms-2">✓</span> }
+          @if (!version.is_root) {
+            <pngx-confirm-button
+              buttonClasses="btn-link btn-sm text-danger ms-2"
+              iconName="trash"
+              confirmMessage="Delete this version?"
+              i18n-confirmMessage
+              [disabled]="!userIsOwner || !userCanEdit"
+              (confirm)="deleteVersion(version.id)"
+            >
+              <span class="visually-hidden" i18n>Delete version</span>
+            </pngx-confirm-button>
+          }
+        </div>
+      </div>
+    }
+  </div>
+</div>

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.spec.ts

@@ -0,0 +1,226 @@
+import { DatePipe } from '@angular/common'
+import { SimpleChange } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { Subject, of, throwError } from 'rxjs'
+import { DocumentVersionInfo } from 'src/app/data/document'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import {
+  UploadState,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+import { DocumentVersionDropdownComponent } from './document-version-dropdown.component'
+
+describe('DocumentVersionDropdownComponent', () => {
+  let component: DocumentVersionDropdownComponent
+  let fixture: ComponentFixture<DocumentVersionDropdownComponent>
+  let documentService: jest.Mocked<
+    Pick<DocumentService, 'deleteVersion' | 'getVersions' | 'uploadVersion'>
+  >
+  let toastService: jest.Mocked<Pick<ToastService, 'showError' | 'showInfo'>>
+  let finished$: Subject<{ taskId: string }>
+  let failed$: Subject<{ taskId: string; message?: string }>
+
+  beforeEach(async () => {
+    finished$ = new Subject<{ taskId: string }>()
+    failed$ = new Subject<{ taskId: string; message?: string }>()
+    documentService = {
+      deleteVersion: jest.fn(),
+      getVersions: jest.fn(),
+      uploadVersion: jest.fn(),
+    }
+    toastService = {
+      showError: jest.fn(),
+      showInfo: jest.fn(),
+    }
+
+    await TestBed.configureTestingModule({
+      imports: [
+        DocumentVersionDropdownComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        DatePipe,
+        {
+          provide: DocumentService,
+          useValue: documentService,
+        },
+        {
+          provide: SettingsService,
+          useValue: {
+            get: () => null,
+          },
+        },
+        {
+          provide: ToastService,
+          useValue: toastService,
+        },
+        {
+          provide: WebsocketStatusService,
+          useValue: {
+            onDocumentConsumptionFinished: () => finished$,
+            onDocumentConsumptionFailed: () => failed$,
+          },
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentVersionDropdownComponent)
+    component = fixture.componentInstance
+    component.documentId = 3
+    component.selectedVersionId = 3
+    component.versions = [
+      {
+        id: 3,
+        is_root: true,
+        checksum: 'aaaa',
+      },
+      {
+        id: 10,
+        is_root: false,
+        checksum: 'bbbb',
+      },
+    ]
+    fixture.detectChanges()
+  })
+
+  it('selectVersion should emit the selected id', () => {
+    const emitSpy = jest.spyOn(component.versionSelected, 'emit')
+    component.selectVersion(10)
+    expect(emitSpy).toHaveBeenCalledWith(10)
+  })
+
+  it('deleteVersion should refresh versions and select fallback when deleting current selection', () => {
+    const updatedVersions: DocumentVersionInfo[] = [
+      { id: 3, is_root: true, checksum: 'aaaa' },
+      { id: 20, is_root: false, checksum: 'cccc' },
+    ]
+    component.selectedVersionId = 10
+    documentService.deleteVersion.mockReturnValue(
+      of({ result: 'deleted', current_version_id: 3 })
+    )
+    documentService.getVersions.mockReturnValue(
+      of({ id: 3, versions: updatedVersions } as any)
+    )
+    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
+    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
+
+    component.deleteVersion(10)
+
+    expect(documentService.deleteVersion).toHaveBeenCalledWith(3, 10)
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(updatedVersions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(3)
+  })
+
+  it('deleteVersion should show an error toast on failure', () => {
+    const error = new Error('delete failed')
+    documentService.deleteVersion.mockReturnValue(throwError(() => error))
+
+    component.deleteVersion(10)
+
+    expect(toastService.showError).toHaveBeenCalledWith(
+      'Error deleting version',
+      error
+    )
+  })
+
+  it('onVersionFileSelected should upload and update versions after websocket success', () => {
+    const versions: DocumentVersionInfo[] = [
+      { id: 3, is_root: true, checksum: 'aaaa' },
+      { id: 20, is_root: false, checksum: 'cccc' },
+    ]
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    component.newVersionLabel = '  Updated scan  '
+    documentService.uploadVersion.mockReturnValue(
+      of({ task_id: 'task-1' } as any)
+    )
+    documentService.getVersions.mockReturnValue(of({ id: 3, versions } as any))
+    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
+    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
+
+    component.onVersionFileSelected({ target: input } as Event)
+    finished$.next({ taskId: 'task-1' })
+
+    expect(documentService.uploadVersion).toHaveBeenCalledWith(
+      3,
+      file,
+      'Updated scan'
+    )
+    expect(toastService.showInfo).toHaveBeenCalled()
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(versions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(20)
+    expect(component.newVersionLabel).toEqual('')
+    expect(component.versionUploadState).toEqual(UploadState.Idle)
+    expect(component.versionUploadError).toBeNull()
+  })
+
+  it('onVersionFileSelected should set failed state after websocket failure', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    documentService.uploadVersion.mockReturnValue(of('task-1'))
+
+    component.onVersionFileSelected({ target: input } as Event)
+    failed$.next({ taskId: 'task-1', message: 'processing failed' })
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('processing failed')
+    expect(documentService.getVersions).not.toHaveBeenCalled()
+  })
+
+  it('onVersionFileSelected should fail when backend response has no task id', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    documentService.uploadVersion.mockReturnValue(of({} as any))
+
+    component.onVersionFileSelected({ target: input } as Event)
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('Missing task ID.')
+    expect(documentService.getVersions).not.toHaveBeenCalled()
+  })
+
+  it('onVersionFileSelected should show error when upload request fails', () => {
+    const file = new File(['test'], 'new-version.pdf', {
+      type: 'application/pdf',
+    })
+    const input = document.createElement('input')
+    Object.defineProperty(input, 'files', { value: [file] })
+    const error = new Error('upload failed')
+    documentService.uploadVersion.mockReturnValue(throwError(() => error))
+
+    component.onVersionFileSelected({ target: input } as Event)
+
+    expect(component.versionUploadState).toEqual(UploadState.Failed)
+    expect(component.versionUploadError).toEqual('upload failed')
+    expect(toastService.showError).toHaveBeenCalledWith(
+      'Error uploading new version',
+      error
+    )
+  })
+
+  it('ngOnChanges should clear upload status on document switch', () => {
+    component.versionUploadState = UploadState.Failed
+    component.versionUploadError = 'something failed'
+
+    component.ngOnChanges({
+      documentId: new SimpleChange(3, 4, false),
+    })
+
+    expect(component.versionUploadState).toEqual(UploadState.Idle)
+    expect(component.versionUploadError).toBeNull()
+  })
+})

src-ui/src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.ts

@@ -0,0 +1,203 @@
+import { SlicePipe } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { merge, of, Subject } from 'rxjs'
+import {
+  filter,
+  first,
+  map,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs/operators'
+import { DocumentVersionInfo } from 'src/app/data/document'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ToastService } from 'src/app/services/toast.service'
+import {
+  UploadState,
+  WebsocketStatusService,
+} from 'src/app/services/websocket-status.service'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+
+@Component({
+  selector: 'pngx-document-version-dropdown',
+  templateUrl: './document-version-dropdown.component.html',
+  imports: [
+    FormsModule,
+    NgbDropdownModule,
+    NgxBootstrapIconsModule,
+    ConfirmButtonComponent,
+    SlicePipe,
+    CustomDatePipe,
+  ],
+})
+export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
+  UploadState = UploadState
+
+  @Input() documentId: number
+  @Input() versions: DocumentVersionInfo[] = []
+  @Input() selectedVersionId: number
+  @Input() userCanEdit: boolean = false
+  @Input() userIsOwner: boolean = false
+
+  @Output() versionSelected = new EventEmitter<number>()
+  @Output() versionsUpdated = new EventEmitter<DocumentVersionInfo[]>()
+
+  newVersionLabel: string = ''
+  versionUploadState: UploadState = UploadState.Idle
+  versionUploadError: string | null = null
+
+  private readonly documentsService = inject(DocumentService)
+  private readonly toastService = inject(ToastService)
+  private readonly websocketStatusService = inject(WebsocketStatusService)
+  private readonly destroy$ = new Subject<void>()
+  private readonly documentChange$ = new Subject<void>()
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.documentId && !changes.documentId.firstChange) {
+      this.documentChange$.next()
+      this.clearVersionUploadStatus()
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.documentChange$.next()
+    this.documentChange$.complete()
+    this.destroy$.next()
+    this.destroy$.complete()
+  }
+
+  selectVersion(versionId: number): void {
+    this.versionSelected.emit(versionId)
+  }
+
+  deleteVersion(versionId: number): void {
+    const wasSelected = this.selectedVersionId === versionId
+    this.documentsService
+      .deleteVersion(this.documentId, versionId)
+      .pipe(
+        switchMap((result) =>
+          this.documentsService
+            .getVersions(this.documentId)
+            .pipe(map((doc) => ({ doc, result })))
+        ),
+        first(),
+        takeUntil(this.destroy$)
+      )
+      .subscribe({
+        next: ({ doc, result }) => {
+          if (doc?.versions) {
+            this.versionsUpdated.emit(doc.versions)
+          }
+
+          if (wasSelected || this.selectedVersionId === versionId) {
+            const fallbackId = result?.current_version_id ?? this.documentId
+            this.versionSelected.emit(fallbackId)
+          }
+        },
+        error: (error) => {
+          this.toastService.showError($localize`Error deleting version`, error)
+        },
+      })
+  }
+
+  onVersionFileSelected(event: Event): void {
+    const input = event.target as HTMLInputElement
+    if (!input?.files || input.files.length === 0) return
+    const uploadDocumentId = this.documentId
+    const file = input.files[0]
+    input.value = ''
+    const label = this.newVersionLabel?.trim()
+    this.versionUploadState = UploadState.Uploading
+    this.versionUploadError = null
+    this.documentsService
+      .uploadVersion(uploadDocumentId, file, label)
+      .pipe(
+        first(),
+        tap(() => {
+          this.toastService.showInfo(
+            $localize`Uploading new version. Processing will happen in the background.`
+          )
+          this.newVersionLabel = ''
+          this.versionUploadState = UploadState.Processing
+        }),
+        map((taskId) =>
+          typeof taskId === 'string'
+            ? taskId
+            : (taskId as { task_id?: string })?.task_id
+        ),
+        switchMap((taskId) => {
+          if (!taskId) {
+            this.versionUploadState = UploadState.Failed
+            this.versionUploadError = $localize`Missing task ID.`
+            return of(null)
+          }
+          return merge(
+            this.websocketStatusService.onDocumentConsumptionFinished().pipe(
+              filter((status) => status.taskId === taskId),
+              map(() => ({ state: 'success' as const }))
+            ),
+            this.websocketStatusService.onDocumentConsumptionFailed().pipe(
+              filter((status) => status.taskId === taskId),
+              map((status) => ({
+                state: 'failed' as const,
+                message: status.message,
+              }))
+            )
+          ).pipe(takeUntil(merge(this.destroy$, this.documentChange$)), take(1))
+        }),
+        switchMap((result) => {
+          if (result?.state !== 'success') {
+            if (result?.state === 'failed') {
+              this.versionUploadState = UploadState.Failed
+              this.versionUploadError =
+                result.message || $localize`Upload failed.`
+            }
+            return of(null)
+          }
+          return this.documentsService.getVersions(uploadDocumentId)
+        }),
+        takeUntil(this.destroy$),
+        takeUntil(this.documentChange$)
+      )
+      .subscribe({
+        next: (doc) => {
+          if (uploadDocumentId !== this.documentId) return
+          if (doc?.versions) {
+            this.versionsUpdated.emit(doc.versions)
+            this.versionSelected.emit(
+              Math.max(...doc.versions.map((version) => version.id))
+            )
+            this.clearVersionUploadStatus()
+          }
+        },
+        error: (error) => {
+          if (uploadDocumentId !== this.documentId) return
+          this.versionUploadState = UploadState.Failed
+          this.versionUploadError = error?.message || $localize`Upload failed.`
+          this.toastService.showError(
+            $localize`Error uploading new version`,
+            error
+          )
+        },
+      })
+  }
+
+  clearVersionUploadStatus(): void {
+    this.versionUploadState = UploadState.Idle
+    this.versionUploadError = null
+  }
+}

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -75,7 +75,7 @@
     }
     <div class="btn-group">
       <button type="button" class="btn btn-sm btn-outline-primary me-2" (click)="setPermissions()" [disabled]="!userOwnsAll || !userCanEditAll">
-        <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Permissions</ng-container></div>
+        <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Permissions</ng-container></div>
       </button>
     </div>
   </div>
@@ -83,18 +83,17 @@
     <div class="btn-toolbar">
       <div ngbDropdown>
         <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" [disabled]="!userCanEdit && !userCanAdd" ngbDropdownToggle>
-          <i-bs name="three-dots"></i-bs>
-          <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Actions</ng-container></div>
+          <i-bs name="three-dots"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Actions</ng-container></div>
         </button>
         <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
           <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
-            <i-bs name="body-text"></i-bs>&nbsp;<ng-container i18n>Reprocess</ng-container>
+            <i-bs name="body-text" class="me-1"></i-bs><ng-container i18n>Reprocess</ng-container>
           </button>
           <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
-            <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
+            <i-bs name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Rotate</ng-container>
           </button>
           <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.selected.size < 2">
-            <i-bs name="journals"></i-bs>&nbsp;<ng-container i18n>Merge</ng-container>
+            <i-bs name="journals" class="me-1"></i-bs><ng-container i18n>Merge</ng-container>
           </button>
         </div>
       </div>
@@ -106,22 +105,20 @@
         ngbDropdownToggle
         [disabled]="disabled || list.selected.size === 0"
       >
-        <i-bs name="send"></i-bs>
-        <div class="d-none d-sm-inline">
-          &nbsp;<ng-container i18n>Send</ng-container>
+        <i-bs name="send"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Send</ng-container>
         </div>
       </button>
       <div ngbDropdownMenu aria-labelledby="dropdownSend" class="shadow">
         <button ngbDropdownItem (click)="createShareLinkBundle()">
-          <i-bs name="link"></i-bs>&nbsp;<ng-container i18n>Create a share link bundle</ng-container>
+          <i-bs name="link" class="me-1"></i-bs><ng-container i18n>Create a share link bundle</ng-container>
         </button>
         <button ngbDropdownItem (click)="manageShareLinkBundles()">
-          <i-bs name="list-ul"></i-bs>&nbsp;<ng-container i18n>Manage share link bundles</ng-container>
+          <i-bs name="list-ul" class="me-1"></i-bs><ng-container i18n>Manage share link bundles</ng-container>
         </button>
         <div class="dropdown-divider"></div>
         @if (emailEnabled) {
           <button ngbDropdownItem (click)="emailSelected()">
-            <i-bs name="envelope"></i-bs>&nbsp;<ng-container i18n>Email</ng-container>
+            <i-bs name="envelope" class="me-1"></i-bs><ng-container i18n>Email</ng-container>
           </button>
         }
       </div>
@@ -136,7 +133,7 @@
             <span class="visually-hidden">Preparing download...</span>
           </div>
         }
-        <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Download</ng-container></div>
+        <div class="d-none d-sm-inline ms-1"><ng-container i18n>Download</ng-container></div>
       </button>
       <div ngbDropdown class="me-2 d-flex btn-group" role="group">
         <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle-split rounded-end" ngbDropdownToggle></button>
@@ -164,7 +161,7 @@
 
     <div class="btn-group btn-group-sm">
       <button type="button" class="btn btn-sm btn-outline-danger" (click)="applyDelete()" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }" [disabled]="!userOwnsAll">
-        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+        <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
       </button>
     </div>
   </div>

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -66,16 +66,16 @@
           <div class="btn-group">
             @if (document) {
               <a class="btn btn-sm btn-outline-secondary" (click)="clickMoreLike.emit()">
-                <i-bs name="diagram-3"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>More like this</span>
+                <i-bs name="diagram-3" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>More like this</span>
               </a>
               <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-                <i-bs name="file-earmark-richtext"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Open</span>
+                <i-bs name="file-earmark-richtext" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Open</span>
               </a>
               <pngx-preview-popup [document]="document" #popupPreview>
-                <i-bs name="eye"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>View</span>
+                <i-bs name="eye" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>View</span>
               </pngx-preview-popup>
               <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
-                <i-bs name="download"></i-bs>&nbsp;<span class="d-none d-md-inline" i18n>Download</span>
+                <i-bs name="download" class="me-1"></i-bs><span class="d-none d-md-inline" i18n>Download</span>
               </a>
             } @else {
               <div class="placeholder btn btn-sm btn-outline-secondary bg-secondary" style="width: 60px;">&nbsp;</div>

src-ui/src/app/components/document-list/document-list.component.html

@@ -1,8 +1,7 @@
 <pngx-page-header [title]="getTitle()">
   <div ngbDropdown class="btn-group flex-fill d-sm-none">
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
-      <i-bs name="text-indent-left"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
+      <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
       @if (list.selected.size > 0) {
         <pngx-clearable-badge [selected]="list.selected.size > 0" [number]="list.selected.size" (cleared)="list.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
       }
@@ -20,21 +19,20 @@
     <div class="btn-group btn-group-sm flex-nowrap">
       @if (list.selected.size > 0) {
         <button class="btn btn-sm btn-outline-secondary" (click)="list.selectNone()">
-          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
+          <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
         </button>
       }
       <button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
-        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
+        <i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
       </button>
       <button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
-        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
+        <i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
       </button>
     </div>
   </div>
   <div ngbDropdown class="btn-group flex-fill">
     <button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle>
-      <i-bs name="card-heading"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Show</ng-container></div>
+      <i-bs name="card-heading"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Show</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownDisplayFields" class="shadow">
       <div class="px-3">
@@ -64,8 +62,7 @@
 
   <div ngbDropdown class="btn-group flex-fill">
     <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
-      <i-bs name="arrow-down-up"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Sort</ng-container></div>
+      <i-bs name="arrow-down-up"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Sort</ng-container></div>
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
       <div class="w-100 d-flex pb-2 mb-1 border-bottom">
@@ -90,8 +87,7 @@
 
   <div class="btn-group flex-fill" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown role="group">
     <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle>
-      <i-bs class="me-1" name="window-stack"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Views</ng-container></div>
+      <i-bs name="window-stack"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Views</ng-container></div>
       @if (savedViewIsModified) {
         <div class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
           <span class="visually-hidden">selected</span>

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.html

@@ -1,15 +1,3 @@
-<pngx-page-header
-  title="Custom Fields"
-  i18n-title
-  info="Customize the data fields that can be attached to documents."
-  i18n-info
-  infoLink="usage/#custom-fields"
-  >
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="editField()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Field</ng-container>
-  </button>
-</pngx-page-header>
-
 <ul class="list-group">
 
   <li class="list-group-item">
@@ -55,10 +43,10 @@
           </div>
           <div class="btn-group d-none d-sm-inline-block">
             <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editField(field)">
-              <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+              <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
             </button>
             <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.CustomField }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteField(field)">
-              <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+              <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
             </button>
           </div>
           @if (field.document_count > 0) {
@@ -67,7 +55,7 @@
                 class="btn btn-sm btn-outline-secondary"
                 [routerLink]="getDocumentFilterUrl(field)"
               >
-                <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+                <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
                 ><span class="badge bg-light text-secondary ms-2">{{ field.document_count }}</span>
               </a>
             </div>

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.spec.ts

@@ -26,9 +26,9 @@ import { PermissionsService } from 'src/app/services/permissions.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConfirmDialogComponent } from '../../../common/confirm-dialog/confirm-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { PageHeaderComponent } from '../../../common/page-header/page-header.component'
 import { CustomFieldsComponent } from './custom-fields.component'
 
 const fields: CustomField[] = [
@@ -110,10 +110,7 @@ describe('CustomFieldsComponent', () => {
     const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
     const reloadSpy = jest.spyOn(component, 'reload')
 
-    const createButton = fixture.debugElement
-      .queryAll(By.css('button'))
-      .find((btn) => btn.nativeElement.textContent.trim().includes('Add Field'))
-    createButton.triggerEventHandler('click')
+    component.editField()
 
     expect(modal).not.toBeUndefined()
     const editDialog = modal.componentInstance as CustomFieldEditDialogComponent

src-ui/src/app/components/manage/document-attributes/custom-fields/custom-fields.component.ts

@@ -7,6 +7,10 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { delay, takeUntil, tap } from 'rxjs'
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
+import { CustomFieldEditDialogComponent } from 'src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
 import {
   CustomFieldQueryLogicalOperator,
@@ -21,18 +25,12 @@ import { DocumentService } from 'src/app/services/rest/document.service'
 import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-custom-fields',
   templateUrl: './custom-fields.component.html',
   styleUrls: ['./custom-fields.component.scss'],
   imports: [
-    PageHeaderComponent,
     IfPermissionsDirective,
     NgbDropdownModule,
     NgbPaginationModule,
@@ -44,14 +42,14 @@ export class CustomFieldsComponent
   extends LoadingComponentWithPermissions
   implements OnInit
 {
-  private customFieldsService = inject(CustomFieldsService)
-  permissionsService = inject(PermissionsService)
-  private modalService = inject(NgbModal)
-  private toastService = inject(ToastService)
-  private documentListViewService = inject(DocumentListViewService)
-  private settingsService = inject(SettingsService)
-  private documentService = inject(DocumentService)
-  private savedViewService = inject(SavedViewService)
+  private readonly customFieldsService = inject(CustomFieldsService)
+  public readonly permissionsService = inject(PermissionsService)
+  private readonly modalService = inject(NgbModal)
+  private readonly toastService = inject(ToastService)
+  private readonly documentListViewService = inject(DocumentListViewService)
+  private readonly settingsService = inject(SettingsService)
+  private readonly documentService = inject(DocumentService)
+  private readonly savedViewService = inject(SavedViewService)
 
   public fields: CustomField[] = []
 

src-ui/src/app/components/manage/document-attributes/document-attributes.component.html

@@ -0,0 +1,77 @@
+<pngx-page-header
+  [title]="activeTabLabel"
+  info="Manage tags, correspondents, document types, storage paths, and custom fields."
+  i18n-info
+  [infoLink]="activeInfoLink"
+  [loading]="activeHeaderLoading"
+  >
+  @if (activeManagementList) {
+    <div ngbDropdown class="btn-group flex-fill d-sm-none">
+      <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
+        <i-bs name="text-indent-left"></i-bs><div class="d-none d-sm-inline ms-1"><ng-container i18n>Select</ng-container></div>
+        @if (activeManagementList.selectedObjects.size > 0) {
+          <pngx-clearable-badge [selected]="activeManagementList.selectedObjects.size > 0" [number]="activeManagementList.selectedObjects.size" (cleared)="activeManagementList.selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
+        }
+      </button>
+      <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
+        <button ngbDropdownItem (click)="activeManagementList.selectNone()" i18n>Select none</button>
+        <button ngbDropdownItem (click)="activeManagementList.selectPage(true)" i18n>Select page</button>
+        <button ngbDropdownItem (click)="activeManagementList.selectAll()" i18n>Select all</button>
+      </div>
+    </div>
+
+    <div class="d-none d-sm-flex flex-fill me-3">
+      <div class="input-group input-group-sm">
+        <span class="input-group-text border-0" i18n>Select:</span>
+      </div>
+      <div class="btn-group btn-group-sm flex-nowrap">
+        @if (activeManagementList.selectedObjects.size > 0) {
+          <button class="btn btn-sm btn-outline-secondary" (click)="activeManagementList.selectNone()">
+            <i-bs name="slash-circle" class="me-1"></i-bs><ng-container i18n>None</ng-container>
+          </button>
+        }
+        <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectPage(true)">
+          <i-bs name="file-earmark-check" class="me-1"></i-bs><ng-container i18n>Page</ng-container>
+        </button>
+        <button class="btn btn-sm btn-outline-primary" (click)="activeManagementList.selectAll()">
+          <i-bs name="check-all" class="me-1"></i-bs><ng-container i18n>All</ng-container>
+        </button>
+      </div>
+    </div>
+
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeManagementList.setPermissions()"
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Change) || activeManagementList.selectedObjects.size === 0">
+      <i-bs name="person-fill-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="activeManagementList.delete()"
+      [disabled]="!activeManagementList.userCanBulkEdit(PermissionAction.Delete) || activeManagementList.selectedObjects.size === 0">
+      <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="activeManagementList.openCreateDialog()"
+      *pngxIfPermissions="{ action: PermissionAction.Add, type: activeManagementList.permissionType }">
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Create</ng-container>
+    </button>
+  } @else if (activeCustomFields) {
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="activeCustomFields.editField()"
+      *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.CustomField }">
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Field</ng-container>
+    </button>
+  }
+</pngx-page-header>
+
+<ul ngbNav #nav="ngbNav" (navChange)="onNavChange($event)" [(activeId)]="activeNavID" class="nav-underline">
+  @for (section of visibleSections; track section.id) {
+    <li [ngbNavItem]="section.id">
+      <a ngbNavLink >
+        <i-bs class="me-2" [name]="section.icon"></i-bs>{{ section.label }}
+      </a>
+    </li>
+  }
+</ul>
+
+<div class="my-3 shadow-sm">
+  <ng-container
+    [ngComponentOutlet]="activeSection?.component"
+    #activeOutlet="ngComponentOutlet"
+  ></ng-container>
+</div>

src-ui/src/app/components/manage/document-attributes/document-attributes.component.spec.ts

@@ -0,0 +1,189 @@
+import { Component } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  ActivatedRoute,
+  convertToParamMap,
+  ParamMap,
+  Router,
+} from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject } from 'rxjs'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import {
+  DocumentAttributesComponent,
+  DocumentAttributesSectionKind,
+} from './document-attributes.component'
+
+@Component({
+  selector: 'pngx-dummy-section',
+  template: '',
+  standalone: true,
+})
+class DummySectionComponent {}
+
+describe('DocumentAttributesComponent', () => {
+  let component: DocumentAttributesComponent
+  let fixture: ComponentFixture<DocumentAttributesComponent>
+  let router: Router
+  let paramMapSubject: Subject<ParamMap>
+  let permissionsService: PermissionsService
+
+  beforeEach(async () => {
+    paramMapSubject = new Subject<ParamMap>()
+
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        DocumentAttributesComponent,
+        DummySectionComponent,
+      ],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            paramMap: paramMapSubject.asObservable(),
+          },
+        },
+        {
+          provide: PermissionsService,
+          useValue: {
+            currentUserCan: jest.fn(),
+          },
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(DocumentAttributesComponent)
+    component = fixture.componentInstance
+    router = TestBed.inject(Router)
+    permissionsService = TestBed.inject(PermissionsService)
+
+    jest.spyOn(router, 'navigate').mockResolvedValue(true)
+    ;(component as any).sections = [
+      {
+        id: 1,
+        path: 'tags',
+        label: 'Tags',
+        icon: 'tags',
+        permissionType: PermissionType.Tag,
+        kind: DocumentAttributesSectionKind.ManagementList,
+        component: DummySectionComponent,
+      },
+      {
+        id: 2,
+        path: 'customfields',
+        label: 'Custom fields',
+        icon: 'ui-radios',
+        permissionType: PermissionType.CustomField,
+        kind: DocumentAttributesSectionKind.CustomFields,
+        component: DummySectionComponent,
+      },
+    ]
+  })
+
+  it('should navigate to default section when no section is provided', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return action === PermissionAction.View && type === PermissionType.Tag
+      })
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({}))
+
+    expect(router.navigate).toHaveBeenCalledWith(['attributes', 'tags'], {
+      replaceUrl: true,
+    })
+    expect(component.activeNavID).toBe(1)
+  })
+
+  it('should set active section from route param when valid', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return (
+          action === PermissionAction.View &&
+          type === PermissionType.CustomField
+        )
+      })
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'customfields' }))
+
+    expect(component.activeNavID).toBe(2)
+    expect(router.navigate).not.toHaveBeenCalled()
+  })
+
+  it('should update active nav id when route section changes', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+
+    fixture.detectChanges()
+    component.activeNavID = 1
+    paramMapSubject.next(convertToParamMap({ section: 'customfields' }))
+
+    expect(component.activeNavID).toBe(2)
+  })
+
+  it('should redirect to dashboard when no sections are visible', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(false)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({}))
+
+    expect(router.navigate).toHaveBeenCalledWith(['/dashboard'], {
+      replaceUrl: true,
+    })
+  })
+
+  it('should navigate when a nav change occurs', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation(() => true)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'tags' }))
+
+    component.onNavChange({ nextId: 2 } as any)
+
+    expect(router.navigate).toHaveBeenCalledWith(['attributes', 'customfields'])
+  })
+
+  it('should ignore nav changes for unknown sections', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+
+    fixture.detectChanges()
+    paramMapSubject.next(convertToParamMap({ section: 'tags' }))
+
+    component.onNavChange({ nextId: 999 } as any)
+
+    expect(router.navigate).not.toHaveBeenCalled()
+  })
+
+  it('should return activeManagementList correctly', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    expect(component.activeManagementList).toBeNull()
+
+    component.activeNavID = 1
+    expect(component.activeSection.kind).toBe(
+      DocumentAttributesSectionKind.ManagementList
+    )
+    expect(component.activeManagementList).toBeDefined()
+  })
+
+  it('should return activeCustomFields correctly', () => {
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    expect(component.activeCustomFields).toBeNull()
+
+    component.activeNavID = 2
+    expect(component.activeSection.kind).toBe(
+      DocumentAttributesSectionKind.CustomFields
+    )
+    expect(component.activeCustomFields).toBeDefined()
+  })
+})

src-ui/src/app/components/manage/document-attributes/document-attributes.component.ts

@@ -0,0 +1,256 @@
+import { NgComponentOutlet } from '@angular/common'
+import {
+  AfterViewChecked,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  Type,
+  ViewChild,
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import {
+  NgbDropdownModule,
+  NgbNavChangeEvent,
+  NgbNavModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, takeUntil } from 'rxjs'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import {
+  PermissionAction,
+  PermissionsService,
+  PermissionType,
+} from 'src/app/services/permissions.service'
+import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { CustomFieldsComponent } from './custom-fields/custom-fields.component'
+import { CorrespondentListComponent } from './management-list/correspondent-list/correspondent-list.component'
+import { DocumentTypeListComponent } from './management-list/document-type-list/document-type-list.component'
+import { ManagementListComponent } from './management-list/management-list.component'
+import { StoragePathListComponent } from './management-list/storage-path-list/storage-path-list.component'
+import { TagListComponent } from './management-list/tag-list/tag-list.component'
+
+enum DocumentAttributesNavIDs {
+  Tags = 1,
+  Correspondents = 2,
+  DocumentTypes = 3,
+  StoragePaths = 4,
+  CustomFields = 5,
+}
+
+export enum DocumentAttributesSectionKind {
+  ManagementList = 'managementList',
+  CustomFields = 'customFields',
+}
+
+interface DocumentAttributesSection {
+  id: DocumentAttributesNavIDs
+  path: string
+  label: string
+  icon: string
+  infoLink?: string
+  permissionType: PermissionType
+  kind: DocumentAttributesSectionKind
+  component: Type<any>
+}
+
+@Component({
+  selector: 'pngx-document-attributes',
+  templateUrl: './document-attributes.component.html',
+  styleUrls: ['./document-attributes.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    NgbNavModule,
+    NgbDropdownModule,
+    NgComponentOutlet,
+    NgxBootstrapIconsModule,
+    IfPermissionsDirective,
+    ClearableBadgeComponent,
+  ],
+})
+export class DocumentAttributesComponent
+  implements OnInit, OnDestroy, AfterViewChecked
+{
+  private readonly permissionsService = inject(PermissionsService)
+  private readonly activatedRoute = inject(ActivatedRoute)
+  private readonly router = inject(Router)
+  private readonly cdr = inject(ChangeDetectorRef)
+  private readonly unsubscribeNotifier = new Subject<void>()
+
+  protected readonly PermissionAction = PermissionAction
+  protected readonly PermissionType = PermissionType
+
+  readonly sections: DocumentAttributesSection[] = [
+    {
+      id: DocumentAttributesNavIDs.Tags,
+      path: 'tags',
+      label: $localize`Tags`,
+      icon: 'tags',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.Tag,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: TagListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.Correspondents,
+      path: 'correspondents',
+      label: $localize`Correspondents`,
+      icon: 'person',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.Correspondent,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: CorrespondentListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.DocumentTypes,
+      path: 'documenttypes',
+      label: $localize`Document types`,
+      icon: 'hash',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.DocumentType,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: DocumentTypeListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.StoragePaths,
+      path: 'storagepaths',
+      label: $localize`Storage paths`,
+      icon: 'folder',
+      infoLink: 'usage/#terms-and-definitions',
+      permissionType: PermissionType.StoragePath,
+      kind: DocumentAttributesSectionKind.ManagementList,
+      component: StoragePathListComponent,
+    },
+    {
+      id: DocumentAttributesNavIDs.CustomFields,
+      path: 'customfields',
+      label: $localize`Custom fields`,
+      icon: 'ui-radios',
+      infoLink: 'usage/#custom-fields',
+      permissionType: PermissionType.CustomField,
+      kind: DocumentAttributesSectionKind.CustomFields,
+      component: CustomFieldsComponent,
+    },
+  ]
+
+  @ViewChild('activeOutlet', { read: NgComponentOutlet })
+  private readonly activeOutlet?: NgComponentOutlet
+
+  private lastHeaderLoading: boolean
+
+  activeNavID: number = null
+
+  get visibleSections(): DocumentAttributesSection[] {
+    return this.sections.filter((section) =>
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        section.permissionType
+      )
+    )
+  }
+
+  get activeSection(): DocumentAttributesSection | null {
+    return (
+      this.visibleSections.find((section) => section.id === this.activeNavID) ??
+      null
+    )
+  }
+
+  get activeManagementList(): ManagementListComponent<any> | null {
+    if (
+      this.activeSection?.kind !== DocumentAttributesSectionKind.ManagementList
+    )
+      return null
+    const instance = this.activeOutlet?.componentInstance
+    return instance instanceof ManagementListComponent ? instance : null
+  }
+
+  get activeCustomFields(): CustomFieldsComponent | null {
+    if (this.activeSection?.kind !== DocumentAttributesSectionKind.CustomFields)
+      return null
+    const instance = this.activeOutlet?.componentInstance
+    return instance instanceof CustomFieldsComponent ? instance : null
+  }
+
+  get activeTabLabel(): string {
+    return this.activeSection?.label ?? ''
+  }
+
+  get activeInfoLink(): string {
+    return this.activeSection?.infoLink ?? null
+  }
+
+  get activeHeaderLoading(): boolean {
+    return (
+      this.activeManagementList?.loading ??
+      this.activeCustomFields?.loading ??
+      false
+    )
+  }
+
+  ngOnInit(): void {
+    this.activatedRoute.paramMap
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((paramMap) => {
+        const section = paramMap.get('section')
+        const navIDFromSection =
+          this.getNavIDForSection(section) ?? this.getDefaultNavID()
+
+        if (navIDFromSection == null) {
+          this.router.navigate(['/dashboard'], { replaceUrl: true })
+          return
+        }
+
+        if (this.activeNavID !== navIDFromSection) {
+          this.activeNavID = navIDFromSection
+        }
+
+        if (!section || this.getNavIDForSection(section) == null) {
+          this.router.navigate(
+            ['attributes', this.getSectionForNavID(this.activeNavID)],
+            { replaceUrl: true }
+          )
+        }
+      })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next()
+    this.unsubscribeNotifier.complete()
+  }
+
+  ngAfterViewChecked(): void {
+    const current = this.activeHeaderLoading
+    if (this.lastHeaderLoading !== current) {
+      this.lastHeaderLoading = current
+      this.cdr.detectChanges()
+    }
+  }
+
+  onNavChange(navChangeEvent: NgbNavChangeEvent): void {
+    const nextSection = this.getSectionForNavID(navChangeEvent.nextId)
+    if (!nextSection) {
+      return
+    }
+    this.router.navigate(['attributes', nextSection])
+  }
+
+  private getDefaultNavID(): DocumentAttributesNavIDs | null {
+    return this.visibleSections[0]?.id ?? null
+  }
+
+  private getNavIDForSection(section: string): DocumentAttributesNavIDs | null {
+    const path = section?.toLowerCase()
+    if (!path) return null
+
+    const found = this.visibleSections.find((s) => s.path === path)
+    return found?.id ?? null
+  }
+
+  private getSectionForNavID(navID: number): string | null {
+    const section = this.visibleSections.find((s) => s.id === navID)
+    return section?.path ?? null
+  }
+}

src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.spec.ts

@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { CorrespondentListComponent } from './correspondent-list.component'
 
 describe('CorrespondentListComponent', () => {

src-ui/src/app/components/manage/document-attributes/management-list/correspondent-list/correspondent-list.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,6 +7,7 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { CorrespondentEditDialogComponent } from 'src/app/components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { Correspondent } from 'src/app/data/correspondent'
 import { FILTER_HAS_CORRESPONDENT_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -14,21 +15,16 @@ import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { CorrespondentService } from 'src/app/services/rest/correspondent.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'
 
 @Component({
   selector: 'pngx-correspondent-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
   providers: [{ provide: CustomDatePipe }],
   imports: [
     SortableDirective,
     IfPermissionsDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
@@ -37,11 +33,10 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
   ],
 })
 export class CorrespondentListComponent extends ManagementListComponent<Correspondent> {
-  private datePipe = inject(CustomDatePipe)
+  private readonly datePipe = inject(CustomDatePipe)
 
   constructor() {
     super()

src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.spec.ts

@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { DocumentTypeListComponent } from './document-type-list.component'
 
 describe('DocumentTypeListComponent', () => {

src-ui/src/app/components/manage/document-attributes/management-list/document-type-list/document-type-list.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { DocumentTypeEditDialogComponent } from 'src/app/components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
 import { DocumentType } from 'src/app/data/document-type'
 import { FILTER_HAS_DOCUMENT_TYPE_ANY } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { DocumentTypeService } from 'src/app/services/rest/document-type.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'
 
 @Component({
   selector: 'pngx-document-type-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
   imports: [
     SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
   ],
 })
 export class DocumentTypeListComponent extends ManagementListComponent<DocumentType> {

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.html

@@ -1,50 +1,3 @@
-<pngx-page-header title="{{ typeNamePlural | titlecase }}" info="View, add, edit and delete {{ typeNamePlural }}." infoLink="usage/#terms-and-definitions" [loading]="loading">
-
-  <div ngbDropdown class="btn-group flex-fill d-sm-none">
-    <button class="btn btn-sm btn-outline-primary" id="dropdownSelectMobile" ngbDropdownToggle>
-      <i-bs name="text-indent-left"></i-bs>
-      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
-      @if (selectedObjects.size > 0) {
-        <pngx-clearable-badge [selected]="selectedObjects.size > 0" [number]="selectedObjects.size" (cleared)="selectNone()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
-      }
-    </button>
-    <div ngbDropdownMenu aria-labelledby="dropdownSelectMobile" class="shadow">
-      <button ngbDropdownItem (click)="selectNone()" i18n>Select none</button>
-      <button ngbDropdownItem (click)="selectPage(true)" i18n>Select page</button>
-      <button ngbDropdownItem (click)="selectAll()" i18n>Select all</button>
-    </div>
-  </div>
-
-  <div class="d-none d-sm-flex flex-fill me-3">
-    <div class="input-group input-group-sm">
-      <span class="input-group-text border-0" i18n>Select:</span>
-    </div>
-    <div class="btn-group btn-group-sm flex-nowrap">
-      @if (selectedObjects.size > 0) {
-        <button class="btn btn-sm btn-outline-secondary" (click)="selectNone()">
-          <i-bs name="slash-circle"></i-bs>&nbsp;<ng-container i18n>None</ng-container>
-        </button>
-      }
-      <button class="btn btn-sm btn-outline-primary" (click)="selectPage(true)">
-        <i-bs name="file-earmark-check"></i-bs>&nbsp;<ng-container i18n>Page</ng-container>
-      </button>
-      <button class="btn btn-sm btn-outline-primary" (click)="selectAll()">
-        <i-bs name="check-all"></i-bs>&nbsp;<ng-container i18n>All</ng-container>
-      </button>
-    </div>
-  </div>
-
-  <button type="button" class="btn btn-sm btn-outline-primary" (click)="setPermissions()" [disabled]="!userCanBulkEdit(PermissionAction.Change) || selectedObjects.size === 0">
-    <i-bs name="person-fill-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
-  </button>
-  <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete()" [disabled]="!userCanBulkEdit(PermissionAction.Delete) || selectedObjects.size === 0">
-    <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
-  </button>
-  <button type="button" class="btn btn-sm btn-outline-primary ms-md-5" (click)="openCreateDialog()" *pngxIfPermissions="{ action: PermissionAction.Add, type: permissionType }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Create</ng-container>
-  </button>
-</pngx-page-header>
-
 <div class="row mb-3">
   <div class="col mb-2 mb-xl-0">
     <div class="form-inline d-flex align-items-center">
@@ -76,19 +29,19 @@
   <table class="table table-striped align-middle shadow-sm mb-0">
     <thead>
       <tr>
-        <th scope="col">
+        <th>
           <div class="form-check m-0 ms-2 me-n2">
-            <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="togggleAll" [disabled]="data.length === 0" (change)="selectPage($event.target.checked); $event.stopPropagation();">
+            <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="togggleAll" [disabled]="data.length === 0" (change)="$event.target.checked ? selectPage() : clearSelection(); $event.stopPropagation();">
             <label class="form-check-label" for="all-objects"></label>
           </div>
         </th>
-        <th scope="col" class="fw-normal" pngxSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
-        <th scope="col" class="fw-normal d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
-        <th scope="col" class="fw-normal" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
+        <th class="fw-normal" pngxSortable="name" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Name</th>
+        <th class="fw-normal d-none d-sm-table-cell" pngxSortable="matching_algorithm" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Matching</th>
+        <th class="fw-normal" pngxSortable="document_count" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)" i18n>Document count</th>
         @for (column of extraColumns; track column) {
-          <th scope="col" class="fw-normal" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
+          <th class="fw-normal" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }" pngxSortable="{{column.key}}" [currentSortField]="sortField" [currentSortReverse]="sortReverse" (sort)="onSort($event)">{{column.name}}</th>
         }
-        <th scope="col" class="fw-normal" i18n>Actions</th>
+        <th class="fw-normal" i18n>Actions</th>
       </tr>
     </thead>
     <tbody>
@@ -131,16 +84,16 @@
         <label class="form-check-label" for="{{typeName}}{{object.id}}"></label>
       </div>
     </td>
-    <td scope="row" class="name-cell" style="--depth: {{depth}}">
+    <td class="name-cell" style="--depth: {{depth}}">
       @if (depth > 0) {
         <div class="indicator"></div>
       }
       <button class="btn btn-link ms-0 ps-0 text-start" (click)="userCanEdit(object) ? openEditDialog(object) : null; $event.stopPropagation()">{{ object.name }}</button>
     </td>
-    <td scope="row" class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
-    <td scope="row">{{ getDocumentCount(object) }}</td>
+    <td class="d-none d-sm-table-cell">{{ getMatching(object) }}</td>
+    <td>{{ getDocumentCount(object) }}</td>
     @for (column of extraColumns; track column) {
-      <td scope="row" [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
+      <td [ngClass]="{ 'd-none d-sm-table-cell' : column.hideOnMobile }">
         @if (column.badgeFn) {
           <span
             class="badge"
@@ -156,7 +109,7 @@
         }
       </td>
     }
-    <td scope="row">
+    <td>
       <div class="btn-toolbar gap-2">
         <div class="btn-group d-block d-sm-none">
           <div ngbDropdown container="body" class="d-inline-block">
@@ -181,10 +134,10 @@
         </div>
         <div class="btn-group d-none d-sm-inline-block">
           <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Change, type: permissionType }" [disabled]="!userCanEdit(object)">
-            <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+            <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
           </button>
           <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(object); $event.stopPropagation();" *pngxIfPermissions="{ action: PermissionAction.Delete, type: permissionType }" [disabled]="!userCanDelete(object)">
-            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+            <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
           </button>
         </div>
         @if (getDocumentCount(object) > 0) {
@@ -195,7 +148,7 @@
               [routerLink]="getDocumentFilterUrl(object)"
               (click)="$event?.stopPropagation()"
             >
-              <i-bs width="1em" height="1em" name="filter"></i-bs>&nbsp;<ng-container i18n>Documents</ng-container
+              <i-bs width="1em" height="1em" name="filter" class="me-1"></i-bs><ng-container i18n>Documents</ng-container
               ><span class="badge bg-light text-secondary ms-2">{{ getDocumentCount(object) }}</span>
             </a>
           </div>

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.spec.ts

@@ -44,12 +44,12 @@ import { BulkEditObjectOperation } from 'src/app/services/rest/abstract-name-fil
 import { TagService } from 'src/app/services/rest/tag.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { EditDialogComponent } from '../../common/edit-dialog/edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
-import { TagListComponent } from '../tag-list/tag-list.component'
+import { ConfirmDialogComponent } from '../../../common/confirm-dialog/confirm-dialog.component'
+import { EditDialogComponent } from '../../../common/edit-dialog/edit-dialog.component'
+import { PageHeaderComponent } from '../../../common/page-header/page-header.component'
+import { PermissionsDialogComponent } from '../../../common/permissions-dialog/permissions-dialog.component'
 import { ManagementListComponent } from './management-list.component'
+import { TagListComponent } from './tag-list/tag-list.component'
 
 const tags: Tag[] = [
   {
@@ -304,12 +304,12 @@ describe('ManagementListComponent', () => {
   })
 
   it('selectPage should select current page items or clear selection', () => {
-    component.selectPage(true)
+    component.selectPage()
     expect(component.selectedObjects).toEqual(new Set(tags.map((t) => t.id)))
     expect(component.togggleAll).toBe(true)
 
     component.togggleAll = true
-    component.selectPage(false)
+    component.clearSelection()
     expect(component.selectedObjects.size).toBe(0)
     expect(component.togggleAll).toBe(false)
   })

src-ui/src/app/components/manage/document-attributes/management-list/management-list.component.ts

@@ -16,6 +16,10 @@ import {
   takeUntil,
   tap,
 } from 'rxjs/operators'
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component'
+import { EditDialogMode } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { PermissionsDialogComponent } from 'src/app/components/common/permissions-dialog/permissions-dialog.component'
+import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 import {
   MATCH_AUTO,
   MATCH_NONE,
@@ -40,10 +44,6 @@ import {
 } from 'src/app/services/rest/abstract-name-filter-service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
-import { PermissionsDialogComponent } from '../../common/permissions-dialog/permissions-dialog.component'
-import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 export interface ManagementListColumn {
   key: string
@@ -69,13 +69,14 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   implements OnInit, OnDestroy
 {
   protected service: AbstractNameFilterService<T>
-  private modalService: NgbModal = inject(NgbModal)
+  private readonly modalService: NgbModal = inject(NgbModal)
   protected editDialogComponent: any
-  private toastService: ToastService = inject(ToastService)
-  private documentListViewService: DocumentListViewService = inject(
+  private readonly toastService: ToastService = inject(ToastService)
+  private readonly documentListViewService: DocumentListViewService = inject(
     DocumentListViewService
   )
-  private permissionsService: PermissionsService = inject(PermissionsService)
+  private readonly permissionsService: PermissionsService =
+    inject(PermissionsService)
   protected filterRuleType: number
   public typeName: string
   public typeNamePlural: string
@@ -196,7 +197,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   }
 
   openCreateDialog() {
-    var activeModal = this.modalService.open(this.editDialogComponent, {
+    const activeModal = this.modalService.open(this.editDialogComponent, {
       backdrop: 'static',
     })
     activeModal.componentInstance.dialogMode = EditDialogMode.CREATE
@@ -215,7 +216,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   }
 
   openEditDialog(object: T) {
-    var activeModal = this.modalService.open(this.editDialogComponent, {
+    const activeModal = this.modalService.open(this.editDialogComponent, {
       backdrop: 'static',
     })
     activeModal.componentInstance.object = object
@@ -243,7 +244,7 @@ export abstract class ManagementListComponent<T extends MatchingModel>
   }
 
   openDeleteDialog(object: T) {
-    var activeModal = this.modalService.open(ConfirmDialogComponent, {
+    const activeModal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
     activeModal.componentInstance.title = $localize`Confirm delete`
@@ -343,13 +344,9 @@ export abstract class ManagementListComponent<T extends MatchingModel>
     this.clearSelection()
   }
 
-  selectPage(select: boolean) {
-    if (select) {
-      this.selectedObjects = new Set(this.getSelectableIDs(this.data))
-      this.togggleAll = this.areAllPageItemsSelected()
-    } else {
-      this.clearSelection()
-    }
+  selectPage() {
+    this.selectedObjects = new Set(this.getSelectableIDs(this.data))
+    this.togggleAll = this.areAllPageItemsSelected()
   }
 
   selectAll() {

src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.spec.ts

@@ -10,7 +10,7 @@ import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { StoragePathListComponent } from './storage-path-list.component'
 
 describe('StoragePathListComponent', () => {

src-ui/src/app/components/manage/document-attributes/management-list/storage-path-list/storage-path-list.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { StoragePathEditDialogComponent } from 'src/app/components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
 import { FILTER_HAS_STORAGE_PATH_ANY } from 'src/app/data/filter-rule-type'
 import { StoragePath } from 'src/app/data/storage-path'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'
 
 @Component({
   selector: 'pngx-storage-path-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
   imports: [
     SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
   ],
 })
 export class StoragePathListComponent extends ManagementListComponent<StoragePath> {

src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.spec.ts

@@ -9,7 +9,7 @@ import { of } from 'rxjs'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { PageHeaderComponent } from '../../../../common/page-header/page-header.component'
 import { TagListComponent } from './tag-list.component'
 
 describe('TagListComponent', () => {
@@ -138,12 +138,12 @@ describe('TagListComponent', () => {
     }
 
     component.data = [parent as any]
-    component.selectPage(true)
+    component.selectPage()
 
     expect(component.selectedObjects.has(10)).toBe(true)
     expect(component.selectedObjects.has(11)).toBe(true)
 
-    component.selectPage(false)
+    component.clearSelection()
     expect(component.selectedObjects.size).toBe(0)
   })
 })

src-ui/src/app/components/manage/document-attributes/management-list/tag-list/tag-list.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgTemplateOutlet, TitleCasePipe } from '@angular/common'
+import { NgClass, NgTemplateOutlet } from '@angular/common'
 import { Component, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
@@ -7,25 +7,21 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TagEditDialogComponent } from 'src/app/components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { FILTER_HAS_TAGS_ALL } from 'src/app/data/filter-rule-type'
 import { Tag } from 'src/app/data/tag'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SortableDirective } from 'src/app/directives/sortable.directive'
 import { PermissionType } from 'src/app/services/permissions.service'
 import { TagService } from 'src/app/services/rest/tag.service'
-import { ClearableBadgeComponent } from '../../common/clearable-badge/clearable-badge.component'
-import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { ManagementListComponent } from '../management-list/management-list.component'
+import { ManagementListComponent } from '../management-list.component'
 
 @Component({
   selector: 'pngx-tag-list',
-  templateUrl: './../management-list/management-list.component.html',
-  styleUrls: ['./../management-list/management-list.component.scss'],
+  templateUrl: './../management-list.component.html',
+  styleUrls: ['./../management-list.component.scss'],
   imports: [
     SortableDirective,
-    PageHeaderComponent,
-    TitleCasePipe,
     IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
@@ -35,7 +31,6 @@ import { ManagementListComponent } from '../management-list/management-list.comp
     NgbDropdownModule,
     NgbPaginationModule,
     NgxBootstrapIconsModule,
-    ClearableBadgeComponent,
   ],
 })
 export class TagListComponent extends ManagementListComponent<Tag> {

src-ui/src/app/components/manage/mail/mail.component.html

@@ -11,16 +11,16 @@
   <h4>
     <ng-container i18n>Mail accounts</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailAccount()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Account</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Account</ng-container>
     </button>
     @if (gmailOAuthUrl) {
       <a class="btn btn-sm btn-outline-secondary ms-2" [href]="gmailOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="google"></i-bs>&nbsp;<ng-container i18n>Connect Gmail Account</ng-container>
+        <i-bs name="google" class="me-1"></i-bs><ng-container i18n>Connect Gmail Account</ng-container>
       </a>
     }
     @if (outlookOAuthUrl) {
       <a class="btn btn-sm btn-outline-secondary ms-2" [href]="outlookOAuthUrl" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailAccount }">
-        <i-bs name="microsoft"></i-bs>&nbsp;<ng-container i18n>Connect Outlook Account</ng-container>
+        <i-bs name="microsoft" class="me-1"></i-bs><ng-container i18n>Connect Outlook Account</ng-container>
       </a>
     }
   </h4>
@@ -72,18 +72,18 @@
             <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userCanEdit(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
                 </button>
                 <button *pngxIfOwner="account" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(account)">
-                  <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
                 </button>
                 <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailAccount(account)">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                 </button>
               </div>
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailAccount }" [disabled]="!userIsOwner(account)" class="btn btn-sm btn-outline-secondary" type="button" (click)="processAccount(account)">
-                  <i-bs width="1em" height="1em" name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Process Mail</ng-container>
+                  <i-bs width="1em" height="1em" name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Process Mail</ng-container>
                 </button>
               </div>
             </div>
@@ -102,7 +102,7 @@
   <h4 class="mt-4">
     <ng-container i18n>Mail rules</ng-container>
     <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
-      <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Rule</ng-container>
+      <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Rule</ng-container>
     </button>
   </h4>
   <ul class="list-group">
@@ -140,7 +140,7 @@
           </div>
           <div class="col d-flex align-items-center d-none d-sm-flex" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.ProcessedMail }">
             <button class="btn btn-sm btn-outline-secondary" type="button" (click)="viewProcessedMail(rule)">
-              <i-bs width="1em" height="1em" name="clock-history"></i-bs>&nbsp;<ng-container i18n>View Processed Mail</ng-container>
+              <i-bs width="1em" height="1em" name="clock-history" class="me-1"></i-bs><ng-container i18n>View Processed Mail</ng-container>
             </button>
           </div>
           <div class="col-3">
@@ -160,18 +160,18 @@
             <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }" [disabled]="!userCanEdit(rule)" class="btn btn-sm btn-outline-secondary" type="button" (click)="editMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                  <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
                 </button>
                 <button *pngxIfOwner="rule" class="btn btn-sm btn-outline-secondary" type="button" (click)="editPermissions(rule)">
-                  <i-bs width="1em" height="1em" name="person-lock"></i-bs>&nbsp;<ng-container i18n>Permissions</ng-container>
+                  <i-bs width="1em" height="1em" name="person-lock" class="me-1"></i-bs><ng-container i18n>Permissions</ng-container>
                 </button>
                 <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.MailRule }" [disabled]="!userIsOwner(rule)" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                  <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
                 </button>
               </div>
               <div class="btn-group">
                 <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyMailRule(rule)">
-                  <i-bs width="1em" height="1em" name="files"></i-bs>&nbsp;<ng-container i18n>Copy</ng-container>
+                  <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
                 </button>
               </div>
             </div>

src-ui/src/app/components/manage/workflows/workflows.component.html

@@ -6,7 +6,7 @@
   infoLink="usage/#workflows"
   >
   <button type="button" class="btn btn-sm btn-outline-primary" (click)="editWorkflow()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }">
-    <i-bs name="plus-circle"></i-bs>&nbsp;<ng-container i18n>Add Workflow</ng-container>
+    <i-bs name="plus-circle" class="me-1"></i-bs><ng-container i18n>Add Workflow</ng-container>
   </button>
 </pngx-page-header>
 
@@ -60,15 +60,15 @@
           <div class="btn-toolbar d-none d-sm-flex gap-2" role="toolbar">
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="editWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="pencil"></i-bs>&nbsp;<ng-container i18n>Edit</ng-container>
+                <i-bs width="1em" height="1em" name="pencil" class="me-1"></i-bs><ng-container i18n>Edit</ng-container>
               </button>
               <button *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-danger" type="button" (click)="deleteWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                <i-bs width="1em" height="1em" name="trash" class="me-1"></i-bs><ng-container i18n>Delete</ng-container>
               </button>
             </div>
             <div class="btn-group">
               <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.Workflow }" class="btn btn-sm btn-outline-secondary" type="button" (click)="copyWorkflow(workflow)">
-                <i-bs width="1em" height="1em" name="files"></i-bs>&nbsp;<ng-container i18n>Copy</ng-container>
+                <i-bs width="1em" height="1em" name="files" class="me-1"></i-bs><ng-container i18n>Copy</ng-container>
               </button>
             </div>
           </div>

src-ui/src/app/components/not-found/not-found.component.html

@@ -6,7 +6,7 @@
       <h1 class="display-6" i18n>Not Found</h1>
       <p>
         <a class="btn btn-primary" routerLink="/dashboard">
-          <i-bs width="1.2em" height="1.2em" name="house"></i-bs>&nbsp;<ng-container i18n>Go to Dashboard</ng-container>
+          <i-bs width="1.2em" height="1.2em" name="house" class="me-1"></i-bs><ng-container i18n>Go to Dashboard</ng-container>
         </a>
       </p>
     </div>

src-ui/src/app/data/document.ts

@@ -161,6 +161,18 @@ export interface Document extends ObjectWithPermissions {
 
   duplicate_documents?: Document[]
 
+  // Versioning
+  root_document?: number
+  versions?: DocumentVersionInfo[]
+
   // Frontend only
   __changedFields?: string[]
 }
+
+export interface DocumentVersionInfo {
+  id: number
+  added?: Date
+  version_label?: string
+  checksum?: string
+  is_root: boolean
+}

src-ui/src/app/data/mail-rule.ts

@@ -84,4 +84,6 @@ export interface MailRule extends ObjectWithPermissions {
   assign_correspondent?: number // PaperlessCorrespondent.id
 
   assign_owner_from_rule: boolean
+
+  stop_processing: boolean
 }

src-ui/src/app/data/ui-settings.ts

@@ -19,6 +19,10 @@ export enum GlobalSearchType {
   TITLE_CONTENT = 'title-content',
 }
 
+export enum CollapsibleSection {
+  ATTRIBUTES = 'attributes',
+}
+
 export const PAPERLESS_GREEN_HEX = '#17541f'
 
 export const SETTINGS_KEYS = {
@@ -51,6 +55,8 @@ export const SETTINGS_KEYS = {
   NOTES_ENABLED: 'general-settings:notes-enabled',
   AUDITLOG_ENABLED: 'general-settings:auditlog-enabled',
   SLIM_SIDEBAR: 'general-settings:slim-sidebar',
+  ATTRIBUTES_SECTIONS_COLLAPSED:
+    'general-settings:attributes-sections-collapsed',
   UPDATE_CHECKING_ENABLED: 'general-settings:update-checking:enabled',
   UPDATE_CHECKING_BACKEND_SETTING:
     'general-settings:update-checking:backend-setting',
@@ -112,6 +118,11 @@ export const SETTINGS: UiSetting[] = [
     type: 'boolean',
     default: false,
   },
+  {
+    key: SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+    type: 'array',
+    default: [],
+  },
   {
     key: SETTINGS_KEYS.DOCUMENT_LIST_SIZE,
     type: 'number',

src-ui/src/app/guards/permissions.guard.spec.ts

@@ -96,4 +96,52 @@ describe('PermissionsGuard', () => {
     expect(canActivate).toHaveProperty('root') // returns UrlTree
     expect(toastSpy).toHaveBeenCalled()
   })
+
+  it('should activate when any required permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation((action, type) => {
+        return type === PermissionType.Tag
+      })
+
+    const canActivate = guard.canActivate(
+      {
+        data: {
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+          ],
+        },
+      } as any,
+      routerState.snapshot
+    )
+
+    expect(canActivate).toBeTruthy()
+  })
+
+  it('should not activate when no required permission is granted', () => {
+    jest
+      .spyOn(permissionsService, 'currentUserCan')
+      .mockImplementation(() => false)
+
+    const canActivate = guard.canActivate(
+      {
+        data: {
+          requiredPermissionAny: [
+            { action: PermissionAction.View, type: PermissionType.Tag },
+            {
+              action: PermissionAction.View,
+              type: PermissionType.DocumentType,
+            },
+          ],
+        },
+      } as any,
+      routerState.snapshot
+    )
+
+    expect(canActivate).toHaveProperty('root')
+  })
 })

src-ui/src/app/guards/permissions.guard.ts

@@ -20,12 +20,20 @@ export class PermissionsGuard {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): boolean | UrlTree {
+    const requiredPermissionAny: { action: any; type: any }[] =
+      route.data.requiredPermissionAny
+
     if (
       (route.data.requireAdmin && !this.permissionsService.isAdmin()) ||
       (route.data.requiredPermission &&
         !this.permissionsService.currentUserCan(
           route.data.requiredPermission.action,
           route.data.requiredPermission.type
+        )) ||
+      (Array.isArray(requiredPermissionAny) &&
+        requiredPermissionAny.length > 0 &&
+        !requiredPermissionAny.some((p) =>
+          this.permissionsService.currentUserCan(p.action, p.type)
         ))
     ) {
       // Check if tour is running 1 = TourState.ON

src-ui/src/app/services/rest/document.service.spec.ts

@@ -165,6 +165,14 @@ describe(`DocumentService`, () => {
     expect(req.request.method).toEqual('GET')
   })
 
+  it('should call appropriate api endpoint for versioned metadata', () => {
+    subscription = service.getMetadata(documents[0].id, 123).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/metadata/?version=123`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
   it('should call appropriate api endpoint for getting selection data', () => {
     const ids = [documents[0].id]
     subscription = service.getSelectionData(ids).subscribe()
@@ -233,11 +241,22 @@ describe(`DocumentService`, () => {
     )
   })
 
+  it('should return the correct preview URL for a specific version', () => {
+    const url = service.getPreviewUrl(documents[0].id, false, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/preview/?version=123`
+    )
+  })
+
   it('should return the correct thumb URL for a single document', () => {
     let url = service.getThumbUrl(documents[0].id)
     expect(url).toEqual(
       `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/thumb/`
     )
+    url = service.getThumbUrl(documents[0].id, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/thumb/?version=123`
+    )
   })
 
   it('should return the correct download URL for a single document', () => {
@@ -249,6 +268,22 @@ describe(`DocumentService`, () => {
     expect(url).toEqual(
       `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?original=true`
     )
+    url = service.getDownloadUrl(documents[0].id, false, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?version=123`
+    )
+    url = service.getDownloadUrl(documents[0].id, true, 123)
+    expect(url).toEqual(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/download/?original=true&version=123`
+    )
+  })
+
+  it('should pass optional get params for version and fields', () => {
+    subscription = service.get(documents[0].id, 123, 'content').subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?full_perms=true&version=123&fields=content`
+    )
+    expect(req.request.method).toEqual('GET')
   })
 
   it('should set search query', () => {
@@ -283,12 +318,65 @@ describe(`DocumentService`, () => {
     expect(req.request.body.remove_inbox_tags).toEqual(true)
   })
 
+  it('should pass selected version to patch when provided', () => {
+    subscription = service.patch(documents[0], 123).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?version=123`
+    )
+    expect(req.request.method).toEqual('PATCH')
+  })
+
   it('should call appropriate api endpoint for getting audit log', () => {
     subscription = service.getHistory(documents[0].id).subscribe()
     const req = httpTestingController.expectOne(
       `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/history/`
     )
   })
+
+  it('should call appropriate api endpoint for getting root document id', () => {
+    subscription = service.getRootId(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/root/`
+    )
+    expect(req.request.method).toEqual('GET')
+    req.flush({ root_id: documents[0].id })
+  })
+
+  it('should call appropriate api endpoint for getting document versions', () => {
+    subscription = service.getVersions(documents[0].id).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/?fields=id,versions`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
+  it('should call appropriate api endpoint for deleting a document version', () => {
+    subscription = service.deleteVersion(documents[0].id, 10).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/versions/10/`
+    )
+    expect(req.request.method).toEqual('DELETE')
+    req.flush({ result: 'OK', current_version_id: documents[0].id })
+  })
+
+  it('should call appropriate api endpoint for uploading a new version', () => {
+    const file = new File(['hello'], 'test.pdf', { type: 'application/pdf' })
+
+    subscription = service
+      .uploadVersion(documents[0].id, file, 'Label')
+      .subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/update_version/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toBeInstanceOf(FormData)
+
+    const body = req.request.body as FormData
+    expect(body.get('version_label')).toEqual('Label')
+    expect(body.get('document')).toBeInstanceOf(File)
+
+    req.flush('task-id')
+  })
 })
 
 it('should construct sort fields respecting permissions', () => {

src-ui/src/app/services/rest/document.service.ts

@@ -155,44 +155,108 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     }).pipe(map((response) => response.results.map((doc) => doc.id)))
   }
 
-  get(id: number): Observable<Document> {
+  get(
+    id: number,
+    versionID: number = null,
+    fields: string = null
+  ): Observable<Document> {
+    const params: { full_perms: boolean; version?: string; fields?: string } = {
+      full_perms: true,
+    }
+    if (versionID) {
+      params.version = versionID.toString()
+    }
+    if (fields) {
+      params.fields = fields
+    }
     return this.http.get<Document>(this.getResourceUrl(id), {
-      params: {
-        full_perms: true,
-      },
+      params,
     })
   }
 
-  getPreviewUrl(id: number, original: boolean = false): string {
+  getPreviewUrl(
+    id: number,
+    original: boolean = false,
+    versionID: number = null
+  ): string {
     let url = new URL(this.getResourceUrl(id, 'preview'))
     if (this._searchQuery) url.hash = `#search="${this.searchQuery}"`
     if (original) {
       url.searchParams.append('original', 'true')
     }
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
     return url.toString()
   }
 
-  getThumbUrl(id: number): string {
-    return this.getResourceUrl(id, 'thumb')
+  getThumbUrl(id: number, versionID: number = null): string {
+    let url = new URL(this.getResourceUrl(id, 'thumb'))
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return url.toString()
   }
 
-  getDownloadUrl(id: number, original: boolean = false): string {
-    let url = this.getResourceUrl(id, 'download')
+  getDownloadUrl(
+    id: number,
+    original: boolean = false,
+    versionID: number = null
+  ): string {
+    let url = new URL(this.getResourceUrl(id, 'download'))
     if (original) {
-      url += '?original=true'
+      url.searchParams.append('original', 'true')
     }
-    return url
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return url.toString()
+  }
+
+  uploadVersion(documentId: number, file: File, versionLabel?: string) {
+    const formData = new FormData()
+    formData.append('document', file, file.name)
+    if (versionLabel) {
+      formData.append('version_label', versionLabel)
+    }
+    return this.http.post<string>(
+      this.getResourceUrl(documentId, 'update_version'),
+      formData
+    )
+  }
+
+  getVersions(documentId: number): Observable<Document> {
+    return this.http.get<Document>(this.getResourceUrl(documentId), {
+      params: {
+        fields: 'id,versions',
+      },
+    })
+  }
+
+  getRootId(documentId: number) {
+    return this.http.get<{ root_id: number }>(
+      this.getResourceUrl(documentId, 'root')
+    )
+  }
+
+  deleteVersion(rootDocumentId: number, versionId: number) {
+    return this.http.delete<{ result: string; current_version_id: number }>(
+      this.getResourceUrl(rootDocumentId, `versions/${versionId}`)
+    )
   }
 
   getNextAsn(): Observable<number> {
     return this.http.get<number>(this.getResourceUrl(null, 'next_asn'))
   }
 
-  patch(o: Document): Observable<Document> {
+  patch(o: Document, versionID: number = null): Observable<Document> {
     o.remove_inbox_tags = !!this.settingsService.get(
       SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
     )
-    return super.patch(o)
+    this.clearCache()
+    return this.http.patch<Document>(this.getResourceUrl(o.id), o, {
+      params: versionID ? { version: versionID.toString() } : {},
+    })
   }
 
   uploadDocument(formData) {
@@ -203,8 +267,15 @@ export class DocumentService extends AbstractPaperlessService<Document> {
     )
   }
 
-  getMetadata(id: number): Observable<DocumentMetadata> {
-    return this.http.get<DocumentMetadata>(this.getResourceUrl(id, 'metadata'))
+  getMetadata(
+    id: number,
+    versionID: number = null
+  ): Observable<DocumentMetadata> {
+    let url = new URL(this.getResourceUrl(id, 'metadata'))
+    if (versionID) {
+      url.searchParams.append('version', versionID.toString())
+    }
+    return this.http.get<DocumentMetadata>(url.toString())
   }
 
   bulkEdit(ids: number[], method: string, args: any) {

src-ui/src/app/services/rest/mail-rule.service.spec.ts

@@ -33,6 +33,7 @@ const mail_rules = [
     action: MailAction.MarkRead,
     assign_title_from: MailMetadataTitleOption.FromSubject,
     assign_owner_from_rule: true,
+    stop_processing: false,
   },
   {
     name: 'Mail Rule 2',
@@ -52,6 +53,7 @@ const mail_rules = [
     action: MailAction.Delete,
     assign_title_from: MailMetadataTitleOption.FromSubject,
     assign_owner_from_rule: true,
+    stop_processing: false,
   },
   {
     name: 'Mail Rule 3',
@@ -71,6 +73,7 @@ const mail_rules = [
     action: MailAction.Flag,
     assign_title_from: MailMetadataTitleOption.FromSubject,
     assign_owner_from_rule: false,
+    stop_processing: false,
   },
 ]
 

src-ui/src/app/services/websocket-status.service.ts

@@ -89,6 +89,13 @@ export class FileStatus {
   }
 }
 
+export enum UploadState {
+  Idle = 'idle',
+  Uploading = 'uploading',
+  Processing = 'processing',
+  Failed = 'failed',
+}
+
 @Injectable({
   providedIn: 'root',
 })

src-ui/src/environments/environment.prod.ts

@@ -6,7 +6,7 @@ export const environment = {
   apiVersion: '9', // match src/paperless/settings.py
   appTitle: 'Paperless-ngx',
   tag: 'prod',
-  version: '2.20.6',
+  version: '2.20.7',
   webSocketHost: window.location.host,
   webSocketProtocol: window.location.protocol == 'https:' ? 'wss:' : 'ws:',
   webSocketBaseUrl: base_url.pathname + 'ws/',

src-ui/src/main.ts

@@ -79,9 +79,11 @@ import {
   eye,
   fileEarmark,
   fileEarmarkCheck,
+  fileEarmarkDiff,
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkPlus,
   fileEarmarkRichtext,
   fileText,
   files,
@@ -125,6 +127,7 @@ import {
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
+  stack,
   stars,
   tag,
   tagFill,
@@ -297,9 +300,11 @@ const icons = {
   eye,
   fileEarmark,
   fileEarmarkCheck,
+  fileEarmarkDiff,
   fileEarmarkFill,
   fileEarmarkLock,
   fileEarmarkMinus,
+  fileEarmarkPlus,
   fileEarmarkRichtext,
   files,
   fileText,
@@ -343,6 +348,7 @@ const icons = {
   sliders2Vertical,
   sortAlphaDown,
   sortAlphaUpAlt,
+  stack,
   stars,
   tagFill,
   tag,

src/documents/bulk_edit.py

@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-import hashlib
 import logging
 import tempfile
 from pathlib import Path
@@ -73,6 +72,48 @@ def restore_archive_serial_numbers(backup: dict[int, int | None]) -> None:
     logger.info(f"Restored archive serial numbers for documents {list(backup.keys())}")
 
 
+def _get_root_ids_by_doc_id(doc_ids: list[int]) -> dict[int, int]:
+    """
+    Resolve each provided document id to its root document id.
+
+    - If the id is already a root document: root id is itself.
+    - If the id is a version document: root id is its `root_document_id`.
+    """
+    qs = Document.objects.filter(id__in=doc_ids).only("id", "root_document_id")
+    return {doc.id: doc.root_document_id or doc.id for doc in qs}
+
+
+def _get_root_and_current_docs_by_root_id(
+    root_ids: set[int],
+) -> tuple[dict[int, Document], dict[int, Document]]:
+    """
+    Returns:
+      - root_docs: root_id -> root Document
+      - current_docs: root_id -> newest version Document (or root if none)
+    """
+    root_docs = {
+        doc.id: doc
+        for doc in Document.objects.filter(id__in=root_ids).select_related(
+            "owner",
+        )
+    }
+    latest_versions_by_root_id: dict[int, Document] = {}
+    for version_doc in Document.objects.filter(root_document_id__in=root_ids).order_by(
+        "root_document_id",
+        "-id",
+    ):
+        root_id = version_doc.root_document_id
+        if root_id is None:
+            continue
+        latest_versions_by_root_id.setdefault(root_id, version_doc)
+
+    current_docs: dict[int, Document] = {
+        root_id: latest_versions_by_root_id.get(root_id, root_docs[root_id])
+        for root_id in root_docs
+    }
+    return root_docs, current_docs
+
+
 def set_correspondent(
     doc_ids: list[int],
     correspondent: Correspondent,
@@ -309,16 +350,29 @@ def modify_custom_fields(
 @shared_task
 def delete(doc_ids: list[int]) -> Literal["OK"]:
     try:
-        Document.objects.filter(id__in=doc_ids).delete()
+        root_ids = (
+            Document.objects.filter(id__in=doc_ids, root_document__isnull=True)
+            .values_list("id", flat=True)
+            .distinct()
+        )
+        version_ids = (
+            Document.objects.filter(root_document_id__in=root_ids)
+            .exclude(id__in=doc_ids)
+            .values_list("id", flat=True)
+            .distinct()
+        )
+        delete_ids = list({*doc_ids, *version_ids})
+
+        Document.objects.filter(id__in=delete_ids).delete()
 
         from documents import index
 
         with index.open_index_writer() as writer:
-            for id in doc_ids:
+            for id in delete_ids:
                 index.remove_document_by_id(writer, id)
 
         status_mgr = DocumentsStatusManager()
-        status_mgr.send_documents_deleted(doc_ids)
+        status_mgr.send_documents_deleted(delete_ids)
     except Exception as e:
         if "Data too long for column" in str(e):
             logger.warning(
@@ -363,43 +417,60 @@ def set_permissions(
     return "OK"
 
 
-def rotate(doc_ids: list[int], degrees: int) -> Literal["OK"]:
+def rotate(
+    doc_ids: list[int],
+    degrees: int,
+    *,
+    user: User | None = None,
+) -> Literal["OK"]:
     logger.info(
         f"Attempting to rotate {len(doc_ids)} documents by {degrees} degrees.",
     )
-    qs = Document.objects.filter(id__in=doc_ids)
-    affected_docs: list[int] = []
+    doc_to_root_id = _get_root_ids_by_doc_id(doc_ids)
+    root_ids = set(doc_to_root_id.values())
+    root_docs_by_id, current_docs_by_root_id = _get_root_and_current_docs_by_root_id(
+        root_ids,
+    )
     import pikepdf
 
-    rotate_tasks = []
-    for doc in qs:
-        if doc.mime_type != "application/pdf":
+    for root_id in root_ids:
+        root_doc = root_docs_by_id[root_id]
+        source_doc = current_docs_by_root_id[root_id]
+        if source_doc.mime_type != "application/pdf":
             logger.warning(
-                f"Document {doc.id} is not a PDF, skipping rotation.",
+                f"Document {root_doc.id} is not a PDF, skipping rotation.",
             )
             continue
         try:
-            with pikepdf.open(doc.source_path, allow_overwriting_input=True) as pdf:
+            # Write rotated output to a temp file and create a new version via consume pipeline
+            filepath: Path = (
+                Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
+                / f"{root_doc.id}_rotated.pdf"
+            )
+            with pikepdf.open(source_doc.source_path) as pdf:
                 for page in pdf.pages:
                     page.rotate(degrees, relative=True)
-                pdf.save()
-                doc.checksum = hashlib.md5(doc.source_path.read_bytes()).hexdigest()
-                doc.save()
-                rotate_tasks.append(
-                    update_document_content_maybe_archive_file.s(
-                        document_id=doc.id,
-                    ),
-                )
-                logger.info(
-                    f"Rotated document {doc.id} by {degrees} degrees",
-                )
-                affected_docs.append(doc.id)
-        except Exception as e:
-            logger.exception(f"Error rotating document {doc.id}: {e}")
+                pdf.remove_unreferenced_resources()
+                pdf.save(filepath)
 
-    if len(affected_docs) > 0:
-        bulk_update_task = bulk_update_documents.si(document_ids=affected_docs)
-        chord(header=rotate_tasks, body=bulk_update_task).delay()
+            # Preserve metadata/permissions via overrides; mark as new version
+            overrides = DocumentMetadataOverrides().from_document(root_doc)
+            if user is not None:
+                overrides.actor_id = user.id
+
+            consume_file.delay(
+                ConsumableDocument(
+                    source=DocumentSource.ConsumeFolder,
+                    original_file=filepath,
+                    root_document_id=root_doc.id,
+                ),
+                overrides,
+            )
+            logger.info(
+                f"Queued new rotated version for document {root_doc.id} by {degrees} degrees",
+            )
+        except Exception as e:
+            logger.exception(f"Error rotating document {root_doc.id}: {e}")
 
     return "OK"
 
@@ -584,30 +655,62 @@ def split(
     return "OK"
 
 
-def delete_pages(doc_ids: list[int], pages: list[int]) -> Literal["OK"]:
+def delete_pages(
+    doc_ids: list[int],
+    pages: list[int],
+    *,
+    user: User | None = None,
+) -> Literal["OK"]:
     logger.info(
         f"Attempting to delete pages {pages} from {len(doc_ids)} documents",
     )
-    doc = Document.objects.get(id=doc_ids[0])
+    doc = Document.objects.select_related("root_document").get(id=doc_ids[0])
+    root_doc: Document
+    if doc.root_document_id is None or doc.root_document is None:
+        root_doc = doc
+    else:
+        root_doc = doc.root_document
+
+    source_doc = (
+        Document.objects.filter(Q(id=root_doc.id) | Q(root_document=root_doc))
+        .order_by("-id")
+        .first()
+    )
+    if source_doc is None:
+        source_doc = root_doc
     pages = sorted(pages)  # sort pages to avoid index issues
     import pikepdf
 
     try:
-        with pikepdf.open(doc.source_path, allow_overwriting_input=True) as pdf:
+        # Produce edited PDF to a temp file and create a new version
+        filepath: Path = (
+            Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
+            / f"{root_doc.id}_pages_deleted.pdf"
+        )
+        with pikepdf.open(source_doc.source_path) as pdf:
             offset = 1  # pages are 1-indexed
             for page_num in pages:
                 pdf.pages.remove(pdf.pages[page_num - offset])
                 offset += 1  # remove() changes the index of the pages
             pdf.remove_unreferenced_resources()
-            pdf.save()
-            doc.checksum = hashlib.md5(doc.source_path.read_bytes()).hexdigest()
-            if doc.page_count is not None:
-                doc.page_count = doc.page_count - len(pages)
-            doc.save()
-            update_document_content_maybe_archive_file.delay(document_id=doc.id)
-            logger.info(f"Deleted pages {pages} from document {doc.id}")
+            pdf.save(filepath)
+
+        overrides = DocumentMetadataOverrides().from_document(root_doc)
+        if user is not None:
+            overrides.actor_id = user.id
+        consume_file.delay(
+            ConsumableDocument(
+                source=DocumentSource.ConsumeFolder,
+                original_file=filepath,
+                root_document_id=root_doc.id,
+            ),
+            overrides,
+        )
+        logger.info(
+            f"Queued new version for document {root_doc.id} after deleting pages {pages}",
+        )
     except Exception as e:
-        logger.exception(f"Error deleting pages from document {doc.id}: {e}")
+        logger.exception(f"Error deleting pages from document {root_doc.id}: {e}")
 
     return "OK"
 
@@ -632,13 +735,26 @@ def edit_pdf(
     logger.info(
         f"Editing PDF of document {doc_ids[0]} with {len(operations)} operations",
     )
-    doc = Document.objects.get(id=doc_ids[0])
+    doc = Document.objects.select_related("root_document").get(id=doc_ids[0])
+    root_doc: Document
+    if doc.root_document_id is None or doc.root_document is None:
+        root_doc = doc
+    else:
+        root_doc = doc.root_document
+
+    source_doc = (
+        Document.objects.filter(Q(id=root_doc.id) | Q(root_document=root_doc))
+        .order_by("-id")
+        .first()
+    )
+    if source_doc is None:
+        source_doc = root_doc
     import pikepdf
 
     pdf_docs: list[pikepdf.Pdf] = []
 
     try:
-        with pikepdf.open(doc.source_path) as src:
+        with pikepdf.open(source_doc.source_path) as src:
             # prepare output documents
             max_idx = max(op.get("doc", 0) for op in operations)
             pdf_docs = [pikepdf.new() for _ in range(max_idx + 1)]
@@ -657,42 +773,56 @@ def edit_pdf(
                     dst.pages[-1].rotate(op["rotate"], relative=True)
 
         if update_document:
-            temp_path = doc.source_path.with_suffix(".tmp.pdf")
+            # Create a new version from the edited PDF rather than replacing in-place
             pdf = pdf_docs[0]
             pdf.remove_unreferenced_resources()
-            # save the edited PDF to a temporary file in case of errors
-            pdf.save(temp_path)
-            # replace the original document with the edited one
-            temp_path.replace(doc.source_path)
-            doc.checksum = hashlib.md5(doc.source_path.read_bytes()).hexdigest()
-            doc.page_count = len(pdf.pages)
-            doc.save()
-            update_document_content_maybe_archive_file.delay(document_id=doc.id)
-        else:
-            consume_tasks = []
+            filepath: Path = (
+                Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
+                / f"{root_doc.id}_edited.pdf"
+            )
+            pdf.save(filepath)
             overrides = (
-                DocumentMetadataOverrides().from_document(doc)
+                DocumentMetadataOverrides().from_document(root_doc)
                 if include_metadata
                 else DocumentMetadataOverrides()
             )
             if user is not None:
                 overrides.owner_id = user.id
+                overrides.actor_id = user.id
+            consume_file.delay(
+                ConsumableDocument(
+                    source=DocumentSource.ConsumeFolder,
+                    original_file=filepath,
+                    root_document_id=root_doc.id,
+                ),
+                overrides,
+            )
+        else:
+            consume_tasks = []
+            overrides = (
+                DocumentMetadataOverrides().from_document(root_doc)
+                if include_metadata
+                else DocumentMetadataOverrides()
+            )
+            if user is not None:
+                overrides.owner_id = user.id
+                overrides.actor_id = user.id
             if not delete_original:
                 overrides.skip_asn_if_exists = True
             if delete_original and len(pdf_docs) == 1:
-                overrides.asn = doc.archive_serial_number
+                overrides.asn = root_doc.archive_serial_number
             for idx, pdf in enumerate(pdf_docs, start=1):
-                filepath: Path = (
+                version_filepath: Path = (
                     Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
-                    / f"{doc.id}_edit_{idx}.pdf"
+                    / f"{root_doc.id}_edit_{idx}.pdf"
                 )
                 pdf.remove_unreferenced_resources()
-                pdf.save(filepath)
+                pdf.save(version_filepath)
                 consume_tasks.append(
                     consume_file.s(
                         ConsumableDocument(
                             source=DocumentSource.ConsumeFolder,
-                            original_file=filepath,
+                            original_file=version_filepath,
                         ),
                         overrides,
                     ),
@@ -714,7 +844,7 @@ def edit_pdf(
                 group(consume_tasks).delay()
 
     except Exception as e:
-        logger.exception(f"Error editing document {doc.id}: {e}")
+        logger.exception(f"Error editing document {root_doc.id}: {e}")
         raise ValueError(
             f"An error occurred while editing the document: {e}",
         ) from e
@@ -737,38 +867,61 @@ def remove_password(
     import pikepdf
 
     for doc_id in doc_ids:
-        doc = Document.objects.get(id=doc_id)
+        doc = Document.objects.select_related("root_document").get(id=doc_id)
+        root_doc: Document
+        if doc.root_document_id is None or doc.root_document is None:
+            root_doc = doc
+        else:
+            root_doc = doc.root_document
+
+        source_doc = (
+            Document.objects.filter(Q(id=root_doc.id) | Q(root_document=root_doc))
+            .order_by("-id")
+            .first()
+        )
+        if source_doc is None:
+            source_doc = root_doc
         try:
             logger.info(
                 f"Attempting password removal from document {doc_ids[0]}",
             )
-            with pikepdf.open(doc.source_path, password=password) as pdf:
-                temp_path = doc.source_path.with_suffix(".tmp.pdf")
+            with pikepdf.open(source_doc.source_path, password=password) as pdf:
+                filepath: Path = (
+                    Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
+                    / f"{root_doc.id}_unprotected.pdf"
+                )
                 pdf.remove_unreferenced_resources()
-                pdf.save(temp_path)
+                pdf.save(filepath)
 
                 if update_document:
-                    # replace the original document with the unprotected one
-                    temp_path.replace(doc.source_path)
-                    doc.checksum = hashlib.md5(doc.source_path.read_bytes()).hexdigest()
-                    doc.page_count = len(pdf.pages)
-                    doc.save()
-                    update_document_content_maybe_archive_file.delay(document_id=doc.id)
-                else:
-                    consume_tasks = []
+                    # Create a new version rather than modifying the root/original in place.
                     overrides = (
-                        DocumentMetadataOverrides().from_document(doc)
+                        DocumentMetadataOverrides().from_document(root_doc)
                         if include_metadata
                         else DocumentMetadataOverrides()
                     )
                     if user is not None:
                         overrides.owner_id = user.id
-
-                    filepath: Path = (
-                        Path(tempfile.mkdtemp(dir=settings.SCRATCH_DIR))
-                        / f"{doc.id}_unprotected.pdf"
+                        overrides.actor_id = user.id
+                    consume_file.delay(
+                        ConsumableDocument(
+                            source=DocumentSource.ConsumeFolder,
+                            original_file=filepath,
+                            root_document_id=root_doc.id,
+                        ),
+                        overrides,
                     )
-                    temp_path.replace(filepath)
+                else:
+                    consume_tasks = []
+                    overrides = (
+                        DocumentMetadataOverrides().from_document(root_doc)
+                        if include_metadata
+                        else DocumentMetadataOverrides()
+                    )
+                    if user is not None:
+                        overrides.owner_id = user.id
+                        overrides.actor_id = user.id
+
                     consume_tasks.append(
                         consume_file.s(
                             ConsumableDocument(
@@ -780,12 +933,17 @@ def remove_password(
                     )
 
                     if delete_original:
-                        chord(header=consume_tasks, body=delete.si([doc.id])).delay()
+                        chord(
+                            header=consume_tasks,
+                            body=delete.si([doc.id]),
+                        ).delay()
                     else:
                         group(consume_tasks).delay()
 
         except Exception as e:
-            logger.exception(f"Error removing password from document {doc.id}: {e}")
+            logger.exception(
+                f"Error removing password from document {root_doc.id}: {e}",
+            )
             raise ValueError(
                 f"An error occurred while removing the password: {e}",
             ) from e

src/documents/conditionals.py

@@ -1,5 +1,6 @@
 from datetime import datetime
 from datetime import timezone
+from typing import Any
 
 from django.conf import settings
 from django.core.cache import cache
@@ -12,6 +13,7 @@ from documents.caching import CLASSIFIER_VERSION_KEY
 from documents.caching import get_thumbnail_modified_key
 from documents.classifier import DocumentClassifier
 from documents.models import Document
+from documents.versioning import resolve_effective_document_by_pk
 
 
 def suggestions_etag(request, pk: int) -> str | None:
@@ -71,12 +73,10 @@ def metadata_etag(request, pk: int) -> str | None:
     Metadata is extracted from the original file, so use its checksum as the
     ETag
     """
-    try:
-        doc = Document.objects.only("checksum").get(pk=pk)
-        return doc.checksum
-    except Document.DoesNotExist:  # pragma: no cover
+    doc = resolve_effective_document_by_pk(pk, request).document
+    if doc is None:
         return None
-    return None
+    return doc.checksum
 
 
 def metadata_last_modified(request, pk: int) -> datetime | None:
@@ -85,28 +85,25 @@ def metadata_last_modified(request, pk: int) -> datetime | None:
     not the modification of the original file, but of the database object, but might as well
     error on the side of more cautious
     """
-    try:
-        doc = Document.objects.only("modified").get(pk=pk)
-        return doc.modified
-    except Document.DoesNotExist:  # pragma: no cover
+    doc = resolve_effective_document_by_pk(pk, request).document
+    if doc is None:
         return None
-    return None
+    return doc.modified
 
 
 def preview_etag(request, pk: int) -> str | None:
     """
     ETag for the document preview, using the original or archive checksum, depending on the request
     """
-    try:
-        doc = Document.objects.only("checksum", "archive_checksum").get(pk=pk)
-        use_original = (
-            "original" in request.query_params
-            and request.query_params["original"] == "true"
-        )
-        return doc.checksum if use_original else doc.archive_checksum
-    except Document.DoesNotExist:  # pragma: no cover
+    doc = resolve_effective_document_by_pk(pk, request).document
+    if doc is None:
         return None
-    return None
+    use_original = (
+        hasattr(request, "query_params")
+        and "original" in request.query_params
+        and request.query_params["original"] == "true"
+    )
+    return doc.checksum if use_original else doc.archive_checksum
 
 
 def preview_last_modified(request, pk: int) -> datetime | None:
@@ -114,24 +111,25 @@ def preview_last_modified(request, pk: int) -> datetime | None:
     Uses the documents modified time to set the Last-Modified header.  Not strictly
     speaking correct, but close enough and quick
     """
-    try:
-        doc = Document.objects.only("modified").get(pk=pk)
-        return doc.modified
-    except Document.DoesNotExist:  # pragma: no cover
+    doc = resolve_effective_document_by_pk(pk, request).document
+    if doc is None:
         return None
-    return None
+    return doc.modified
 
 
-def thumbnail_last_modified(request, pk: int) -> datetime | None:
+def thumbnail_last_modified(request: Any, pk: int) -> datetime | None:
     """
     Returns the filesystem last modified either from cache or from filesystem.
     Cache should be (slightly?) faster than filesystem
     """
     try:
-        doc = Document.objects.only("pk").get(pk=pk)
+        doc = resolve_effective_document_by_pk(pk, request).document
+        if doc is None:
+            return None
         if not doc.thumbnail_path.exists():
             return None
-        doc_key = get_thumbnail_modified_key(pk)
+        # Use the effective document id for cache key
+        doc_key = get_thumbnail_modified_key(doc.id)
 
         cache_hit = cache.get(doc_key)
         if cache_hit is not None:
@@ -145,5 +143,5 @@ def thumbnail_last_modified(request, pk: int) -> datetime | None:
         )
         cache.set(doc_key, last_modified, CACHE_50_MINUTES)
         return last_modified
-    except Document.DoesNotExist:  # pragma: no cover
+    except (Document.DoesNotExist, OSError):  # pragma: no cover
         return None

src/documents/consumer.py

@@ -102,6 +102,12 @@ class ConsumerStatusShortMessage(str, Enum):
 
 
 class ConsumerPluginMixin:
+    if TYPE_CHECKING:
+        from logging import Logger
+        from logging import LoggerAdapter
+
+        log: "LoggerAdapter"  # type: ignore[type-arg]
+
     def __init__(
         self,
         input_doc: ConsumableDocument,
@@ -116,6 +122,22 @@ class ConsumerPluginMixin:
 
         self.filename = self.metadata.filename or self.input_doc.original_file.name
 
+        if input_doc.root_document_id:
+            self.log.debug(
+                f"Document root document id: {input_doc.root_document_id}",
+            )
+            root_document = Document.objects.get(pk=input_doc.root_document_id)
+            version_index = Document.objects.filter(root_document=root_document).count()
+            filename_path = Path(self.filename)
+            if filename_path.suffix:
+                self.filename = str(
+                    filename_path.with_name(
+                        f"{filename_path.stem}_v{version_index}{filename_path.suffix}",
+                    ),
+                )
+            else:
+                self.filename = f"{self.filename}_v{version_index}"
+
     def _send_progress(
         self,
         current_progress: int,
@@ -161,6 +183,41 @@ class ConsumerPlugin(
 ):
     logging_name = LOGGING_NAME
 
+    def _clone_root_into_version(
+        self,
+        root_doc: Document,
+        *,
+        text: str | None,
+        page_count: int | None,
+        mime_type: str,
+    ) -> Document:
+        self.log.debug("Saving record for updated version to database")
+        version_doc = Document.objects.get(pk=root_doc.pk)
+        setattr(version_doc, "pk", None)
+        version_doc.root_document = root_doc
+        file_for_checksum = (
+            self.unmodified_original
+            if self.unmodified_original is not None
+            else self.working_copy
+        )
+        version_doc.checksum = hashlib.md5(
+            file_for_checksum.read_bytes(),
+        ).hexdigest()
+        version_doc.content = text or ""
+        version_doc.page_count = page_count
+        version_doc.mime_type = mime_type
+        version_doc.original_filename = self.filename
+        version_doc.storage_path = root_doc.storage_path
+        # Clear unique file path fields so they can be generated uniquely later
+        version_doc.filename = None
+        version_doc.archive_filename = None
+        version_doc.archive_checksum = None
+        if self.metadata.version_label is not None:
+            version_doc.version_label = self.metadata.version_label
+        version_doc.added = timezone.now()
+        version_doc.modified = timezone.now()
+        return version_doc
+
     def run_pre_consume_script(self) -> None:
         """
         If one is configured and exists, run the pre-consume script and
@@ -477,12 +534,65 @@ class ConsumerPlugin(
         try:
             with transaction.atomic():
                 # store the document.
-                document = self._store(
-                    text=text,
-                    date=date,
-                    page_count=page_count,
-                    mime_type=mime_type,
-                )
+                if self.input_doc.root_document_id:
+                    # If this is a new version of an existing document, we need
+                    # to make sure we're not creating a new document, but updating
+                    # the existing one.
+                    root_doc = Document.objects.get(
+                        pk=self.input_doc.root_document_id,
+                    )
+                    original_document = self._clone_root_into_version(
+                        root_doc,
+                        text=text,
+                        page_count=page_count,
+                        mime_type=mime_type,
+                    )
+                    actor = None
+
+                    # Save the new version, potentially creating an audit log entry for the version addition if enabled.
+                    if (
+                        settings.AUDIT_LOG_ENABLED
+                        and self.metadata.actor_id is not None
+                    ):
+                        actor = User.objects.filter(pk=self.metadata.actor_id).first()
+                        if actor is not None:
+                            from auditlog.context import (  # type: ignore[import-untyped]
+                                set_actor,
+                            )
+
+                            with set_actor(actor):
+                                original_document.save()
+                        else:
+                            original_document.save()
+                    else:
+                        original_document.save()
+
+                    # Create a log entry for the version addition, if enabled
+                    if settings.AUDIT_LOG_ENABLED:
+                        from auditlog.models import (  # type: ignore[import-untyped]
+                            LogEntry,
+                        )
+
+                        LogEntry.objects.log_create(
+                            instance=root_doc,
+                            changes={
+                                "Version Added": ["None", original_document.id],
+                            },
+                            action=LogEntry.Action.UPDATE,
+                            actor=actor,
+                            additional_data={
+                                "reason": "Version added",
+                                "version_id": original_document.id,
+                            },
+                        )
+                    document = original_document
+                else:
+                    document = self._store(
+                        text=text,
+                        date=date,
+                        page_count=page_count,
+                        mime_type=mime_type,
+                    )
 
                 # If we get here, it was successful. Proceed with post-consume
                 # hooks. If they fail, nothing will get changed.
@@ -700,6 +810,9 @@ class ConsumerPlugin(
         if self.metadata.asn is not None:
             document.archive_serial_number = self.metadata.asn
 
+        if self.metadata.version_label is not None:
+            document.version_label = self.metadata.version_label
+
         if self.metadata.owner_id:
             document.owner = User.objects.get(
                 pk=self.metadata.owner_id,

src/documents/data_models.py

@@ -31,6 +31,8 @@ class DocumentMetadataOverrides:
     change_groups: list[int] | None = None
     custom_fields: dict | None = None
     skip_asn_if_exists: bool = False
+    version_label: str | None = None
+    actor_id: int | None = None
 
     def update(self, other: "DocumentMetadataOverrides") -> "DocumentMetadataOverrides":
         """
@@ -50,8 +52,12 @@ class DocumentMetadataOverrides:
             self.storage_path_id = other.storage_path_id
         if other.owner_id is not None:
             self.owner_id = other.owner_id
+        if other.actor_id is not None:
+            self.actor_id = other.actor_id
         if other.skip_asn_if_exists:
             self.skip_asn_if_exists = True
+        if other.version_label is not None:
+            self.version_label = other.version_label
 
         # merge
         if self.tag_ids is None:
@@ -160,6 +166,7 @@ class ConsumableDocument:
 
     source: DocumentSource
     original_file: Path
+    root_document_id: int | None = None
     original_path: Path | None = None
     mailrule_id: int | None = None
     mime_type: str = dataclasses.field(init=False, default=None)

src/documents/filters.py

@@ -6,8 +6,10 @@ import json
 import operator
 from contextlib import contextmanager
 from typing import TYPE_CHECKING
+from typing import Any
 
 from django.contrib.contenttypes.models import ContentType
+from django.core.exceptions import FieldError
 from django.db.models import Case
 from django.db.models import CharField
 from django.db.models import Count
@@ -160,14 +162,37 @@ class InboxFilter(Filter):
 
 @extend_schema_field(serializers.CharField)
 class TitleContentFilter(Filter):
-    def filter(self, qs, value):
+    def filter(self, qs: Any, value: Any) -> Any:
         value = value.strip() if isinstance(value, str) else value
         if value:
-            return qs.filter(Q(title__icontains=value) | Q(content__icontains=value))
+            try:
+                return qs.filter(
+                    Q(title__icontains=value) | Q(effective_content__icontains=value),
+                )
+            except FieldError:
+                return qs.filter(
+                    Q(title__icontains=value) | Q(content__icontains=value),
+                )
         else:
             return qs
 
 
+@extend_schema_field(serializers.CharField)
+class EffectiveContentFilter(Filter):
+    def filter(self, qs: Any, value: Any) -> Any:
+        value = value.strip() if isinstance(value, str) else value
+        if not value:
+            return qs
+        try:
+            return qs.filter(
+                **{f"effective_content__{self.lookup_expr}": value},
+            )
+        except FieldError:
+            return qs.filter(
+                **{f"content__{self.lookup_expr}": value},
+            )
+
+
 @extend_schema_field(serializers.BooleanField)
 class SharedByUser(Filter):
     def filter(self, qs, value):
@@ -724,6 +749,11 @@ class DocumentFilterSet(FilterSet):
 
     title_content = TitleContentFilter()
 
+    content__istartswith = EffectiveContentFilter(lookup_expr="istartswith")
+    content__iendswith = EffectiveContentFilter(lookup_expr="iendswith")
+    content__icontains = EffectiveContentFilter(lookup_expr="icontains")
+    content__iexact = EffectiveContentFilter(lookup_expr="iexact")
+
     owner__id__none = ObjectFilter(field_name="owner", exclude=True)
 
     custom_fields__icontains = CustomFieldsFilter()
@@ -764,7 +794,6 @@ class DocumentFilterSet(FilterSet):
         fields = {
             "id": ID_KWARGS,
             "title": CHAR_KWARGS,
-            "content": CHAR_KWARGS,
             "archive_serial_number": INT_KWARGS,
             "created": DATE_KWARGS,
             "added": DATETIME_KWARGS,

src/documents/index.py

@@ -158,7 +158,11 @@ def open_index_searcher() -> Searcher:
         searcher.close()
 
 
-def update_document(writer: AsyncWriter, doc: Document) -> None:
+def update_document(
+    writer: AsyncWriter,
+    doc: Document,
+    effective_content: str | None = None,
+) -> None:
     tags = ",".join([t.name for t in doc.tags.all()])
     tags_ids = ",".join([str(t.id) for t in doc.tags.all()])
     notes = ",".join([str(c.note) for c in Note.objects.filter(document=doc)])
@@ -188,7 +192,7 @@ def update_document(writer: AsyncWriter, doc: Document) -> None:
     writer.update_document(
         id=doc.pk,
         title=doc.title,
-        content=doc.content,
+        content=effective_content or doc.content,
         correspondent=doc.correspondent.name if doc.correspondent else None,
         correspondent_id=doc.correspondent.id if doc.correspondent else None,
         has_correspondent=doc.correspondent is not None,
@@ -231,9 +235,12 @@ def remove_document_by_id(writer: AsyncWriter, doc_id) -> None:
     writer.delete_by_term("id", doc_id)
 
 
-def add_or_update_document(document: Document) -> None:
+def add_or_update_document(
+    document: Document,
+    effective_content: str | None = None,
+) -> None:
     with open_index_writer() as writer:
-        update_document(writer, document)
+        update_document(writer, document, effective_content=effective_content)
 
 
 def remove_document_from_index(document: Document) -> None: