Tasks and trash to direct signals

document list
dashboard / widget frame
stats

.github/workflows/ci-backend.yml

@@ -24,7 +24,7 @@ jobs:
       backend_changed: ${{ steps.force.outputs.run_all == 'true' || steps.filter.outputs.backend == 'true' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -87,7 +87,7 @@ jobs:
       fail-fast: false
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Start containers
@@ -96,11 +96,11 @@ jobs:
           docker compose --file docker/compose/docker-compose.ci-test.yml up --detach
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: "${{ matrix.python-version }}"
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true
@@ -141,13 +141,13 @@ jobs:
             pytest
       - name: Upload test results to Codecov
         if: always()
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         with:
           flags: backend-python-${{ matrix.python-version }}
           files: junit.xml
           report_type: test_results
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         with:
           flags: backend-python-${{ matrix.python-version }}
           files: coverage.xml
@@ -169,16 +169,16 @@ jobs:
       PAPERLESS_SECRET_KEY: "ci-typing-not-a-real-secret"
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: "${{ env.DEFAULT_PYTHON }}"
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true
@@ -202,7 +202,7 @@ jobs:
             check \
             src/
       - name: Cache Mypy
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: .mypy_cache
           # Keyed by OS, Python version, and dependency hashes

.github/workflows/ci-docker.yml

@@ -41,7 +41,7 @@ jobs:
       ref-name: ${{ steps.ref.outputs.name }}
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Determine ref name
@@ -106,9 +106,9 @@ jobs:
           echo "repository=${repo_name}"
           echo "name=${repo_name}" >> $GITHUB_OUTPUT
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -121,7 +121,7 @@ jobs:
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
       - name: Docker metadata
         id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ${{ env.REGISTRY }}/${{ steps.repo.outputs.name }}
@@ -132,7 +132,7 @@ jobs:
             type=semver,pattern={{major}}.{{minor}}
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
+        uses: docker/build-push-action@f9f3042f7e2789586610d6e8b85c8f03e5195baf # v7.2.0
         with:
           context: .
           file: ./Dockerfile
@@ -182,29 +182,29 @@ jobs:
           echo "Downloaded digests:"
           ls -la /tmp/digests/
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@4d04d5d9486b7bd6fa91e7baf45bbb4f8b9deedd # v4.0.0
+        uses: docker/setup-buildx-action@d7f5e7f509e45cec5c76c4d5afdd7de93d0b3df5 # v4.1.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.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@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
+        uses: docker/login-action@650006c6eb7dba73a995cc03b0b2d7f5ca915bee # v4.2.0
         with:
           registry: quay.io
           username: ${{ secrets.QUAY_USERNAME }}
           password: ${{ secrets.QUAY_ROBOT_TOKEN }}
       - name: Docker metadata
         id: docker-meta
-        uses: docker/metadata-action@030e881283bb7a6894de51c315a6bfe6a94e05cf # v6.0.0
+        uses: docker/metadata-action@80c7e94dd9b9319bd5eb7a0e0fe9291e23a2a2e9 # v6.1.0
         with:
           images: |
             ${{ env.REGISTRY }}/${{ needs.build-arch.outputs.repository }}

.github/workflows/ci-docs.yml

@@ -21,7 +21,7 @@ jobs:
       docs_changed: ${{ steps.force.outputs.run_all == 'true' || steps.filter.outputs.docs == 'true' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -69,16 +69,16 @@ jobs:
     steps:
       - uses: actions/configure-pages@45bfe0192ca1faeb007ade9deae92b16b8254a0d # v6.0.0
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true

.github/workflows/ci-frontend.yml

@@ -21,7 +21,7 @@ jobs:
       frontend_changed: ${{ steps.force.outputs.run_all == 'true' || steps.filter.outputs.frontend == 'true' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           fetch-depth: 0
           persist-credentials: false
@@ -77,11 +77,11 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -92,7 +92,7 @@ jobs:
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
         id: cache-frontend-deps
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store
@@ -109,11 +109,11 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -123,7 +123,7 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store
@@ -148,11 +148,11 @@ jobs:
         shard-count: [4]
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -162,7 +162,7 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store
@@ -174,13 +174,13 @@ jobs:
         run: cd src-ui && pnpm run test --max-workers=2 --shard=${{ matrix.shard-index }}/${{ matrix.shard-count }}
       - name: Upload test results to Codecov
         if: always()
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         with:
           flags: frontend-node-${{ matrix.node-version }}
           directory: src-ui/
           report_type: test_results
       - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2 # v6.0.0
+        uses: codecov/codecov-action@fb8b3582c8e4def4969c97caa2f19720cb33a72f # v7.0.0
         with:
           flags: frontend-node-${{ matrix.node-version }}
           directory: src-ui/coverage/
@@ -191,7 +191,7 @@ jobs:
     runs-on: ubuntu-24.04
     permissions:
       contents: read
-    container: mcr.microsoft.com/playwright:v1.60.0-noble
+    container: mcr.microsoft.com/playwright:v1.61.1-noble
     env:
       PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
@@ -203,11 +203,11 @@ jobs:
         shard-count: [2]
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -217,7 +217,7 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store
@@ -239,12 +239,12 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           fetch-depth: 2
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -254,7 +254,7 @@ jobs:
           cache: 'pnpm'
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store

.github/workflows/ci-lint.yml

@@ -17,12 +17,12 @@ jobs:
     runs-on: ubuntu-slim
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Install Python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: "3.14"
       - name: Run prek
-        uses: j178/prek-action@cbc2f23eb5539cf20d82d1aabd0d0ecbcc56f4e3 # v2.0.2
+        uses: j178/prek-action@bdca6f102f98e2b4c7029491a53dfd366469e33d # v2.0.4

.github/workflows/ci-release.yml

@@ -20,7 +20,7 @@ jobs:
       statuses: read
     steps:
       - name: Wait for Docker build
-        uses: lewagon/wait-on-check-action@9312864dfbc9fd208e9c0417843430751c042800 # v1.7.0
+        uses: lewagon/wait-on-check-action@96d9100b431964d10e0136aff8b9ccb92470505e # v1.8.0
         with:
           ref: ${{ github.sha }}
           check-name: 'Merge and Push Manifest'
@@ -34,12 +34,12 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       # ---- Frontend Build ----
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -54,11 +54,11 @@ jobs:
       # ---- Backend Setup ----
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: false
@@ -170,7 +170,7 @@ jobs:
           fi
       - name: Create release and changelog
         id: create-release
-        uses: release-drafter/release-drafter@5de93583980a40bd78603b6dfdcda5b4df377b32 # v7.2.0
+        uses: release-drafter/release-drafter@4d75298e00d9e34c483e5ff8c68d0ea1c1940c1e # v7.5.1
         with:
           name: Paperless-ngx ${{ steps.get-version.outputs.version }}
           tag: ${{ steps.get-version.outputs.version }}
@@ -181,7 +181,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Upload release archive
-        uses: shogo82148/actions-upload-release-asset@ee2ae851dc5d938b90075b3ef12c540abfd1ee72 # v1.10.1
+        uses: shogo82148/actions-upload-release-asset@394b3c11c3cfc038b5396ad265c074065cf875c3 # v1.10.2
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           upload_url: ${{ steps.create-release.outputs.upload_url }}
@@ -201,17 +201,17 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           ref: main
           persist-credentials: true # for pushing changelog branch
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: false

.github/workflows/ci-static-analysis.yml

@@ -22,11 +22,11 @@ jobs:
       security-events: write
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Run zizmor
-        uses: zizmorcore/zizmor-action@b1d7e1fb5de872772f31590499237e7cce841e8e # v0.5.3
+        uses: zizmorcore/zizmor-action@192e21d79ab29983730a13d1382995c2307fbcaa # v0.5.7
   semgrep:
     name: Semgrep CE
     runs-on: ubuntu-24.04
@@ -38,13 +38,13 @@ jobs:
       security-events: write
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       - name: Run Semgrep
         run: semgrep scan --config auto --sarif-output results.sarif
       - name: Upload results to GitHub code scanning
-        uses: github/codeql-action/upload-sarif@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
+        uses: github/codeql-action/upload-sarif@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
         if: always()
         with:
           sarif_file: results.sarif

.github/workflows/codeql-analysis.yml

@@ -34,12 +34,12 @@ jobs:
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
     steps:
       - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           persist-credentials: false
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
+        uses: github/codeql-action/init@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -47,4 +47,4 @@ jobs:
           # Prefix the list here with "+" to use these queries and those in the config file.
           # queries: ./path/to/local/query, your-org/your-repo/queries@main
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@95e58e9a2cdfd71adc6e0353d5c52f41a045d225 # v4.35.2
+        uses: github/codeql-action/analyze@8aad20d150bbac5944a9f9d289da16a4b0d87c1e # v4.36.2

.github/workflows/crowdin.yml

@@ -17,12 +17,12 @@ jobs:
     environment: translation-sync
     steps:
       - name: Checkout
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
           token: ${{ secrets.PNGX_BOT_PAT }}
           persist-credentials: false
       - name: crowdin action
-        uses: crowdin/github-action@8868a33591d21088edfc398968173a3b98d51706 # v2.16.2
+        uses: crowdin/github-action@52aa776766211d83d975df51f3b9c53c2f8ba35f # v2.16.3
         with:
           upload_translations: false
           download_translations: true

.github/workflows/pr-bot.yml

@@ -31,7 +31,7 @@ jobs:
     steps:
       - name: Label PR by file path or branch name
         # see .github/labeler.yml for the labeler config
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       - name: Label by size

.github/workflows/project-actions.yml

@@ -19,6 +19,6 @@ jobs:
     if: github.event_name == 'pull_request_target' && (github.event.action == 'opened' || github.event.action == 'reopened') && github.event.pull_request.user.login != 'dependabot'
     steps:
       - name: Label PR with release-drafter
-        uses: release-drafter/release-drafter@5de93583980a40bd78603b6dfdcda5b4df377b32 # v7.2.0
+        uses: release-drafter/release-drafter@4d75298e00d9e34c483e5ff8c68d0ea1c1940c1e # v7.5.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/repo-maintenance.yml

@@ -14,7 +14,7 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-      - uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+      - uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           days-before-stale: 7
           days-before-close: 14

.github/workflows/translate-strings.yml

@@ -14,7 +14,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout code
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         env:
           GH_REF: ${{ github.ref }} # sonar rule:githubactions:S7630 - avoid injection
         with:
@@ -23,13 +23,13 @@ jobs:
           persist-credentials: true # for pushing translation branch
       - name: Set up Python
         id: setup-python
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@ece7cb06caefa5fff74198d8649806c4678c61a1 # v6.3.0
       - name: Install system dependencies
         run: |
           sudo apt-get update -qq
           sudo apt-get install -qq --no-install-recommends gettext
       - name: Install uv
-        uses: astral-sh/setup-uv@08807647e7069bb48b6ef5acd8ec9567f424441b # v8.1.0
+        uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true
@@ -43,7 +43,7 @@ jobs:
           PAPERLESS_SECRET_KEY: "ci-translate-not-a-real-secret"
         run: cd src/ && uv run manage.py makemessages -l en_US -i "samples*"
       - name: Install pnpm
-        uses: pnpm/action-setup@903f9c1a6ebcba6cf41d87230be49611ac97822e # v6.0.3
+        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
         with:
           version: 10
       - name: Use Node.js 24
@@ -54,7 +54,7 @@ jobs:
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
       - name: Cache frontend dependencies
         id: cache-frontend-deps
-        uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
           path: |
             ~/.pnpm-store

.pre-commit-config.yaml

@@ -38,7 +38,7 @@ repos:
           - json
   # See https://github.com/prettier/prettier/issues/15742 for the fork reason
   - repo: https://github.com/rbubley/mirrors-prettier
-    rev: 'v3.8.3'
+    rev: 'v3.8.4'
     hooks:
       - id: prettier
         types_or:
@@ -50,14 +50,15 @@ repos:
           - 'prettier-plugin-organize-imports@4.3.0'
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.15.12
+    rev: v0.15.17
     hooks:
       - id: ruff-check
       - id: ruff-format
   - repo: https://github.com/tox-dev/pyproject-fmt
-    rev: "v2.21.1"
+    rev: "v2.24.1"
     hooks:
       - id: pyproject-fmt
+        additional_dependencies: [tomli]
   # Dockerfile hooks
   - repo: https://github.com/AleksaC/hadolint-py
     rev: v2.14.0

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.11.6-python3.12-trixie-slim AS s6-overlay-base
+FROM ghcr.io/astral-sh/uv:0.11.19-python3.12-trixie-slim AS s6-overlay-base
 
 WORKDIR /usr/src/s6
 

SECURITY.md

@@ -63,6 +63,7 @@ The following are not generally considered vulnerabilities unless accompanied by
 - optional webhook, mail, AI, OCR, or integration behavior described without a product-level vulnerability
 - missing limits or hardening settings presented without concrete impact
 - generic AI or static-analysis output that is not confirmed against the current codebase and a real deployment scenario
+- the ability to attach objects that a user cannot access to a document by ID is an intentional design choice, and not considered a vulnerability
 
 ## Transparency
 

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

@@ -30,7 +30,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

docker/compose/docker-compose.mariadb.yml

@@ -26,7 +26,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

docker/compose/docker-compose.portainer.yml

@@ -27,7 +27,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

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

@@ -30,7 +30,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

docker/compose/docker-compose.postgres.yml

@@ -26,7 +26,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

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

@@ -30,7 +30,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

docker/compose/docker-compose.sqlite.yml

@@ -23,7 +23,7 @@
 # documentation.
 services:
   broker:
-    image: docker.io/library/redis:8
+    image: docker.io/valkey/valkey:9-alpine
     restart: unless-stopped
     volumes:
       - redisdata:/data

docs/administration.md

@@ -65,6 +65,11 @@ copies you created in the steps above.
 
     Please review the [migration instructions](migration-v3.md) before upgrading Paperless-ngx to v3.0, it includes some breaking changes that require manual intervention before upgrading.
 
+!!! note
+
+    Upgrading to v3 clears the existing task history; previously completed, failed, or
+    acknowledged tasks will no longer appear in the task list afterward. No action is required.
+
 ### Docker Route {#docker-updating}
 
 If a new release of paperless-ngx is available, upgrading depends on how
@@ -500,6 +505,33 @@ task scheduler.
     python3 manage.py document_index reindex --if-needed
     ```
 
+### Managing the LLM (AI) index {#llm-index}
+
+When the [AI features](advanced_usage.md#ai-features) are enabled with an embedding
+backend, Paperless-ngx maintains a vector index of your documents used for
+Retrieval-Augmented Generation (RAG), similar-document retrieval, and document chat. The
+index is updated automatically on the schedule set by
+[`PAPERLESS_LLM_INDEX_TASK_CRON`](configuration.md#PAPERLESS_LLM_INDEX_TASK_CRON), but you
+can manage it manually:
+
+```
+document_llmindex {rebuild,update,compact}
+```
+
+Specify `rebuild` to build the index from scratch from all documents in the database. Use
+this the first time you enable the feature, or after changing the embedding backend or
+model.
+
+Specify `update` to incrementally index new and changed documents. This is what the
+scheduled task runs.
+
+Specify `compact` to reclaim space and optimize the on-disk vector store.
+
+!!! note
+
+    These commands have no effect unless AI is enabled and an embedding backend is
+    configured.
+
 ### Clearing the database read cache
 
 If the database read cache is enabled, **you must run this command** after making any changes to the database outside the application context.

docs/advanced_usage.md

@@ -97,6 +97,85 @@ when using this feature:
   of these correspondents to ANY new document, if both are set to
   automatic matching.
 
+## AI features {#ai-features}
+
+Paperless-ngx includes a set of optional features backed by a large language model
+(LLM): AI-assisted suggestions, similar-document retrieval, and a document chat. They
+are **off by default** and never replace the built-in, non-LLM
+[matching and suggestions](#matching).
+
+!!! warning
+
+    Enabling these features sends document content (and metadata) to the LLM backend you
+    configure. If that backend is a remote/hosted provider, your documents leave your
+    server and may incur usage charges. Consider the privacy implications before enabling,
+    and prefer a local backend (Ollama, or a self-hosted OpenAI-compatible gateway) if that
+    matters to you.
+
+All AI settings can be supplied as `PAPERLESS_AI_*` environment variables (see
+[configuration](configuration.md#ai)) or set in the admin under
+**Settings → Application Configuration**; the database value takes precedence over the
+environment.
+
+### Enabling the AI features
+
+At a minimum you need to enable AI and choose an LLM backend:
+
+- [`PAPERLESS_AI_ENABLED`](configuration.md#PAPERLESS_AI_ENABLED) — master switch.
+- [`PAPERLESS_AI_LLM_BACKEND`](configuration.md#PAPERLESS_AI_LLM_BACKEND) — `ollama`
+  (runs locally) or `openai-like` (OpenAI itself or any OpenAI-compatible API).
+- [`PAPERLESS_AI_LLM_MODEL`](configuration.md#PAPERLESS_AI_LLM_MODEL), and for
+  `openai-like` usually [`PAPERLESS_AI_LLM_API_KEY`](configuration.md#PAPERLESS_AI_LLM_API_KEY)
+  and/or [`PAPERLESS_AI_LLM_ENDPOINT`](configuration.md#PAPERLESS_AI_LLM_ENDPOINT). Ollama
+  requires `PAPERLESS_AI_LLM_ENDPOINT` pointing at your Ollama server.
+
+### AI-assisted suggestions
+
+With AI enabled, Paperless-ngx can suggest a title, tags, correspondent, document type,
+storage path and dates by sending the document to the LLM. This is **opt-in per request**
+and surfaces through the "Suggest" control on the document detail page, alongside the
+classic classifier-based suggestions — it does not disable them. Suggestion output
+language can be steered with
+[`PAPERLESS_AI_LLM_OUTPUT_LANGUAGE`](configuration.md#PAPERLESS_AI_LLM_OUTPUT_LANGUAGE)
+(otherwise it follows the user's UI language).
+
+### The LLM index (RAG) and similar documents
+
+Setting an embedding backend turns on the **LLM index**, a vector index of your documents
+that enables Retrieval-Augmented Generation (RAG). When enabled, suggestions are grounded
+in similar existing documents, and the document chat can retrieve relevant context.
+
+Enable it by setting
+[`PAPERLESS_AI_LLM_EMBEDDING_BACKEND`](configuration.md#PAPERLESS_AI_LLM_EMBEDDING_BACKEND)
+(`huggingface` for fully-local embeddings, or `ollama` / `openai-like`). The index is only
+built when AI is enabled **and** an embedding backend is set.
+
+The index is updated automatically on a schedule controlled by
+[`PAPERLESS_LLM_INDEX_TASK_CRON`](configuration.md#PAPERLESS_LLM_INDEX_TASK_CRON) (daily by
+default), and can be rebuilt or compacted manually — see
+[Managing the LLM index](administration.md#llm-index).
+
+!!! note
+
+    Local embeddings via `huggingface` download the embedding model on first use into the
+    Paperless data directory. The first run therefore needs network access and some disk
+    space.
+
+### Document chat
+
+When the LLM index is enabled, the chat control in the top app toolbar answers questions
+about your documents. It operates over a single document or across multiple documents
+depending on the current view, and its answers include links to the source documents it
+drew from.
+
+### AI Security notes
+
+- Document content is passed to the LLM as **untrusted data**.
+- By default Paperless-ngx allows AI endpoints that resolve to private/loopback addresses
+  (for local backends). Set
+  [`PAPERLESS_AI_LLM_ALLOW_INTERNAL_ENDPOINTS`](configuration.md#PAPERLESS_AI_LLM_ALLOW_INTERNAL_ENDPOINTS)
+  to `false` to block them.
+
 ## Hooking into the consumption process {#consume-hooks}
 
 Sometimes you may want to do something arbitrary whenever a document is
@@ -846,7 +925,7 @@ Paperless is able to utilize barcodes for automatically performing some tasks. B
 
 At this time, the library utilized for detection of barcodes supports the following types:
 
-- AN-13/UPC-A
+- EAN-13/UPC-A
 - UPC-E
 - EAN-8
 - Code 128
@@ -855,7 +934,9 @@ At this time, the library utilized for detection of barcodes supports the follow
 - Codabar
 - Interleaved 2 of 5
 - QR Code
-- SQ Code
+- Data Matrix
+- Aztec
+- PDF417
 
 For usage in Paperless, the type of barcode does not matter, only the contents of it.
 

docs/api.md

@@ -227,6 +227,7 @@ Version-aware endpoints:
 - `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`.
+- `PATCH /api/documents/{id}/versions/{version_id}/`: updates the `version_label` of a specific version.
 - `DELETE /api/documents/{root_id}/versions/{version_id}/`: deletes a non-root version.
 
 ## Permissions
@@ -445,3 +446,9 @@ Initial API version.
   large lists of object IDs for operations affecting many objects.
 - The legacy `title_content` document search parameter is deprecated and will be removed in a future version.
   Clients should use `text` for simple title-and-content search and `title_search` for title-only search.
+- The task tracking system was redesigned. The tasks list (`/api/tasks/`) is now paginated, and the
+  task object exposes `task_type` (formerly `task_name`) and `trigger_source` (formerly `type`). New
+  read-only endpoints `/api/tasks/summary/`, `/api/tasks/status_counts/`, and `/api/tasks/active/`
+  provide aggregate views, and `POST /api/tasks/run/` lets privileged users dispatch supported tasks.
+  API v9 continues to serve the unpaginated list with the legacy field names until support for v9 is
+  dropped.

docs/configuration.md

@@ -22,7 +22,11 @@ or applicable default will be utilized instead.
 
 ## Required services
 
-### Redis Broker
+### Message Broker
+
+Paperless-ngx uses a Redis-compatible message broker. Any broker that
+speaks the Redis protocol works here, including [Valkey](https://valkey.io/)
+(the default in the bundled Docker Compose files) and Redis itself.
 
 #### [`PAPERLESS_REDIS=<url>`](#PAPERLESS_REDIS) {#PAPERLESS_REDIS}
 
@@ -30,21 +34,21 @@ or applicable default will be utilized instead.
 fetching, index optimization and for training the automatic document
 matcher.
 
-    -   If your Redis server needs login credentials PAPERLESS_REDIS =
+    -   If your broker needs login credentials PAPERLESS_REDIS =
         `redis://<username>:<password>@<host>:<port>`
     -   With the requirepass option PAPERLESS_REDIS =
         `redis://:<password>@<host>:<port>`
-    -   To include the redis database index PAPERLESS_REDIS =
+    -   To include the database index PAPERLESS_REDIS =
         `redis://<username>:<password>@<host>:<port>/<DBIndex>`
 
-    [More information on securing your Redis
+    [More information on securing your broker
-    Instance](https://redis.io/docs/latest/operate/oss_and_stack/management/security).
+    instance](https://valkey.io/topics/security/).
 
     Defaults to `redis://localhost:6379`.
 
 #### [`PAPERLESS_REDIS_PREFIX=<prefix>`](#PAPERLESS_REDIS_PREFIX) {#PAPERLESS_REDIS_PREFIX}
 
-: Prefix to be used in Redis for keys and channels. Useful for sharing one Redis server among multiple Paperless instances.
+: Prefix to be used in the broker for keys and channels. Useful for sharing one broker among multiple Paperless instances.
 
     Defaults to no prefix.
 
@@ -58,14 +62,14 @@ and the relevant connection variables.
 #### [`PAPERLESS_DBENGINE=<engine>`](#PAPERLESS_DBENGINE) {#PAPERLESS_DBENGINE}
 
 : Specifies the database engine to use. Accepted values are `sqlite`, `postgresql`,
-and `mariadb`.
+and `mariadb`. PostgreSQL and MariaDB users must set this explicitly.
-
-    Defaults to `sqlite` if not set.
 
     PostgreSQL and MariaDB both require [`PAPERLESS_DBHOST`](#PAPERLESS_DBHOST) to be
     set. SQLite does not use any other connection variables; the database file is always
     located at `<PAPERLESS_DATA_DIR>/db.sqlite3`.
 
+    Defaults to `sqlite`.
+
     !!! warning
         Using MariaDB comes with some caveats.
         See [MySQL Caveats](advanced_usage.md#mysql-caveats).
@@ -238,7 +242,7 @@ dictionaries; for example, `pool.max_size=20` sets
 
 #### [`PAPERLESS_DB_READ_CACHE_ENABLED=<bool>`](#PAPERLESS_DB_READ_CACHE_ENABLED) {#PAPERLESS_DB_READ_CACHE_ENABLED}
 
-: Caches the database read query results into Redis. This can significantly improve application response times by caching database queries, at the cost of slightly increased memory usage.
+: Caches the database read query results into the broker. This can significantly improve application response times by caching database queries, at the cost of slightly increased memory usage.
 
     Defaults to `false`.
 
@@ -258,18 +262,18 @@ dictionaries; for example, `pool.max_size=20` sets
 
         A high TTL increases memory usage over time. Memory may be used until end of TTL, even if the cache is invalidated with the `invalidate_cachalot` command.
 
-In case of an out-of-memory (OOM) situation, Redis may stop accepting new data — including cache entries, scheduled tasks, and documents to consume.
+In case of an out-of-memory (OOM) situation, the broker may stop accepting new data — including cache entries, scheduled tasks, and documents to consume.
-If your system has limited RAM, consider configuring a dedicated Redis instance for the read cache, with a memory limit and the eviction policy set to `allkeys-lru`.
+If your system has limited RAM, consider configuring a dedicated broker instance for the read cache, with a memory limit and the eviction policy set to `allkeys-lru`.
-For more details, refer to the [Redis eviction policy documentation](https://redis.io/docs/latest/develop/reference/eviction/), and see the `PAPERLESS_READ_CACHE_REDIS_URL` setting to specify a separate Redis broker.
+For more details, refer to the [Redis eviction policy documentation](https://redis.io/docs/latest/develop/reference/eviction/), and see the `PAPERLESS_READ_CACHE_REDIS_URL` setting to specify a separate broker.
 
 #### [`PAPERLESS_READ_CACHE_REDIS_URL=<url>`](#PAPERLESS_READ_CACHE_REDIS_URL) {#PAPERLESS_READ_CACHE_REDIS_URL}
 
-: Defines the Redis instance used for the read cache.
+: Defines the broker instance used for the read cache.
 
     Defaults to `None`.
 
     !!! Note
-    If this value is not set, the same Redis instance used for scheduled tasks will be used for caching as well.
+    If this value is not set, the same broker instance used for scheduled tasks will be used for caching as well.
 
 ## Optional Services
 
@@ -888,7 +892,7 @@ modes are available:
 
     The default is `auto`.
 
-    For the `skip`, `redo`, and `force` modes, read more about OCR
+    For the `redo` and `force` modes, read more about OCR
     behaviour in the [OCRmyPDF
     documentation](https://ocrmypdf.readthedocs.io/en/latest/advanced.html#when-ocr-is-skipped).
 
@@ -2127,7 +2131,7 @@ used with the OpenAI-compatible backend to target a custom provider or local gat
 
     Defaults to true, which allows internal endpoints.
 
-#### [`PAPERLESS_AI_LLM_INDEX_TASK_CRON=<cron expression>`](#PAPERLESS_AI_LLM_INDEX_TASK_CRON) {#PAPERLESS_AI_LLM_INDEX_TASK_CRON}
+#### [`PAPERLESS_LLM_INDEX_TASK_CRON=<cron expression>`](#PAPERLESS_LLM_INDEX_TASK_CRON) {#PAPERLESS_LLM_INDEX_TASK_CRON}
 
 : Configures the schedule to update the AI embeddings of text content and metadata for all documents. Only performed if
 AI is enabled and the LLM embedding backend is set.

docs/development.md

@@ -94,16 +94,16 @@ first-time setup.
     ```
 
 7.  You can now either ...
-    - install Redis or
+    - install a Redis-compatible broker (e.g. Valkey or Redis) or
 
     - use the included `scripts/start_services.sh` to use Docker to fire
-      up a Redis instance (and some other services such as Tika,
+      up a broker instance (and some other services such as Tika,
       Gotenberg and a database server) or
 
-    - spin up a bare Redis container
+    - spin up a bare broker container
 
       ```bash
-      docker run -d -p 6379:6379 --restart unless-stopped redis:latest
+      docker run -d -p 6379:6379 --restart unless-stopped docker.io/valkey/valkey:9-alpine
       ```
 
 8.  Continue with either back-end or front-end development – or both :-).
@@ -132,7 +132,7 @@ uv run manage.py runserver & \
 ```
 
 You might need the front end to test your back end code.
-This assumes that you have AngularJS installed on your system.
+This assumes that you have Angular installed on your system.
 Go to the [Front end development](#front-end-development) section for further details.
 To build the front end once use this command:
 
@@ -174,7 +174,7 @@ To add a new development package `uv add --dev <package>`
 
 ## Front end development
 
-The front end is built using AngularJS. In order to get started, you need Node.js (version 24+) and
+The front end is built using Angular. In order to get started, you need Node.js (version 24+) and
 `pnpm`.
 
 !!! note
@@ -248,12 +248,12 @@ that authentication is working.
 ## Localization
 
 Paperless-ngx is available in many different languages. Since Paperless-ngx
-consists both of a Django application and an AngularJS front end, both
+consists both of a Django application and an Angular front end, both
 these parts have to be translated separately.
 
 ### Front end localization
 
-- The AngularJS front end does localization according to the [Angular
+- The Angular front end does localization according to the [Angular
   documentation](https://angular.io/guide/i18n).
 - The source language of the project is "en_US".
 - The source strings end up in the file `src-ui/messages.xlf`.
@@ -495,7 +495,7 @@ class MyCustomParser:
         self._tempdir = Path(
             tempfile.mkdtemp(prefix="paperless-", dir=settings.SCRATCH_DIR)
         )
-        self._text: str | None = None
+        self._text: str = ""
         self._archive_path: Path | None = None
 
     def __enter__(self) -> Self:
@@ -553,7 +553,8 @@ def parse(
 **Result accessors**
 
 ```python
-def get_text(self) -> str | None:
+def get_text(self) -> str:
+    # Return the extracted text, or an empty string if none was found.
     return self._text
 
 def get_date(self) -> "datetime.datetime | None":
@@ -684,7 +685,7 @@ class XmlDocumentParser:
     def __init__(self, logging_group: object = None) -> None:
         settings.SCRATCH_DIR.mkdir(parents=True, exist_ok=True)
         self._tempdir = Path(tempfile.mkdtemp(prefix="paperless-", dir=settings.SCRATCH_DIR))
-        self._text: str | None = None
+        self._text: str = ""
 
     def __enter__(self) -> Self:
         return self
@@ -702,7 +703,7 @@ class XmlDocumentParser:
         except ET.ParseError as e:
             raise ParseError(f"XML parse error: {e}") from e
 
-    def get_text(self) -> str | None:
+    def get_text(self) -> str:
         return self._text
 
     def get_date(self):

docs/faq.md

@@ -70,7 +70,16 @@ elsewhere. Here are a couple notes about that.
 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.
+is not supported by any of the available parsers.
+
+## _Are duplicate documents rejected?_
+
+**A:** Not by default. As of v3, a file whose contents match an existing document is still
+consumed, and the duplicate is flagged in the UI — open the document and check the
+**Duplicates** tab to review documents that share the same content. If you prefer the old
+behavior of rejecting duplicates during consumption, set
+[`PAPERLESS_CONSUMER_DELETE_DUPLICATES`](configuration.md#PAPERLESS_CONSUMER_DELETE_DUPLICATES)
+to `true`.
 
 ## _Will paperless-ngx run on Raspberry Pi?_
 
@@ -118,10 +127,24 @@ able to run paperless, you're a bit on your own. If you can't run the
 docker image, the documentation has instructions for bare metal
 installs.
 
-## _What about the Redis licensing change and using one of the open source forks_?
+## _Does Paperless-ngx use AI, and is my data private?_
 
-Currently (October 2024), forks of Redis such as Valkey or Redirect are not officially supported by our upstream
+**A:** Paperless-ngx includes optional AI features — LLM-based suggestions, document chat,
-libraries, so using one of these to replace Redis is not officially supported.
+and similar-document retrieval — that are **disabled by default**. They only run when you
+enable them and configure an LLM backend. The built-in tag/correspondent suggestions use a
+local, non-LLM machine-learning model and do not send your data anywhere. If you enable the
+LLM features, document content is sent to whichever backend you configure — this can be a
+fully local backend (e.g. Ollama) or a remote provider. See
+[AI features](advanced_usage.md#ai-features) for details.
 
-However, they do claim to be compatible with the Redis protocol and will likely work, but we will
+## _Which message broker should I use_?
-not be updating from using Redis as the broker officially just yet.
+
+Paperless-ngx talks to a Redis-compatible message broker, so any broker that
+implements the Redis protocol will work. The bundled Docker Compose files
+default to [Valkey](https://valkey.io/), the open-source fork created after
+Redis' licensing change, but Redis itself and other wire-compatible brokers
+(such as Microsoft's Garnet) are equally fine.
+
+Existing installs can switch broker implementations in place: point
+[`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) at the new instance and
+reuse the same data volume.

docs/index.md

@@ -35,9 +35,10 @@ physical documents into a searchable online archive so you can keep, well, _less
   - _New!_ Supports remote OCR with Azure AI (opt-in).
 - Documents are saved as PDF/A format which is designed for long term storage, alongside the unaltered originals.
 - Uses machine-learning to automatically add tags, correspondents and document types to your documents.
-- **New**: Paperless-ngx can now leverage AI (Large Language Models or LLMs) for document suggestions. This is an optional feature that can be enabled (and is disabled by default).
+- **New**: Paperless-ngx can optionally leverage AI (Large Language Models or LLMs) for document suggestions, chatting with your documents, and similar-document retrieval. These features are opt-in and disabled by default.
 - Supports PDF documents, images, plain text files, Office documents (Word, Excel, PowerPoint, and LibreOffice equivalents)[^1] and more.
 - Paperless stores your documents plain on disk. Filenames and folders are managed by paperless and their format can be configured freely with different configurations assigned to different documents.
+- Keep multiple **versions** of a document's file under a single entry, sharing one set of metadata.
 - **Beautiful, modern web application** that features:
   - Customizable dashboard with statistics.
   - Filtering by tags, correspondents, types, and more.

docs/setup.md

@@ -178,7 +178,7 @@ to enable polling and disable inotify. See [here](configuration.md#polling).
     - `fonts-liberation` for generating thumbnails for plain text
       files
     - `imagemagick` >= 6 for PDF conversion
-    - `gnupg` for handling encrypted documents
+    - `gnupg` for decrypting GPG-encrypted email
     - `libpq-dev` for PostgreSQL
     - `libmagic-dev` for mime type detection
     - `mariadb-client` for MariaDB compile time
@@ -226,7 +226,8 @@ to enable polling and disable inotify. See [here](configuration.md#polling).
     build-essential python3-setuptools python3-wheel
     ```
 
-2.  Install `redis` >= 6.0 and configure it to start automatically.
+2.  Install a Redis-compatible broker (a current release of Valkey or
+    Redis) and configure it to start automatically.
 
 3.  Optional: Install `postgresql` and configure a database, user, and
     password for Paperless-ngx. If you do not wish to use PostgreSQL,
@@ -268,10 +269,10 @@ to enable polling and disable inotify. See [here](configuration.md#polling).
 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-ngx running are:
-    - [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your Redis server, such as
+    - [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS) should point to your broker, such as
       `redis://localhost:6379`.
-    - [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) is optional, and should be one of `postgres`,
+    - [`PAPERLESS_DBENGINE`](configuration.md#PAPERLESS_DBENGINE) should be one of `postgresql`,
-      `mariadb`, or `sqlite`
+      `mariadb`, or `sqlite`. PostgreSQL and MariaDB users must set this explicitly.
     - [`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
@@ -297,7 +298,7 @@ to enable polling and disable inotify. See [here](configuration.md#polling).
 
     !!! warning
 
-        Ensure your Redis instance [is secured](https://redis.io/docs/latest/operate/oss_and_stack/management/security/).
+        Ensure your broker instance [is secured](https://valkey.io/topics/security/).
 
 7.  Create the following directories if they do not already exist:
     - `/opt/paperless/media`
@@ -389,9 +390,9 @@ to enable polling and disable inotify. See [here](configuration.md#polling).
         `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 the broker 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 the broker being started. If you use a database server, you
     should add additional dependencies.
 
     !!! note
@@ -449,6 +450,12 @@ development documentation.
 You can migrate to Paperless-ngx from Paperless-ng or from the original
 Paperless project.
 
+!!! note
+
+    Upgrading an existing Paperless-ngx installation from v2 to v3 has its own
+    breaking changes and required steps. See the [v3 migration guide](migration-v3.md)
+    before upgrading.
+
 <h3 id="migration_ng">Migrating from Paperless-ng</h3>
 
 Paperless-ngx is meant to be a drop-in replacement for Paperless-ng, and
@@ -494,7 +501,7 @@ installation. Keep these points in mind:
   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-compatible message broker instance (such as Valkey or Redis). 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 plug your old Docker volumes into
@@ -582,16 +589,16 @@ commands as well.
 
 1.  Stop and remove the Paperless container.
 2.  If using an external database, stop that container.
-3.  Update Redis configuration.
+3.  Update broker configuration.
     1. If `REDIS_URL` is already set, change it to [`PAPERLESS_REDIS`](configuration.md#PAPERLESS_REDIS)
        and continue to step 4.
 
-    1. Otherwise, add a new Redis service in `docker-compose.yml`,
+    1. Otherwise, add a new broker 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 broker container.
 
 4.  Update user mapping.
     1. If set, change the environment variable `PUID` to `USERMAP_UID`.

docs/troubleshooting.md

@@ -10,9 +10,9 @@ Check for the following issues:
   `CONSUMPTION_DIR` setting. Don't adjust this setting if you're
   using docker.
 
-- Ensure that redis is up and running. Paperless does its task
+- Ensure that the broker is up and running. Paperless does its task
   processing asynchronously, and for documents to arrive at the task
-  processor, it needs redis to run.
+  processor, it needs the broker to run.
 
 - Ensure that the task processor is running. Docker does this
   automatically. Manually invoke the task processor by executing
@@ -149,37 +149,6 @@ operating system, if these are different from `1000`. See [Docker setup](setup.m
 Also ensure that you are able to read and write to the consumption
 directory on the host.
 
-## OSError: \[Errno 19\] No such device when consuming files
-
-If you experience errors such as:
-
-```shell-session
-File "/usr/local/lib/python3.7/site-packages/whoosh/codec/base.py", line 570, in open_compound_file
-return CompoundStorage(dbfile, use_mmap=storage.supports_mmap)
-File "/usr/local/lib/python3.7/site-packages/whoosh/filedb/compound.py", line 75, in __init__
-self._source = mmap.mmap(fileno, 0, access=mmap.ACCESS_READ)
-OSError: [Errno 19] No such device
-
-During handling of the above exception, another exception occurred:
-
-Traceback (most recent call last):
-File "/usr/local/lib/python3.7/site-packages/django_q/cluster.py", line 436, in worker
-res = f(*task["args"], **task["kwargs"])
-File "/usr/src/paperless/src/documents/tasks.py", line 73, in consume_file
-override_tag_ids=override_tag_ids)
-File "/usr/src/paperless/src/documents/consumer.py", line 271, in try_consume_file
-raise ConsumerError(e)
-```
-
-Paperless uses a search index to provide better and faster full text
-searching. This search index is stored inside the `data` folder. The
-search index uses memory-mapped files (mmap). The above error indicates
-that paperless was unable to create and open these files.
-
-This happens when you're trying to store the data directory on certain
-file systems (mostly network shares) that don't support memory-mapped
-files.
-
 ## Web-UI stuck at "Loading\..."
 
 This might have multiple reasons.

docs/usage.md

@@ -292,6 +292,23 @@ Once setup, navigating to the email settings page in Paperless-ngx will allow yo
 You can also submit a document using the REST API, see [POSTing documents](api.md#file-uploads)
 for details.
 
+### Duplicate documents
+
+By default, Paperless-ngx **does not reject duplicates**. If you consume a file whose
+contents exactly match an existing document (same checksum), the new copy is still
+consumed and a warning is logged. The task entry for the upload also flags that a
+duplicate was detected and links to the existing document(s).
+
+To review duplicates, open a document and switch to the **Duplicates** tab on the
+document detail page. It lists other documents that share the same content, including any
+that are in the trash (shown with a badge), and links to each so you can decide which to
+keep.
+
+If you would rather reject duplicates at consumption time (the pre-v3 behavior), set
+[`PAPERLESS_CONSUMER_DELETE_DUPLICATES`](configuration.md#PAPERLESS_CONSUMER_DELETE_DUPLICATES)
+to `true`. The duplicate file is then deleted instead of consumed, and the task fails with
+a "document already exists" message.
+
 ## Document Suggestions
 
 Paperless-ngx can suggest tags, correspondents, document types and storage paths for documents based on the content of the document. This is done using a (non-LLM) machine learning model that is trained on the documents in your database. The suggestions are shown in the document detail page and can be accepted or rejected by the user.
@@ -306,7 +323,9 @@ Paperless-ngx includes several features that use AI to enhance the document mana
     so consider the privacy implications of using these features, especially if using a remote
     model or API provider instead of the default local model.
 
-The AI features work by creating an embedding of the text content and metadata of documents, which is then used for various tasks such as similarity search and question answering. This uses the FAISS vector store.
+The AI features work by creating an embedding of the text content and metadata of documents, which is then used for various tasks such as similarity search and question answering.
+
+See [AI features](advanced_usage.md#ai-features) for how to enable and configure these features, including choosing an LLM backend and setting up the LLM index for RAG.
 
 ### AI-Enhanced Suggestions
 
@@ -1097,7 +1116,7 @@ Paperless-ngx consists of the following components:
   errors (i.e., wrong email credentials, errors during consuming a
   specific file, etc).
 
-- A [redis](https://redis.io/) message broker: This is a really
+- A message broker (such as Valkey or Redis): This is a really
   lightweight service that is responsible for getting the tasks from
   the webserver and the consumer to the task scheduler. These run in a
   different process (maybe even on different machines!), and

pyproject.toml

@@ -50,7 +50,7 @@ dependencies = [
   "imap-tools~=1.13.0",
   "jinja2~=3.1.5",
   "langdetect~=1.0.9",
-  "llama-index-core>=0.14.21",
+  "llama-index-core>=0.14.22",
   "llama-index-embeddings-huggingface>=0.6.1",
   "llama-index-embeddings-ollama>=0.9",
   "llama-index-embeddings-openai-like>=0.2.2",
@@ -75,7 +75,7 @@ dependencies = [
   "sqlite-vec==0.1.9",
   "tantivy~=0.26.0",
   "tika-client~=0.11.0",
-  "torch~=2.11.0",
+  "torch~=2.12.0",
   "watchfiles>=1.1.1",
   "whitenoise~=6.11",
   "zxing-cpp~=3.0.0",
@@ -88,7 +88,7 @@ postgres = [
   "psycopg[c,pool]==3.3",
   # Direct dependency for proper resolution of the pre-built wheels
   "psycopg-c==3.3",
-  "psycopg-pool==3.3",
+  "psycopg-pool==3.3.1",
 ]
 webserver = [
   "granian[uvloop]~=2.7.0",
@@ -101,11 +101,11 @@ dev = [
   { include-group = "testing" },
 ]
 docs = [
-  "zensical>=0.0.36",
+  "zensical>=0.0.43",
 ]
 lint = [
   "prek~=0.3.10",
-  "ruff~=0.15.12",
+  "ruff~=0.15.15",
 ]
 testing = [
   "daphne",
@@ -245,50 +245,38 @@ per-file-ignores."src/documents/models.py" = [
 isort.force-single-line = true
 
 [tool.codespell]
-write-changes = true
 ignore-words-list = "criterias,afterall,valeu,ureue,equest,ure,assertIn,Oktober,commitish"
 skip = """\
   src-ui/src/locale/*,src-ui/pnpm-lock.yaml,src-ui/e2e/*,src/paperless_mail/tests/samples/*,src/paperless/tests/samples\
   /mail/*,src/documents/tests/samples/*,*.po,*.json\
   """
+write-changes = true
 
 [tool.pyproject-fmt]
 table_format = "long"
 
 [tool.mypy]
 mypy_path = "src"
+disallow_any_generics = true
+disallow_untyped_defs = true
+disallow_incomplete_defs = true
+check_untyped_defs = true
+warn_redundant_casts = true
+warn_unused_ignores = true
 plugins = [
   "mypy_django_plugin.main",
   "mypy_drf_plugin.main",
 ]
-check_untyped_defs = true
-disallow_any_generics = true
-disallow_incomplete_defs = true
-disallow_untyped_defs = true
-warn_redundant_casts = true
-warn_unused_ignores = true
 
 [tool.pyrefly]
-search-path = [ "src" ]
 baseline = ".pyrefly-baseline.json"
 python-platform = "linux"
+search-path = [ "src" ]
 
 [tool.django-stubs]
 django_settings_module = "paperless.settings"
 
 [tool.pytest]
-minversion = "9.0"
-pythonpath = [ "src" ]
-strict_config = true
-strict_markers = true
-strict_parametrization_ids = true
-strict_xfail = true
-testpaths = [
-  "src/documents/tests/",
-  "src/paperless/tests/",
-  "src/paperless_mail/tests/",
-  "src/paperless_ai/tests",
-]
 addopts = [
   "--pythonwarnings=all",
   "--cov",
@@ -303,7 +291,6 @@ addopts = [
   "-o",
   "junit_family=legacy",
 ]
-norecursedirs = [ "src/locale/", ".venv/", "src-ui/" ]
 DJANGO_SETTINGS_MODULE = "paperless.settings"
 markers = [
   "live: Integration tests requiring external services (Gotenberg, Tika, nginx, etc)",
@@ -316,6 +303,19 @@ markers = [
   "search: Tests for the Tantivy search backend",
   "api: Tests for REST API endpoints",
 ]
+minversion = "9.0"
+norecursedirs = [ "src/locale/", ".venv/", "src-ui/" ]
+pythonpath = [ "src" ]
+strict_config = true
+strict_markers = true
+strict_parametrization_ids = true
+strict_xfail = true
+testpaths = [
+  "src/documents/tests/",
+  "src/paperless/tests/",
+  "src/paperless_mail/tests/",
+  "src/paperless_ai/tests",
+]
 
 [tool.pytest_env]
 PAPERLESS_SECRET_KEY = "test-secret-key-do-not-use-in-production"

src-ui/angular.json

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

src-ui/eslint.config.js

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

src-ui/package.json

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

src-ui/pnpm-workspace.yaml

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,22 +4,22 @@
     info="Manage trashed documents that are pending deletion."
     i18n-info
     infoLink="usage/#document-trash">
-    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
+    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments().size === 0">
         <i-bs name="x" class="me-1"></i-bs><ng-container i18n>Clear selection</ng-container>
     </button>
-    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
         <i-bs name="arrow-counterclockwise" class="me-1"></i-bs><ng-container i18n>Restore selected</ng-container>
     </button>
-    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments())" [disabled]="selectedDocuments().size === 0">
         <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Delete selected</ng-container>
     </button>
-    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash().length === 0">
         <i-bs name="trash" class="me-1"></i-bs><ng-container i18n>Empty trash</ng-container>
     </button>
 </pngx-page-header>
 
 <div class="row mb-3">
-    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
 </div>
 
 <div class="card border table-responsive mb-3">
@@ -28,7 +28,7 @@
             <tr>
             <th scope="col">
                 <div class="form-check m-0 ms-2 me-n2">
-                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="allToggled" [disabled]="documentsInTrash.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <input type="checkbox" class="form-check-input" id="all-objects" [ngModel]="allToggled()" (ngModelChange)="allToggled.set($event)" [disabled]="documentsInTrash().length === 0" (click)="toggleAll($event); $event.stopPropagation();">
                 <label class="form-check-label" for="all-objects"></label>
                 </div>
             </th>
@@ -46,11 +46,11 @@
                     </td>
                 </tr>
             }
-            @for (document of documentsInTrash; track document.id) {
+            @for (document of documentsInTrash(); track document.id) {
                 <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
                     <td>
                     <div class="form-check m-0 ms-2 me-n2">
-                        <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
+                        <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments().has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
                         <label class="form-check-label" for="{{document.id}}"></label>
                     </div>
                     </td>
@@ -91,13 +91,13 @@
 @if (!loading) {
     <div class="d-flex mb-2">
         <div>
-            <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>
+            <ng-container i18n>{totalDocuments(), plural, =1 {One document in trash} other {{{totalDocuments() || 0}} total documents in trash}}</ng-container>
-            @if (selectedDocuments.size > 0) {
+            @if (selectedDocuments().size > 0) {
-                &nbsp;({{selectedDocuments.size}} selected)
+                &nbsp;({{selectedDocuments().size}} selected)
             }
         </div>
-        @if (documentsInTrash.length > 20) {
+        @if (documentsInTrash().length > 20) {
-            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments()" [page]="page()" [maxSize]="5" (pageChange)="page.set($event); reload()" size="sm" aria-label="Pagination"></ngb-pagination>
         }
     </div>
 }

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

@@ -77,7 +77,7 @@ describe('TrashComponent', () => {
     component.reload()
     jest.advanceTimersByTime(100)
     expect(trashSpy).toHaveBeenCalled()
-    expect(component.documentsInTrash).toEqual(documentsInTrash)
+    expect(component.documentsInTrash()).toEqual(documentsInTrash)
   })
 
   it('should support delete document, show error if needed', () => {
@@ -179,8 +179,8 @@ describe('TrashComponent', () => {
   })
 
   it('should support toggle all items in view', () => {
-    component.documentsInTrash = documentsInTrash
+    component.documentsInTrash.set(documentsInTrash)
-    expect(component.selectedDocuments.size).toEqual(0)
+    expect(component.selectedDocuments().size).toEqual(0)
     const toggleAllSpy = jest.spyOn(component, 'toggleAll')
     const checkButton = fixture.debugElement.queryAll(
       By.css('input.form-check-input')
@@ -189,21 +189,21 @@ describe('TrashComponent', () => {
     checkButton.nativeElement.checked = true
     checkButton.nativeElement.dispatchEvent(new Event('click'))
     expect(toggleAllSpy).toHaveBeenCalled()
-    expect(component.selectedDocuments.size).toEqual(documentsInTrash.length)
+    expect(component.selectedDocuments().size).toEqual(documentsInTrash.length)
   })
 
   it('should support toggle item', () => {
-    component.selectedDocuments = new Set([1])
+    component.selectedDocuments.set(new Set([1]))
     component.toggleSelected(documentsInTrash[0])
-    expect(component.selectedDocuments.size).toEqual(0)
+    expect(component.selectedDocuments().size).toEqual(0)
     component.toggleSelected(documentsInTrash[0])
-    expect(component.selectedDocuments.size).toEqual(1)
+    expect(component.selectedDocuments().size).toEqual(1)
   })
 
   it('should support clear selection', () => {
-    component.selectedDocuments = new Set([1])
+    component.selectedDocuments.set(new Set([1]))
     component.clearSelection()
-    expect(component.selectedDocuments.size).toEqual(0)
+    expect(component.selectedDocuments().size).toEqual(0)
   })
 
   it('should correctly display days remaining', () => {

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, inject } from '@angular/core'
+import { Component, OnDestroy, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -7,7 +7,7 @@ import {
   NgbPaginationModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, takeUntil, tap } from 'rxjs'
+import { takeUntil, tap } from 'rxjs'
 import { Document } from 'src/app/data/document'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -42,11 +42,11 @@ export class TrashComponent
   private settingsService = inject(SettingsService)
   private router = inject(Router)
 
-  public documentsInTrash: Document[] = []
+  readonly documentsInTrash = signal<Document[]>([])
-  public selectedDocuments: Set<number> = new Set()
+  readonly selectedDocuments = signal<Set<number>>(new Set())
-  public allToggled: boolean = false
+  readonly allToggled = signal(false)
-  public page: number = 1
+  readonly page = signal(1)
-  public totalDocuments: number
+  readonly totalDocuments = signal<number>(undefined)
 
   constructor() {
     super()
@@ -56,15 +56,14 @@ export class TrashComponent
   reload() {
     this.loading = true
     this.trashService
-      .getTrash(this.page)
+      .getTrash(this.page())
       .pipe(
         tap((r) => {
-          this.documentsInTrash = r.results
+          this.documentsInTrash.set(r.results)
-          this.totalDocuments = r.count
+          this.totalDocuments.set(r.count)
-          this.selectedDocuments.clear()
+          this.selectedDocuments.set(new Set())
           this.loading = false
-        }),
+        })
-        delay(100)
       )
       .subscribe(() => {
         this.show = true
@@ -122,7 +121,7 @@ export class TrashComponent
           .subscribe({
             next: () => {
               this.toastService.showInfo($localize`Document(s) deleted`)
-              this.allToggled = false
+              this.allToggled.set(false)
               modal.close()
               this.reload()
             },
@@ -165,7 +164,7 @@ export class TrashComponent
       .subscribe({
         next: () => {
           this.toastService.showInfo($localize`Document(s) restored`)
-          this.allToggled = false
+          this.allToggled.set(false)
           this.reload()
         },
         error: (err) => {
@@ -179,24 +178,29 @@ export class TrashComponent
 
   toggleAll(event: PointerEvent) {
     if ((event.target as HTMLInputElement).checked) {
-      this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
+      this.selectedDocuments.set(
+        new Set(this.documentsInTrash().map((t) => t.id))
+      )
     } else {
       this.clearSelection()
     }
   }
 
   toggleSelected(object: Document) {
-    this.selectedDocuments.has(object.id)
+    const selectedDocuments = new Set(this.selectedDocuments())
-      ? this.selectedDocuments.delete(object.id)
+    selectedDocuments.has(object.id)
-      : this.selectedDocuments.add(object.id)
+      ? selectedDocuments.delete(object.id)
+      : selectedDocuments.add(object.id)
+    this.selectedDocuments.set(selectedDocuments)
   }
 
   clearSelection() {
-    this.allToggled = false
+    this.allToggled.set(false)
-    this.selectedDocuments.clear()
+    this.selectedDocuments.set(new Set())
   }
 
   getDaysRemaining(document: Document): number {
+    this.settingsService.trackChanges()
     const delay = this.settingsService.get(SETTINGS_KEYS.EMPTY_TRASH_DELAY)
     const diff = new Date().getTime() - new Date(document.deleted_at).getTime()
     const days = Math.ceil(diff / (1000 * 3600 * 24))

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

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

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

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

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

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgClass } from '@angular/common'
-import { Component, HostListener, inject, OnInit } from '@angular/core'
+import { Component, HostListener, inject, OnInit, signal } from '@angular/core'
 import { ActivatedRoute, Router, RouterModule } from '@angular/router'
 import {
   NgbCollapseModule,
@@ -90,16 +90,48 @@ export class AppFrameComponent
   permissionsService = inject(PermissionsService)
   private djangoMessagesService = inject(DjangoMessagesService)
 
-  appRemoteVersion: AppRemoteVersion
+  private appRemoteVersionSignal = signal<AppRemoteVersion>(null)
 
-  isMenuCollapsed: boolean = true
+  private isMenuCollapsedSignal = signal(true)
 
-  slimSidebarAnimating: boolean = false
+  private slimSidebarAnimatingSignal = signal(false)
 
-  public mobileSearchHidden: boolean = false
+  private mobileSearchHiddenSignal = signal(false)
 
   private lastScrollY: number = 0
 
+  get appRemoteVersion(): AppRemoteVersion {
+    return this.appRemoteVersionSignal()
+  }
+
+  set appRemoteVersion(value: AppRemoteVersion) {
+    this.appRemoteVersionSignal.set(value)
+  }
+
+  get isMenuCollapsed(): boolean {
+    return this.isMenuCollapsedSignal()
+  }
+
+  set isMenuCollapsed(value: boolean) {
+    this.isMenuCollapsedSignal.set(value)
+  }
+
+  get slimSidebarAnimating(): boolean {
+    return this.slimSidebarAnimatingSignal()
+  }
+
+  set slimSidebarAnimating(value: boolean) {
+    this.slimSidebarAnimatingSignal.set(value)
+  }
+
+  get mobileSearchHidden(): boolean {
+    return this.mobileSearchHiddenSignal()
+  }
+
+  set mobileSearchHidden(value: boolean) {
+    this.mobileSearchHiddenSignal.set(value)
+  }
+
   constructor() {
     super()
     const permissionsService = this.permissionsService
@@ -178,10 +210,12 @@ export class AppFrameComponent
   }
 
   get versionString(): string {
+    this.settingsService.trackChanges()
     return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
 
   get customAppTitle(): string {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }
 
@@ -224,6 +258,7 @@ export class AppFrameComponent
   }
 
   get slimSidebarEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
 
@@ -243,6 +278,7 @@ export class AppFrameComponent
   }
 
   get attributesSectionsCollapsed(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService
       .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
       ?.includes(CollapsibleSection.ATTRIBUTES)
@@ -268,6 +304,7 @@ export class AppFrameComponent
   }
 
   get aiEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
@@ -419,6 +456,7 @@ export class AppFrameComponent
   }
 
   get showSidebarCounts(): boolean {
+    this.settingsService.trackChanges()
     return (
       this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
       !this.settingsService.organizingSidebarSavedViews

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

@@ -7,6 +7,7 @@ import {
   ViewChild,
   ViewChildren,
   inject,
+  signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
@@ -82,12 +83,36 @@ export class GlobalSearchComponent implements OnInit {
   private locationStrategy = inject(LocationStrategy)
 
   public DataType = DataType
-  public query: string
+  private querySignal = signal<string>(null)
   public queryDebounce: Subject<string>
-  public searchResults: GlobalSearchResult
+  private searchResultsSignal = signal<GlobalSearchResult>(null)
   private currentItemIndex: number = -1
   private domIndex: number = -1
-  public loading: boolean = false
+  private loadingSignal = signal(false)
+
+  public get query(): string {
+    return this.querySignal()
+  }
+
+  public set query(value: string) {
+    this.querySignal.set(value)
+  }
+
+  public get searchResults(): GlobalSearchResult {
+    return this.searchResultsSignal()
+  }
+
+  public set searchResults(value: GlobalSearchResult) {
+    this.searchResultsSignal.set(value)
+  }
+
+  public get loading(): boolean {
+    return this.loadingSignal()
+  }
+
+  public set loading(value: boolean) {
+    this.loadingSignal.set(value)
+  }
 
   @ViewChild('searchInput') searchInput: ElementRef
   @ViewChild('resultsDropdown') resultsDropdown: NgbDropdown
@@ -96,6 +121,7 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   get useAdvancedForFullSearch(): boolean {
+    this.settingsService.trackChanges()
     return (
       this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
       GlobalSearchType.ADVANCED

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

@@ -1,7 +1,7 @@
 
 <li ngbDropdown class="nav-item mx-1" (openChange)="onOpenChange($event)">
-  @if (toasts.length) {
+  @if (toasts().length) {
-    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts.length }}</span>
+    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts().length }}</span>
   }
   <button class="btn border-0" id="notificationsDropdown" ngbDropdownToggle>
     <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
@@ -12,15 +12,15 @@
       <div class="btn-group ms-auto">
         <button class="btn btn-sm btn-outline-secondary mb-2 ms-auto"
           (click)="toastService.clearToasts()"
-          [disabled]="toasts.length === 0"
+          [disabled]="toasts().length === 0"
           i18n>Clear All</button>
       </div>
     </div>
-    @if (toasts.length === 0) {
+    @if (toasts().length === 0) {
       <p class="text-center mb-0 small text-muted"><em i18n>No notifications</em></p>
     }
     <div class="scroll-list">
-      @for (toast of toasts; track toast.id) {
+      @for (toast of toasts(); track toast.id) {
         <pngx-toast [autohide]="false" [toast]="toast" (hidden)="onHidden(toast)" (closed)="toastService.closeToast(toast)"></pngx-toast>
       }
       </div>

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

@@ -42,7 +42,8 @@ describe('ToastsDropdownComponent', () => {
   let component: ToastsDropdownComponent
   let fixture: ComponentFixture<ToastsDropdownComponent>
   let toastService: ToastService
-  let toastsSubject: Subject<Toast[]> = new Subject()
+  let toastsSubject: Subject<Toast[]>
+  let getToastsSpy: jest.SpyInstance
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -56,48 +57,43 @@ describe('ToastsDropdownComponent', () => {
       ],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(ToastsDropdownComponent)
     toastService = TestBed.inject(ToastService)
-    jest.spyOn(toastService, 'getToasts').mockReturnValue(toastsSubject)
+    toastsSubject = new Subject()
+    getToastsSpy = jest
+      .spyOn(toastService, 'getToasts')
+      .mockReturnValue(toastsSubject)
 
+    fixture = TestBed.createComponent(ToastsDropdownComponent)
     component = fixture.componentInstance
 
     fixture.detectChanges()
   })
 
   it('should call getToasts and return toasts', fakeAsync(() => {
-    const spy = jest.spyOn(toastService, 'getToasts')
-
-    component.ngOnInit()
     toastsSubject.next(toasts)
     fixture.detectChanges()
 
-    expect(spy).toHaveBeenCalled()
+    expect(getToastsSpy).toHaveBeenCalled()
-    expect(component.toasts).toContainEqual({
+    expect(component.toasts()).toContainEqual({
       id: 'abc-123',
       content: 'foo bar',
       delay: 5000,
     })
-
-    component.ngOnDestroy()
     flush()
     discardPeriodicTasks()
   }))
 
   it('should show a toast', fakeAsync(() => {
-    component.ngOnInit()
     toastsSubject.next(toasts)
     fixture.detectChanges()
 
     expect(fixture.nativeElement.textContent).toContain('foo bar')
 
-    component.ngOnDestroy()
     flush()
     discardPeriodicTasks()
   }))
 
   it('should toggle suppressPopupToasts', fakeAsync((finish) => {
-    component.ngOnInit()
     fixture.detectChanges()
     toastsSubject.next(toasts)
 
@@ -105,7 +101,6 @@ describe('ToastsDropdownComponent', () => {
     component.onOpenChange(true)
     expect(spy).toHaveBeenCalledWith(true)
 
-    component.ngOnDestroy()
     flush()
     discardPeriodicTasks()
   }))

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

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

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
@@ -8,13 +8,26 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
   imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
-  constructor() {}
+  private numberSignal = signal<number>(undefined)
+  private selectedSignal = signal<boolean>(undefined)
 
   @Input()
-  number: number
+  get number(): number {
+    return this.numberSignal()
+  }
+
+  set number(number: number) {
+    this.numberSignal.set(number)
+  }
 
   @Input()
-  selected: boolean
+  get selected(): boolean {
+    return this.selectedSignal()
+  }
+
+  set selected(selected: boolean) {
+    this.selectedSignal.set(selected)
+  }
 
   @Output()
   cleared: EventEmitter<boolean> = new EventEmitter()

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

@@ -1,5 +1,12 @@
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
@@ -13,6 +20,17 @@ import { LoadingComponentWithPermissions } from '../../loading-component/loading
 export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   activeModal = inject(NgbActiveModal)
 
+  private titleSignal = signal($localize`Confirmation`)
+  private messageBoldSignal = signal<string>(undefined)
+  private messageSignal = signal<string>(undefined)
+  private btnClassSignal = signal('btn-primary')
+  private btnCaptionSignal = signal($localize`Confirm`)
+  private alternativeBtnClassSignal = signal('btn-secondary')
+  private alternativeBtnCaptionSignal = signal<string>(undefined)
+  private cancelBtnClassSignal = signal('btn-outline-secondary')
+  private cancelBtnCaptionSignal = signal($localize`Cancel`)
+  private buttonsEnabledSignal = signal(true)
+
   @Output()
   public confirmClicked = new EventEmitter()
 
@@ -20,34 +38,94 @@ export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
   public alternativeClicked = new EventEmitter()
 
   @Input()
-  title = $localize`Confirmation`
+  get title(): string {
+    return this.titleSignal()
+  }
+
+  set title(title: string) {
+    this.titleSignal.set(title)
+  }
 
   @Input()
-  messageBold
+  get messageBold(): string {
+    return this.messageBoldSignal()
+  }
+
+  set messageBold(messageBold: string) {
+    this.messageBoldSignal.set(messageBold)
+  }
 
   @Input()
-  message
+  get message(): string {
+    return this.messageSignal()
+  }
+
+  set message(message: string) {
+    this.messageSignal.set(message)
+  }
 
   @Input()
-  btnClass = 'btn-primary'
+  get btnClass(): string {
+    return this.btnClassSignal()
+  }
+
+  set btnClass(btnClass: string) {
+    this.btnClassSignal.set(btnClass)
+  }
 
   @Input()
-  btnCaption = $localize`Confirm`
+  get btnCaption(): string {
+    return this.btnCaptionSignal()
+  }
+
+  set btnCaption(btnCaption: string) {
+    this.btnCaptionSignal.set(btnCaption)
+  }
 
   @Input()
-  alternativeBtnClass = 'btn-secondary'
+  get alternativeBtnClass(): string {
+    return this.alternativeBtnClassSignal()
+  }
+
+  set alternativeBtnClass(alternativeBtnClass: string) {
+    this.alternativeBtnClassSignal.set(alternativeBtnClass)
+  }
 
   @Input()
-  alternativeBtnCaption
+  get alternativeBtnCaption(): string {
+    return this.alternativeBtnCaptionSignal()
+  }
+
+  set alternativeBtnCaption(alternativeBtnCaption: string) {
+    this.alternativeBtnCaptionSignal.set(alternativeBtnCaption)
+  }
 
   @Input()
-  cancelBtnClass = 'btn-outline-secondary'
+  get cancelBtnClass(): string {
+    return this.cancelBtnClassSignal()
+  }
+
+  set cancelBtnClass(cancelBtnClass: string) {
+    this.cancelBtnClassSignal.set(cancelBtnClass)
+  }
 
   @Input()
-  cancelBtnCaption = $localize`Cancel`
+  get cancelBtnCaption(): string {
+    return this.cancelBtnCaptionSignal()
+  }
+
+  set cancelBtnCaption(cancelBtnCaption: string) {
+    this.cancelBtnCaptionSignal.set(cancelBtnCaption)
+  }
 
   @Input()
-  buttonsEnabled = true
+  get buttonsEnabled(): boolean {
+    return this.buttonsEnabledSignal()
+  }
+
+  set buttonsEnabled(buttonsEnabled: boolean) {
+    this.buttonsEnabledSignal.set(buttonsEnabled)
+  }
 
   confirmButtonEnabled = true
   alternativeButtonEnabled = true

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

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { AsyncPipe } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
@@ -36,15 +36,47 @@ export class MergeConfirmDialogComponent
   private documentService = inject(DocumentService)
   private permissionService = inject(PermissionsService)
 
-  public documentIDs: number[] = []
+  private documentIDsSignal = signal<number[]>([])
-  public archiveFallback: boolean = false
+  private archiveFallbackSignal = signal(false)
-  public deleteOriginals: boolean = false
+  private deleteOriginalsSignal = signal(false)
-  private _documents: Document[] = []
+  private documentsSignal = signal<Document[]>([])
-  get documents(): Document[] {
+  private metadataDocumentIDSignal = signal(-1)
-    return this._documents
+
+  public get documentIDs(): number[] {
+    return this.documentIDsSignal()
   }
 
-  public metadataDocumentID: number = -1
+  public set documentIDs(documentIDs: number[]) {
+    this.documentIDsSignal.set(documentIDs)
+  }
+
+  public get archiveFallback(): boolean {
+    return this.archiveFallbackSignal()
+  }
+
+  public set archiveFallback(archiveFallback: boolean) {
+    this.archiveFallbackSignal.set(archiveFallback)
+  }
+
+  public get deleteOriginals(): boolean {
+    return this.deleteOriginalsSignal()
+  }
+
+  public set deleteOriginals(deleteOriginals: boolean) {
+    this.deleteOriginalsSignal.set(deleteOriginals)
+  }
+
+  get documents(): Document[] {
+    return this.documentsSignal()
+  }
+
+  public get metadataDocumentID(): number {
+    return this.metadataDocumentIDSignal()
+  }
+
+  public set metadataDocumentID(metadataDocumentID: number) {
+    this.metadataDocumentIDSignal.set(metadataDocumentID)
+  }
 
   constructor() {
     super()
@@ -55,12 +87,14 @@ export class MergeConfirmDialogComponent
       .getFew(this.documentIDs)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((r) => {
-        this._documents = r.results
+        this.documentsSignal.set(r.results)
       })
   }
 
   onDrop(event: CdkDragDrop<number[]>) {
-    moveItemInArray(this.documentIDs, event.previousIndex, event.currentIndex)
+    const documentIDs = this.documentIDs.concat()
+    moveItemInArray(documentIDs, event.previousIndex, event.currentIndex)
+    this.documentIDs = documentIDs
   }
 
   getDocument(documentID: number): Document {

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

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

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

@@ -1,5 +1,5 @@
 import { NgStyle } from '@angular/common'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
@@ -13,11 +13,30 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   documentService = inject(DocumentService)
 
-  public documentID: number
+  private documentIDSignal = signal<number>(undefined)
-  public showPDFNote: boolean = true
+  private showPDFNoteSignal = signal(true)
+  private rotationSignal = signal(0)
+
+  public get documentID(): number {
+    return this.documentIDSignal()
+  }
+
+  public set documentID(documentID: number) {
+    this.documentIDSignal.set(documentID)
+  }
+
+  public get showPDFNote(): boolean {
+    return this.showPDFNoteSignal()
+  }
+
+  public set showPDFNote(showPDFNote: boolean) {
+    this.showPDFNoteSignal.set(showPDFNote)
+  }
 
   // animation is better if we dont normalize yet
-  public rotation: number = 0
+  public get rotation(): number {
+    return this.rotationSignal()
+  }
 
   public get degrees(): number {
     let degrees = this.rotation % 360
@@ -30,6 +49,6 @@ export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   }
 
   rotate(clockwise: boolean = true) {
-    this.rotation += clockwise ? 90 : -90
+    this.rotationSignal.update((rotation) => rotation + (clockwise ? 90 : -90))
   }
 }

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

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

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

@@ -210,13 +210,12 @@ describe('CustomFieldsQueryDropdownComponent', () => {
     expect(component.name).toBe('test_title')
   })
 
-  it('should add a default atom on open and focus the select field', fakeAsync(() => {
+  it('should add a default atom on open', fakeAsync(() => {
     expect(component.selectionModel.queries.length).toBe(0)
     component.onOpenChange(true)
     fixture.detectChanges()
     tick()
     expect(component.selectionModel.queries.length).toBe(1)
-    expect(window.document.activeElement.tagName).toBe('INPUT')
   }))
 
   describe('CustomFieldQueriesModel', () => {

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

@@ -5,6 +5,7 @@ import {
   OnInit,
   Output,
   inject,
+  signal,
 } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -45,10 +46,20 @@ export abstract class EditDialogComponent<
   protected settingsService = inject(SettingsService)
   protected permissionsService = inject(PermissionsService)
 
-  users: User[]
+  private usersSignal = signal<User[]>(undefined)
+
+  private dialogModeSignal = signal(EditDialogMode.CREATE, {
+    equal: () => false,
+  })
 
   @Input()
-  dialogMode: EditDialogMode = EditDialogMode.CREATE
+  get dialogMode(): EditDialogMode {
+    return this.dialogModeSignal()
+  }
+
+  set dialogMode(dialogMode: EditDialogMode) {
+    this.dialogModeSignal.set(dialogMode)
+  }
 
   @Input()
   object: T
@@ -59,11 +70,43 @@ export abstract class EditDialogComponent<
   @Output()
   failed = new EventEmitter()
 
-  networkActive = false
+  private networkActiveSignal = signal(false)
 
-  closeEnabled = false
+  private closeEnabledSignal = signal(false)
 
-  error = null
+  private errorSignal = signal<any>(null)
+
+  get users(): User[] {
+    return this.usersSignal()
+  }
+
+  set users(users: User[]) {
+    this.usersSignal.set(users)
+  }
+
+  get networkActive(): boolean {
+    return this.networkActiveSignal()
+  }
+
+  set networkActive(networkActive: boolean) {
+    this.networkActiveSignal.set(networkActive)
+  }
+
+  get closeEnabled(): boolean {
+    return this.closeEnabledSignal()
+  }
+
+  set closeEnabled(closeEnabled: boolean) {
+    this.closeEnabledSignal.set(closeEnabled)
+  }
+
+  get error(): any {
+    return this.errorSignal()
+  }
+
+  set error(error: any) {
+    this.errorSignal.set(error)
+  }
 
   abstract getForm(): FormGroup
 

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

@@ -1,4 +1,4 @@
-import { Component, ViewChild, inject } from '@angular/core'
+import { Component, ViewChild, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -38,9 +38,17 @@ const IMAP_SECURITY_OPTIONS = [
 })
 export class MailAccountEditDialogComponent extends EditDialogComponent<MailAccount> {
   testActive: boolean = false
-  testResult: string
+  private testResultSignal = signal<string>(undefined)
   alertTimeout
 
+  get testResult(): string {
+    return this.testResultSignal()
+  }
+
+  set testResult(testResult: string) {
+    this.testResultSignal.set(testResult)
+  }
+
   @ViewChild('testResultAlert', { static: false }) testResultAlert: NgbAlert
 
   constructor() {

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

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -158,9 +158,33 @@ export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
   private correspondentService: CorrespondentService
   private documentTypeService: DocumentTypeService
 
-  accounts: MailAccount[]
+  private accountsSignal = signal<MailAccount[]>(undefined)
-  correspondents: Correspondent[]
+  private correspondentsSignal = signal<Correspondent[]>(undefined)
-  documentTypes: DocumentType[]
+  private documentTypesSignal = signal<DocumentType[]>(undefined)
+
+  get accounts(): MailAccount[] {
+    return this.accountsSignal()
+  }
+
+  set accounts(accounts: MailAccount[]) {
+    this.accountsSignal.set(accounts)
+  }
+
+  get correspondents(): Correspondent[] {
+    return this.correspondentsSignal()
+  }
+
+  set correspondents(correspondents: Correspondent[]) {
+    this.correspondentsSignal.set(correspondents)
+  }
+
+  get documentTypes(): DocumentType[] {
+    return this.documentTypesSignal()
+  }
+
+  set documentTypes(documentTypes: DocumentType[]) {
+    this.documentTypesSignal.set(documentTypes)
+  }
 
   constructor() {
     super()

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

@@ -67,11 +67,11 @@ export class StoragePathEditDialogComponent
   private testDocument: Document
   public testResult: string
   public testFailed: boolean = false
-  public loading = false
   public testLoading = false
 
   constructor() {
     super()
+    this.loading = false
     this.service = inject(StoragePathService)
     this.userService = inject(UserService)
     this.settingsService = inject(SettingsService)

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -40,9 +40,33 @@ export class UserEditDialogComponent
   private toastService = inject(ToastService)
   private groupsService: GroupService
 
-  groups: Group[]
+  private groupsSignal = signal<Group[]>(undefined)
-  passwordIsSet: boolean = false
+  private passwordIsSetSignal = signal(false)
-  public totpLoading: boolean = false
+  private totpLoadingSignal = signal(false)
+
+  get groups(): Group[] {
+    return this.groupsSignal()
+  }
+
+  set groups(groups: Group[]) {
+    this.groupsSignal.set(groups)
+  }
+
+  get passwordIsSet(): boolean {
+    return this.passwordIsSetSignal()
+  }
+
+  set passwordIsSet(passwordIsSet: boolean) {
+    this.passwordIsSetSignal.set(passwordIsSet)
+  }
+
+  public get totpLoading(): boolean {
+    return this.totpLoadingSignal()
+  }
+
+  public set totpLoading(totpLoading: boolean) {
+    this.totpLoadingSignal.set(totpLoading)
+  }
 
   constructor() {
     super()
@@ -103,7 +127,7 @@ export class UserEditDialogComponent
     if (!groupsVal) return []
     else
       return groupsVal.flatMap(
-        (id) => this.groups.find((g) => g.id == id)?.permissions
+        (id) => this.groups?.find((g) => g.id == id)?.permissions
       )
   }
 

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

@@ -4,7 +4,7 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import {
   AbstractControl,
   FormArray,
@@ -476,17 +476,73 @@ export class WorkflowEditDialogComponent
   private mailRuleService: MailRuleService
   private customFieldsService: CustomFieldsService
 
-  templates: Workflow[]
+  private templatesSignal = signal<Workflow[]>(undefined)
-  correspondents: Correspondent[]
+  private correspondentsSignal = signal<Correspondent[]>(undefined)
-  documentTypes: DocumentType[]
+  private documentTypesSignal = signal<DocumentType[]>(undefined)
-  storagePaths: StoragePath[]
+  private storagePathsSignal = signal<StoragePath[]>(undefined)
-  mailRules: MailRule[]
+  private mailRulesSignal = signal<MailRule[]>(undefined)
-  customFields: CustomField[]
+  private customFieldsSignal = signal<CustomField[]>(undefined)
-  dateCustomFields: CustomField[]
+  private dateCustomFieldsSignal = signal<CustomField[]>(undefined)
+
+  get templates(): Workflow[] {
+    return this.templatesSignal()
+  }
+
+  set templates(templates: Workflow[]) {
+    this.templatesSignal.set(templates)
+  }
+
+  get correspondents(): Correspondent[] {
+    return this.correspondentsSignal()
+  }
+
+  set correspondents(correspondents: Correspondent[]) {
+    this.correspondentsSignal.set(correspondents)
+  }
+
+  get documentTypes(): DocumentType[] {
+    return this.documentTypesSignal()
+  }
+
+  set documentTypes(documentTypes: DocumentType[]) {
+    this.documentTypesSignal.set(documentTypes)
+  }
+
+  get storagePaths(): StoragePath[] {
+    return this.storagePathsSignal()
+  }
+
+  set storagePaths(storagePaths: StoragePath[]) {
+    this.storagePathsSignal.set(storagePaths)
+  }
+
+  get mailRules(): MailRule[] {
+    return this.mailRulesSignal()
+  }
+
+  set mailRules(mailRules: MailRule[]) {
+    this.mailRulesSignal.set(mailRules)
+  }
+
+  get customFields(): CustomField[] {
+    return this.customFieldsSignal()
+  }
+
+  set customFields(customFields: CustomField[]) {
+    this.customFieldsSignal.set(customFields)
+  }
+
+  get dateCustomFields(): CustomField[] {
+    return this.dateCustomFieldsSignal()
+  }
+
+  set dateCustomFields(dateCustomFields: CustomField[]) {
+    this.dateCustomFieldsSignal.set(dateCustomFields)
+  }
 
   expandedItem: number = null
 
-  private allowedActionTypes = []
+  private allowedActionTypesSignal = signal([])
 
   private readonly triggerFilterOptionsMap = new WeakMap<
     FormArray,
@@ -1294,9 +1350,18 @@ export class WorkflowEditDialogComponent
   }
 
   get actionTypeOptions() {
+    this.settingsService.trackChanges()
     return this.allowedActionTypes
   }
 
+  get allowedActionTypes() {
+    return this.allowedActionTypesSignal()
+  }
+
+  set allowedActionTypes(allowedActionTypes) {
+    this.allowedActionTypesSignal.set(allowedActionTypes)
+  }
+
   getActionTypeOptionName(type: WorkflowActionType): string {
     return this.actionTypeOptions.find((t) => t.id === type)?.name ?? ''
   }

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

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input, inject, signal } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -17,23 +17,37 @@ export class EmailDocumentDialogComponent extends LoadingComponentWithPermission
   private documentService = inject(DocumentService)
   private toastService = inject(ToastService)
 
-  @Input()
+  private documentIdsSignal = signal<number[]>(undefined)
-  documentIds: number[]
+  private hasArchiveVersionSignal = signal(true)
+  private useArchiveVersionSignal = signal(true)
 
-  private _hasArchiveVersion: boolean = true
+  @Input()
+  get documentIds(): number[] {
+    return this.documentIdsSignal()
+  }
+
+  set documentIds(documentIds: number[]) {
+    this.documentIdsSignal.set(documentIds)
+  }
+
+  get useArchiveVersion(): boolean {
+    return this.useArchiveVersionSignal()
+  }
+
+  set useArchiveVersion(useArchiveVersion: boolean) {
+    this.useArchiveVersionSignal.set(useArchiveVersion)
+  }
 
   @Input()
   set hasArchiveVersion(value: boolean) {
-    this._hasArchiveVersion = value
+    this.hasArchiveVersionSignal.set(value)
     this.useArchiveVersion = value
   }
 
   get hasArchiveVersion(): boolean {
-    return this._hasArchiveVersion
+    return this.hasArchiveVersionSignal()
   }
 
-  public useArchiveVersion: boolean = true
-
   public emailAddress: string = ''
   public emailSubject: string = ''
   public emailMessage: string = ''

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

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

src-ui/src/app/components/common/input/abstract-input.ts

@@ -5,6 +5,7 @@ import {
   Input,
   OnInit,
   Output,
+  signal,
   ViewChild,
 } from '@angular/core'
 import { ControlValueAccessor } from '@angular/forms'
@@ -61,7 +62,15 @@ export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
   @Output()
   removed: EventEmitter<AbstractInputComponent<any>> = new EventEmitter()
 
-  value: T
+  private valueSignal = signal<T>(undefined)
+
+  get value(): T {
+    return this.valueSignal()
+  }
+
+  set value(value: T) {
+    this.valueSignal.set(value)
+  }
 
   ngOnInit(): void {
     this.inputId = uuidv4()

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

@@ -1,4 +1,4 @@
-import { Component, forwardRef, inject } from '@angular/core'
+import { Component, forwardRef, inject, signal } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -24,7 +24,15 @@ import { AbstractInputComponent } from '../../abstract-input'
   imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsGroupComponent extends AbstractInputComponent<Group> {
-  groups: Group[]
+  private groupsSignal = signal<Group[]>(undefined)
+
+  get groups(): Group[] {
+    return this.groupsSignal()
+  }
+
+  set groups(groups: Group[]) {
+    this.groupsSignal.set(groups)
+  }
 
   constructor() {
     const groupService = inject(GroupService)

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

@@ -1,4 +1,4 @@
-import { Component, forwardRef, inject } from '@angular/core'
+import { Component, forwardRef, inject, signal } from '@angular/core'
 import {
   FormsModule,
   NG_VALUE_ACCESSOR,
@@ -24,7 +24,15 @@ import { AbstractInputComponent } from '../../abstract-input'
   imports: [NgSelectComponent, FormsModule, ReactiveFormsModule],
 })
 export class PermissionsUserComponent extends AbstractInputComponent<User[]> {
-  users: User[]
+  private usersSignal = signal<User[]>(undefined)
+
+  get users(): User[] {
+    return this.usersSignal()
+  }
+
+  set users(users: User[]) {
+    this.usersSignal.set(users)
+  }
 
   constructor() {
     const userService = inject(UserService)

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

@@ -6,6 +6,7 @@ import {
   Input,
   OnInit,
   Output,
+  signal,
   ViewChild,
 } from '@angular/core'
 import {
@@ -109,7 +110,15 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
 
   @ViewChild('tagSelect') select: NgSelectComponent
 
-  value: number[] = []
+  private valueSignal = signal<number[]>([])
+
+  get value(): number[] {
+    return this.valueSignal()
+  }
+
+  set value(value: number[]) {
+    this.valueSignal.set(value)
+  }
 
   tags: Tag[] = []
 

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

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

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

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input, inject, signal } from '@angular/core'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { SettingsService } from 'src/app/services/settings.service'
 import { environment } from 'src/environments/environment'
@@ -10,12 +10,26 @@ import { environment } from 'src/environments/environment'
 })
 export class LogoComponent {
   private settingsService = inject(SettingsService)
+  private extraClassesSignal = signal<string>(undefined)
+  private heightSignal = signal('6em')
 
   @Input()
-  extra_classes: string
+  get extra_classes(): string {
+    return this.extraClassesSignal()
+  }
+
+  set extra_classes(extraClasses: string) {
+    this.extraClassesSignal.set(extraClasses)
+  }
 
   @Input()
-  height = '6em'
+  get height(): string {
+    return this.heightSignal()
+  }
+
+  set height(height: string) {
+    this.heightSignal.set(height)
+  }
 
   get customLogo(): string {
     return this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input, inject, signal } from '@angular/core'
 import { Title } from '@angular/platform-browser'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -16,34 +16,77 @@ export class PageHeaderComponent {
   private titleService = inject(Title)
   private clipboard = inject(Clipboard)
 
-  private _title = ''
+  private titleSignal = signal('')
-  public copied: boolean = false
+  private idSignal = signal<number>(undefined)
+  private subTitleSignal = signal('')
+  private infoSignal = signal<string>(undefined)
+  private infoLinkSignal = signal<string>(undefined)
+  private loadingSignal = signal(false)
+  private copiedSignal = signal(false)
   private copyTimeout: any
 
+  public get copied(): boolean {
+    return this.copiedSignal()
+  }
+
+  public set copied(copied: boolean) {
+    this.copiedSignal.set(copied)
+  }
+
   @Input()
   set title(title: string) {
-    this._title = title
+    this.titleSignal.set(title)
     this.titleService.setTitle(`${this.title} - ${environment.appTitle}`)
   }
 
   get title() {
-    return this._title
+    return this.titleSignal()
   }
 
   @Input()
-  id: number
+  get id(): number {
+    return this.idSignal()
+  }
+
+  set id(id: number) {
+    this.idSignal.set(id)
+  }
 
   @Input()
-  subTitle: string = ''
+  get subTitle(): string {
+    return this.subTitleSignal()
+  }
+
+  set subTitle(subTitle: string) {
+    this.subTitleSignal.set(subTitle)
+  }
 
   @Input()
-  info: string
+  get info(): string {
+    return this.infoSignal()
+  }
+
+  set info(info: string) {
+    this.infoSignal.set(info)
+  }
 
   @Input()
-  infoLink: string
+  get infoLink(): string {
+    return this.infoLinkSignal()
+  }
+
+  set infoLink(infoLink: string) {
+    this.infoLinkSignal.set(infoLink)
+  }
 
   @Input()
-  loading: boolean = false
+  get loading(): boolean {
+    return this.loadingSignal()
+  }
+
+  set loading(loading: boolean) {
+    this.loadingSignal.set(loading)
+  }
 
   public copyID() {
     this.copied = this.clipboard.copy(this.id.toString())

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

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

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

@@ -27,7 +27,6 @@ import {
 } from 'pdfjs-dist/web/pdf_viewer.mjs'
 import {
   PdfRenderMode,
-  PdfSource,
   PdfZoomLevel,
   PdfZoomScale,
   PngxPdfDocumentProxy,
@@ -43,7 +42,8 @@ export class PngxPdfViewerComponent
 {
   private readonly document = inject<Document>(DOCUMENT)
 
-  @Input() src!: PdfSource
+  @Input() src!: string
+  @Input() password?: string
   @Input() page?: number
   @Output() pageChange = new EventEmitter<number>()
   @Input() rotation?: number
@@ -93,7 +93,7 @@ export class PngxPdfViewerComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['src']) {
+    if (changes['src'] || changes['password']) {
       this.resetViewerState()
       if (this.src) {
         this.loadDocument()
@@ -174,8 +174,12 @@ export class PngxPdfViewerComponent
       'assets/js/pdf.worker.min.mjs',
       this.document.baseURI
     ).toString()
-    this.loadingTask = getDocument(this.src)
+    let initOptions = {
-
+      url: this.src,
+      password: this.password,
+      withCredentials: true,
+    }
+    this.loadingTask = getDocument(initOptions)
     try {
       const pdf = await this.loadingTask.promise
       this.pdf = pdf

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

@@ -2,8 +2,6 @@ export type PngxPdfDocumentProxy = {
   numPages: number
 }
 
-export type PdfSource = string | { url: string; password?: string }
-
 export enum PdfRenderMode {
   Single = 'single',
   All = 'all',

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

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -27,21 +34,44 @@ export class PermissionsDialogComponent {
   activeModal = inject(NgbActiveModal)
   private userService = inject(UserService)
 
-  users: User[]
+  private usersSignal = signal<User[]>(undefined)
+  private titleSignal = signal($localize`Set permissions`)
+  private noteSignal = signal<string>(null)
+  private buttonsEnabledSignal = signal(true)
   private o: ObjectWithPermissions = undefined
 
   constructor() {
     this.userService.listAll().subscribe((r) => (this.users = r.results))
   }
 
+  get users(): User[] {
+    return this.usersSignal()
+  }
+
+  set users(users: User[]) {
+    this.usersSignal.set(users)
+  }
+
   @Output()
   public confirmClicked = new EventEmitter()
 
   @Input()
-  title = $localize`Set permissions`
+  get title(): string {
+    return this.titleSignal()
+  }
+
+  set title(title: string) {
+    this.titleSignal.set(title)
+  }
 
   @Input()
-  note: string = null
+  get note(): string {
+    return this.noteSignal()
+  }
+
+  set note(note: string) {
+    this.noteSignal.set(note)
+  }
 
   @Input()
   set object(o: ObjectWithPermissions) {
@@ -65,7 +95,13 @@ export class PermissionsDialogComponent {
     merge: new FormControl(true),
   })
 
-  buttonsEnabled: boolean = true
+  get buttonsEnabled(): boolean {
+    return this.buttonsEnabledSignal()
+  }
+
+  set buttonsEnabled(buttonsEnabled: boolean) {
+    this.buttonsEnabledSignal.set(buttonsEnabled)
+  }
 
   get permissions() {
     return {

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, OnInit, inject } from '@angular/core'
+import { Component, OnInit, inject, signal } from '@angular/core'
 import {
   FormControl,
   FormGroup,
@@ -50,8 +50,28 @@ export class ProfileEditDialogComponent
   private toastService = inject(ToastService)
   private clipboard = inject(Clipboard)
 
-  public networkActive: boolean = false
+  private networkActiveSignal = signal(false)
-  public error: any
+  private errorSignal = signal<any>(undefined)
+  private showPasswordConfirmSignal = signal(false)
+  private showEmailConfirmSignal = signal(false)
+  private copiedSignal = signal(false)
+  private codesCopiedSignal = signal(false)
+
+  public get networkActive(): boolean {
+    return this.networkActiveSignal()
+  }
+
+  public set networkActive(networkActive: boolean) {
+    this.networkActiveSignal.set(networkActive)
+  }
+
+  public get error(): any {
+    return this.errorSignal()
+  }
+
+  public set error(error: any) {
+    this.errorSignal.set(error)
+  }
 
   public form = new FormGroup({
     email: new FormControl(''),
@@ -67,13 +87,26 @@ export class ProfileEditDialogComponent
   private currentPassword: string
   private newPassword: string
   private passwordConfirm: string
-  public showPasswordConfirm: boolean = false
+  public get showPasswordConfirm(): boolean {
+    return this.showPasswordConfirmSignal()
+  }
+
+  public set showPasswordConfirm(showPasswordConfirm: boolean) {
+    this.showPasswordConfirmSignal.set(showPasswordConfirm)
+  }
+
   public hasUsablePassword: boolean = false
 
   private currentEmail: string
   private newEmail: string
   private emailConfirm: string
-  public showEmailConfirm: boolean = false
+  public get showEmailConfirm(): boolean {
+    return this.showEmailConfirmSignal()
+  }
+
+  public set showEmailConfirm(showEmailConfirm: boolean) {
+    this.showEmailConfirmSignal.set(showEmailConfirm)
+  }
 
   public isTotpEnabled: boolean = false
   public totpSettings: TotpSettings
@@ -81,8 +114,21 @@ export class ProfileEditDialogComponent
   public totpLoading: boolean = false
   public recoveryCodes: string[]
 
-  public copied: boolean = false
+  public get copied(): boolean {
-  public codesCopied: boolean = false
+    return this.copiedSignal()
+  }
+
+  public set copied(copied: boolean) {
+    this.copiedSignal.set(copied)
+  }
+
+  public get codesCopied(): boolean {
+    return this.codesCopiedSignal()
+  }
+
+  public set codesCopied(codesCopied: boolean) {
+    this.codesCopiedSignal.set(codesCopied)
+  }
 
   public socialAccounts: SocialAccount[] = []
   public socialAccountProviders: SocialAccountProvider[] = []
@@ -144,14 +190,13 @@ export class ProfileEditDialogComponent
     if (this.showEmailConfirm) {
       this.form.get('email_confirm').enable()
       if (this.newEmail !== this.emailConfirm) {
-        if (!this.error) this.error = {}
+        this.setFieldError('email_confirm', $localize`Emails must match`)
-        this.error.email_confirm = $localize`Emails must match`
       } else {
-        delete this.error?.email_confirm
+        this.clearFieldError('email_confirm')
       }
     } else {
       this.form.get('email_confirm').disable()
-      delete this.error?.email_confirm
+      this.clearFieldError('email_confirm')
     }
   }
 
@@ -172,17 +217,30 @@ export class ProfileEditDialogComponent
     if (this.showPasswordConfirm) {
       this.form.get('password_confirm').enable()
       if (this.newPassword !== this.passwordConfirm) {
-        if (!this.error) this.error = {}
+        this.setFieldError('password_confirm', $localize`Passwords must match`)
-        this.error.password_confirm = $localize`Passwords must match`
       } else {
-        delete this.error?.password_confirm
+        this.clearFieldError('password_confirm')
       }
     } else {
       this.form.get('password_confirm').disable()
-      delete this.error?.password_confirm
+      this.clearFieldError('password_confirm')
     }
   }
 
+  private setFieldError(fieldName: string, message: string): void {
+    this.error = {
+      ...(this.error ?? {}),
+      [fieldName]: message,
+    }
+  }
+
+  private clearFieldError(fieldName: string): void {
+    if (!this.error) return
+    const error = { ...this.error }
+    delete error[fieldName]
+    this.error = Object.keys(error).length ? error : undefined
+  }
+
   save(): void {
     const passwordChanged =
       this.newPassword && this.currentPassword !== this.newPassword

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

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { CommonModule } from '@angular/common'
-import { Component, Input, inject } from '@angular/core'
+import { Component, Input, inject, signal } from '@angular/core'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Document } from 'src/app/data/document'
@@ -38,10 +38,27 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
   private readonly clipboard = inject(Clipboard)
   private readonly toastService = inject(ToastService)
 
-  private _documents: Document[] = []
+  private documentsSignal = signal<Document[]>([])
+  private selectionCountSignal = signal(0)
+  private documentPreviewSignal = signal<Document[]>([])
+  private copiedSignal = signal(false)
+
+  get selectionCount(): number {
+    return this.selectionCountSignal()
+  }
+
+  get documentPreview(): Document[] {
+    return this.documentPreviewSignal()
+  }
+
+  get copied(): boolean {
+    return this.copiedSignal()
+  }
+
+  set copied(copied: boolean) {
+    this.copiedSignal.set(copied)
+  }
 
-  selectionCount = 0
-  documentPreview: Document[] = []
   form: FormGroup = this.formBuilder.group({
     shareArchiveVersion: true,
     expirationDays: [7],
@@ -51,7 +68,6 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
   readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
 
   createdBundle: ShareLinkBundleSummary | null = null
-  copied = false
   onOpenManage?: () => void
   readonly statuses = ShareLinkBundleStatus
 
@@ -64,15 +80,16 @@ export class ShareLinkBundleDialogComponent extends ConfirmDialogComponent {
 
   @Input()
   set documents(docs: Document[]) {
-    this._documents = docs.concat()
+    const documents = docs.concat()
-    this.selectionCount = this._documents.length
+    this.documentsSignal.set(documents)
-    this.documentPreview = this._documents.slice(0, 10)
+    this.selectionCountSignal.set(documents.length)
+    this.documentPreviewSignal.set(documents.slice(0, 10))
   }
 
   submit() {
     if (this.createdBundle) return
     this.payload = {
-      document_ids: this._documents.map((doc) => doc.id),
+      document_ids: this.documentsSignal().map((doc) => doc.id),
       file_version: this.form.value.shareArchiveVersion
         ? FileVersion.Archive
         : FileVersion.Original,

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

@@ -1,6 +1,6 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { CommonModule } from '@angular/common'
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, OnDestroy, OnInit, inject, signal } from '@angular/core'
 import { NgbActiveModal, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, catchError, of, switchMap, takeUntil, timer } from 'rxjs'
@@ -40,10 +40,33 @@ export class ShareLinkBundleManageDialogComponent
   private readonly clipboard = inject(Clipboard)
 
   title = $localize`Share link bundles`
+  private bundlesSignal = signal<ShareLinkBundleSummary[]>([])
+  private errorSignal = signal<string | null>(null)
+  private copiedSlugSignal = signal<string | null>(null)
 
-  bundles: ShareLinkBundleSummary[] = []
+  get bundles(): ShareLinkBundleSummary[] {
-  error: string | null = null
+    return this.bundlesSignal()
-  copiedSlug: string | null = null
+  }
+
+  set bundles(bundles: ShareLinkBundleSummary[]) {
+    this.bundlesSignal.set(bundles)
+  }
+
+  get error(): string | null {
+    return this.errorSignal()
+  }
+
+  set error(error: string | null) {
+    this.errorSignal.set(error)
+  }
+
+  get copiedSlug(): string | null {
+    return this.copiedSlugSignal()
+  }
+
+  set copiedSlug(copiedSlug: string | null) {
+    this.copiedSlugSignal.set(copiedSlug)
+  }
 
   readonly statuses = ShareLinkBundleStatus
   readonly fileVersions = FileVersion

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard'
-import { Component, Input, OnInit, inject } from '@angular/core'
+import { Component, Input, OnInit, inject, signal } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -27,50 +27,74 @@ export class ShareLinksDialogComponent implements OnInit {
 
   readonly expirationOptions = SHARE_LINK_EXPIRATION_OPTIONS
 
-  @Input()
+  private titleSignal = signal($localize`Share Links`)
-  title = $localize`Share Links`
+  private documentIdSignal = signal<number>(undefined)
+  private hasArchiveVersionSignal = signal(true)
+  private shareLinksSignal = signal<ShareLink[]>(undefined)
+  private copiedSignal = signal<number>(undefined)
 
-  _documentId: number
+  @Input()
+  get title(): string {
+    return this.titleSignal()
+  }
+
+  set title(title: string) {
+    this.titleSignal.set(title)
+  }
 
   @Input()
   set documentId(id: number) {
     if (id !== undefined) {
-      this._documentId = id
+      this.documentIdSignal.set(id)
       this.refresh()
     }
   }
 
-  private _hasArchiveVersion: boolean = true
+  get documentId(): number {
+    return this.documentIdSignal()
+  }
 
   @Input()
   set hasArchiveVersion(value: boolean) {
-    this._hasArchiveVersion = value
+    this.hasArchiveVersionSignal.set(value)
     this.useArchiveVersion = value
   }
 
   get hasArchiveVersion(): boolean {
-    return this._hasArchiveVersion
+    return this.hasArchiveVersionSignal()
   }
 
-  shareLinks: ShareLink[]
+  get shareLinks(): ShareLink[] {
+    return this.shareLinksSignal()
+  }
+
+  set shareLinks(shareLinks: ShareLink[]) {
+    this.shareLinksSignal.set(shareLinks)
+  }
 
   loading: boolean = false
 
-  copied: number
+  get copied(): number {
+    return this.copiedSignal()
+  }
+
+  set copied(copied: number) {
+    this.copiedSignal.set(copied)
+  }
 
   expirationDays: number = 7
 
   useArchiveVersion: boolean = true
 
   ngOnInit(): void {
-    if (this._documentId !== undefined) this.refresh()
+    if (this.documentId !== undefined) this.refresh()
   }
 
   refresh() {
-    if (this._documentId === undefined) return
+    if (this.documentId === undefined) return
     this.loading = true
     this.shareLinkService
-      .getLinksForDocument(this._documentId)
+      .getLinksForDocument(this.documentId)
       .pipe(first())
       .subscribe({
         next: (results) => {
@@ -141,7 +165,7 @@ export class ShareLinksDialogComponent implements OnInit {
     this.loading = true
     this.shareLinkService
       .createLinkForDocument(
-        this._documentId,
+        this.documentId,
         this.useArchiveVersion ? FileVersion.Archive : FileVersion.Original,
         expiration
       )

src-ui/src/app/components/common/suggestions-dropdown/suggestions-dropdown.component.ts

@@ -4,6 +4,7 @@ import {
   Input,
   Output,
   ViewChild,
+  signal,
 } from '@angular/core'
 import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@@ -20,18 +21,46 @@ export class SuggestionsDropdownComponent {
   public popperOptions = pngxPopperOptions
 
   @ViewChild('dropdown') dropdown: NgbDropdown
+  private suggestionsSignal = signal<DocumentSuggestions>(null)
+  private aiEnabledSignal = signal(false)
+  private loadingSignal = signal(false)
+  private disabledSignal = signal(false)
 
   @Input()
-  suggestions: DocumentSuggestions = null
+  get suggestions(): DocumentSuggestions {
+    return this.suggestionsSignal()
+  }
+
+  set suggestions(suggestions: DocumentSuggestions) {
+    this.suggestionsSignal.set(suggestions)
+  }
 
   @Input()
-  aiEnabled: boolean = false
+  get aiEnabled(): boolean {
+    return this.aiEnabledSignal()
+  }
+
+  set aiEnabled(aiEnabled: boolean) {
+    this.aiEnabledSignal.set(aiEnabled)
+  }
 
   @Input()
-  loading: boolean = false
+  get loading(): boolean {
+    return this.loadingSignal()
+  }
+
+  set loading(loading: boolean) {
+    this.loadingSignal.set(loading)
+  }
 
   @Input()
-  disabled: boolean = false
+  get disabled(): boolean {
+    return this.disabledSignal()
+  }
+
+  set disabled(disabled: boolean) {
+    this.disabledSignal.set(disabled)
+  }
 
   @Output()
   getSuggestions: EventEmitter<SuggestionsDropdownComponent> =

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

@@ -1,5 +1,12 @@
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard'
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+  inject,
+  signal,
+} from '@angular/core'
 import {
   NgbActiveModal,
   NgbModalModule,
@@ -50,15 +57,40 @@ export class SystemStatusDialogComponent implements OnInit, OnDestroy {
 
   public SystemStatusItemStatus = SystemStatusItemStatus
   public PaperlessTaskType = PaperlessTaskType
-  public status: SystemStatus
+  private statusSignal = signal<SystemStatus>(undefined)
   public frontendVersion: string = environment.version
-  public versionMismatch: boolean = false
+  private versionMismatchSignal = signal(false)
 
-  public copied: boolean = false
+  private copiedSignal = signal(false)
 
-  private runningTasks: Set<PaperlessTaskType> = new Set()
+  private runningTasksSignal = signal<Set<PaperlessTaskType>>(new Set())
   private unsubscribeNotifier: Subject<any> = new Subject()
 
+  @Input()
+  get status(): SystemStatus {
+    return this.statusSignal()
+  }
+
+  set status(status: SystemStatus) {
+    this.statusSignal.set(status)
+  }
+
+  get versionMismatch(): boolean {
+    return this.versionMismatchSignal()
+  }
+
+  set versionMismatch(versionMismatch: boolean) {
+    this.versionMismatchSignal.set(versionMismatch)
+  }
+
+  get copied(): boolean {
+    return this.copiedSignal()
+  }
+
+  set copied(copied: boolean) {
+    this.copiedSignal.set(copied)
+  }
+
   get currentUserIsSuperUser(): boolean {
     return this.permissionsService.isSuperUser()
   }
@@ -68,25 +100,23 @@ export class SystemStatusDialogComponent implements OnInit, OnDestroy {
   }
 
   public ngOnInit() {
+    const status = this.status
     this.versionMismatch =
       environment.production &&
-      this.status.pngx_version &&
+      status.pngx_version &&
       this.frontendVersion &&
-      this.status.pngx_version !== this.frontendVersion
+      status.pngx_version !== this.frontendVersion
     if (this.versionMismatch) {
-      this.status.pngx_version = `${this.status.pngx_version} (frontend: ${this.frontendVersion})`
+      this.status = {
+        ...status,
+        pngx_version: `${status.pngx_version} (frontend: ${this.frontendVersion})`,
       }
-    this.status.websocket_connected = this.websocketStatusService.isConnected()
+    }
-      ? SystemStatusItemStatus.OK
+    this.updateWebsocketStatus(this.websocketStatusService.isConnected())
-      : SystemStatusItemStatus.ERROR
     this.websocketStatusService
       .onConnectionStatus()
       .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((connected) => {
+      .subscribe((connected) => this.updateWebsocketStatus(connected))
-        this.status.websocket_connected = connected
-          ? SystemStatusItemStatus.OK
-          : SystemStatusItemStatus.ERROR
-      })
   }
 
   public close() {
@@ -108,23 +138,26 @@ export class SystemStatusDialogComponent implements OnInit, OnDestroy {
   }
 
   public isRunning(taskName: PaperlessTaskType): boolean {
-    return this.runningTasks.has(taskName)
+    return this.runningTasksSignal().has(taskName)
   }
 
   public runTask(taskName: PaperlessTaskType) {
-    this.runningTasks.add(taskName)
+    this.setTaskRunning(taskName, true)
     this.toastService.showInfo(`Task ${taskName} started`)
     this.tasksService.run(taskName).subscribe({
       next: () => {
-        this.runningTasks.delete(taskName)
+        this.setTaskRunning(taskName, false)
         this.systemStatusService.get().subscribe({
           next: (status) => {
-            Object.assign(this.status, status)
+            this.status = {
+              ...this.status,
+              ...status,
+            }
           },
         })
       },
       error: (err) => {
-        this.runningTasks.delete(taskName)
+        this.setTaskRunning(taskName, false)
         this.toastService.showError(
           `Failed to start task ${taskName}, see the logs for more details`,
           err
@@ -133,6 +166,25 @@ export class SystemStatusDialogComponent implements OnInit, OnDestroy {
     })
   }
 
+  private updateWebsocketStatus(connected: boolean): void {
+    this.status = {
+      ...this.status,
+      websocket_connected: connected
+        ? SystemStatusItemStatus.OK
+        : SystemStatusItemStatus.ERROR,
+    }
+  }
+
+  private setTaskRunning(taskName: PaperlessTaskType, running: boolean): void {
+    const runningTasks = new Set(this.runningTasksSignal())
+    if (running) {
+      runningTasks.add(taskName)
+    } else {
+      runningTasks.delete(taskName)
+    }
+    this.runningTasksSignal.set(runningTasks)
+  }
+
   ngOnDestroy(): void {
     this.unsubscribeNotifier.next(this)
     this.unsubscribeNotifier.complete()

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

@@ -1,4 +1,4 @@
-import { Component, inject, Input } from '@angular/core'
+import { Component, inject, Input, signal } from '@angular/core'
 import { Tag } from 'src/app/data/tag'
 import {
   PermissionAction,
@@ -16,16 +16,19 @@ export class TagComponent {
   private permissionsService = inject(PermissionsService)
   private tagService = inject(TagService)
 
-  private _tag: Tag
+  private tagSignal = signal<Tag>(null)
+  private linkTitleSignal = signal('')
+  private clickableSignal = signal(false)
+  private showParentsSignal = signal(false)
   private _tagID: number
 
   @Input()
   public set tag(tag: Tag) {
-    this._tag = tag
+    this.tagSignal.set(tag)
   }
 
   public get tag(): Tag {
-    return this._tag
+    return this.tagSignal()
   }
 
   @Input()
@@ -46,13 +49,31 @@ export class TagComponent {
   }
 
   @Input()
-  linkTitle: string = ''
+  get linkTitle(): string {
+    return this.linkTitleSignal()
+  }
+
+  set linkTitle(linkTitle: string) {
+    this.linkTitleSignal.set(linkTitle)
+  }
 
   @Input()
-  clickable: boolean = false
+  get clickable(): boolean {
+    return this.clickableSignal()
+  }
+
+  set clickable(clickable: boolean) {
+    this.clickableSignal.set(clickable)
+  }
 
   @Input()
-  showParents: boolean = false
+  get showParents(): boolean {
+    return this.showParentsSignal()
+  }
+
+  set showParents(showParents: boolean) {
+    this.showParentsSignal.set(showParents)
+  }
 
   public get loading(): boolean {
     return this.tagService.loading

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

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

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

@@ -1,6 +1,13 @@
 import { Clipboard } from '@angular/cdk/clipboard'
 import { DecimalPipe } from '@angular/common'
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
 import {
   NgbProgressbarModule,
   NgbToastModule,
@@ -22,6 +29,7 @@ import { Toast } from 'src/app/services/toast.service'
 })
 export class ToastComponent {
   private clipboard = inject(Clipboard)
+  readonly copied = signal(false)
 
   @Input() toast: Toast
 
@@ -31,8 +39,6 @@ export class ToastComponent {
 
   @Output() closed: EventEmitter<Toast> = new EventEmitter<Toast>()
 
-  public copied: boolean = false
-
   onShown(toast: Toast) {
     if (!this.autohide) return
 
@@ -62,9 +68,9 @@ export class ToastComponent {
 
   public copyError(error: any) {
     this.clipboard.copy(JSON.stringify(error))
-    this.copied = true
+    this.copied.set(true)
     setTimeout(() => {
-      this.copied = false
+      this.copied.set(false)
     }, 3000)
   }
 

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

@@ -1,3 +1,3 @@
-@for (toast of toasts; track toast.id) {
+@for (toast of toasts(); track toast.id) {
   <pngx-toast [toast]="toast" [autohide]="true" (closed)="closeToast()"></pngx-toast>
 }

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

@@ -22,7 +22,7 @@ describe('ToastsComponent', () => {
   let component: ToastsComponent
   let fixture: ComponentFixture<ToastsComponent>
   let toastService: ToastService
-  let toastSubject: Subject<Toast> = new Subject()
+  let toastSubject: Subject<Toast>
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
@@ -33,10 +33,11 @@ describe('ToastsComponent', () => {
       ],
     }).compileComponents()
 
-    fixture = TestBed.createComponent(ToastsComponent)
     toastService = TestBed.inject(ToastService)
+    toastSubject = new Subject()
     jest.replaceProperty(toastService, 'showToast', toastSubject)
 
+    fixture = TestBed.createComponent(ToastsComponent)
     component = fixture.componentInstance
 
     fixture.detectChanges()
@@ -47,25 +48,15 @@ describe('ToastsComponent', () => {
   })
 
   it('should close toast', () => {
-    component.toasts = [toast]
+    toastSubject.next(toast)
     const closeToastSpy = jest.spyOn(toastService, 'closeToast')
     component.closeToast()
-    expect(component.toasts).toEqual([])
+    expect(component.toasts()).toEqual([])
     expect(closeToastSpy).toHaveBeenCalledWith(toast)
   })
 
-  it('should unsubscribe', () => {
+  it('should update from toastService', () => {
-    const unsubscribeSpy = jest.spyOn(
-      (component as any).subscription,
-      'unsubscribe'
-    )
-    component.ngOnDestroy()
-    expect(unsubscribeSpy).toHaveBeenCalled()
-  })
-
-  it('should subscribe to toastService', () => {
-    component.ngOnInit()
     toastSubject.next(toast)
-    expect(component.toasts).toEqual([toast])
+    expect(component.toasts()).toEqual([toast])
   })
 })

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

@@ -1,10 +1,11 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core'
+import { Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import {
   NgbAccordionModule,
   NgbProgressbarModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { Subscription } from 'rxjs'
+import { map, merge, Subject } from 'rxjs'
 import { Toast, ToastService } from 'src/app/services/toast.service'
 import { ToastComponent } from '../toast/toast.component'
 
@@ -19,25 +20,21 @@ import { ToastComponent } from '../toast/toast.component'
     NgxBootstrapIconsModule,
   ],
 })
-export class ToastsComponent implements OnInit, OnDestroy {
+export class ToastsComponent {
   toastService = inject(ToastService)
 
-  private subscription: Subscription
+  private readonly closedToast = new Subject<void>()
 
-  public toasts: Toast[] = [] // array to force change detection
+  readonly toasts = toSignal(
-
+    merge(
-  ngOnDestroy(): void {
+      this.toastService.showToast.pipe(map((toast) => (toast ? [toast] : []))),
-    this.subscription?.unsubscribe()
+      this.closedToast.pipe(map(() => [] as Toast[]))
-  }
+    ),
-
+    { initialValue: [] as Toast[] }
-  ngOnInit(): void {
+  )
-    this.subscription = this.toastService.showToast.subscribe((toast) => {
-      this.toasts = toast ? [toast] : []
-    })
-  }
 
   closeToast() {
-    this.toastService.closeToast(this.toasts[0])
+    this.toastService.closeToast(this.toasts()[0])
-    this.toasts = []
+    this.closedToast.next()
   }
 }

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

@@ -45,7 +45,7 @@
             </div>
           </div>
         }
-        @for (v of dashboardViews; track v.id) {
+        @for (v of dashboardViews(); track v.id) {
           <div class="col">
             <pngx-saved-view-widget
               [savedView]="v"

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

@@ -5,7 +5,7 @@ import {
   DragDropModule,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { Component, inject } from '@angular/core'
+import { Component, inject, signal } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourNgBootstrap, TourService } from 'ngx-ui-tour-ng-bootstrap'
@@ -47,12 +47,12 @@ export class DashboardComponent extends ComponentWithPermissions {
   private tourService = inject(TourService)
   private toastService = inject(ToastService)
 
-  public dashboardViews: SavedView[] = []
+  readonly dashboardViews = signal<SavedView[]>([])
   constructor() {
     super()
 
     this.savedViewService.listAll().subscribe(() => {
-      this.dashboardViews = this.savedViewService.dashboardViews
+      this.dashboardViews.set(this.savedViewService.dashboardViews)
     })
   }
 
@@ -81,14 +81,12 @@ export class DashboardComponent extends ComponentWithPermissions {
   }
 
   onDrop(event: CdkDragDrop<SavedView[]>) {
-    moveItemInArray(
+    const dashboardViews = [...this.dashboardViews()]
-      this.dashboardViews,
+    moveItemInArray(dashboardViews, event.previousIndex, event.currentIndex)
-      event.previousIndex,
+    this.dashboardViews.set(dashboardViews)
-      event.currentIndex
-    )
 
     this.settingsService
-      .updateDashboardViewsSort(this.dashboardViews)
+      .updateDashboardViewsSort(this.dashboardViews())
       .subscribe({
         next: () => {
           this.toastService.showInfo($localize`Dashboard updated`)

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -1,11 +1,14 @@
 <pngx-widget-frame
   *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }"
   [title]="savedView.name"
-  [badge]="count"
+  [loading]="false"
-  [loading]="loading"
   [draggable]="savedView"
   >
 
+  @if (count !== null) {
+    <span title-badge class="badge bg-info text-dark ms-2">{{count}}</span>
+  }
+
   @if (documents.length) {
     <a class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
   }
@@ -30,11 +33,24 @@
         </tr>
       </thead>
       <tbody>
+        @if (loading && !documents.length) {
+          @for (row of placeholderRows; track row) {
+            <tr>
+              @for (field of displayFields; track field; let j = $index) {
+                <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
+                  <div class="placeholder-glow text-start">
+                    <span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"></span>
+                  </div>
+                </td>
+              }
+            </tr>
+          }
+        }
         @for (doc of documents; track doc.id; let i = $index) {
           <tr>
             @for (field of displayFields; track field; let j = $index) {
               <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': j > 1 }">
-                @if (loading && show) {
+                @if (loading && !documents.length) {
                   <div class="placeholder-glow text-start">
                     <span class="placeholder bg-secondary w-50" [ngStyle]="{ opacity: 1 - (i * 1/documents.length) }"></span>
                   </div>
@@ -115,12 +131,22 @@
     </table>
   } @else if (displayMode === DisplayMode.SMALL_CARDS) {
     <div class="row row-cols-paperless-cards my-n2">
+      @if (loading && !documents.length) {
+        @for (row of placeholderRows; track row) {
+          <pngx-document-card-small
+            class="p-0"
+            [ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
+            [document]="null"
+            [displayFields]="displayFields">
+          </pngx-document-card-small>
+        }
+      }
       @for (d of documents; track d.id; let i = $index) {
         <pngx-document-card-small
           class="p-0"
-          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
+          [ngStyle]="{ opacity: show ? 1 : 1 - (i * 1/documents.length) }"
           (dblClickDocument)="openDocumentDetail(d)"
-          [document]="!loading && show ? d : null"
+          [document]="d"
           [displayFields]="displayFields"
           (clickTag)="clickTag($event)"
           (clickCorrespondent)="clickCorrespondent($event)"
@@ -131,11 +157,20 @@
     </div>
   } @else if (displayMode === DisplayMode.LARGE_CARDS) {
     <div class="row my-n2">
+      @if (loading && !documents.length) {
+        @for (row of placeholderRows; track row) {
+          <pngx-document-card-large
+            [document]="null"
+            [ngStyle]="{ opacity: 1 - (row * 1/placeholderRows.length) }"
+            [displayFields]="displayFields">
+          </pngx-document-card-large>
+        }
+      }
       @for (d of documents; track d.id; let i = $index) {
         <pngx-document-card-large
           (dblClickDocument)="openDocumentDetail(d)"
-          [document]="!loading && show ? d : null"
+          [document]="d"
-          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
+          [ngStyle]="{ opacity: show ? 1 : 1 - (i * 1/documents.length) }"
           [displayFields]="displayFields"
           (clickTag)="clickTag($event)"
           (clickCorrespondent)="clickCorrespondent($event)"

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -6,12 +6,13 @@ import {
   OnDestroy,
   OnInit,
   QueryList,
+  signal,
   ViewChildren,
 } from '@angular/core'
 import { Router, RouterModule } from '@angular/router'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, Subject, takeUntil, tap } from 'rxjs'
+import { Subject, takeUntil } from 'rxjs'
 import { CustomFieldDisplayComponent } from 'src/app/components/common/custom-field-display/custom-field-display.component'
 import { PreviewPopupComponent } from 'src/app/components/common/preview-popup/preview-popup.component'
 import { TagComponent } from 'src/app/components/common/tag/tag.component'
@@ -106,7 +107,7 @@ export class SavedViewWidgetComponent
   @Input()
   savedView: SavedView
 
-  documents: Document[] = []
+  private documentsSignal = signal<Document[]>([])
 
   unsubscribeNotifier: Subject<any> = new Subject()
 
@@ -116,21 +117,56 @@ export class SavedViewWidgetComponent
   mouseOnPreview = false
   popoverHidden = true
 
-  displayMode: DisplayMode
+  private displayModeSignal = signal<DisplayMode>(null)
 
-  displayFields: DisplayField[] = DEFAULT_DASHBOARD_DISPLAY_FIELDS
+  private displayFieldsSignal = signal<DisplayField[]>(
+    DEFAULT_DASHBOARD_DISPLAY_FIELDS
+  )
 
-  count: number
+  private countSignal = signal<number>(null)
+
+  placeholderRows: number[] = []
+
+  get documents(): Document[] {
+    return this.documentsSignal()
+  }
+
+  set documents(value: Document[]) {
+    this.documentsSignal.set(value)
+  }
+
+  get displayMode(): DisplayMode {
+    return this.displayModeSignal()
+  }
+
+  set displayMode(value: DisplayMode) {
+    this.displayModeSignal.set(value)
+  }
+
+  get displayFields(): DisplayField[] {
+    return this.displayFieldsSignal()
+  }
+
+  set displayFields(value: DisplayField[]) {
+    this.displayFieldsSignal.set(value)
+  }
+
+  get count(): number {
+    return this.countSignal()
+  }
+
+  set count(value: number) {
+    this.countSignal.set(value)
+  }
 
   ngOnInit(): void {
-    this.reload()
+    this.placeholderRows = Array.from(
+      {
+        length: this.savedView?.page_size ?? DEFAULT_DASHBOARD_VIEW_PAGE_SIZE,
+      },
+      (_, index) => index
+    )
     this.displayMode = this.savedView.display_mode ?? DisplayMode.TABLE
-    this.websocketStatusService
-      .onDocumentConsumptionFinished()
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe(() => {
-        this.reload()
-      })
 
     if (
       this.permissionsService.currentUserCan(
@@ -159,6 +195,14 @@ export class SavedViewWidgetComponent
         this.settingsService.allDisplayFields.find((f) => f.id === field) !==
         undefined
     )
+
+    this.reload()
+    this.websocketStatusService
+      .onDocumentConsumptionFinished()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.reload()
+      })
   }
 
   ngOnDestroy(): void {
@@ -168,6 +212,7 @@ export class SavedViewWidgetComponent
 
   reload() {
     this.loading = this.documents.length == 0
+    this.show = true
     this.documentService
       .listFiltered(
         1,
@@ -177,18 +222,13 @@ export class SavedViewWidgetComponent
         this.savedView.filter_rules,
         { truncate_content: true }
       )
-      .pipe(
+      .pipe(takeUntil(this.unsubscribeNotifier))
-        takeUntil(this.unsubscribeNotifier),
+      .subscribe((result) => {
-        tap((result) => {
-          this.show = true
         this.documents = result.results
         this.count = result.count
         this.savedViewService.setDocumentCount(this.savedView, result.count)
-        }),
-        delay(500)
-      )
-      .subscribe((result) => {
         this.loading = false
+        this.show = true
       })
   }
 

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

@@ -1,7 +1,7 @@
-<pngx-widget-frame title="Statistics" [loading]="loading" i18n-title>
+<pngx-widget-frame title="Statistics" [loading]="loading()" i18n-title>
   <ng-container content>
     <div class="list-group border-light placeholder-glow">
-      @if (loading) {
+      @if (loading()) {
         <div class="list-group-item d-flex">
           <div class="placeholder w-50"></div>
           <span class="placeholder badge rounded-pill ms-auto" style="width: 25px;">&nbsp;</span>
@@ -24,32 +24,32 @@
           <div class="placeholder w-100 d-block"></div>
         </div>
       } @else {
-        @if (statistics?.documents_inbox !== null) {
+        @if (statistics()?.documents_inbox !== null) {
           <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" title="Go to inbox" i18n-title href="javascript:void(0)" (click)="goToInbox()">
             <ng-container i18n>Documents in inbox</ng-container>:
-            <span class="badge rounded-pill" [class.bg-primary]="statistics?.documents_inbox > 0" [class.bg-muted]="statistics?.documents_inbox === 0">{{statistics?.documents_inbox}}</span>
+            <span class="badge rounded-pill" [class.bg-primary]="statistics()?.documents_inbox > 0" [class.bg-muted]="statistics()?.documents_inbox === 0">{{statistics()?.documents_inbox}}</span>
           </a>
         }
         <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" title="Go to documents" i18n-title routerLink="/documents/">
           <ng-container i18n>Total documents</ng-container>:
-          <span class="badge bg-primary rounded-pill">{{statistics?.documents_total}}</span>
+          <span class="badge bg-primary rounded-pill">{{statistics()?.documents_total}}</span>
         </a>
         <div class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documents/">
           <ng-container i18n>Total characters</ng-container>:
-          <span class="badge bg-secondary text-light rounded-pill">{{statistics?.character_count | number}}</span>
+          <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.character_count | number}}</span>
         </div>
-        @if (statistics?.current_asn) {
+        @if (statistics()?.current_asn) {
           <div class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documents/">
             <ng-container i18n>Current ASN</ng-container>:
-            <span class="badge bg-secondary text-light rounded-pill">{{statistics?.current_asn}}</span>
+            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.current_asn}}</span>
           </div>
         }
       }
-      @if (statistics?.document_file_type_counts?.length > 1) {
+      @if (statistics()?.document_file_type_counts?.length > 1) {
         <div class="list-group-item filetypes">
           <div class="d-flex justify-content-between align-items-center my-2">
             <div class="progress flex-grow-1">
-              @for (filetype of statistics?.document_file_type_counts; track filetype; let i = $index; let last = $last) {
+              @for (filetype of statistics()?.document_file_type_counts; track filetype; let i = $index; let last = $last) {
                 <div
                   class="progress-bar bg-primary"
                   role="progressbar"
@@ -69,7 +69,7 @@
             </div>
           </div>
           <div class="d-flex flex-wrap align-items-start">
-            @for (filetype of statistics?.document_file_type_counts; track filetype; let i = $index) {
+            @for (filetype of statistics()?.document_file_type_counts; track filetype; let i = $index) {
               <div class="d-flex">
                 <div class="text-nowrap me-2" [class.cursor-pointer]="!filetype.is_other" (click)="filterByFileType(filetype)">
                   <span class="badge rounded-pill bg-primary d-inline-block p-0 me-1" [style.opacity]="getItemOpacity(i)"></span>
@@ -84,54 +84,54 @@
 
     <div class="list-group border-light mt-3">
       <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }">
-        @if (loading) {
+        @if (loading()) {
           <div class="placeholder-glow list-group-item">
             <span class="placeholder w-100"></span>
           </div>
         }
-        @if (statistics?.tag_count > 0) {
+        @if (statistics()?.tag_count > 0) {
           <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/tags/">
             <ng-container i18n>Tags</ng-container>:
-            <span class="badge bg-secondary text-light rounded-pill">{{statistics?.tag_count | number}}</span>
+            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.tag_count | number}}</span>
           </a>
         }
       </ng-container>
       <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }">
-        @if (loading) {
+        @if (loading()) {
           <div class="placeholder-glow list-group-item">
             <span class="placeholder w-100"></span>
           </div>
         }
-        @if (statistics?.correspondent_count > 0) {
+        @if (statistics()?.correspondent_count > 0) {
           <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/correspondents/">
             <ng-container i18n>Correspondents</ng-container>:
-            <span class="badge bg-secondary text-light rounded-pill">{{statistics?.correspondent_count | number}}</span>
+            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.correspondent_count | number}}</span>
           </a>
         }
       </ng-container>
       <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }">
-        @if (loading) {
+        @if (loading()) {
           <div class="placeholder-glow list-group-item">
             <span class="placeholder w-100"></span>
           </div>
         }
-        @if (statistics?.document_type_count > 0) {
+        @if (statistics()?.document_type_count > 0) {
           <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/documenttypes/">
             <ng-container i18n>Document Types</ng-container>:
-            <span class="badge bg-secondary text-light rounded-pill">{{statistics?.document_type_count | number}}</span>
+            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.document_type_count | number}}</span>
           </a>
         }
       </ng-container>
       <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }">
-        @if (loading) {
+        @if (loading()) {
           <div class="placeholder-glow list-group-item">
             <span class="placeholder w-100"></span>
           </div>
         }
-        @if (statistics?.storage_path_count > 0) {
+        @if (statistics()?.storage_path_count > 0) {
           <a class="list-group-item d-flex justify-content-between align-items-center" routerLink="/storagepaths/">
             <ng-container i18n>Storage Paths</ng-container>:
-            <span class="badge bg-secondary text-light rounded-pill">{{statistics?.storage_path_count | number}}</span>
+            <span class="badge bg-secondary text-light rounded-pill">{{statistics()?.storage_path_count | number}}</span>
           </a>
         }
       </ng-container>

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -74,7 +74,7 @@ describe('StatisticsWidgetComponent', () => {
 
   it('should not call statistics endpoint on reload if already loading', () => {
     httpTestingController.expectOne(`${environment.apiBaseUrl}statistics/`)
-    component.loading = true
+    component.loading.set(true)
     component.reload()
     httpTestingController.expectNone(`${environment.apiBaseUrl}statistics/`)
   })