Enables prek workspace mode and moves hooks to specific locations as possible, moving to mdformat instead of prettier

Bumps [nltk](https://github.com/nltk/nltk) from 3.9.2 to 3.9.3.
- [Changelog](https://github.com/nltk/nltk/blob/develop/ChangeLog)
- [Commits](https://github.com/nltk/nltk/compare/3.9.2...3.9.3)

---
updated-dependencies:
- dependency-name: nltk
  dependency-version: 3.9.3
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -64,8 +64,6 @@ ARG RUNTIME_PACKAGES="\
   libmagic1 \
   media-types \
   zlib1g \
-  # Barcode splitter
-  libzbar0 \
   poppler-utils \
   htop \
   sudo"

.devcontainer/README.md

@@ -91,12 +91,12 @@ Additional tasks are available for common maintenance operations:
 
 ## Committing from the Host Machine
 
-The DevContainer automatically installs pre-commit hooks during setup. However, these hooks are configured for use inside the container.
+The DevContainer automatically installs Git pre-commit hooks during setup. However, these hooks are configured for use inside the container.
 
-If you want to commit changes from your host machine (outside the DevContainer), you need to set up pre-commit on your host. This installs it as a standalone tool.
+If you want to commit changes from your host machine (outside the DevContainer), you need to set up prek on your host. This installs it as a standalone tool.
 
 ```bash
-uv tool install pre-commit && pre-commit install
+uv tool install prek && prek install
 ```
 
 After this, you can commit either from inside the DevContainer or from your host machine.

.devcontainer/devcontainer.json

@@ -7,7 +7,7 @@
     "containerEnv": {
         "UV_CACHE_DIR": "/usr/src/paperless/paperless-ngx/.uv-cache"
     },
-    "postCreateCommand": "/bin/bash -c 'rm -rf .venv/.* && uv sync --group dev && uv run pre-commit install'",
+    "postCreateCommand": "/bin/bash -c 'rm -rf .venv/.* && uv sync --group dev && uv run prek install'",
     "customizations": {
         "vscode": {
             "extensions": [

.devcontainer/vscode/tasks.json

@@ -116,9 +116,9 @@
 		},
 		{
 			"label": "Maintenance: Build Documentation",
-			"description": "Build the documentation with MkDocs",
+			"description": "Build the documentation with Zensical",
 			"type": "shell",
-			"command": "uv run mkdocs build --config-file mkdocs.yml && uv run mkdocs serve",
+			"command": "uv run zensical build && uv run zensical serve",
 			"group": "none",
 			"presentation": {
 				"echo": true,

.dockerignore

@@ -28,3 +28,4 @@
 ./resources
 # Other stuff
 **/*.drawio.png
+.mypy_baseline

.github/PULL_REQUEST_TEMPLATE.md

@@ -37,6 +37,6 @@ NOTE: PRs that do not address the following will not be merged, please do not sk
 - [ ] If applicable, I have included testing coverage for new code in this PR, for [backend](https://docs.paperless-ngx.com/development/#testing) and / or [front-end](https://docs.paperless-ngx.com/development/#testing-and-code-style) changes.
 - [ ] If applicable, I have tested my code for breaking changes & regressions on both mobile & desktop devices, using the latest version of major browsers.
 - [ ] If applicable, I have checked that all tests pass, see [documentation](https://docs.paperless-ngx.com/development/#back-end-development).
-- [ ] I have run all `pre-commit` hooks, see [documentation](https://docs.paperless-ngx.com/development/#code-formatting-with-pre-commit-hooks).
+- [ ] I have run all Git `pre-commit` hooks, see [documentation](https://docs.paperless-ngx.com/development/#code-formatting-with-pre-commit-hooks).
 - [ ] I have made corresponding changes to the documentation as needed.
 - [ ] In the description of the PR above I have disclosed the use of AI tools in the coding of this PR.

.github/dependabot.yml

@@ -46,8 +46,8 @@ updates:
         patterns:
           - "*pytest*"
           - "ruff"
-          - "mkdocs-material"
-          - "pre-commit*"
+          - "zensical"
+          - "prek*"
       # Django & DRF Ecosystem
       django-ecosystem:
         patterns:
@@ -69,7 +69,6 @@ updates:
         patterns:
           - "ocrmypdf"
           - "pdf2image"
-          - "pyzbar"
           - "zxing-cpp"
           - "tika-client"
           - "gotenberg-client"

.github/workflows/ci-backend.yml

@@ -23,7 +23,7 @@ concurrency:
   group: backend-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 env:
-  DEFAULT_UV_VERSION: "0.9.x"
+  DEFAULT_UV_VERSION: "0.10.x"
   NLTK_DATA: "/usr/share/nltk_data"
 jobs:
   test:
@@ -55,7 +55,7 @@ jobs:
         run: |
           sudo apt-get update -qq
           sudo apt-get install -qq --no-install-recommends \
-            unpaper tesseract-ocr imagemagick ghostscript libzbar0 poppler-utils
+            unpaper tesseract-ocr imagemagick ghostscript poppler-utils
       - name: Configure ImageMagick
         run: |
           sudo cp docker/rootfs/etc/ImageMagick-6/paperless-policy.xml /etc/ImageMagick-6/policy.xml
@@ -99,3 +99,54 @@ jobs:
         run: |
           docker compose --file docker/compose/docker-compose.ci-test.yml logs
           docker compose --file docker/compose/docker-compose.ci-test.yml down
+  typing:
+    name: Check project typing
+    runs-on: ubuntu-24.04
+    env:
+      DEFAULT_PYTHON: "3.12"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6.0.1
+      - name: Set up Python
+        id: setup-python
+        uses: actions/setup-python@v6.2.0
+        with:
+          python-version: "${{ env.DEFAULT_PYTHON }}"
+      - name: Install uv
+        uses: astral-sh/setup-uv@v7.2.1
+        with:
+          version: ${{ env.DEFAULT_UV_VERSION }}
+          enable-cache: true
+          python-version: ${{ steps.setup-python.outputs.python-version }}
+      - name: Install Python dependencies
+        run: |
+          uv sync \
+            --python ${{ steps.setup-python.outputs.python-version }} \
+            --group testing \
+            --group typing \
+            --frozen
+      - name: List installed Python dependencies
+        run: |
+          uv pip list
+      - name: Check typing (pyrefly)
+        continue-on-error: true
+        run: |
+          uv run pyrefly \
+            check \
+            src/
+      - name: Cache Mypy
+        uses: actions/cache@v5.0.3
+        with:
+          path: .mypy_cache
+          # Keyed by OS, Python version, and dependency hashes
+          key: ${{ runner.os }}-mypy-py${{ env.DEFAULT_PYTHON }}-${{ hashFiles('pyproject.toml', 'uv.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-mypy-py${{ env.DEFAULT_PYTHON }}-
+            ${{ runner.os }}-mypy-
+      - name: Check typing (mypy)
+        continue-on-error: true
+        run: |
+          uv run mypy \
+            --show-error-codes \
+            --warn-unused-configs \
+            src/ | uv run mypy-baseline filter

.github/workflows/ci-docker.yml

@@ -106,7 +106,7 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.12.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3.6.0
+        uses: docker/login-action@v3.7.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -180,20 +180,20 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.12.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3.6.0
+        uses: docker/login-action@v3.7.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Login to Docker Hub
         if: needs.build-arch.outputs.push-external == 'true'
-        uses: docker/login-action@v3.6.0
+        uses: docker/login-action@v3.7.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Login to Quay.io
         if: needs.build-arch.outputs.push-external == 'true'
-        uses: docker/login-action@v3.6.0
+        uses: docker/login-action@v3.7.0
         with:
           registry: quay.io
           username: ${{ secrets.QUAY_USERNAME }}

.github/workflows/ci-docs.yml

@@ -6,25 +6,34 @@ on:
       - dev
     paths:
       - 'docs/**'
-      - 'mkdocs.yml'
+      - 'zensical.toml'
+      - 'pyproject.toml'
+      - 'uv.lock'
       - '.github/workflows/ci-docs.yml'
   pull_request:
     paths:
       - 'docs/**'
-      - 'mkdocs.yml'
+      - 'zensical.toml'
+      - 'pyproject.toml'
+      - 'uv.lock'
       - '.github/workflows/ci-docs.yml'
   workflow_dispatch:
 concurrency:
   group: docs-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 env:
-  DEFAULT_UV_VERSION: "0.9.x"
-  DEFAULT_PYTHON_VERSION: "3.11"
+  DEFAULT_UV_VERSION: "0.10.x"
+  DEFAULT_PYTHON_VERSION: "3.12"
 jobs:
   build:
     name: Build Documentation
     runs-on: ubuntu-24.04
     steps:
+      - uses: actions/configure-pages@v5
       - name: Checkout
         uses: actions/checkout@v6
       - name: Set up Python
@@ -47,42 +56,23 @@ jobs:
             --python ${{ steps.setup-python.outputs.python-version }} \
             --dev \
             --frozen \
-            mkdocs build --config-file ./mkdocs.yml
-      - name: Upload artifact
-        uses: actions/upload-artifact@v6
+            zensical build --clean
+      - name: Upload GitHub Pages artifact
+        uses: actions/upload-pages-artifact@v4
         with:
-          name: documentation
-          path: site/
-          retention-days: 7
+          path: site
+          name: github-pages-${{ github.run_id }}-${{ github.run_attempt }}
   deploy:
     name: Deploy Documentation
     needs: build
     if: github.event_name == 'push' && github.ref == 'refs/heads/main'
     runs-on: ubuntu-24.04
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-      - name: Set up Python
-        id: setup-python
-        uses: actions/setup-python@v6
+      - name: Deploy GitHub Pages
+        uses: actions/deploy-pages@v4
+        id: deployment
         with:
-          python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
-      - name: Install uv
-        uses: astral-sh/setup-uv@v7
-        with:
-          version: ${{ env.DEFAULT_UV_VERSION }}
-          enable-cache: true
-          python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
-      - name: Install Python dependencies
-        run: |
-          uv sync --python ${{ steps.setup-python.outputs.python-version }} --dev --frozen
-      - name: Deploy documentation
-        run: |
-          echo "docs.paperless-ngx.com" > "${{ github.workspace }}/docs/CNAME"
-          git config --global user.name "${{ github.actor }}"
-          git config --global user.email "${{ github.actor }}@users.noreply.github.com"
-          uv run \
-            --python ${{ steps.setup-python.outputs.python-version }} \
-            --dev \
-            --frozen \
-            mkdocs gh-deploy --force --no-history
+          artifact_name: github-pages-${{ github.run_id }}-${{ github.run_attempt }}

.github/workflows/ci-frontend.yml

@@ -121,7 +121,7 @@ jobs:
     name: "E2E Tests (${{ matrix.shard-index }}/${{ matrix.shard-count }})"
     needs: install-dependencies
     runs-on: ubuntu-24.04
-    container: mcr.microsoft.com/playwright:v1.58.1-noble
+    container: mcr.microsoft.com/playwright:v1.58.2-noble
     env:
       PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1

.github/workflows/ci-lint.yml

@@ -10,15 +10,15 @@ concurrency:
   group: lint-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 jobs:
-  pre-commit:
-    name: Pre-commit Checks
-    runs-on: ubuntu-24.04
+  lint:
+    name: Linting via prek
+    runs-on: ubuntu-slim
     steps:
       - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v6.0.2
       - name: Install Python
-        uses: actions/setup-python@v6
+        uses: actions/setup-python@v6.2.0
         with:
-          python-version: "3.11"
-      - name: Run pre-commit
-        uses: pre-commit/action@v3.0.1
+          python-version: "3.14"
+      - name: Run prek
+        uses: j178/prek-action@v1.1.1

.github/workflows/ci-release.yml

@@ -8,15 +8,15 @@ concurrency:
   group: release-${{ github.ref }}
   cancel-in-progress: false
 env:
-  DEFAULT_UV_VERSION: "0.9.x"
-  DEFAULT_PYTHON_VERSION: "3.11"
+  DEFAULT_UV_VERSION: "0.10.x"
+  DEFAULT_PYTHON_VERSION: "3.12"
 jobs:
   wait-for-docker:
     name: Wait for Docker Build
     runs-on: ubuntu-24.04
     steps:
       - name: Wait for Docker build
-        uses: lewagon/wait-on-check-action@v1.4.1
+        uses: lewagon/wait-on-check-action@v1.5.0
         with:
           ref: ${{ github.sha }}
           check-name: 'Build Docker Image'
@@ -70,7 +70,7 @@ jobs:
             --python ${{ steps.setup-python.outputs.python-version }} \
             --dev \
             --frozen \
-            mkdocs build --config-file ./mkdocs.yml
+            zensical build --clean
       # ---- Prepare Release ----
       - name: Generate requirements file
         run: |
@@ -211,7 +211,7 @@ jobs:
           uv run \
             --python ${{ steps.setup-python.outputs.python-version }} \
             --dev \
-            pre-commit run --files changelog.md || true
+            prek run --files changelog.md || true
 
           git config --global user.name "github-actions"
           git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"

.gitignore

@@ -54,7 +54,7 @@ junit.xml
 # Django stuff:
 *.log
 
-# MkDocs documentation
+# Zensical documentation
 site/
 
 # PyBuilder

.pre-commit-config.yaml

@@ -1,8 +1,4 @@
-# This file configures pre-commit hooks.
-# See https://pre-commit.com/ for general information
-# See https://pre-commit.com/hooks.html for a listing of possible hooks
 repos:
-  # General hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v6.0.0
     hooks:
@@ -10,21 +6,16 @@ repos:
       - id: check-json
         exclude: "tsconfig.*json"
       - id: check-yaml
-        args:
-          - "--unsafe"
+        args: ["--unsafe"]
       - id: check-toml
       - id: check-executables-have-shebangs
       - id: end-of-file-fixer
-        exclude_types:
-          - svg
-          - pofile
+        exclude_types: [svg, pofile]
         exclude: "(^LICENSE$|^src/documents/static/bootstrap.min.css$)"
       - id: mixed-line-ending
-        args:
-          - "--fix=lf"
+        args: ["--fix=lf"]
       - id: trailing-whitespace
-        exclude_types:
-          - svg
+        exclude_types: [svg]
       - id: check-case-conflict
       - id: detect-private-key
   - repo: https://github.com/codespell-project/codespell
@@ -32,53 +23,29 @@ repos:
     hooks:
       - id: codespell
         additional_dependencies: [tomli]
-        exclude_types:
-          - pofile
-          - json
-  # See https://github.com/prettier/prettier/issues/15742 for the fork reason
-  - repo: https://github.com/rbubley/mirrors-prettier
-    rev: 'v3.8.1'
+        exclude_types: [pofile, json]
+  - repo: https://github.com/google/yamlfmt
+    rev: v0.21.0
     hooks:
-      - id: prettier
-        types_or:
-          - javascript
-          - ts
-          - markdown
-        additional_dependencies:
-          - prettier@3.3.3
-          - 'prettier-plugin-organize-imports@4.1.0'
-  # Python hooks
-  - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.14.14
-    hooks:
-      - id: ruff-check
-      - id: ruff-format
-  - repo: https://github.com/tox-dev/pyproject-fmt
-    rev: "v2.11.1"
-    hooks:
-      - id: pyproject-fmt
-  # Dockerfile hooks
+      - id: yamlfmt
+        exclude: "^src-ui/pnpm-lock.yaml"
+        types: [yaml]
   - repo: https://github.com/AleksaC/hadolint-py
     rev: v2.14.0
     hooks:
       - id: hadolint
-  # Shell script hooks
   - repo: https://github.com/lovesegfault/beautysh
     rev: v6.4.2
     hooks:
       - id: beautysh
         types: [file]
         files: (\.sh$|/run$|/finish$)
-        args:
-          - "--tab"
+        args: ["--tab"]
   - repo: https://github.com/shellcheck-py/shellcheck-py
     rev: "v0.11.0.1"
     hooks:
       - id: shellcheck
-  - repo: https://github.com/google/yamlfmt
-    rev: v0.21.0
+  - repo: https://github.com/tox-dev/pyproject-fmt
+    rev: "v2.16.2"
     hooks:
-      - id: yamlfmt
-        exclude: "^src-ui/pnpm-lock.yaml"
-        types:
-          - yaml
+      - id: pyproject-fmt

Dockerfile

@@ -30,7 +30,7 @@ RUN set -eux \
 # Purpose: Installs s6-overlay and rootfs
 # Comments:
 #  - Don't leave anything extra in here either
-FROM ghcr.io/astral-sh/uv:0.9.26-python3.12-trixie-slim AS s6-overlay-base
+FROM ghcr.io/astral-sh/uv:0.10.5-python3.12-trixie-slim AS s6-overlay-base
 
 WORKDIR /usr/src/s6
 
@@ -154,8 +154,6 @@ ARG RUNTIME_PACKAGES="\
   libmagic1 \
   media-types \
   zlib1g \
-  # Barcode splitter
-  libzbar0 \
   poppler-utils"
 
 # Install basic runtime packages.

docker/.pre-commit-config.yaml

@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/astral-sh/ruff-pre-commit
+    rev: v0.15.4
+    hooks:
+      - id: ruff-check
+      - id: ruff-format

docker/compose/docker-compose.ci-test.yml

@@ -4,7 +4,7 @@
 # correct networking for the tests
 services:
   gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.25
+    image: docker.io/gotenberg/gotenberg:8.26
     hostname: gotenberg
     container_name: gotenberg
     network_mode: host
@@ -35,7 +35,7 @@ services:
       - "3143:3143" # IMAP
     restart: unless-stopped
   nginx:
-    image: docker.io/nginx:1.29-alpine
+    image: docker.io/nginx:1.29.5-alpine
     hostname: nginx
     container_name: nginx
     ports:

docker/compose/docker-compose.mariadb-tika.yml

@@ -72,7 +72,7 @@ services:
       PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
       PAPERLESS_TIKA_ENDPOINT: http://tika:9998
   gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.25
+    image: docker.io/gotenberg/gotenberg:8.26
     restart: unless-stopped
     # The gotenberg chromium route is used to convert .eml files. We do not
     # want to allow external content like tracking pixels or even javascript.

docker/compose/docker-compose.postgres-tika.yml

@@ -66,7 +66,7 @@ services:
       PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
       PAPERLESS_TIKA_ENDPOINT: http://tika:9998
   gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.25
+    image: docker.io/gotenberg/gotenberg:8.26
     restart: unless-stopped
     # The gotenberg chromium route is used to convert .eml files. We do not
     # want to allow external content like tracking pixels or even javascript.

docker/compose/docker-compose.sqlite-tika.yml

@@ -55,7 +55,7 @@ services:
       PAPERLESS_TIKA_GOTENBERG_ENDPOINT: http://gotenberg:3000
       PAPERLESS_TIKA_ENDPOINT: http://tika:9998
   gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.25
+    image: docker.io/gotenberg/gotenberg:8.26
     restart: unless-stopped
     # The gotenberg chromium route is used to convert .eml files. We do not
     # want to allow external content like tracking pixels or even javascript.

docs/.markdownlint.yaml

@@ -0,0 +1,6 @@
+default: true
+MD013: false # line length -- mdformat handles this
+MD033: false # inline HTML -- MkDocs uses it
+MD041: false # first line heading -- not always true in MkDocs
+MD046: # code block style
+  style: fenced

docs/.pre-commit-config.yaml

@@ -0,0 +1,13 @@
+repos:
+  - repo: https://github.com/executablebooks/mdformat
+    rev: 1.0.0
+    hooks:
+      - id: mdformat
+        additional_dependencies:
+          - mdformat-mkdocs
+          - mdformat-ruff
+  - repo: https://github.com/DavidAnson/markdownlint-cli2
+    rev: v0.21.0
+    hooks:
+      - id: markdownlint-cli2
+        args: ["--config", ".markdownlint.yaml"]

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
 
@@ -774,7 +776,6 @@ At this time, the library utilized for detection of barcodes supports the follow
 -   QR Code
 -   SQ Code
 
-You may check for updates on the [zbar library homepage](https://github.com/mchehab/zbar).
 For usage in Paperless, the type of barcode does not matter, only the contents of it.
 
 For how to enable barcode usage, see [the configuration](configuration.md#barcodes).
@@ -783,9 +784,17 @@ below.
 
 ### Document Splitting {#document-splitting}
 
-When enabled, Paperless will look for a barcode with the configured value and create a new document
-starting from the next page. The page with the barcode on it will _not_ be retained. It
-is expected to be a page existing only for triggering the split.
+If document splitting is enabled, Paperless splits _after_ a separator barcode by default.
+This means:
+
+-   any page containing the configured separator barcode starts a new document, starting with the **next** page
+-   pages containing the separator barcode are discarded
+
+This is intended for dedicated separator sheets such as PATCH-T pages.
+
+If [`PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES`](configuration.md#PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES)
+is enabled, the page containing the separator barcode is retained instead. In this mode,
+each page containing the separator barcode becomes the **first** page of a new document.
 
 ### Archive Serial Number Assignment
 
@@ -794,8 +803,9 @@ archive serial number, allowing quick reference back to the original, paper docu
 
 If document splitting via barcode is also enabled, documents will be split when an ASN
 barcode is located. However, differing from the splitting, the page with the
-barcode _will_ be retained. This allows application of a barcode to any page, including
-one which holds data to keep in the document.
+barcode _will_ be retained. Each detected ASN barcode starts a new document _starting with
+that page_. This allows placing ASN barcodes on content pages that should remain part of
+the document.
 
 ### Tag Assignment
 

docs/api.md

@@ -1,4 +1,4 @@
-# The REST API
+# REST API
 
 Paperless-ngx now ships with a fully-documented REST API and a browsable
 web interface to explore it. The API browsable interface is available at
@@ -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/assets/extra.css

@@ -1,13 +1,31 @@
-:root > * {
-    --md-primary-fg-color: #17541f;
-    --md-primary-fg-color--dark: #17541f;
-    --md-primary-fg-color--light: #17541f;
-    --md-accent-fg-color: #2b8a38;
+:root>* {
+    --paperless-green: #17541f;
+    --paperless-green-accent: #2b8a38;
+    --md-primary-fg-color: var(--paperless-green);
+    --md-primary-fg-color--dark: var(--paperless-green);
+    --md-primary-fg-color--light: var(--paperless-green-accent);
+    --md-accent-fg-color: var(--paperless-green-accent);
     --md-typeset-a-color: #21652a;
 }
 
+.md-header,
+.md-tabs {
+    background-color: var(--paperless-green);
+    color: #fff;
+}
+
+.md-tabs__link {
+    color: rgba(255, 255, 255, 0.82);
+}
+
+.md-tabs__link:hover,
+.md-tabs__link--active {
+    color: #fff;
+}
+
 [data-md-color-scheme="slate"] {
     --md-hue: 222;
+    --md-default-bg-color: hsla(var(--md-hue), 15%, 10%, 1);
 }
 
 @media (min-width: 768px) {
@@ -69,8 +87,8 @@ h4 code {
 }
 
 /* Hide config vars from sidebar, toc and move the border on mobile case their hidden */
-.md-nav.md-nav--secondary .md-nav__item .md-nav__link[href*="PAPERLESS_"],
-.md-nav.md-nav--secondary .md-nav__item .md-nav__link[href*="USERMAP_"] {
+.md-nav.md-nav--secondary .md-nav__item:has(> .md-nav__link[href*="PAPERLESS_"]),
+.md-nav.md-nav--secondary .md-nav__item:has(> .md-nav__link[href*="USERMAP_"]) {
     display: none;
 }
 
@@ -83,18 +101,3 @@ h4 code {
         border-top: .05rem solid var(--md-default-fg-color--lightest);
     }
 }
-
-/* Show search shortcut key */
-[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
-    position: absolute;
-    top: .3rem;
-    right: .3rem;
-    display: block;
-    padding: .1rem .4rem;
-    color: var(--md-default-fg-color--lighter);
-    font-weight: bold;
-    font-size: .8rem;
-    border: .05rem solid var(--md-default-fg-color--lighter);
-    border-radius: .1rem;
-    content: "/";
-  }

docs/changelog.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## paperless-ngx 2.20.8
+
+## 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/configuration.md

@@ -1222,14 +1222,6 @@ using Python's `re.match()`, which anchors at the start of the filename.
 
     The default ignores are `[.stfolder, .stversions, .localized, @eaDir, .Spotlight-V100, .Trashes, __MACOSX]` and cannot be overridden.
 
-#### [`PAPERLESS_CONSUMER_BARCODE_SCANNER=<string>`](#PAPERLESS_CONSUMER_BARCODE_SCANNER) {#PAPERLESS_CONSUMER_BARCODE_SCANNER}
-
-: Sets the barcode scanner used for barcode functionality.
-
-    Currently, "PYZBAR" (the default) or "ZXING" might be selected.
-    If you have problems that your Barcodes/QR-Codes are not detected
-    (especially with bad scan quality and/or small codes), try the other one.
-
 #### [`PAPERLESS_PRE_CONSUME_SCRIPT=<filename>`](#PAPERLESS_PRE_CONSUME_SCRIPT) {#PAPERLESS_PRE_CONSUME_SCRIPT}
 
 : After some initial validation, Paperless can trigger an arbitrary

docs/development.md

@@ -81,7 +81,7 @@ first-time setup.
 5.  Install pre-commit hooks:
 
     ```bash
-    $ uv run pre-commit install
+    $ uv run prek install
     ```
 
 6.  Apply migrations and create a superuser (also can be done via the web UI) for your development instance:
@@ -217,7 +217,7 @@ commit. See [above](#code-formatting-with-pre-commit-hooks) for installation ins
 command such as
 
 ```bash
-$ git ls-files -- '*.ts' | xargs pre-commit run prettier --files
+$ git ls-files -- '*.ts' | xargs prek run prettier --files
 ```
 
 Front end testing uses Jest and Playwright. Unit tests and e2e tests,
@@ -338,13 +338,13 @@ LANGUAGES = [
 
 ## Building the documentation
 
-The documentation is built using material-mkdocs, see their [documentation](https://squidfunk.github.io/mkdocs-material/reference/).
+The documentation is built using Zensical, see their [documentation](https://zensical.org/docs/).
 If you want to build the documentation locally, this is how you do it:
 
 1.  Build the documentation
 
     ```bash
-    $ uv run mkdocs build --config-file mkdocs.yml
+    $ uv run zensical build
     ```
 
     _alternatively..._
@@ -355,10 +355,10 @@ If you want to build the documentation locally, this is how you do it:
     something.
 
     ```bash
-    $ uv run mkdocs serve
+    $ uv run zensical serve
     ```
 
-## Building the Docker image
+## Building the Docker image {#docker_build}
 
 The docker image is primarily built by the GitHub actions workflow, but
 it can be faster when developing to build and tag an image locally.
@@ -481,3 +481,147 @@ To get started:
 
 5. The project is ready for debugging, start either run the fullstack debug or individual debug
    processes. Yo spin up the project without debugging run the task **Project Start: Run all Services**
+
+## Developing Date Parser Plugins
+
+Paperless-ngx uses a plugin system for date parsing, allowing you to extend or replace the default date parsing behavior. Plugins are discovered using [Python entry points](https://setuptools.pypa.io/en/latest/userguide/entry_point.html).
+
+### Creating a Date Parser Plugin
+
+To create a custom date parser plugin, you need to:
+
+1. Create a class that inherits from `DateParserPluginBase`
+2. Implement the required abstract method
+3. Register your plugin via an entry point
+
+#### 1. Implementing the Parser Class
+
+Your parser must extend `documents.plugins.date_parsing.DateParserPluginBase` and implement the `parse` method:
+
+```python
+from collections.abc import Iterator
+import datetime
+
+from documents.plugins.date_parsing import DateParserPluginBase
+
+
+class MyDateParserPlugin(DateParserPluginBase):
+    """
+    Custom date parser implementation.
+    """
+
+    def parse(self, filename: str, content: str) -> Iterator[datetime.datetime]:
+        """
+        Parse dates from the document's filename and content.
+
+        Args:
+            filename: The original filename of the document
+            content: The extracted text content of the document
+
+        Yields:
+            datetime.datetime: Valid datetime objects found in the document
+        """
+        # Your parsing logic here
+        # Use self.config to access configuration settings
+
+        # Example: parse dates from filename first
+        if self.config.filename_date_order:
+            # Your filename parsing logic
+            yield some_datetime
+
+        # Then parse dates from content
+        # Your content parsing logic
+        yield another_datetime
+```
+
+#### 2. Configuration and Helper Methods
+
+Your parser instance is initialized with a `DateParserConfig` object accessible via `self.config`. This provides:
+
+-   `languages: list[str]` - List of language codes for date parsing
+-   `timezone_str: str` - Timezone string for date localization
+-   `ignore_dates: set[datetime.date]` - Dates that should be filtered out
+-   `reference_time: datetime.datetime` - Current time for filtering future dates
+-   `filename_date_order: str | None` - Date order preference for filenames (e.g., "DMY", "MDY")
+-   `content_date_order: str` - Date order preference for content
+
+The base class provides two helper methods you can use:
+
+```python
+def _parse_string(
+    self,
+    date_string: str,
+    date_order: str,
+) -> datetime.datetime | None:
+    """
+    Parse a single date string using dateparser with configured settings.
+    """
+
+def _filter_date(
+    self,
+    date: datetime.datetime | None,
+) -> datetime.datetime | None:
+    """
+    Validate a parsed datetime against configured rules.
+    Filters out dates before 1900, future dates, and ignored dates.
+    """
+```
+
+#### 3. Resource Management (Optional)
+
+If your plugin needs to acquire or release resources (database connections, API clients, etc.), override the context manager methods. Paperless-ngx will always use plugins as context managers, ensuring resources can be released even in the event of errors.
+
+#### 4. Registering Your Plugin
+
+Register your plugin using a setuptools entry point in your package's `pyproject.toml`:
+
+```toml
+[project.entry-points."paperless_ngx.date_parsers"]
+my_parser = "my_package.parsers:MyDateParserPlugin"
+```
+
+The entry point name (e.g., `"my_parser"`) is used for sorting when multiple plugins are found. Paperless-ngx will use the first plugin alphabetically by name if multiple plugins are discovered.
+
+### Plugin Discovery
+
+Paperless-ngx automatically discovers and loads date parser plugins at runtime. The discovery process:
+
+1. Queries the `paperless_ngx.date_parsers` entry point group
+2. Validates that each plugin is a subclass of `DateParserPluginBase`
+3. Sorts valid plugins alphabetically by entry point name
+4. Uses the first valid plugin, or falls back to the default `RegexDateParserPlugin` if none are found
+
+If multiple plugins are installed, a warning is logged indicating which plugin was selected.
+
+### Example: Simple Date Parser
+
+Here's a minimal example that only looks for ISO 8601 dates:
+
+```python
+import datetime
+import re
+from collections.abc import Iterator
+
+from documents.plugins.date_parsing.base import DateParserPluginBase
+
+
+class ISODateParserPlugin(DateParserPluginBase):
+    """
+    Parser that only matches ISO 8601 formatted dates (YYYY-MM-DD).
+    """
+
+    ISO_REGEX = re.compile(r"\b(\d{4}-\d{2}-\d{2})\b")
+
+    def parse(self, filename: str, content: str) -> Iterator[datetime.datetime]:
+        # Combine filename and content for searching
+        text = f"{filename} {content}"
+
+        for match in self.ISO_REGEX.finditer(text):
+            date_string = match.group(1)
+            # Use helper method to parse with configured timezone
+            date = self._parse_string(date_string, "YMD")
+            # Use helper method to validate the date
+            filtered_date = self._filter_date(date)
+            if filtered_date is not None:
+                yield filtered_date
+```

docs/faq.md

@@ -1,3 +1,7 @@
+---
+title: FAQs
+---
+
 # Frequently Asked Questions
 
 ## _What's the general plan for Paperless-ngx?_
@@ -63,8 +67,10 @@ elsewhere. Here are a couple notes about that.
     Paperless also supports various Office documents (.docx, .doc, odt,
     .ppt, .pptx, .odp, .xls, .xlsx, .ods).
 
-Paperless-ngx determines the type of a file by inspecting its content.
-The file extensions do not matter.
+Paperless-ngx determines the type of a file by inspecting its content
+rather than its file extensions. However, files processed via the
+consumption directory will be rejected if they have a file extension that
+not supported by any of the available parsers.
 
 ## _Will paperless-ngx run on Raspberry Pi?_
 

docs/index.md

@@ -1,3 +1,7 @@
+---
+title: Home
+---
+
 <div class="grid-left" markdown>
 ![image](assets/logo_full_black.svg#only-light){.index-logo}
 ![image](assets/logo_full_white.svg#only-dark){.index-logo}

docs/migration.md

@@ -23,3 +23,28 @@ separating the directory ignore from the file ignore.
 Document and thumbnail encryption is no longer supported. This was previously deprecated in [paperless-ng 0.9.3](https://github.com/paperless-ngx/paperless-ngx/blob/dev/docs/changelog.md#paperless-ng-093)
 
 Users must decrypt their document using the `decrypt_documents` command before upgrading.
+
+## Barcode Scanner Changes
+
+Support for [pyzbar](https://github.com/NaturalHistoryMuseum/pyzbar) has been removed. The underlying libzbar library has
+seen no updates in 16 years and is largely unmaintained, and the pyzbar Python wrapper last saw a release in March 2022. In
+practice, pyzbar struggled with barcode detection reliability, particularly on skewed, low-contrast, or partially
+obscured barcodes. [zxing-cpp](https://github.com/zxing-cpp/zxing-cpp) is actively maintained, significantly more
+reliable at finding barcodes, and now ships pre-built wheels for both x86_64 and arm64, removing the need to build the library.
+
+The `CONSUMER_BARCODE_SCANNER` setting has been removed. zxing-cpp is now the only backend.
+
+### Summary
+
+| Old Setting                | New Setting | Notes                             |
+| -------------------------- | ----------- | --------------------------------- |
+| `CONSUMER_BARCODE_SCANNER` | _Removed_   | zxing-cpp is now the only backend |
+
+### Action Required
+
+-   If you were already using `CONSUMER_BARCODE_SCANNER=ZXING`, simply remove the setting.
+-   If you had `CONSUMER_BARCODE_SCANNER=PYZBAR` or were using the default, no functional changes are needed beyond
+    removing the setting. zxing-cpp supports all the same barcode formats and you should see improved detection
+    reliability.
+-   The `libzbar0` / `libzbar-dev` system packages are no longer required and can be removed from any custom Docker
+    images or host installations.

docs/setup.md

@@ -1,52 +1,77 @@
-## Installation
+---
+title: Setup
+---
 
-You can go multiple routes to setup and run Paperless:
+# Installation
 
--   [Use the script to setup a Docker install](#docker_script)
--   [Use the Docker compose templates](#docker)
--   [Build the Docker image yourself](#docker_build)
--   [Install Paperless-ngx directly on your system manually ("bare metal")](#bare_metal)
--   A user-maintained list of commercial hosting providers can be found [in the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects)
-
-The Docker routes are quick & easy. These are the recommended routes.
-This configures all the stuff from the above automatically so that it
-just works and uses sensible defaults for all configuration options.
-Here you find a cheat-sheet for docker beginners: [CLI
-Basics](https://www.sehn.tech/refs/devops-with-docker/)
-
-The bare metal route is complicated to setup but makes it easier should
-you want to contribute some code back. You need to configure and run the
-above mentioned components yourself.
-
-### Use the Installation Script {#docker_script}
-
-Paperless provides an interactive installation script to setup a Docker Compose
-installation. The script asks for a couple configuration options, and will then create the
-necessary configuration files, pull the docker image, start Paperless-ngx and create your superuser
-account. The script essentially automatically performs the steps described in [Docker setup](#docker).
-
-1.  Make sure that Docker and Docker Compose are [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
-
-2.  Download and run the installation script:
+!!! tip "Quick Start"
 
+    If you just want Paperless-ngx running quickly, use our installation script:
     ```shell-session
     bash -c "$(curl --location --silent --show-error https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/install-paperless-ngx.sh)"
     ```
+    _If piping into a shell directly from the internet makes you nervous, inspect [the script](https://github.com/paperless-ngx/paperless-ngx/blob/main/install-paperless-ngx.sh) first!_
 
-    !!! note
+## Overview
 
-        macOS users will need to install [gnu-sed](https://formulae.brew.sh/formula/gnu-sed) with support
-        for running as `sed` as well as [wget](https://formulae.brew.sh/formula/wget).
+Choose the installation route that best fits your setup:
 
-### Use Docker Compose {#docker}
+| Route                                                                                                             | Best for                                                                            | Effort |
+| ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------ |
+| [Installation script](#docker_script)                                                                             | Fastest first-time setup with guided prompts (recommended for most users)           | Low    |
+| [Docker Compose templates](#docker)                                                                               | Manual control over compose files and settings                                      | Medium |
+| [Bare metal](#bare_metal)                                                                                         | Advanced setups, packaging, and development-adjacent workflows                      | High   |
+| [Hosted providers (wiki)](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects#hosting-providers) | Managed hosting options maintained by the community — check details carefully | Varies |
 
-1.  Make sure that Docker and Docker Compose are [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
+For most users, Docker is the best option. It is faster to set up,
+easier to maintain, and ships with sensible defaults.
 
-2.  Go to the [/docker/compose directory on the project
+The bare-metal route gives you more control, but it requires manual
+installation and operation of all components. It is usually best suited
+for advanced users and contributors.
+
+!!! info
+
+    Because [superuser](usage.md#superusers) accounts have full access to all objects and documents, you may want to create a separate user account for daily use,
+    or "downgrade" your superuser account to a normal user account after setup.
+
+## Installation Script {#docker_script}
+
+Paperless-ngx provides an interactive script for Docker Compose setups.
+It asks a few configuration questions, then creates the required files,
+pulls the image, starts the containers, and creates your [superuser](usage.md#superusers)
+account. In short, it automates the [Docker Compose setup](#docker) described below.
+
+#### Prerequisites
+
+-   Docker and Docker Compose must be [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
+-   macOS users will need [GNU sed](https://formulae.brew.sh/formula/gnu-sed) with support for running as `sed` as well as [wget](https://formulae.brew.sh/formula/wget).
+
+#### Run the installation script
+
+```shell-session
+bash -c "$(curl --location --silent --show-error https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/install-paperless-ngx.sh)"
+```
+
+#### After installation
+
+Paperless-ngx should be available at `http://127.0.0.1:8000` (or similar,
+depending on your configuration) and you will be able to login with the
+credentials you provided during the installation script.
+
+## Docker Compose Install {#docker}
+
+#### Prerequisites
+
+-   Docker and Docker Compose must be [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
+
+#### Installation
+
+1.  Go to the [/docker/compose directory on the project
     page](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose){:target="\_blank"}
-    and download one of the `docker-compose.*.yml` files, depending on which database backend
-    you want to use. Place the files in a local directory and rename it `docker-compose.yml`. Download the
-    `docker-compose.env` file and the `.env` file as well in the same directory.
+    and download one `docker-compose.*.yml` file for your preferred
+    database backend. Save it in a local directory as `docker-compose.yml`.
+    Also download `docker-compose.env` and `.env` into that same directory.
 
     If you want to enable optional support for Office and other documents, download a
     file with `-tika` in the file name.
@@ -56,15 +81,16 @@ account. The script essentially automatically performs the steps described in [D
         For new installations, it is recommended to use PostgreSQL as the
         database backend.
 
-3.  Modify `docker-compose.yml` as needed. For example, you may want to change the paths to the
-    consumption, media etc. directories to use 'bind mounts'.
+2.  Modify `docker-compose.yml` as needed. For example, you may want to
+    change the paths for `consume`, `media`, and other directories to
+    use bind mounts.
     Find the line that specifies where to mount the directory, e.g.:
 
     ```yaml
     - ./consume:/usr/src/paperless/consume
     ```
 
-    Replace the part _before_ the colon with a local directory of your choice:
+    Replace the part _before_ the colon with your local directory:
 
     ```yaml
     - /home/jonaswinkler/paperless-inbox:/usr/src/paperless/consume
@@ -78,38 +104,15 @@ account. The script essentially automatically performs the steps described in [D
         - 8010:8000
     ```
 
-    **Rootless**
-
-    !!! warning
-
-        It is currently not possible to run the container rootless if additional languages are specified via `PAPERLESS_OCR_LANGUAGES`.
-
-    If you want to run Paperless as a rootless container, you will need
-    to do the following in your `docker-compose.yml`:
-
-    -   set the `user` running the container to map to the `paperless`
-        user in the container. This value (`user_id` below), should be
-        the same id that `USERMAP_UID` and `USERMAP_GID` are set to in
-        the next step. See `USERMAP_UID` and `USERMAP_GID`
-        [here](configuration.md#docker).
-
-    Your entry for Paperless should contain something like:
-
-    > ```
-    > webserver:
-    >   image: ghcr.io/paperless-ngx/paperless-ngx:latest
-    >   user: <user_id>
-    > ```
-
-4.  Modify `docker-compose.env` with any configuration options you'd like.
+3.  Modify `docker-compose.env` with any configuration options you need.
     See the [configuration documentation](configuration.md) for all options.
 
     You may also need to set `USERMAP_UID` and `USERMAP_GID` to
-    the uid and gid of your user on the host system. Use `id -u` and
-    `id -g` to get these. This ensures that both the container and the host
-    user have write access to the consumption directory. If your UID
-    and GID on the host system is 1000 (the default for the first normal
-    user on most systems), it will work out of the box without any
+    the UID and GID of your user on the host system. Use `id -u` and
+    `id -g` to get these values. This ensures both the container and the
+    host user can write to the consumption directory. If your UID and
+    GID are `1000` (the default for the first normal user on many
+    systems), this usually works out of the box without
     modifications. Run `id "username"` to check.
 
     !!! note
@@ -118,78 +121,62 @@ account. The script essentially automatically performs the steps described in [D
         appending `_FILE` to configuration values. For example [`PAPERLESS_DBUSER`](configuration.md#PAPERLESS_DBUSER)
         can be set using `PAPERLESS_DBUSER_FILE=/var/run/secrets/password.txt`.
 
-    !!! warning
-
-        Some file systems such as NFS network shares don't support file
-        system notifications with `inotify`. When storing the consumption
-        directory on such a file system, paperless will not pick up new
-        files with the default configuration. You will need to use
-        [`PAPERLESS_CONSUMER_POLLING_INTERVAL`](configuration.md#PAPERLESS_CONSUMER_POLLING_INTERVAL), which will disable inotify.
-
-5.  Run `docker compose pull`. This will pull the image from the GitHub container registry
-    by default but you can change the image to pull from Docker Hub by changing the `image`
+4.  Run `docker compose pull`. This pulls the image from the GitHub container registry
+    by default, but you can pull from Docker Hub by changing the `image`
     line to `image: paperlessngx/paperless-ngx:latest`.
 
-6.  Run `docker compose up -d`. This will create and start the necessary containers.
+5.  Run `docker compose up -d`. This will create and start the necessary containers.
 
-7.  Congratulations! Your Paperless-ngx instance should now be accessible at `http://127.0.0.1:8000`
-    (or similar, depending on your configuration). When you first access the web interface, you will be
-    prompted to create a superuser account.
+#### After installation
 
-### Build the Docker image yourself {#docker_build}
+Your Paperless-ngx instance should now be accessible at
+`http://127.0.0.1:8000` (or similar, depending on your configuration).
+When you first access the web interface, you will be prompted to create
+a [superuser](usage.md#superusers) account.
 
-1.  Clone the entire repository of paperless:
+#### Optional Advanced Compose Configurations {#advanced_compose data-toc-label="Advanced Compose Configurations"}
 
-    ```shell-session
-    git clone https://github.com/paperless-ngx/paperless-ngx
-    ```
+**Rootless**
 
-    The main branch always reflects the latest stable version.
+!!! warning
 
-2.  Copy one of the `docker/compose/docker-compose.*.yml` to
-    `docker-compose.yml` in the root folder, depending on which database
-    backend you want to use. Copy `docker-compose.env` into the project
-    root as well.
+    It is currently not possible to run the container rootless if additional languages are specified via `PAPERLESS_OCR_LANGUAGES`.
 
-3.  In the `docker-compose.yml` file, find the line that instructs
-    Docker Compose to pull the paperless image from Docker Hub:
+If you want to run Paperless as a rootless container, make this
+change in `docker-compose.yml`:
 
-    ```yaml
-    webserver:
-        image: ghcr.io/paperless-ngx/paperless-ngx:latest
-    ```
+-   Set the `user` running the container to map to the `paperless`
+    user in the container. This value (`user_id` below) should be
+    the same ID that `USERMAP_UID` and `USERMAP_GID` are set to in
+    `docker-compose.env`. See `USERMAP_UID` and `USERMAP_GID`
+    [here](configuration.md#docker).
 
-    and replace it with a line that instructs Docker Compose to build
-    the image from the current working directory instead:
+Your entry for Paperless should contain something like:
 
-    ```yaml
-    webserver:
-        build:
-            context: .
-    ```
+> ```
+> webserver:
+>   image: ghcr.io/paperless-ngx/paperless-ngx:latest
+>   user: <user_id>
+> ```
 
-4.  Follow the [Docker setup](#docker) above except when asked to run
-    `docker compose pull` to pull the image, run
+**File systems without inotify support (e.g. NFS)**
 
-    ```shell-session
-    docker compose build
-    ```
+Some file systems, such as NFS network shares, don't support file system
+notifications with `inotify`. When the consumption directory is on such a
+file system, Paperless-ngx will not pick up new files with the default
+configuration. Use [`PAPERLESS_CONSUMER_POLLING`](configuration.md#PAPERLESS_CONSUMER_POLLING)
+to enable polling and disable inotify. See [here](configuration.md#polling).
 
-    instead to build the image.
+## Bare Metal Install {#bare_metal}
 
-### Bare Metal Route {#bare_metal}
+#### Prerequisites
 
-Paperless runs on linux only. The following procedure has been tested on
-a minimal installation of Debian/Buster, which is the current stable
-release at the time of writing. Windows is not and will never be
-supported.
+-   Paperless runs on Linux only, Windows is not supported.
+-   Python 3 is required with versions 3.10 - 3.12 currently supported. Newer versions may work, but some dependencies may not be fully compatible.
 
-Paperless requires Python 3. At this time, 3.10 - 3.12 are tested versions.
-Newer versions may work, but some dependencies may not fully support newer versions.
-Support for older Python versions may be dropped as they reach end of life or as newer versions
-are released, dependency support is confirmed, etc.
+#### Installation
 
-1.  Install dependencies. Paperless requires the following packages.
+1.  Install dependencies. Paperless requires the following packages:
 
     -   `python3`
     -   `python3-pip`
@@ -203,13 +190,12 @@ are released, dependency support is confirmed, etc.
     -   `libpq-dev` for PostgreSQL
     -   `libmagic-dev` for mime type detection
     -   `mariadb-client` for MariaDB compile time
-    -   `libzbar0` for barcode detection
     -   `poppler-utils` for barcode detection
 
     Use this list for your preferred package management:
 
     ```
-    python3 python3-pip python3-dev imagemagick fonts-liberation gnupg libpq-dev default-libmysqlclient-dev pkg-config libmagic-dev libzbar0 poppler-utils
+    python3 python3-pip python3-dev imagemagick fonts-liberation gnupg libpq-dev default-libmysqlclient-dev pkg-config libmagic-dev poppler-utils
     ```
 
     These dependencies are required for OCRmyPDF, which is used for text
@@ -253,8 +239,8 @@ are released, dependency support is confirmed, etc.
 
 2.  Install `redis` >= 6.0 and configure it to start automatically.
 
-3.  Optional. Install `postgresql` and configure a database, user and
-    password for paperless. If you do not wish to use PostgreSQL,
+3.  Optional: Install `postgresql` and configure a database, user, and
+    password for Paperless-ngx. If you do not wish to use PostgreSQL,
     MariaDB and SQLite are available as well.
 
     !!! note
@@ -263,61 +249,60 @@ are released, dependency support is confirmed, etc.
         extension](https://code.djangoproject.com/wiki/JSON1Extension) is
         enabled. This is usually the case, but not always.
 
-4.  Create a system user with a new home folder under which you wish
-    to run paperless.
+4.  Create a system user with a new home folder in which you want
+    to run Paperless-ngx.
 
     ```shell-session
     adduser paperless --system --home /opt/paperless --group
     ```
 
-5.  Get the release archive from
-    <https://github.com/paperless-ngx/paperless-ngx/releases> for example with
+5.  Download a release archive from
+    <https://github.com/paperless-ngx/paperless-ngx/releases>. For example:
 
     ```shell-session
-    curl -O -L https://github.com/paperless-ngx/paperless-ngx/releases/download/v1.10.2/paperless-ngx-v1.10.2.tar.xz
+    curl -O -L https://github.com/paperless-ngx/paperless-ngx/releases/download/vX.Y.Z/paperless-ngx-vX.Y.Z.tar.xz
     ```
 
     Extract the archive with
 
     ```shell-session
-    tar -xf paperless-ngx-v1.10.2.tar.xz
+    tar -xf paperless-ngx-vX.Y.Z.tar.xz
     ```
 
-    and copy the contents to the
-    home folder of the user you created before (`/opt/paperless`).
+    and copy the contents to the home directory of the user you created
+    earlier (`/opt/paperless`).
 
-    Optional: If you cloned the git repo, you will have to
-    compile the frontend yourself, see [here](development.md#front-end-development)
+    Optional: If you cloned the Git repository, you will need to
+    compile the frontend yourself. See [here](development.md#front-end-development)
     and use the `build` step, not `serve`.
 
-6.  Configure paperless. See [configuration](configuration.md) for details.
+6.  Configure Paperless-ngx. See [configuration](configuration.md) for details.
     Edit the included `paperless.conf` and adjust the settings to your
-    needs. Required settings for getting
-    paperless running are:
+    needs. Required settings for getting Paperless-ngx running are:
 
-    -   [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your redis server, such as
-        <redis://localhost:6379>.
-    -   [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) optional, and should be one of `postgres`,
+    -   [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your Redis server, such as
+        `redis://localhost:6379`.
+    -   [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) is optional, and should be one of `postgres`,
         `mariadb`, or `sqlite`
     -   [`PAPERLESS_DBHOST`](configuration.md#PAPERLESS_DBHOST) should be the hostname on which your
         PostgreSQL server is running. Do not configure this to use
         SQLite instead. Also configure port, database name, user and
         password as necessary.
-    -   [`PAPERLESS_CONSUMPTION_DIR`](configuration.md#PAPERLESS_CONSUMPTION_DIR) should point to a folder which
-        paperless should watch for documents. You might want to have
-        this somewhere else. Likewise, [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) and
-        [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) define where paperless stores its data.
-        If you like, you can point both to the same directory.
+    -   [`PAPERLESS_CONSUMPTION_DIR`](configuration.md#PAPERLESS_CONSUMPTION_DIR) should point to the folder
+        that Paperless-ngx should watch for incoming documents.
+        Likewise, [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) and
+        [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) define where Paperless-ngx stores its data.
+        If needed, these can point to the same directory.
     -   [`PAPERLESS_SECRET_KEY`](configuration.md#PAPERLESS_SECRET_KEY) should be a random sequence of
         characters. It's used for authentication. Failure to do so
         allows third parties to forge authentication credentials.
-    -   [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) if you are behind a reverse proxy. This should
+    -   Set [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) if you are behind a reverse proxy. This should
         point to your domain. Please see
         [configuration](configuration.md) for more
         information.
 
-    Many more adjustments can be made to paperless, especially the OCR
-    part. The following options are recommended for everyone:
+    You can make many more adjustments, especially for OCR.
+    The following options are recommended for most users:
 
     -   Set [`PAPERLESS_OCR_LANGUAGE`](configuration.md#PAPERLESS_OCR_LANGUAGE) to the language most of your
         documents are written in.
@@ -327,15 +312,14 @@ are released, dependency support is confirmed, etc.
 
         Ensure your Redis instance [is secured](https://redis.io/docs/latest/operate/oss_and_stack/management/security/).
 
-7.  Create the following directories if they are missing:
+7.  Create the following directories if they do not already exist:
 
     -   `/opt/paperless/media`
     -   `/opt/paperless/data`
     -   `/opt/paperless/consume`
 
-    Adjust as necessary if you configured different folders.
-    Ensure that the paperless user has write permissions for every one
-    of these folders with
+    Adjust these paths if you configured different folders.
+    Then verify that the `paperless` user has write permissions:
 
     ```shell-session
     ls -l -d /opt/paperless/media
@@ -349,45 +333,44 @@ are released, dependency support is confirmed, etc.
     sudo chown paperless:paperless /opt/paperless/consume
     ```
 
-8.  Install python requirements from the `requirements.txt` file.
+8.  Install Python dependencies from `requirements.txt`.
 
     ```shell-session
     sudo -Hu paperless pip3 install -r requirements.txt
     ```
 
-    This will install all python dependencies in the home directory of
+    This will install all Python dependencies in the home directory of
     the new paperless user.
 
     !!! tip
 
-        It is up to you if you wish to use a virtual environment or not for the Python
-        dependencies.  This is an alternative to the above and may require adjusting
-        the example scripts to utilize the virtual environment paths
+        You can use a virtual environment if you prefer. If you do,
+        you may need to adjust the example scripts for your virtual
+        environment paths.
 
     !!! tip
 
         If you use modern Python tooling, such as `uv`, installation will not include
-        dependencies for Postgres or Mariadb.  You can select those extras with `--extra <EXTRA>`
-        or all with `--all-extras`
+        dependencies for PostgreSQL or MariaDB. You can select those
+        extras with `--extra <EXTRA>`, or install all extras with
+        `--all-extras`.
 
-9.  Go to `/opt/paperless/src`, and execute the following command:
+9.  Go to `/opt/paperless/src` and execute the following command:
 
     ```bash
     # This creates the database schema.
     sudo -Hu paperless python3 manage.py migrate
     ```
 
-    When you first access the web interface you will be prompted to create a superuser account.
-
-10. Optional: Test that paperless is working by executing
+10. Optional: Test that Paperless-ngx is working by running
 
     ```bash
     # Manually starts the webserver
     sudo -Hu paperless python3 manage.py runserver
     ```
 
-    and pointing your browser to http://localhost:8000 if
-    accessing from the same devices on which paperless is installed.
+    Then point your browser to `http://localhost:8000` if
+    accessing from the same device on which Paperless-ngx is installed.
     If accessing from another machine, set up systemd services. You may need
     to set `PAPERLESS_DEBUG=true` in order for the development server to work
     normally in your browser.
@@ -395,23 +378,24 @@ are released, dependency support is confirmed, etc.
     !!! warning
 
         This is a development server which should not be used in production.
-        It is not audited for security and performance is inferior to
-        production ready web servers.
+        It is not audited for security, and performance is inferior to
+        production-ready web servers.
 
     !!! tip
 
         This will not start the consumer. Paperless does this in a separate
         process.
 
-11. Setup systemd services to run paperless automatically. You may use
+11. Set up systemd services to run Paperless-ngx automatically. You may use
     the service definition files included in the `scripts` folder as a
     starting point.
 
-    Paperless needs the `webserver` script to run the webserver, the
-    `consumer` script to watch the input folder, `taskqueue` for the
-    background workers used to handle things like document consumption
-    and the `scheduler` script to run tasks such as email checking at
-    certain times .
+    Paperless needs:
+
+    -   The `webserver` script to run the webserver.
+    -   The `consumer` script to watch the input folder.
+    -   The `taskqueue` script for background workers (document consumption, etc.).
+    -   The `scheduler` script for periodic tasks such as email checking.
 
     !!! note
 
@@ -420,9 +404,9 @@ are released, dependency support is confirmed, etc.
         `Require=paperless-webserver.socket` in the `webserver` script
         and configure `granian` to listen on port 80 (set `GRANIAN_PORT`).
 
-    These services rely on redis and optionally the database server, but
+    These services rely on Redis and optionally the database server, but
     don't need to be started in any particular order. The example files
-    depend on redis being started. If you use a database server, you
+    depend on Redis being started. If you use a database server, you
     should add additional dependencies.
 
     !!! note
@@ -432,18 +416,15 @@ are released, dependency support is confirmed, etc.
 
     !!! warning
 
-        If celery won't start (check with
+        If Celery won't start, check
         `sudo systemctl status paperless-task-queue.service` for
-        paperless-task-queue.service and paperless-scheduler.service
-        ) you need to change the path in the files. Example:
+        `paperless-task-queue.service` and `paperless-scheduler.service`.
+        You may need to change the path in the files. Example:
         `ExecStart=/opt/paperless/.local/bin/celery --app paperless worker --loglevel INFO`
 
-12. Optional: Install a samba server and make the consumption folder
-    available as a network share.
-
-13. Configure ImageMagick to allow processing of PDF documents. Most
+12. Configure ImageMagick to allow processing of PDF documents. Most
     distributions have this disabled by default, since PDF documents can
-    contain malware. If you don't do this, paperless will fall back to
+    contain malware. If you don't do this, Paperless-ngx will fall back to
     Ghostscript for certain steps such as thumbnail generation.
 
     Edit `/etc/ImageMagick-6/policy.xml` and adjust
@@ -458,32 +439,38 @@ are released, dependency support is confirmed, etc.
     <policy domain="coder" rights="read|write" pattern="PDF" />
     ```
 
-14. Optional: Install the
-    [jbig2enc](https://ocrmypdf.readthedocs.io/en/latest/jbig2.html)
-    encoder. This will reduce the size of generated PDF documents.
-    You'll most likely need to compile this by yourself, because this
-    software has been patented until around 2017 and binary packages are
-    not available for most distributions.
+**Optional: Install the [jbig2enc](https://ocrmypdf.readthedocs.io/en/latest/jbig2.html) encoder.**
+This will reduce the size of generated PDF documents. You'll most likely need to compile this yourself, because this
+software has been patented until around 2017 and binary packages are not available for most distributions.
 
-15. Optional: If using the NLTK machine learning processing (see
-    [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) for details),
-    download the NLTK data for the Snowball
-    Stemmer, Stopwords and Punkt tokenizer to `/usr/share/nltk_data`. Refer to the [NLTK
-    instructions](https://www.nltk.org/data.html) for details on how to
-    download the data.
+**Optional: download the NLTK data**
+If using the NLTK machine-learning processing (see [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) for details),
+download the NLTK data for the Snowball Stemmer, Stopwords and Punkt tokenizer to `/usr/share/nltk_data`. Refer to the [NLTK
+instructions](https://www.nltk.org/data.html) for details on how to download the data.
 
-# Migrating to Paperless-ngx
+#### After installation
 
-Migration is possible both from Paperless-ng or directly from the
-'original' Paperless.
+Your Paperless-ngx instance should now be accessible at `http://localhost:8000` (or similar, depending on your configuration).
+When you first access the web interface you will be prompted to create a [superuser](usage.md#superusers) account.
 
-## Migrating from Paperless-ng
+## Build the Docker image yourself {#docker_build data-toc-label="Building the Docker image"}
 
-Paperless-ngx is meant to be a drop-in replacement for Paperless-ng and
-thus upgrading should be trivial for most users, especially when using
-docker. However, as with any major change, it is recommended to take a
+Building the Docker image yourself is typically used for development, but it can also be used for production
+if you want to customize the image. See [Building the Docker image](development.md#docker_build) in the
+development documentation.
+
+## Migrating to Paperless-ngx
+
+You can migrate to Paperless-ngx from Paperless-ng or from the original
+Paperless project.
+
+<h3 id="migration_ng">Migrating from Paperless-ng</h3>
+
+Paperless-ngx is meant to be a drop-in replacement for Paperless-ng, and
+upgrading should be trivial for most users, especially when using
+Docker. However, as with any major change, it is recommended to take a
 full backup first. Once you are ready, simply change the docker image to
-point to the new source. E.g. if using Docker Compose, edit
+point to the new source. For example, if using Docker Compose, edit
 `docker-compose.yml` and change:
 
 ```
@@ -496,66 +483,65 @@ to
 image: ghcr.io/paperless-ngx/paperless-ngx:latest
 ```
 
-and then run `docker compose up -d` which will pull the new image
-recreate the container. That's it!
+and then run `docker compose up -d`, which will pull the new image and
+recreate the container. That's it.
 
 Users who installed with the bare-metal route should also update their
 Git clone to point to `https://github.com/paperless-ngx/paperless-ngx`,
-e.g. using the command
+for example using:
 `git remote set-url origin https://github.com/paperless-ngx/paperless-ngx`
 and then pull the latest version.
 
-## Migrating from Paperless
+<h3 id="migration_paperless">Migrating from Paperless</h3>
 
-At its core, paperless-ngx is still paperless and fully compatible.
+At its core, Paperless-ngx is still Paperless and fully compatible.
 However, some things have changed under the hood, so you need to adapt
-your setup depending on how you installed paperless.
+your setup depending on how you installed Paperless.
 
-This setup describes how to update an existing paperless Docker
-installation. The important things to keep in mind are as follows:
+This section describes how to update an existing Paperless Docker
+installation. Keep these points in mind:
 
 -   Read the [changelog](changelog.md) and
     take note of breaking changes.
--   You should decide if you want to stick with SQLite or want to
-    migrate your database to PostgreSQL. See [documentation](#sqlite_to_psql)
-    for details on
-    how to move your data from SQLite to PostgreSQL. Both work fine with
-    paperless. However, if you already have a database server running
-    for other services, you might as well use it for paperless as well.
--   The task scheduler of paperless, which is used to execute periodic
+-   Decide whether to stay on SQLite or migrate to PostgreSQL.
+    See [documentation](#sqlite_to_psql) for details on moving data
+    from SQLite to PostgreSQL. Both work fine with
+    Paperless. However, if you already have a database server running
+    for other services, you might as well use it for Paperless as well.
+-   The task scheduler of Paperless, which is used to execute periodic
     tasks such as email checking and maintenance, requires a
-    [redis](https://redis.io/) message broker instance. The
+    [Redis](https://redis.io/) message broker instance. The
     Docker Compose route takes care of that.
 -   The layout of the folder structure for your documents and data
-    remains the same, so you can just plug your old docker volumes into
+    remains the same, so you can plug your old Docker volumes into
     paperless-ngx and expect it to find everything where it should be.
 
-Migration to paperless-ngx is then performed in a few simple steps:
+Migration to Paperless-ngx is then performed in a few simple steps:
 
-1.  Stop paperless.
+1.  Stop Paperless.
 
     ```bash
     cd /path/to/current/paperless
     docker compose down
     ```
 
-2.  Do a backup for two purposes: If something goes wrong, you still
-    have your data. Second, if you don't like paperless-ngx, you can
-    switch back to paperless.
+2.  Create a backup for two reasons: if something goes wrong, you still
+    have your data; and if you don't like paperless-ngx, you can
+    switch back to Paperless.
 
-3.  Download the latest release of paperless-ngx. You can either go with
+3.  Download the latest release of Paperless-ngx. You can either use
     the Docker Compose files from
     [here](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose)
     or clone the repository to build the image yourself (see
-    [above](#docker_build)). You can
-    either replace your current paperless folder or put paperless-ngx in
+    [development docs](development.md#docker_build)). You can either replace your current paperless
+    folder or put Paperless-ngx in
     a different location.
 
     !!! warning
 
         Paperless-ngx includes a `.env` file. This will set the project name
-        for docker compose to `paperless`, which will also define the name
-        of the volumes by paperless-ngx. However, if you experience that
+        for Docker Compose to `paperless`, which will also define the
+        volume names created by Paperless-ngx. However, if you notice that
         paperless-ngx is not using your old paperless volumes, verify the
         names of your volumes with
 
@@ -571,10 +557,10 @@ Migration to paperless-ngx is then performed in a few simple steps:
     after you migrated your existing SQLite database.
 
 5.  Adjust `docker-compose.yml` and `docker-compose.env` to your needs.
-    See [Docker setup](#docker) details on
-    which edits are advised.
+    See [Docker setup](#docker) for details on
+    which edits are recommended.
 
-6.  [Update paperless.](administration.md#updating)
+6.  Follow the update procedure in [Update paperless](administration.md#updating).
 
 7.  In order to find your existing documents with the new search
     feature, you need to invoke a one-time operation that will create
@@ -585,136 +571,99 @@ Migration to paperless-ngx is then performed in a few simple steps:
     ```
 
     This will migrate your database and create the search index. After
-    that, paperless will take care of maintaining the index by itself.
+    that, Paperless-ngx will maintain the index automatically.
 
-8.  Start paperless-ngx.
+8.  Start Paperless-ngx.
 
     ```bash
     docker compose up -d
     ```
 
-    This will run paperless in the background and automatically start it
+    This will run Paperless-ngx in the background and automatically start it
     on system boot.
 
-9.  Paperless installed a permanent redirect to `admin/` in your
+9.  Paperless may have installed a permanent redirect to `admin/` in your
     browser. This redirect is still in place and prevents access to the
-    new UI. Clear your browsing cache in order to fix this.
+    new UI. Clear your browser cache to fix this.
 
 10. Optionally, follow the instructions below to migrate your existing
     data to PostgreSQL.
 
-## Migrating from LinuxServer.io Docker Image
+<h3 id="migration_lsio">Migrating from LinuxServer.io Docker Image</h3>
 
-As with any upgrades and large changes, it is highly recommended to
+As with any upgrade or large change, it is highly recommended to
 create a backup before starting. This assumes the image was running
 using Docker Compose, but the instructions are translatable to Docker
 commands as well.
 
-1.  Stop and remove the paperless container
-2.  If using an external database, stop the container
-3.  Update Redis configuration
+1.  Stop and remove the Paperless container.
+2.  If using an external database, stop that container.
+3.  Update Redis configuration.
 
     1. If `REDIS_URL` is already set, change it to [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS)
        and continue to step 4.
 
-    1. Otherwise, in the `docker-compose.yml` add a new service for
-       Redis, following [the example compose
+    1. Otherwise, add a new Redis service in `docker-compose.yml`,
+       following [the example compose
        files](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose)
 
     1. Set the environment variable [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) so it points to
-       the new Redis container
+       the new Redis container.
 
-4.  Update user mapping
+4.  Update user mapping.
 
-    1. If set, change the environment variable `PUID` to `USERMAP_UID`
+    1. If set, change the environment variable `PUID` to `USERMAP_UID`.
 
-    1. If set, change the environment variable `PGID` to `USERMAP_GID`
+    1. If set, change the environment variable `PGID` to `USERMAP_GID`.
 
-5.  Update configuration paths
+5.  Update configuration paths.
 
-    1. Set the environment variable [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) to `/config`
+    1. Set the environment variable [`PAPERLESS_DATA_DIR`](configuration.md#PAPERLESS_DATA_DIR) to `/config`.
 
-6.  Update media paths
+6.  Update media paths.
 
     1. Set the environment variable [`PAPERLESS_MEDIA_ROOT`](configuration.md#PAPERLESS_MEDIA_ROOT) to
-       `/data/media`
+       `/data/media`.
 
-7.  Update timezone
+7.  Update timezone.
 
     1. Set the environment variable [`PAPERLESS_TIME_ZONE`](configuration.md#PAPERLESS_TIME_ZONE) to the same
-       value as `TZ`
+       value as `TZ`.
 
-8.  Modify the `image:` to point to
+8.  Modify `image:` to point to
     `ghcr.io/paperless-ngx/paperless-ngx:latest` or a specific version
     if preferred.
 9.  Start the containers as before, using `docker compose`.
 
-## Moving data from SQLite to PostgreSQL or MySQL/MariaDB {#sqlite_to_psql}
+## Running Paperless-ngx on less powerful devices {#less-powerful-devices data-toc-label="Less Powerful Devices"}
 
-The best way to migrate between database types is to perform an [export](administration.md#exporter) and then
-[import](administration.md#importer) into a clean installation of Paperless-ngx.
-
-## Moving back to Paperless
-
-Lets say you migrated to Paperless-ngx and used it for a while, but
-decided that you don't like it and want to move back (If you do, send
-me a mail about what part you didn't like!), you can totally do that
-with a few simple steps.
-
-Paperless-ngx modified the database schema slightly, however, these
-changes can be reverted while keeping your current data, so that your
-current data will be compatible with original Paperless. Thumbnails
-were also changed from PNG to WEBP format and will need to be
-re-generated.
-
-Execute this:
-
-```shell-session
-$ cd /path/to/paperless
-$ docker compose run --rm webserver migrate documents 0023
-```
-
-Or without docker:
-
-```shell-session
-$ cd /path/to/paperless/src
-$ python3 manage.py migrate documents 0023
-```
-
-After regenerating thumbnails, you'll need to clear your cookies
-(Paperless-ngx comes with updated dependencies that do cookie-processing
-differently) and probably your cache as well.
-
-# Considerations for less powerful devices {#less-powerful-devices}
-
-Paperless runs on Raspberry Pi. However, some things are rather slow on
-the Pi and configuring some options in paperless can help improve
-performance immensely:
+Paperless runs on Raspberry Pi. Some tasks can be slow on lower-powered
+hardware, but a few settings can improve performance:
 
 -   Stick with SQLite to save some resources. See [troubleshooting](troubleshooting.md#log-reports-creating-paperlesstask-failed)
     if you encounter issues with SQLite locking.
 -   If you do not need the filesystem-based consumer, consider disabling it
     entirely by setting [`PAPERLESS_CONSUMER_DISABLE`](configuration.md#PAPERLESS_CONSUMER_DISABLE) to `true`.
--   Consider setting [`PAPERLESS_OCR_PAGES`](configuration.md#PAPERLESS_OCR_PAGES) to 1, so that paperless will
-    only OCR the first page of your documents. In most cases, this page
+-   Consider setting [`PAPERLESS_OCR_PAGES`](configuration.md#PAPERLESS_OCR_PAGES) to 1, so that Paperless
+    OCRs only the first page of your documents. In most cases, this page
     contains enough information to be able to find it.
 -   [`PAPERLESS_TASK_WORKERS`](configuration.md#PAPERLESS_TASK_WORKERS) and [`PAPERLESS_THREADS_PER_WORKER`](configuration.md#PAPERLESS_THREADS_PER_WORKER) are
     configured to use all cores. The Raspberry Pi models 3 and up have 4
-    cores, meaning that paperless will use 2 workers and 2 threads per
+    cores, meaning that Paperless will use 2 workers and 2 threads per
     worker. This may result in sluggish response times during
     consumption, so you might want to lower these settings (example: 2
     workers and 1 thread to always have some computing power left for
     other tasks).
 -   Keep [`PAPERLESS_OCR_MODE`](configuration.md#PAPERLESS_OCR_MODE) at its default value `skip` and consider
-    OCR'ing your documents before feeding them into paperless. Some
+    OCRing your documents before feeding them into Paperless. Some
     scanners are able to do this!
 -   Set [`PAPERLESS_OCR_SKIP_ARCHIVE_FILE`](configuration.md#PAPERLESS_OCR_SKIP_ARCHIVE_FILE) to `with_text` to skip archive
-    file generation for already ocr'ed documents, or `always` to skip it
+    file generation for already OCRed documents, or `always` to skip it
     for all documents.
 -   If you want to perform OCR on the device, consider using
     `PAPERLESS_OCR_CLEAN=none`. This will speed up OCR times and use
     less memory at the expense of slightly worse OCR results.
--   If using docker, consider setting [`PAPERLESS_WEBSERVER_WORKERS`](configuration.md#PAPERLESS_WEBSERVER_WORKERS) to 1. This will save some memory.
+-   If using Docker, consider setting [`PAPERLESS_WEBSERVER_WORKERS`](configuration.md#PAPERLESS_WEBSERVER_WORKERS) to 1. This will save some memory.
 -   Consider setting [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) to false, to disable the
     more advanced language processing, which can take more memory and
     processing time.
@@ -726,17 +675,19 @@ For details, refer to [configuration](configuration.md).
     Updating the
     [automatic matching algorithm](advanced_usage.md#automatic-matching) takes quite a bit of time. However, the update mechanism
     checks if your data has changed before doing the heavy lifting. If you
-    experience the algorithm taking too much cpu time, consider changing the
+    experience the algorithm taking too much CPU time, consider changing the
     schedule in the admin interface to daily. You can also manually invoke
     the task by changing the date and time of the next run to today/now.
 
     The actual matching of the algorithm is fast and works on Raspberry Pi
     as well as on any other device.
 
-# Using nginx as a reverse proxy {#nginx}
+## Additional considerations
 
-Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Using-a-Reverse-Proxy-with-Paperless-ngx#nginx) for user-maintained documentation of using nginx with Paperless-ngx.
+**Using a reverse proxy with Paperless-ngx**
 
-# Enhancing security {#security}
+Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Using-a-Reverse-Proxy-with-Paperless-ngx#nginx) for user-maintained documentation on using nginx with Paperless-ngx.
 
-Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Using-Security-Tools-with-Paperless-ngx) for user-maintained documentation of how to configure security tools like Fail2ban with Paperless-ngx.
+**Enhancing security**
+
+Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Using-Security-Tools-with-Paperless-ngx) for user-maintained documentation on configuring security tools like Fail2ban with Paperless-ngx.

docs/usage.md

@@ -1,4 +1,8 @@
-# Usage Overview
+---
+title: Basic Usage
+---
+
+# Usage
 
 Paperless-ngx is an application that manages your personal documents. With
 the (optional) help of a document scanner (see [the scanners wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Scanner-&-Software-Recommendations)), Paperless-ngx transforms your unwieldy
@@ -85,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
@@ -368,6 +382,11 @@ permissions can be granted to limit access to certain parts of the UI (and corre
 
 Superusers can access all parts of the front and backend application as well as any and all objects. Superuser status can only be granted by another superuser.
 
+!!! tip
+
+    Because superuser accounts can see all objects and documents, you may want to use a regular account for day-to-day use. Additional superuser accounts can
+    be created via [cli](administration.md#create-superuser) or granted superuser status from an existing superuser account.
+
 #### Admin Status
 
 Admin status (Django 'staff status') grants access to viewing the paperless logs and the system status dialog
@@ -560,10 +579,22 @@ For security reasons, webhooks can be limited to specific ports and disallowed f
 [configuration settings](configuration.md#workflow-webhooks) to change this behavior. If you are allowing non-admins to create workflows,
 you may want to adjust these settings to prevent abuse.
 
+##### Move to Trash {#workflow-action-move-to-trash}
+
+"Move to Trash" actions move the document to the trash. The document can be restored
+from the trash until the trash is emptied (after the configured delay or manually).
+
+The "Move to Trash" action will always be executed at the end of the workflow run,
+regardless of its position in the action list. After a "Move to Trash" action is executed
+no other workflow will be executed on the document.
+
+If a "Move to Trash" action is executed in a consume pipeline, the consumption
+will be aborted and the file will be deleted.
+
 #### Workflow placeholders
 
-Titles can be assigned by workflows using [Jinja templates](https://jinja.palletsprojects.com/en/3.1.x/templates/).
-This allows for complex logic to be used to generate the title, including [logical structures](https://jinja.palletsprojects.com/en/3.1.x/templates/#list-of-control-structures)
+Titles and webhook payloads can be generated by workflows using [Jinja templates](https://jinja.palletsprojects.com/en/3.1.x/templates/).
+This allows for complex logic to be used, including [logical structures](https://jinja.palletsprojects.com/en/3.1.x/templates/#list-of-control-structures)
 and [filters](https://jinja.palletsprojects.com/en/3.1.x/templates/#id11).
 The template is provided as a string.
 
@@ -586,7 +617,7 @@ applied. You can use the following placeholders in the template with any trigger
 -   `{{added_time}}`: added time in HH:MM format
 -   `{{original_filename}}`: original file name without extension
 -   `{{filename}}`: current file name without extension
--   `{{doc_title}}`: current document title
+-   `{{doc_title}}`: current document title (cannot be used in title assignment)
 
 The following placeholders are only available for "added" or "updated" triggers
 

mkdocs.yml

@@ -1,87 +0,0 @@
-site_name: Paperless-ngx
-theme:
-  name: material
-  logo: assets/logo.svg
-  font:
-    text: Roboto
-    code: Roboto Mono
-  palette:
-    # Palette toggle for automatic mode
-    - media: "(prefers-color-scheme)"
-      toggle:
-        icon: material/brightness-auto
-        name: Switch to light mode
-    # Palette toggle for light mode
-    - media: "(prefers-color-scheme: light)"
-      scheme: default
-      toggle:
-        icon: material/brightness-7
-        name: Switch to dark mode
-    # Palette toggle for dark mode
-    - media: "(prefers-color-scheme: dark)"
-      scheme: slate
-      toggle:
-        icon: material/brightness-4
-        name: Switch to system preference
-  features:
-    - navigation.tabs
-    - navigation.top
-    - toc.integrate
-    - content.code.annotate
-  icon:
-    repo: fontawesome/brands/github
-  favicon: assets/favicon.png
-repo_url: https://github.com/paperless-ngx/paperless-ngx
-repo_name: paperless-ngx/paperless-ngx
-edit_uri: blob/main/docs/
-extra_css:
-  - assets/extra.css
-markdown_extensions:
-  - attr_list
-  - md_in_html
-  - def_list
-  - admonition
-  - tables
-  - pymdownx.highlight:
-      anchor_linenums: true
-  - pymdownx.superfences
-  - pymdownx.inlinehilite
-  - pymdownx.snippets
-  - pymdownx.tilde
-  - footnotes
-  - pymdownx.superfences:
-      custom_fences:
-        - name: mermaid
-          class: mermaid
-          format: !!python/name:pymdownx.superfences.fence_code_format
-  - pymdownx.emoji:
-      emoji_index: !!python/name:material.extensions.emoji.twemoji
-      emoji_generator: !!python/name:material.extensions.emoji.to_svg
-strict: true
-nav:
-  - index.md
-  - setup.md
-  - 'Basic Usage': usage.md
-  - configuration.md
-  - administration.md
-  - advanced_usage.md
-  - 'REST API': api.md
-  - development.md
-  - 'FAQs': faq.md
-  - troubleshooting.md
-  - 'Migration to v3': migration.md
-  - changelog.md
-copyright: Copyright © 2016 - 2026 Daniel Quinn, Jonas Winkler, and the Paperless-ngx team
-extra:
-  social:
-    - icon: fontawesome/brands/github
-      link: https://github.com/paperless-ngx/paperless-ngx
-    - icon: fontawesome/brands/docker
-      link: https://hub.docker.com/r/paperlessngx/paperless-ngx
-    - icon: material/chat
-      link: https://matrix.to/#/#paperless:matrix.org
-plugins:
-  - search
-  - glightbox:
-      skip_classes:
-        - no-lightbox

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "2.20.6"
+version = "2.20.8"
 description = "A community-supported supercharged document management system: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.10"
@@ -27,25 +27,25 @@ dependencies = [
   # WARNING: django does not use semver.
   #          Only patch versions are guaranteed to not introduce breaking changes.
   "django~=5.2.10",
-  "django-allauth[mfa,socialaccount]~=65.13.1",
+  "django-allauth[mfa,socialaccount]~=65.14.0",
   "django-auditlog~=3.4.1",
-  "django-cachalot~=2.8.0",
+  "django-cachalot~=2.9.0",
   "django-celery-results~=2.6.0",
   "django-compression-middleware~=0.5.0",
   "django-cors-headers~=4.9.0",
   "django-extensions~=4.1",
   "django-filter~=25.1",
-  "django-guardian~=3.2.0",
+  "django-guardian~=3.3.0",
   "django-multiselectfield~=1.0.1",
   "django-soft-delete~=1.0.18",
   "django-treenode>=0.23.2",
   "djangorestframework~=3.16",
   "djangorestframework-guardian~=0.4.0",
   "drf-spectacular~=0.28",
-  "drf-spectacular-sidecar~=2025.10.1",
+  "drf-spectacular-sidecar~=2026.1.1",
   "drf-writable-nested~=0.7.1",
   "faiss-cpu>=1.10",
-  "filelock~=3.20.0",
+  "filelock~=3.24.3",
   "flower~=2.0.1",
   "gotenberg-client~=0.13.1",
   "httpx-oauth~=0.16",
@@ -68,7 +68,6 @@ dependencies = [
   "python-gnupg~=0.5.4",
   "python-ipware~=3.0.0",
   "python-magic~=0.4.27",
-  "pyzbar~=0.1.9",
   "rapidfuzz~=3.14.0",
   "redis[hiredis]~=5.2.1",
   "regex>=2025.9.18",
@@ -76,12 +75,12 @@ dependencies = [
   "sentence-transformers>=4.1",
   "setproctitle~=1.3.4",
   "tika-client~=0.10.0",
-  "torch~=2.9.1",
+  "torch~=2.10.0",
   "tqdm~=4.67.1",
   "watchfiles>=1.1.1",
   "whitenoise~=6.11",
   "whoosh-reloaded>=2.7.5",
-  "zxing-cpp~=2.3.0",
+  "zxing-cpp~=3.0.0",
 ]
 
 optional-dependencies.mariadb = [
@@ -94,7 +93,7 @@ optional-dependencies.postgres = [
   "psycopg-pool==3.3",
 ]
 optional-dependencies.webserver = [
-  "granian[uvloop]~=2.6.0",
+  "granian[uvloop]~=2.7.0",
 ]
 
 [dependency-groups]
@@ -106,8 +105,7 @@ dev = [
 ]
 
 docs = [
-  "mkdocs-glightbox~=0.5.1",
-  "mkdocs-material~=9.7.0",
+  "zensical>=0.0.21",
 ]
 
 testing = [
@@ -116,8 +114,8 @@ testing = [
   "imagehash",
   "pytest~=9.0.0",
   "pytest-cov~=7.0.0",
-  "pytest-django~=4.11.1",
-  "pytest-env~=1.2.0",
+  "pytest-django~=4.12.0",
+  "pytest-env~=1.5.0",
   "pytest-httpx",
   "pytest-mock~=3.15.1",
   #"pytest-randomly~=4.0.1",
@@ -127,9 +125,8 @@ testing = [
 ]
 
 lint = [
-  "pre-commit~=4.5.1",
-  "pre-commit-uv~=4.2.0",
-  "ruff~=0.14.0",
+  "prek~=0.3.0",
+  "ruff~=0.15.0",
 ]
 
 typing = [
@@ -138,8 +135,12 @@ typing = [
   "django-stubs[compatible-mypy]",
   "djangorestframework-stubs[compatible-mypy]",
   "lxml-stubs",
+  "microsoft-python-type-stubs @ git+https://github.com/microsoft/python-type-stubs.git",
   "mypy",
+  "mypy-baseline",
+  "pyrefly",
   "types-bleach",
+  "types-channels",
   "types-colorama",
   "types-dateparser",
   "types-markdown",
@@ -159,26 +160,22 @@ environments = [
   "sys_platform == 'linux'",
 ]
 
+[[tool.uv.index]]
+name = "pytorch-cpu"
+url = "https://download.pytorch.org/whl/cpu"
+explicit = true
+
 [tool.uv.sources]
 # Markers are chosen to select these almost exclusively when building the Docker image
 psycopg-c = [
   { url = "https://github.com/paperless-ngx/builder/releases/download/psycopg-trixie-3.3.0/psycopg_c-3.3.0-cp312-cp312-linux_x86_64.whl", marker = "sys_platform == 'linux' and platform_machine == 'x86_64' and python_version == '3.12'" },
   { url = "https://github.com/paperless-ngx/builder/releases/download/psycopg-trixie-3.3.0/psycopg_c-3.3.0-cp312-cp312-linux_aarch64.whl", marker = "sys_platform == 'linux' and platform_machine == 'aarch64' and python_version == '3.12'" },
 ]
-zxing-cpp = [
-  { url = "https://github.com/paperless-ngx/builder/releases/download/zxing-2.3.0/zxing_cpp-2.3.0-cp312-cp312-linux_x86_64.whl", marker = "sys_platform == 'linux' and platform_machine == 'x86_64' and python_version == '3.12'" },
-  { url = "https://github.com/paperless-ngx/builder/releases/download/zxing-2.3.0/zxing_cpp-2.3.0-cp312-cp312-linux_aarch64.whl", marker = "sys_platform == 'linux' and platform_machine == 'aarch64' and python_version == '3.12'" },
-]
 
 torch = [
   { index = "pytorch-cpu" },
 ]
 
-[[tool.uv.index]]
-name = "pytorch-cpu"
-url = "https://download.pytorch.org/whl/cpu"
-explicit = true
-
 [tool.ruff]
 target-version = "py310"
 line-length = 88
@@ -306,12 +303,20 @@ markers = [
   "gotenberg: Tests requiring Gotenberg service",
   "tika: Tests requiring Tika service",
   "greenmail: Tests requiring Greenmail service",
+  "date_parsing: Tests which cover date parsing from content or filename",
 ]
 
 [tool.pytest_env]
 PAPERLESS_DISABLE_DBHANDLER = "true"
 PAPERLESS_CACHE_BACKEND = "django.core.cache.backends.locmem.LocMemCache"
 
+[tool.coverage.report]
+exclude_also = [
+  "if settings.AUDIT_LOG_ENABLED:",
+  "if AUDIT_LOG_ENABLED:",
+  "if TYPE_CHECKING:",
+]
+
 [tool.coverage.run]
 source = [
   "src/",
@@ -323,13 +328,6 @@ omit = [
   "paperless/auth.py",
 ]
 
-[tool.coverage.report]
-exclude_also = [
-  "if settings.AUDIT_LOG_ENABLED:",
-  "if AUDIT_LOG_ENABLED:",
-  "if TYPE_CHECKING:",
-]
-
 [tool.mypy]
 mypy_path = "src"
 plugins = [
@@ -343,5 +341,15 @@ disallow_untyped_defs = true
 warn_redundant_casts = true
 warn_unused_ignores = true
 
+[tool.pyrefly]
+search-path = [ "src" ]
+baseline = ".pyrefly-baseline.json"
+python-platform = "linux"
+
 [tool.django-stubs]
 django_settings_module = "paperless.settings"
+
+[tool.mypy-baseline]
+baseline_path = ".mypy-baseline.txt"
+sort_baseline = true
+ignore_categories = [ "note" ]

src-ui/.pre-commit-config.yaml

@@ -0,0 +1,9 @@
+repos:
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: 'v3.8.1'
+    hooks:
+      - id: prettier
+        types_or: [javascript, ts]
+        additional_dependencies:
+          - prettier@3.3.3
+          - 'prettier-plugin-organize-imports@4.1.0'

src-ui/angular.json

@@ -86,7 +86,6 @@
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
-              "ng2-pdf-viewer",
               "file-saver",
               "utif"
             ],

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/document-detail/document-detail.spec.ts

@@ -72,7 +72,7 @@ test('should show a mobile preview', async ({ page }) => {
   await page.setViewportSize({ width: 400, height: 1000 })
   await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
   await page.getByRole('tab', { name: 'Preview' }).click()
-  await page.waitForSelector('pdf-viewer')
+  await page.waitForSelector('pngx-pdf-viewer')
 })
 
 test('should show a list of notes', async ({ page }) => {

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/jest.config.js

@@ -31,6 +31,10 @@ module.exports = {
   moduleNameMapper: {
     ...esmPreset.moduleNameMapper,
     '^src/(.*)': '<rootDir>/src/$1',
+    '^pdfjs-dist/legacy/build/pdf\\.mjs$':
+      '<rootDir>/src/test/mocks/pdfjs-legacy-build-pdf.ts',
+    '^pdfjs-dist/web/pdf_viewer\\.mjs$':
+      '<rootDir>/src/test/mocks/pdfjs-web-pdf_viewer.ts',
   },
   workerIdleMemoryLimit: '512MB',
   reporters: [

src-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "2.20.6",
+  "version": "2.20.8",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",
@@ -11,15 +11,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^21.1.2",
-    "@angular/common": "~21.1.2",
-    "@angular/compiler": "~21.1.2",
-    "@angular/core": "~21.1.2",
-    "@angular/forms": "~21.1.2",
-    "@angular/localize": "~21.1.2",
-    "@angular/platform-browser": "~21.1.2",
-    "@angular/platform-browser-dynamic": "~21.1.2",
-    "@angular/router": "~21.1.2",
+    "@angular/cdk": "^21.1.3",
+    "@angular/common": "~21.1.3",
+    "@angular/compiler": "~21.1.3",
+    "@angular/core": "~21.1.3",
+    "@angular/forms": "~21.1.3",
+    "@angular/localize": "~21.1.3",
+    "@angular/platform-browser": "~21.1.3",
+    "@angular/platform-browser-dynamic": "~21.1.3",
+    "@angular/router": "~21.1.3",
     "@ng-bootstrap/ng-bootstrap": "^20.0.0",
     "@ng-select/ng-select": "^21.2.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
@@ -27,12 +27,12 @@
     "bootstrap": "^5.3.8",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
-    "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^10.1.0",
     "ngx-cookie-service": "^21.1.0",
     "ngx-device-detector": "^11.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^17.0.1",
+    "ngx-ui-tour-ng-bootstrap": "^18.0.0",
+    "pdfjs-dist": "^5.4.624",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
@@ -42,20 +42,20 @@
   "devDependencies": {
     "@angular-builders/custom-webpack": "^21.0.3",
     "@angular-builders/jest": "^21.0.3",
-    "@angular-devkit/core": "^21.1.2",
-    "@angular-devkit/schematics": "^21.1.2",
+    "@angular-devkit/core": "^21.1.3",
+    "@angular-devkit/schematics": "^21.1.3",
     "@angular-eslint/builder": "21.2.0",
     "@angular-eslint/eslint-plugin": "21.2.0",
     "@angular-eslint/eslint-plugin-template": "21.2.0",
     "@angular-eslint/schematics": "21.2.0",
     "@angular-eslint/template-parser": "21.2.0",
-    "@angular/build": "^21.1.2",
-    "@angular/cli": "~21.1.2",
-    "@angular/compiler-cli": "~21.1.2",
+    "@angular/build": "^21.1.3",
+    "@angular/cli": "~21.1.3",
+    "@angular/compiler-cli": "~21.1.3",
     "@codecov/webpack-plugin": "^1.9.1",
-    "@playwright/test": "^1.58.1",
+    "@playwright/test": "^1.58.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.2.0",
+    "@types/node": "^25.2.1",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "@typescript-eslint/utils": "^8.54.0",
@@ -68,7 +68,7 @@
     "prettier-plugin-organize-imports": "^4.3.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.9.3",
-    "webpack": "^5.103.0"
+    "webpack": "^5.105.0"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

src-ui/setup-jest.ts

@@ -100,10 +100,10 @@ const mock = () => {
   }
 }
 
-Object.defineProperty(window, 'open', { value: jest.fn() })
-Object.defineProperty(window, 'localStorage', { value: mock() })
-Object.defineProperty(window, 'sessionStorage', { value: mock() })
-Object.defineProperty(window, 'getComputedStyle', {
+Object.defineProperty(globalThis, 'open', { value: jest.fn() })
+Object.defineProperty(globalThis, 'localStorage', { value: mock() })
+Object.defineProperty(globalThis, 'sessionStorage', { value: mock() })
+Object.defineProperty(globalThis, 'getComputedStyle', {
   value: () => ['-webkit-appearance'],
 })
 Object.defineProperty(navigator, 'clipboard', {
@@ -115,13 +115,33 @@ Object.defineProperty(navigator, 'canShare', { value: () => true })
 if (!navigator.share) {
   Object.defineProperty(navigator, 'share', { value: jest.fn() })
 }
-if (!URL.createObjectURL) {
-  Object.defineProperty(window.URL, 'createObjectURL', { value: jest.fn() })
+if (!globalThis.URL.createObjectURL) {
+  Object.defineProperty(globalThis.URL, 'createObjectURL', { value: jest.fn() })
 }
-if (!URL.revokeObjectURL) {
-  Object.defineProperty(window.URL, 'revokeObjectURL', { value: jest.fn() })
+if (!globalThis.URL.revokeObjectURL) {
+  Object.defineProperty(globalThis.URL, 'revokeObjectURL', { value: jest.fn() })
 }
-Object.defineProperty(window, 'ResizeObserver', { value: mock() })
+class MockResizeObserver {
+  private readonly callback: ResizeObserverCallback
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+  }
+
+  observe = jest.fn()
+  unobserve = jest.fn()
+  disconnect = jest.fn()
+
+  trigger = (entries: ResizeObserverEntry[] = []) => {
+    this.callback(entries, this)
+  }
+}
+
+Object.defineProperty(globalThis, 'ResizeObserver', {
+  writable: true,
+  configurable: true,
+  value: MockResizeObserver,
+})
 
 if (typeof IntersectionObserver === 'undefined') {
   class MockIntersectionObserver {
@@ -136,7 +156,7 @@ if (typeof IntersectionObserver === 'undefined') {
     takeRecords = jest.fn()
   }
 
-  Object.defineProperty(window, 'IntersectionObserver', {
+  Object.defineProperty(globalThis, 'IntersectionObserver', {
     writable: true,
     configurable: true,
     value: MockIntersectionObserver,

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.spec.ts

@@ -9,7 +9,11 @@ import {
 import { Router, RouterModule } from '@angular/router'
 import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import {
+  provideUiTour,
+  TourNgBootstrap,
+  TourService,
+} from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from './app-routing.module'
 import { AppComponent } from './app.component'
@@ -40,12 +44,12 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
       imports: [
-        TourNgBootstrapModule,
         RouterModule.forRoot(routes),
         NgbModalModule,
         AppComponent,
         ToastsComponent,
         FileDropComponent,
+        TourNgBootstrap,
         NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
@@ -53,6 +57,7 @@ describe('AppComponent', () => {
         DirtySavedViewGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 

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

@@ -1,6 +1,6 @@
 import { Component, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core'
 import { Router, RouterOutlet } from '@angular/router'
-import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { first, Subscription } from 'rxjs'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
 import { FileDropComponent } from './components/file-drop/file-drop.component'
@@ -21,12 +21,7 @@ import { WebsocketStatusService } from './services/websocket-status.service'
   selector: 'pngx-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  imports: [
-    FileDropComponent,
-    ToastsComponent,
-    TourNgBootstrapModule,
-    RouterOutlet,
-  ],
+  imports: [FileDropComponent, ToastsComponent, TourNgBootstrap, RouterOutlet],
 })
 export class AppComponent implements OnInit, OnDestroy {
   private settings = inject(SettingsService)
@@ -167,108 +162,91 @@ export class AppComponent implements OnInit, OnDestroy {
         })
     }
 
-    const prevBtnTitle = $localize`Prev`
-    const nextBtnTitle = $localize`Next`
-    const endBtnTitle = $localize`End`
-
-    this.tourService.initialize(
-      [
-        {
-          anchorId: 'tour.dashboard',
-          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
-          route: '/dashboard',
-          delayAfterNavigation: 500,
-          isOptional: false,
-        },
-        {
-          anchorId: 'tour.upload-widget',
-          content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.`,
-          route: '/dashboard',
-        },
-        {
-          anchorId: 'tour.documents',
-          content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-          delayAfterNavigation: 500,
-          placement: 'bottom',
-        },
-        {
-          anchorId: 'tour.documents-filter-editor',
-          content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-          placement: 'bottom',
-        },
-        {
-          anchorId: 'tour.documents-views',
-          content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
-          route: '/documents?sort=created&reverse=1&page=1',
-        },
-        {
-          anchorId: 'tour.tags',
-          content: $localize`Tags, correspondents, document types and storage paths can all be managed using these pages. They can also be created from the document edit view.`,
-          route: '/tags',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.mail',
-          content: $localize`Manage e-mail accounts and rules for automatically importing documents.`,
-          route: '/mail',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.workflows',
-          content: $localize`Workflows give you more control over the document pipeline.`,
-          route: '/workflows',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.file-tasks',
-          content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
-          route: '/tasks',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.settings',
-          content: $localize`Check out the settings for various tweaks to the web app.`,
-          route: '/settings',
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-        {
-          anchorId: 'tour.outro',
-          title: $localize`Thank you! 🙏`,
-          content:
-            $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
-            '<br/><br/>' +
-            $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
-          route: '/dashboard',
-          isOptional: false,
-          backdropConfig: {
-            offset: 0,
-          },
-        },
-      ],
+    this.tourService.initialize([
       {
-        enableBackdrop: true,
+        anchorId: 'tour.dashboard',
+        content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
+        route: '/dashboard',
+        delayAfterNavigation: 500,
+        isOptional: false,
+      },
+      {
+        anchorId: 'tour.upload-widget',
+        content: $localize`Drag-and-drop documents here to start uploading or place them in the consume folder. You can also drag-and-drop documents anywhere on all other pages of the web app. Once you do, Paperless-ngx will start training its machine learning algorithms.`,
+        route: '/dashboard',
+      },
+      {
+        anchorId: 'tour.documents',
+        content: $localize`The documents list shows all of your documents and allows for filtering as well as bulk-editing. There are three different view styles: list, small cards and large cards. A list of documents currently opened for editing is shown in the sidebar.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+        delayAfterNavigation: 500,
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-filter-editor',
+        content: $localize`The filtering tools allow you to quickly find documents using various searches, dates, tags, etc.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+        placement: 'bottom',
+      },
+      {
+        anchorId: 'tour.documents-views',
+        content: $localize`Any combination of filters can be saved as a 'view' which can then be displayed on the dashboard and / or sidebar.`,
+        route: '/documents?sort=created&reverse=1&page=1',
+      },
+      {
+        anchorId: 'tour.tags',
+        content: $localize`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: 10,
+          offset: 0,
         },
-        prevBtnTitle,
-        nextBtnTitle,
-        endBtnTitle,
-        isOptional: true,
-        useLegacyTitle: true,
-      }
-    )
+      },
+      {
+        anchorId: 'tour.mail',
+        content: $localize`Manage e-mail accounts and rules for automatically importing documents.`,
+        route: '/mail',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.workflows',
+        content: $localize`Workflows give you more control over the document pipeline.`,
+        route: '/workflows',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.file-tasks',
+        content: $localize`File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process.`,
+        route: '/tasks',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.settings',
+        content: $localize`Check out the settings for various tweaks to the web app.`,
+        route: '/settings',
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+      {
+        anchorId: 'tour.outro',
+        title: $localize`Thank you! 🙏`,
+        content:
+          $localize`There are <em>tons</em> more features and info we didn't cover here, but this should get you started. Check out the documentation or visit the project on GitHub to learn more or to report issues.` +
+          '<br/><br/>' +
+          $localize`Lastly, on behalf of every contributor to this community-supported project, thank you for using Paperless-ngx!`,
+        route: '/dashboard',
+        isOptional: false,
+        backdropConfig: {
+          offset: 0,
+        },
+      },
+    ])
 
     this.tourService.start$.subscribe(() => {
       this.renderer.addClass(document.body, 'tour-active')

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>
@@ -222,8 +222,8 @@
               </div>
               <div class="col">
                 <select class="form-select" formControlName="pdfViewerDefaultZoom">
-                  <option [ngValue]="ZoomSetting.PageWidth" i18n>Fit width</option>
-                  <option [ngValue]="ZoomSetting.PageFit" i18n>Fit page</option>
+                  <option [ngValue]="PdfZoomScale.PageWidth" i18n>Fit width</option>
+                  <option [ngValue]="PdfZoomScale.PageFit" i18n>Fit page</option>
                 </select>
                 <p class="small text-muted mt-1" i18n>Only applies to the Paperless-ngx PDF viewer.</p>
               </div>

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

@@ -16,6 +16,7 @@ import {
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import {
@@ -147,6 +148,7 @@ describe('SettingsComponent', () => {
         PermissionsGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 

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

@@ -65,8 +65,8 @@ import { PermissionsUserComponent } from '../../common/input/permissions/permiss
 import { SelectComponent } from '../../common/input/select/select.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { PdfEditorEditMode } from '../../common/pdf-editor/pdf-editor-edit-mode'
+import { PdfZoomScale } from '../../common/pdf-viewer/pdf-viewer.types'
 import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
-import { ZoomSetting } from '../../document-detail/zoom-setting'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 enum SettingsNavIDs {
@@ -196,7 +196,7 @@ export class SettingsComponent
 
   public readonly GlobalSearchType = GlobalSearchType
 
-  public readonly ZoomSetting = ZoomSetting
+  public readonly PdfZoomScale = PdfZoomScale
 
   public readonly PdfEditorEditMode = PdfEditorEditMode
 

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

@@ -16,6 +16,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { provideUiTour } from 'ngx-ui-tour-ng-bootstrap'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
 import { SavedView } from 'src/app/data/saved-view'
@@ -27,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'
@@ -157,6 +161,7 @@ describe('AppFrameComponent', () => {
         PermissionsGuard,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting(),
+        provideUiTour(),
       ],
     }).compileComponents()
 
@@ -238,9 +243,19 @@ describe('AppFrameComponent', () => {
 
   it('should support toggling slim sidebar and saving', fakeAsync(() => {
     const saveSettingSpy = jest.spyOn(settingsService, 'set')
+    settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [])
     expect(component.slimSidebarEnabled).toBeFalsy()
     expect(component.slimSidebarAnimating).toBeFalsy()
     component.toggleSlimSidebar()
+    const requests = httpTestingController.match(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    expect(requests).toHaveLength(1)
+    expect(requests[0].request.body.settings.slim_sidebar).toBe(true)
+    expect(
+      requests[0].request.body.settings.attributes_sections_collapsed
+    ).toEqual(['attributes'])
+    requests[0].flush({ success: true })
     expect(component.slimSidebarAnimating).toBeTruthy()
     tick(200)
     expect(component.slimSidebarAnimating).toBeFalsy()
@@ -249,6 +264,10 @@ describe('AppFrameComponent', () => {
       SETTINGS_KEYS.SLIM_SIDEBAR,
       true
     )
+    expect(saveSettingSpy).toHaveBeenCalledWith(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED,
+      ['attributes']
+    )
   }))
 
   it('should show error on toggle slim sidebar if store settings fails', () => {
@@ -256,7 +275,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',
@@ -371,4 +390,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

@@ -16,12 +16,12 @@ import {
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { 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'
@@ -69,7 +69,7 @@ import { ToastsDropdownComponent } from './toasts-dropdown/toasts-dropdown.compo
     NgbNavModule,
     NgxBootstrapIconsModule,
     DragDropModule,
-    TourNgBootstrapModule,
+    TourNgBootstrap,
   ],
 })
 export class AppFrameComponent
@@ -140,12 +140,35 @@ export class AppFrameComponent
 
   toggleSlimSidebar(): void {
     this.slimSidebarAnimating = true
-    this.slimSidebarEnabled = !this.slimSidebarEnabled
+    const slimSidebarEnabled = !this.slimSidebarEnabled
+    this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, slimSidebarEnabled)
+    if (slimSidebarEnabled) {
+      this.settingsService.set(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED, [
+        CollapsibleSection.ATTRIBUTES,
+      ])
+    }
+    this.settingsService
+      .storeSettings()
+      .pipe(first())
+      .subscribe({
+        error: (error) => {
+          this.toastService.showError(
+            $localize`An error occurred while saving settings.`
+          )
+          console.warn(error)
+        },
+      })
     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 +190,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 +234,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">
@@ -430,6 +430,31 @@
           </div>
         </div>
       }
+      @case (WorkflowActionType.PasswordRemoval) {
+        <div class="row">
+          <div class="col">
+            <p class="small" i18n>
+              One password per line. The workflow will try them in order until one succeeds.
+            </p>
+            <pngx-input-textarea
+              i18n-title
+              title="Passwords"
+              formControlName="passwords"
+              rows="4"
+              [error]="error?.actions?.[i]?.passwords"
+              hint="Passwords are stored in plain text. Use with caution."
+              i18n-hint
+            ></pngx-input-textarea>
+          </div>
+        </div>
+      }
+      @case (WorkflowActionType.MoveToTrash) {
+        <div class="row">
+          <div class="col">
+            <p class="text-muted small" i18n>The document will be moved to the trash at the end of the workflow run.</p>
+          </div>
+        </div>
+      }
     }
   </div>
 </ng-template>

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

@@ -3,6 +3,7 @@ import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
+  FormArray,
   FormControl,
   FormGroup,
   FormsModule,
@@ -994,4 +995,32 @@ describe('WorkflowEditDialogComponent', () => {
     component.removeSelectedCustomField(3, formGroup)
     expect(formGroup.get('assign_custom_fields').value).toEqual([])
   })
+
+  it('should handle parsing of passwords from array to string and back on save', () => {
+    const passwordAction: WorkflowAction = {
+      id: 1,
+      type: WorkflowActionType.PasswordRemoval,
+      passwords: ['pass1', 'pass2'],
+    }
+    component.object = {
+      name: 'Workflow with Passwords',
+      id: 1,
+      order: 1,
+      enabled: true,
+      triggers: [],
+      actions: [passwordAction],
+    }
+    component.ngOnInit()
+
+    const formActions = component.objectForm.get('actions') as FormArray
+    expect(formActions.value[0].passwords).toBe('pass1\npass2')
+    formActions.at(0).get('passwords').setValue('pass1\npass2\npass3')
+    component.save()
+
+    expect(component.objectForm.get('actions').value[0].passwords).toEqual([
+      'pass1',
+      'pass2',
+      'pass3',
+    ])
+  })
 })

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

@@ -139,6 +139,14 @@ export const WORKFLOW_ACTION_OPTIONS = [
     id: WorkflowActionType.Webhook,
     name: $localize`Webhook`,
   },
+  {
+    id: WorkflowActionType.PasswordRemoval,
+    name: $localize`Password removal`,
+  },
+  {
+    id: WorkflowActionType.MoveToTrash,
+    name: $localize`Move to trash`,
+  },
 ]
 
 export enum TriggerFilterType {
@@ -1202,11 +1210,25 @@ export class WorkflowEditDialogComponent
           headers: new FormControl(action.webhook?.headers),
           include_document: new FormControl(!!action.webhook?.include_document),
         }),
+        passwords: new FormControl(
+          this.formatPasswords(action.passwords ?? [])
+        ),
       }),
       { emitEvent }
     )
   }
 
+  private formatPasswords(passwords: string[] = []): string {
+    return passwords.join('\n')
+  }
+
+  private parsePasswords(value: string = ''): string[] {
+    return value
+      .split(/[\n,]+/)
+      .map((entry) => entry.trim())
+      .filter((entry) => entry.length > 0)
+  }
+
   private updateAllTriggerActionFields(emitEvent: boolean = false) {
     this.triggerFields.clear({ emitEvent: false })
     this.object?.triggers.forEach((trigger) => {
@@ -1331,6 +1353,7 @@ export class WorkflowEditDialogComponent
         headers: null,
         include_document: false,
       },
+      passwords: [],
     }
     this.object.actions.push(action)
     this.createActionField(action)
@@ -1367,6 +1390,7 @@ export class WorkflowEditDialogComponent
         if (action.type !== WorkflowActionType.Email) {
           action.email = null
         }
+        action.passwords = this.parsePasswords(action.passwords as any)
       })
     super.save()
   }

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}}
           }
@@ -15,7 +15,7 @@
         <span class="h6 mb-0 mt-1 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
       }
       @if (info) {
-        <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
+        <button class="btn btn-sm btn-link text-muted p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true">
           <i-bs name="question-circle"></i-bs>
         </button>
         <ng-template #infoPopover>
@@ -26,6 +26,9 @@
           }
         </ng-template>
       }
+      @if (loading) {
+        <output class="spinner-border spinner-border-sm fs-6 fw-normal" aria-hidden="true"><span class="visually-hidden" i18n>Loading...</span></output>
+      }
     </h3>
   </div>
   <div class="btn-toolbar col col-md-auto gap-2">

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

@@ -3,14 +3,14 @@ import { Component, Input, inject } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { TourNgBootstrap } from 'ngx-ui-tour-ng-bootstrap'
 import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'pngx-page-header',
   templateUrl: './page-header.component.html',
   styleUrls: ['./page-header.component.scss'],
-  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrapModule],
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule, TourNgBootstrap],
 })
 export class PageHeaderComponent {
   private titleService = inject(Title)
@@ -42,6 +42,9 @@ export class PageHeaderComponent {
   @Input()
   infoLink: string
 
+  @Input()
+  loading: boolean = false
+
   public copyID() {
     this.copied = this.clipboard.copy(this.id.toString())
     clearTimeout(this.copyTimeout)

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

@@ -1,4 +1,4 @@
-<pdf-viewer [src]="pdfSrc" [render-text]="false" zoom="0.4" (after-load-complete)="pdfLoaded($event)"></pdf-viewer>
+<pngx-pdf-viewer class="visually-hidden" [src]="pdfSrc" [renderMode]="PdfRenderMode.Single" [page]="1" [selectable]="false" (afterLoadComplete)="pdfLoaded($event)"></pngx-pdf-viewer>
 <div class="modal-header">
   <h4 class="modal-title">{{ title }}</h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
@@ -59,7 +59,7 @@
                 <span class="placeholder w-100 h-100"></span>
               </div>
             }
-            <pdf-viewer class="fade" [class.show]="p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [original-size]="false" [show-all]="false" [render-text]="false" (page-rendered)="p.loaded = true"></pdf-viewer>
+            <pngx-pdf-viewer class="fade" [class.show]="p.loaded" [src]="pdfSrc" [page]="p.page" [rotation]="p.rotate" [renderMode]="PdfRenderMode.Single" (rendered)="p.loaded = true"></pngx-pdf-viewer>
           } @placeholder {
             <div class="placeholder-glow w-100 h-100 z-10">
               <span class="placeholder w-100 h-100"></span>

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

@@ -15,13 +15,13 @@
   background-color: gray;
   height: 240px;
 
-  pdf-viewer {
+  pngx-pdf-viewer {
     width: 100%;
     height: 100%;
   }
 }
 
-::ng-deep .ng2-pdf-viewer-container {
+::ng-deep .pngx-pdf-viewer-container {
   overflow: hidden;
 }
 

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

@@ -6,12 +6,16 @@ import {
 import { Component, inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { PDFDocumentProxy, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
+import {
+  PdfRenderMode,
+  PngxPdfDocumentProxy,
+} from '../pdf-viewer/pdf-viewer.types'
 import { PdfEditorEditMode } from './pdf-editor-edit-mode'
 
 interface PageOperation {
@@ -29,11 +33,12 @@ interface PageOperation {
   imports: [
     DragDropModule,
     FormsModule,
-    PdfViewerModule,
     NgxBootstrapIconsModule,
+    PngxPdfViewerComponent,
   ],
 })
 export class PDFEditorComponent extends ConfirmDialogComponent {
+  PdfRenderMode = PdfRenderMode
   public PdfEditorEditMode = PdfEditorEditMode
 
   private documentService = inject(DocumentService)
@@ -53,7 +58,7 @@ export class PDFEditorComponent extends ConfirmDialogComponent {
     return this.documentService.getPreviewUrl(this.documentID)
   }
 
-  pdfLoaded(pdf: PDFDocumentProxy) {
+  pdfLoaded(pdf: PngxPdfDocumentProxy) {
     this.totalPages = pdf.numPages
     this.pages = Array.from({ length: this.totalPages }, (_, i) => ({
       page: i + 1,

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

@@ -0,0 +1,3 @@
+<div #container class="pngx-pdf-viewer-container">
+  <div #viewer class="pdfViewer"></div>
+</div>

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

@@ -0,0 +1,157 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+:host ::ng-deep .pngx-pdf-viewer-container {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+
+:host ::ng-deep .pdfViewer {
+  --scale-factor: 1;
+  --page-bg-color: unset;
+  padding-bottom: 0;
+}
+
+:host ::ng-deep .pdfViewer .page {
+  --user-unit: 1;
+  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+  direction: ltr;
+  margin: 0 auto 10px;
+  border: 0;
+  position: relative;
+  overflow: visible;
+  background-clip: content-box;
+  background-color: var(--page-bg-color, rgb(255 255 255));
+}
+
+:host ::ng-deep .pdfViewer > .page:last-of-type {
+  margin-bottom: 0;
+}
+
+:host ::ng-deep .pdfViewer.singlePageView {
+  display: inline-block;
+}
+
+:host ::ng-deep .pdfViewer.singlePageView .page {
+  margin: 0;
+  border: none;
+}
+
+:host ::ng-deep .pdfViewer .canvasWrapper {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+:host ::ng-deep .pdfViewer .canvasWrapper canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  contain: content;
+}
+
+:host ::ng-deep .textLayer {
+  position: absolute;
+  text-align: initial;
+  inset: 0;
+  overflow: clip;
+  opacity: 1;
+  line-height: 1;
+  text-size-adjust: none;
+  transform-origin: 0 0;
+  caret-color: CanvasText;
+  z-index: 0;
+  user-select: text;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+}
+
+:host ::ng-deep .textLayer.highlighting {
+  touch-action: none;
+}
+
+:host ::ng-deep .textLayer :is(span, br) {
+  position: absolute;
+  white-space: pre;
+  color: transparent;
+  cursor: text;
+  transform-origin: 0% 0%;
+}
+
+:host ::ng-deep .textLayer > :not(.markedContent),
+:host ::ng-deep .textLayer .markedContent span:not(.markedContent) {
+  z-index: 1;
+  --font-height: 0;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  --scale-x: 1;
+  --rotate: 0deg;
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x))
+    scale(var(--min-font-size-inv));
+}
+
+:host ::ng-deep .textLayer .markedContent {
+  display: contents;
+}
+
+:host ::ng-deep .textLayer span[role='img'] {
+  user-select: none;
+  cursor: default;
+}
+
+:host ::ng-deep .textLayer .highlight {
+  --highlight-bg-color: rgb(180 0 170 / 0.25);
+  --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
+  --highlight-backdrop-filter: none;
+  --highlight-selected-backdrop-filter: none;
+  margin: -1px;
+  padding: 1px;
+  background-color: var(--highlight-bg-color);
+  backdrop-filter: var(--highlight-backdrop-filter);
+  border-radius: 4px;
+}
+
+:host ::ng-deep .appended:is(.textLayer .highlight) {
+  position: initial;
+}
+
+:host ::ng-deep .begin:is(.textLayer .highlight) {
+  border-radius: 4px 0 0 4px;
+}
+
+:host ::ng-deep .end:is(.textLayer .highlight) {
+  border-radius: 0 4px 4px 0;
+}
+
+:host ::ng-deep .middle:is(.textLayer .highlight) {
+  border-radius: 0;
+}
+
+:host ::ng-deep .selected:is(.textLayer .highlight) {
+  background-color: var(--highlight-selected-bg-color);
+}
+
+:host ::ng-deep .textLayer ::selection {
+  background: rgba(30, 100, 255, 0.35);
+}
+
+:host ::ng-deep .annotationLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  & .annotationTextContent {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,326 @@
+import { SimpleChange } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import * as pdfjs from 'pdfjs-dist/legacy/build/pdf.mjs'
+import { PDFSinglePageViewer, PDFViewer } from 'pdfjs-dist/web/pdf_viewer.mjs'
+import { PngxPdfViewerComponent } from './pdf-viewer.component'
+import { PdfRenderMode, PdfZoomLevel, PdfZoomScale } from './pdf-viewer.types'
+
+describe('PngxPdfViewerComponent', () => {
+  let fixture: ComponentFixture<PngxPdfViewerComponent>
+  let component: PngxPdfViewerComponent
+
+  const initComponent = async (src = 'test.pdf') => {
+    component.src = src
+    fixture.detectChanges()
+    await fixture.whenStable()
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PngxPdfViewerComponent],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PngxPdfViewerComponent)
+    component = fixture.componentInstance
+  })
+
+  it('loads a document and emits events', async () => {
+    const loadSpy = jest.fn()
+    const renderedSpy = jest.fn()
+    component.afterLoadComplete.subscribe(loadSpy)
+    component.rendered.subscribe(renderedSpy)
+
+    await initComponent()
+
+    expect(pdfjs.GlobalWorkerOptions.workerSrc).toBe(
+      '/assets/js/pdf.worker.min.mjs'
+    )
+    const isVisible = (component as any).findController.onIsPageVisible as
+      | (() => boolean)
+      | undefined
+    expect(isVisible?.()).toBe(true)
+    expect(loadSpy).toHaveBeenCalledWith(
+      expect.objectContaining({ numPages: 1 })
+    )
+    expect(renderedSpy).toHaveBeenCalled()
+    expect((component as any).pdfViewer).toBeInstanceOf(PDFViewer)
+  })
+
+  it('initializes single-page viewer and disables text layer', async () => {
+    component.renderMode = PdfRenderMode.Single
+    component.selectable = false
+
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFSinglePageViewer & {
+      options: Record<string, unknown>
+    }
+    expect(viewer).toBeInstanceOf(PDFSinglePageViewer)
+    expect(viewer.options.textLayerMode).toBe(0)
+  })
+
+  it('applies zoom, rotation, and page changes', async () => {
+    await initComponent()
+
+    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
+    component.page = 2
+
+    component.ngOnChanges({
+      zoomScale: new SimpleChange(
+        PdfZoomScale.PageWidth,
+        PdfZoomScale.PageFit,
+        false
+      ),
+      zoom: new SimpleChange(PdfZoomLevel.One, PdfZoomLevel.Two, false),
+      rotation: new SimpleChange(undefined, 90, false),
+      page: new SimpleChange(undefined, 2, false),
+    })
+
+    expect(viewer.pagesRotation).toBe(90)
+    expect(viewer.currentPageNumber).toBe(2)
+    expect(pageSpy).toHaveBeenCalledWith(2)
+
+    viewer.currentScale = 1
+    ;(component as any).applyScale()
+    expect(viewer.currentScaleValue).toBe(PdfZoomScale.PageFit)
+    expect(viewer.currentScale).toBe(2)
+
+    const applyScaleSpy = jest.spyOn(component as any, 'applyScale')
+    component.page = 2
+    ;(component as any).lastViewerPage = 2
+    ;(component as any).applyViewerState()
+    expect((component as any).lastViewerPage).toBeUndefined()
+    expect(applyScaleSpy).toHaveBeenCalled()
+  })
+
+  it('dispatches find when search query changes after render', async () => {
+    await initComponent()
+
+    const eventBus = (component as any).eventBus as { dispatch: jest.Mock }
+    const dispatchSpy = jest.spyOn(eventBus, 'dispatch')
+
+    ;(component as any).hasRenderedPage = true
+    component.searchQuery = 'needle'
+    component.ngOnChanges({
+      searchQuery: new SimpleChange('', 'needle', false),
+    })
+
+    expect(dispatchSpy).toHaveBeenCalledWith('find', {
+      query: 'needle',
+      caseSensitive: false,
+      highlightAll: true,
+      phraseSearch: true,
+    })
+
+    component.ngOnChanges({
+      searchQuery: new SimpleChange('needle', 'needle', false),
+    })
+    expect(dispatchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('emits error when document load fails', async () => {
+    const errorSpy = jest.fn()
+    component.loadError.subscribe(errorSpy)
+
+    jest.spyOn(pdfjs, 'getDocument').mockImplementationOnce(() => {
+      return {
+        promise: Promise.reject(new Error('boom')),
+        destroy: jest.fn(),
+      } as any
+    })
+
+    await initComponent('bad.pdf')
+
+    expect(errorSpy).toHaveBeenCalled()
+  })
+
+  it('cleans up resources on destroy', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as { cleanup: jest.Mock }
+    const loadingTask = (component as any).loadingTask as unknown as {
+      destroy: jest.Mock
+    }
+    const resizeObserver = (component as any).resizeObserver as unknown as {
+      disconnect: jest.Mock
+    }
+    const eventBus = (component as any).eventBus as { off: jest.Mock }
+
+    jest.spyOn(viewer, 'cleanup')
+    jest.spyOn(loadingTask, 'destroy')
+    jest.spyOn(resizeObserver, 'disconnect')
+    jest.spyOn(eventBus, 'off')
+
+    component.ngOnDestroy()
+
+    expect(eventBus.off).toHaveBeenCalledWith(
+      'pagerendered',
+      expect.any(Function)
+    )
+    expect(eventBus.off).toHaveBeenCalledWith('pagesinit', expect.any(Function))
+    expect(eventBus.off).toHaveBeenCalledWith(
+      'pagechanging',
+      expect.any(Function)
+    )
+    expect(resizeObserver.disconnect).toHaveBeenCalled()
+    expect(loadingTask.destroy).toHaveBeenCalled()
+    expect(viewer.cleanup).toHaveBeenCalled()
+    expect((component as any).pdfViewer).toBeUndefined()
+  })
+
+  it('skips work when viewer is missing or has no pages', () => {
+    const eventBus = (component as any).eventBus as { dispatch: jest.Mock }
+    const dispatchSpy = jest.spyOn(eventBus, 'dispatch')
+    ;(component as any).dispatchFindIfReady()
+    expect(dispatchSpy).not.toHaveBeenCalled()
+    ;(component as any).applyViewerState()
+    ;(component as any).applyScale()
+
+    const viewer = new PDFViewer({ eventBus: undefined })
+    viewer.pagesCount = 0
+    ;(component as any).pdfViewer = viewer
+    viewer.currentScale = 5
+    ;(component as any).applyScale()
+    expect(viewer.currentScale).toBe(5)
+  })
+
+  it('returns early on src change in ngOnChanges', () => {
+    const loadSpy = jest.spyOn(component as any, 'loadDocument')
+    const initSpy = jest.spyOn(component as any, 'initViewer')
+    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(
+        PdfZoomScale.PageWidth,
+        PdfZoomScale.PageFit,
+        false
+      ),
+    })
+
+    expect(loadSpy).toHaveBeenCalled()
+    expect(resizeSpy).not.toHaveBeenCalled()
+    expect(initSpy).not.toHaveBeenCalled()
+    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
+    ;(component as any).pdf = { numPages: 1 }
+
+    fixture.detectChanges()
+
+    expect(applySpy).toHaveBeenCalled()
+  })
+
+  it('skips viewer state after view init when no pdf is available', () => {
+    const applySpy = jest.spyOn(component as any, 'applyViewerState')
+    ;(component as any).hasLoaded = true
+
+    fixture.detectChanges()
+
+    expect(applySpy).not.toHaveBeenCalled()
+  })
+
+  it('does not reload when already loaded', async () => {
+    await initComponent()
+
+    const getDocumentSpy = jest.spyOn(pdfjs, 'getDocument')
+    const callCount = getDocumentSpy.mock.calls.length
+    await (component as any).loadDocument()
+
+    expect(getDocumentSpy).toHaveBeenCalledTimes(callCount)
+  })
+
+  it('runs applyScale on resize observer notifications', async () => {
+    await initComponent()
+
+    const applySpy = jest.spyOn(component as any, 'applyScale')
+    const resizeObserver = (component as any).resizeObserver as {
+      trigger: () => void
+    }
+    resizeObserver.trigger()
+
+    expect(applySpy).toHaveBeenCalled()
+  })
+
+  it('skips page work when no pages are available', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.pagesCount = 0
+    const applyScaleSpy = jest.spyOn(component as any, 'applyScale')
+
+    component.page = undefined
+    ;(component as any).lastViewerPage = 1
+    ;(component as any).applyViewerState()
+
+    expect(applyScaleSpy).not.toHaveBeenCalled()
+    expect((component as any).lastViewerPage).toBe(1)
+  })
+
+  it('falls back to a default zoom when input is invalid', async () => {
+    await initComponent()
+
+    const viewer = (component as any).pdfViewer as PDFViewer
+    viewer.currentScale = 3
+    component.zoom = 'not-a-number' as PdfZoomLevel
+    ;(component as any).applyScale()
+
+    expect(viewer.currentScale).toBe(3)
+  })
+
+  it('re-initializes viewer on selectable or render mode changes', async () => {
+    await initComponent()
+
+    const initSpy = jest.spyOn(component as any, 'initViewer')
+    component.selectable = false
+    component.renderMode = PdfRenderMode.Single
+
+    component.ngOnChanges({
+      selectable: new SimpleChange(true, false, false),
+      renderMode: new SimpleChange(
+        PdfRenderMode.All,
+        PdfRenderMode.Single,
+        false
+      ),
+    })
+
+    expect(initSpy).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,287 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  ViewChild,
+} from '@angular/core'
+import {
+  getDocument,
+  GlobalWorkerOptions,
+  PDFDocumentLoadingTask,
+  PDFDocumentProxy,
+} from 'pdfjs-dist/legacy/build/pdf.mjs'
+import {
+  EventBus,
+  PDFFindController,
+  PDFLinkService,
+  PDFSinglePageViewer,
+  PDFViewer,
+} from 'pdfjs-dist/web/pdf_viewer.mjs'
+import {
+  PdfRenderMode,
+  PdfSource,
+  PdfZoomLevel,
+  PdfZoomScale,
+  PngxPdfDocumentProxy,
+} from './pdf-viewer.types'
+
+@Component({
+  selector: 'pngx-pdf-viewer',
+  templateUrl: './pdf-viewer.component.html',
+  styleUrl: './pdf-viewer.component.scss',
+})
+export class PngxPdfViewerComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
+  @Input() src!: PdfSource
+  @Input() page?: number
+  @Output() pageChange = new EventEmitter<number>()
+  @Input() rotation?: number
+  @Input() renderMode: PdfRenderMode = PdfRenderMode.All
+  @Input() selectable = true
+  @Input() searchQuery = ''
+  @Input() zoom: PdfZoomLevel = PdfZoomLevel.One
+  @Input() zoomScale: PdfZoomScale = PdfZoomScale.PageWidth
+
+  @Output() afterLoadComplete = new EventEmitter<PngxPdfDocumentProxy>()
+  @Output() rendered = new EventEmitter<void>()
+  @Output() loadError = new EventEmitter<unknown>()
+
+  @ViewChild('container', { static: true })
+  private readonly container!: ElementRef<HTMLDivElement>
+
+  @ViewChild('viewer', { static: true })
+  private readonly viewer!: ElementRef<HTMLDivElement>
+
+  private hasLoaded = false
+  private loadingTask?: PDFDocumentLoadingTask
+  private resizeObserver?: ResizeObserver
+  private pdf?: PDFDocumentProxy
+  private pdfViewer?: PDFViewer | PDFSinglePageViewer
+  private hasRenderedPage = false
+  private lastFindQuery = ''
+  private lastViewerPage?: number
+
+  private readonly eventBus = new EventBus()
+  private readonly linkService = new PDFLinkService({ eventBus: this.eventBus })
+  private readonly findController = new PDFFindController({
+    eventBus: this.eventBus,
+    linkService: this.linkService,
+    updateMatchesCountOnProgress: false,
+  })
+
+  private readonly onPageRendered = () => {
+    this.hasRenderedPage = true
+    this.dispatchFindIfReady()
+    this.rendered.emit()
+  }
+  private readonly onPagesInit = () => this.applyViewerState()
+  private readonly onPageChanging = (evt: { pageNumber: number }) => {
+    // Avoid [(page)] two-way binding re-triggers navigation
+    this.lastViewerPage = evt.pageNumber
+    this.pageChange.emit(evt.pageNumber)
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['src']) {
+      this.resetViewerState()
+      if (this.src) {
+        this.loadDocument()
+      }
+      return
+    }
+
+    if (changes['zoomScale']) {
+      this.setupResizeObserver()
+    }
+
+    if (changes['selectable'] || changes['renderMode']) {
+      this.initViewer()
+    }
+
+    if (
+      changes['page'] ||
+      changes['zoom'] ||
+      changes['zoomScale'] ||
+      changes['rotation']
+    ) {
+      this.applyViewerState()
+    }
+
+    if (changes['searchQuery']) {
+      this.dispatchFindIfReady()
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver()
+    this.initViewer()
+    if (!this.hasLoaded) {
+      this.loadDocument()
+      return
+    }
+    if (this.pdf) {
+      this.applyViewerState()
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.eventBus.off('pagerendered', this.onPageRendered)
+    this.eventBus.off('pagesinit', this.onPagesInit)
+    this.eventBus.off('pagechanging', this.onPageChanging)
+    this.resizeObserver?.disconnect()
+    this.loadingTask?.destroy()
+    this.pdfViewer?.cleanup()
+    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
+    }
+
+    this.hasLoaded = true
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+    this.loadingTask?.destroy()
+
+    GlobalWorkerOptions.workerSrc = '/assets/js/pdf.worker.min.mjs'
+    this.loadingTask = getDocument(this.src)
+
+    try {
+      const pdf = await this.loadingTask.promise
+      this.pdf = pdf
+      this.linkService.setDocument(pdf)
+      this.findController.onIsPageVisible = () => true
+      this.pdfViewer?.setDocument(pdf)
+      this.applyViewerState()
+      this.afterLoadComplete.emit(pdf)
+    } catch (err) {
+      this.loadError.emit(err)
+    }
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver?.disconnect()
+    this.resizeObserver = new ResizeObserver(() => {
+      this.applyScale()
+    })
+    this.resizeObserver.observe(this.container.nativeElement)
+  }
+
+  private initViewer(): void {
+    this.viewer.nativeElement.innerHTML = ''
+    this.pdfViewer?.cleanup()
+    this.hasRenderedPage = false
+    this.lastFindQuery = ''
+
+    const textLayerMode = this.selectable === false ? 0 : 1
+    const options = {
+      container: this.container.nativeElement,
+      viewer: this.viewer.nativeElement,
+      eventBus: this.eventBus,
+      linkService: this.linkService,
+      findController: this.findController,
+      textLayerMode,
+      removePageBorders: true,
+    }
+
+    this.pdfViewer =
+      this.renderMode === PdfRenderMode.Single
+        ? new PDFSinglePageViewer(options)
+        : new PDFViewer(options)
+    this.linkService.setViewer(this.pdfViewer)
+
+    this.eventBus.off('pagerendered', this.onPageRendered)
+    this.eventBus.off('pagesinit', this.onPagesInit)
+    this.eventBus.off('pagechanging', this.onPageChanging)
+    this.eventBus.on('pagerendered', this.onPageRendered)
+    this.eventBus.on('pagesinit', this.onPagesInit)
+    this.eventBus.on('pagechanging', this.onPageChanging)
+
+    if (this.pdf) {
+      this.pdfViewer.setDocument(this.pdf)
+      this.applyViewerState()
+    }
+  }
+
+  private applyViewerState(): void {
+    if (!this.pdfViewer) {
+      return
+    }
+    const hasPages = this.pdfViewer.pagesCount > 0
+    if (typeof this.rotation === 'number' && hasPages) {
+      this.pdfViewer.pagesRotation = this.rotation
+    }
+    if (
+      typeof this.page === 'number' &&
+      hasPages &&
+      this.page !== this.lastViewerPage
+    ) {
+      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
+    }
+    if (hasPages) {
+      this.applyScale()
+    }
+    this.dispatchFindIfReady()
+  }
+
+  private applyScale(): void {
+    if (!this.pdfViewer) {
+      return
+    }
+    if (this.pdfViewer.pagesCount === 0) {
+      return
+    }
+    const zoomFactor = Number(this.zoom) || 1
+    this.pdfViewer.currentScaleValue = this.zoomScale
+    if (zoomFactor !== 1) {
+      this.pdfViewer.currentScale = this.pdfViewer.currentScale * zoomFactor
+    }
+  }
+
+  private dispatchFindIfReady(): void {
+    if (!this.hasRenderedPage) {
+      return
+    }
+    const query = this.searchQuery.trim()
+    if (query === this.lastFindQuery) {
+      return
+    }
+    this.lastFindQuery = query
+    this.eventBus.dispatch('find', {
+      query,
+      caseSensitive: false,
+      highlightAll: query.length > 0,
+      phraseSearch: true,
+    })
+  }
+}

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

@@ -0,0 +1,25 @@
+export type PngxPdfDocumentProxy = {
+  numPages: number
+}
+
+export type PdfSource = string | { url: string; password?: string }
+
+export enum PdfRenderMode {
+  Single = 'single',
+  All = 'all',
+}
+
+export enum PdfZoomScale {
+  PageFit = 'page-fit',
+  PageWidth = 'page-width',
+}
+
+export enum PdfZoomLevel {
+  Quarter = '.25',
+  Half = '.5',
+  ThreeQuarters = '.75',
+  One = '1',
+  OneAndHalf = '1.5',
+  Two = '2',
+  Three = '3',
+}

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/preview-popup/preview-popup.component.html

@@ -23,14 +23,12 @@
           </div>
         }
         @if (!requiresPassword) {
-          <pdf-viewer
+          <pngx-pdf-viewer
             [src]="previewUrl"
-            [original-size]="false"
-            [show-borders]="false"
-            [show-all]="true"
-            (text-layer-rendered)="onPageRendered()"
-            (error)="onError($event)" #pdfViewer>
-          </pdf-viewer>
+            [renderMode]="PdfRenderMode.All"
+            [searchQuery]="documentService.searchQuery"
+            (loadError)="onError($event)">
+          </pngx-pdf-viewer>
         }
       }
     }

src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts

@@ -12,6 +12,7 @@ import { of, throwError } from 'rxjs'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
 import { PreviewPopupComponent } from './preview-popup.component'
 
 const doc = {
@@ -78,7 +79,7 @@ describe('PreviewPopupComponent', () => {
     component.popover.open()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).toBeNull()
-    expect(fixture.debugElement.query(By.css('pdf-viewer'))).not.toBeNull()
+    expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
   })
 
   it('should show lock icon on password error', () => {
@@ -159,23 +160,15 @@ describe('PreviewPopupComponent', () => {
     expect(component.popover.isOpen()).toBeFalsy()
   })
 
-  it('should dispatch find event on viewer loaded if searchQuery set', () => {
+  it('should pass searchQuery to viewer', () => {
     documentService.searchQuery = 'test'
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
     component.popover.open()
-    jest.advanceTimersByTime(1000)
     fixture.detectChanges()
-    // normally setup by pdf-viewer
-    jest.replaceProperty(component.pdfViewer, 'eventBus', {
-      dispatch: jest.fn(),
-    } as any)
-    const dispatchSpy = jest.spyOn(component.pdfViewer.eventBus, 'dispatch')
-    component.onPageRendered()
-    expect(dispatchSpy).toHaveBeenCalledWith('find', {
-      query: 'test',
-      caseSensitive: false,
-      highlightAll: true,
-      phraseSearch: true,
-    })
+    const viewer = fixture.debugElement.query(
+      By.directive(PngxPdfViewerComponent)
+    )
+    expect(viewer).not.toBeNull()
+    expect(viewer.componentInstance.searchQuery).toBe('test')
   })
 })

src-ui/src/app/components/common/preview-popup/preview-popup.component.ts

@@ -1,7 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, inject, Input, OnDestroy, ViewChild } from '@angular/core'
 import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
-import { PdfViewerComponent, PdfViewerModule } from 'ng2-pdf-viewer'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first, Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
@@ -10,6 +9,8 @@ import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import { SafeUrlPipe } from 'src/app/pipes/safeurl.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { SettingsService } from 'src/app/services/settings.service'
+import { PngxPdfViewerComponent } from '../pdf-viewer/pdf-viewer.component'
+import { PdfRenderMode } from '../pdf-viewer/pdf-viewer.types'
 
 @Component({
   selector: 'pngx-preview-popup',
@@ -18,14 +19,15 @@ import { SettingsService } from 'src/app/services/settings.service'
   imports: [
     NgbPopoverModule,
     DocumentTitlePipe,
-    PdfViewerModule,
+    PngxPdfViewerComponent,
     SafeUrlPipe,
     NgxBootstrapIconsModule,
   ],
 })
 export class PreviewPopupComponent implements OnDestroy {
+  PdfRenderMode = PdfRenderMode
   private settingsService = inject(SettingsService)
-  private documentService = inject(DocumentService)
+  public readonly documentService = inject(DocumentService)
   private http = inject(HttpClient)
 
   private _document: Document
@@ -61,8 +63,6 @@ export class PreviewPopupComponent implements OnDestroy {
 
   @ViewChild('popover') popover: NgbPopover
 
-  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
-
   mouseOnPreview: boolean = false
 
   popoverClass: string = 'shadow popover-preview'
@@ -114,18 +114,6 @@ export class PreviewPopupComponent implements OnDestroy {
     }
   }
 
-  onPageRendered() {
-    // Only triggered by the pngx pdf viewer
-    if (this.documentService.searchQuery) {
-      this.pdfViewer.eventBus.dispatch('find', {
-        query: this.documentService.searchQuery,
-        caseSensitive: false,
-        highlightAll: true,
-        phraseSearch: true,
-      })
-    }
-  }
-
   mouseEnterPreview() {
     this.mouseOnPreview = true
     if (!this.popover.isOpen()) {

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>