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@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
+        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@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
+        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

.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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
+        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@e79a6962e0d4c0c17b229090214935d2e33f8354 # v6.0.1
+        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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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,11 +17,11 @@ 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

.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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+        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@5f14fd08f7cf1cb1609c1e344975f152c7ee938d # v0.5.6
+        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        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@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
+        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/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@693d20e7c1ce1a81d3a41962f85914253b518449 # v7.3.1
+        uses: release-drafter/release-drafter@4d75298e00d9e34c483e5ff8c68d0ea1c1940c1e # v7.5.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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@0e279bb959325dab635dd2c09392533439d90093 # v6.0.8
+        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

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/messages.xlf

@@ -1277,7 +1277,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1762</context>
+          <context context-type="linenumber">1760</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1577733187050997705" datatype="html">
@@ -2177,7 +2177,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">637</context>
+          <context context-type="linenumber">635</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-version-dropdown/document-version-dropdown.component.html</context>
@@ -3080,11 +3080,11 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1381</context>
+          <context context-type="linenumber">1379</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1763</context>
+          <context context-type="linenumber">1761</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -3655,7 +3655,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1334</context>
+          <context context-type="linenumber">1332</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -3767,7 +3767,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1816</context>
+          <context context-type="linenumber">1814</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6661109599266152398" datatype="html">
@@ -3778,7 +3778,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1817</context>
+          <context context-type="linenumber">1815</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5162686434580248853" datatype="html">
@@ -3789,7 +3789,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1818</context>
+          <context context-type="linenumber">1816</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8157388568390631653" datatype="html">
@@ -5691,7 +5691,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1338</context>
+          <context context-type="linenumber">1336</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -7933,88 +7933,88 @@
         <source>Enter Password</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.html</context>
-          <context context-type="linenumber">512</context>
+          <context context-type="linenumber">513</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5758784066858623886" datatype="html">
         <source>Error retrieving metadata</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">411</context>
+          <context context-type="linenumber">409</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2218903673684131427" datatype="html">
         <source>An error occurred loading content: <x id="PH" equiv-text="err.message ?? err.toString()"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">512,514</context>
+          <context context-type="linenumber">510,512</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">959,961</context>
+          <context context-type="linenumber">957,959</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6357361810318120957" datatype="html">
         <source>Document was updated</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">632</context>
+          <context context-type="linenumber">630</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5154064822428631306" datatype="html">
         <source>Document was updated at <x id="PH" equiv-text="formattedModified"/>.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">633</context>
+          <context context-type="linenumber">631</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8462497568316256794" datatype="html">
         <source>Reload to discard your local unsaved edits and load the latest remote version.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">634</context>
+          <context context-type="linenumber">632</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7967484035994732534" datatype="html">
         <source>Reload</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">636</context>
+          <context context-type="linenumber">634</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2907037627372942104" datatype="html">
         <source>Document reloaded with latest changes.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">692</context>
+          <context context-type="linenumber">690</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6435639868943916539" datatype="html">
         <source>Document reloaded.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">703</context>
+          <context context-type="linenumber">701</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6142395741265832184" datatype="html">
         <source>Next document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">805</context>
+          <context context-type="linenumber">803</context>
         </context-group>
       </trans-unit>
       <trans-unit id="651985345816518480" datatype="html">
         <source>Previous document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">815</context>
+          <context context-type="linenumber">813</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2885986061416655600" datatype="html">
         <source>Close document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">823</context>
+          <context context-type="linenumber">821</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/services/open-documents.service.ts</context>
@@ -8025,67 +8025,67 @@
         <source>Save document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">830</context>
+          <context context-type="linenumber">828</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1784543155727940353" datatype="html">
         <source>Save and close / next</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">839</context>
+          <context context-type="linenumber">837</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7427704425579737895" datatype="html">
         <source>Error retrieving version content</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">943</context>
+          <context context-type="linenumber">941</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3456881259945295697" datatype="html">
         <source>Error retrieving suggestions.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1002</context>
+          <context context-type="linenumber">1000</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2194092841814123758" datatype="html">
         <source>Document &quot;<x id="PH" equiv-text="newValues.title"/>&quot; saved successfully.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1214</context>
+          <context context-type="linenumber">1212</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1241</context>
+          <context context-type="linenumber">1239</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6626387786259219838" datatype="html">
         <source>Error saving document &quot;<x id="PH" equiv-text="this.document.title"/>&quot;</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1247</context>
+          <context context-type="linenumber">1245</context>
         </context-group>
       </trans-unit>
       <trans-unit id="448882439049417053" datatype="html">
         <source>Error saving document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1302</context>
+          <context context-type="linenumber">1300</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8410796510716511826" datatype="html">
         <source>Do you really want to move the document &quot;<x id="PH" equiv-text="this.document.title"/>&quot; to the trash?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1335</context>
+          <context context-type="linenumber">1333</context>
         </context-group>
       </trans-unit>
       <trans-unit id="282586936710748252" datatype="html">
         <source>Documents can be restored prior to permanent deletion.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1336</context>
+          <context context-type="linenumber">1334</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -8096,14 +8096,14 @@
         <source>Error deleting document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1357</context>
+          <context context-type="linenumber">1355</context>
         </context-group>
       </trans-unit>
       <trans-unit id="619486176823357521" datatype="html">
         <source>Reprocess confirm</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1377</context>
+          <context context-type="linenumber">1375</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-list/bulk-editor/bulk-editor.component.ts</context>
@@ -8114,102 +8114,102 @@
         <source>This operation will permanently recreate the archive file for this document.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1378</context>
+          <context context-type="linenumber">1376</context>
         </context-group>
       </trans-unit>
       <trans-unit id="302054111564709516" datatype="html">
         <source>The archive file will be re-generated with the current settings.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1379</context>
+          <context context-type="linenumber">1377</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4700389117298802932" datatype="html">
         <source>Reprocess operation for &quot;<x id="PH" equiv-text="this.document.title"/>&quot; will begin in the background.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1389</context>
+          <context context-type="linenumber">1387</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4409560272830824468" datatype="html">
         <source>Error executing operation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1400</context>
+          <context context-type="linenumber">1398</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6030453331794586802" datatype="html">
         <source>Error downloading document</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1463</context>
+          <context context-type="linenumber">1461</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4458954481601077369" datatype="html">
         <source>Page Fit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1543</context>
+          <context context-type="linenumber">1541</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4663705961777238777" datatype="html">
         <source>PDF edit operation for &quot;<x id="PH" equiv-text="this.document.title"/>&quot; will begin in the background.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1783</context>
+          <context context-type="linenumber">1781</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9043972994040261999" datatype="html">
         <source>Error executing PDF edit operation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1795</context>
+          <context context-type="linenumber">1793</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6172690334763056188" datatype="html">
         <source>Please enter the current password before attempting to remove it.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1806</context>
+          <context context-type="linenumber">1804</context>
         </context-group>
       </trans-unit>
       <trans-unit id="968660764814228922" datatype="html">
         <source>Password removal operation for &quot;<x id="PH" equiv-text="this.document.title"/>&quot; will begin in the background.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1840</context>
+          <context context-type="linenumber">1838</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2282118435712883014" datatype="html">
         <source>Error executing password removal operation</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1854</context>
+          <context context-type="linenumber">1852</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3740891324955700797" datatype="html">
         <source>Print failed.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1900</context>
+          <context context-type="linenumber">1898</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6457245677384603573" datatype="html">
         <source>Error loading document for printing.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1913</context>
+          <context context-type="linenumber">1911</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6085793215710522488" datatype="html">
         <source>An error occurred loading tiff: <x id="PH" equiv-text="err.toString()"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1978</context>
+          <context context-type="linenumber">1976</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/components/document-detail/document-detail.component.ts</context>
-          <context context-type="linenumber">1982</context>
+          <context context-type="linenumber">1980</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4958946940233632319" datatype="html">

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/common": "~21.2.17",
-    "@angular/compiler": "~21.2.17",
-    "@angular/core": "~21.2.17",
-    "@angular/forms": "~21.2.14",
-    "@angular/localize": "~21.2.14",
-    "@angular/platform-browser": "~21.2.14",
-    "@angular/platform-browser-dynamic": "~21.2.14",
-    "@angular/router": "~21.2.14",
-    "@ng-bootstrap/ng-bootstrap": "^20.0.0",
-    "@ng-select/ng-select": "^21.8.2",
+    "@angular/cdk": "^22.0.3",
+    "@angular/common": "~22.0.5",
+    "@angular/compiler": "~22.0.5",
+    "@angular/core": "~22.0.5",
+    "@angular/forms": "~22.0.5",
+    "@angular/localize": "~22.0.5",
+    "@angular/platform-browser": "~22.0.5",
+    "@angular/platform-browser-dynamic": "~22.0.5",
+    "@angular/router": "~22.0.5",
+    "@ng-bootstrap/ng-bootstrap": "^21.0.0",
+    "@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-device-detector": "^11.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^18.0.0",
+    "ngx-cookie-service": "^22.0.0",
+    "ngx-device-detector": "^12.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",
-    "zone.js": "^0.16.2"
+    "uuid": "^14.0.1"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^21.0.3",
-    "@angular-builders/jest": "^21.0.3",
-    "@angular-devkit/core": "^21.2.12",
-    "@angular-devkit/schematics": "^21.2.12",
-    "@angular-eslint/builder": "21.4.0",
-    "@angular-eslint/eslint-plugin": "21.4.0",
-    "@angular-eslint/eslint-plugin-template": "21.4.0",
-    "@angular-eslint/schematics": "21.4.0",
-    "@angular-eslint/template-parser": "21.4.0",
-    "@angular/build": "^21.2.12",
-    "@angular/cli": "~21.2.12",
-    "@angular/compiler-cli": "~21.2.14",
+    "@angular-builders/custom-webpack": "^22.0.1",
+    "@angular-builders/jest": "^22.0.1",
+    "@angular-devkit/core": "^22.0.5",
+    "@angular-devkit/schematics": "^22.0.5",
+    "@angular-eslint/builder": "22.0.0",
+    "@angular-eslint/eslint-plugin": "22.0.0",
+    "@angular-eslint/eslint-plugin-template": "22.0.0",
+    "@angular-eslint/schematics": "22.0.0",
+    "@angular-eslint/template-parser": "22.0.0",
+    "@angular/build": "^22.0.5",
+    "@angular/cli": "~22.0.5",
+    "@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",
-    "@typescript-eslint/eslint-plugin": "^8.60.0",
-    "@typescript-eslint/parser": "^8.60.0",
-    "@typescript-eslint/utils": "^8.60.0",
-    "eslint": "^10.4.0",
+    "@types/node": "^26.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.0",
+    "@typescript-eslint/parser": "^8.62.0",
+    "@typescript-eslint/utils": "^8.62.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",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@parcel/watcher",
-      "canvas",
-      "esbuild",
-      "lmdb",
-      "msgpackr-extract"
-    ]
-  }
+  "packageManager": "pnpm@10.17.1"
 }

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"
-        (ngModelChange)="onLimitChange($event)"
+        [ngModel]="limit()"
+        (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">
-  @for (logFile of logFiles; track logFile) {
+<ul ngbNav #nav="ngbNav" [activeId]="activeLog()" (activeIdChange)="activeLog.set($event); reloadLogs()" class="nav-tabs">
+  @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) {
-          this.activeLog = this.logFiles[0]
+        if (this.logFiles().length > 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.pagedTasks).toEqual([tasks[0]])
+    expect(component.totalTasks()).toBe(30)
+    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
-  public sectionCounts: Record<TaskSection, number> = {
+  readonly totalTasks = signal(0)
+  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[TaskSection.NeedsAttention] = counts.needs_attention
-        this.sectionCounts[TaskSection.InProgress] = counts.in_progress
-        this.sectionCounts[TaskSection.Completed] = counts.completed
+        this.sectionCounts.set({
+          [TaskSection.All]: counts.all,
+          [TaskSection.NeedsAttention]: counts.needs_attention,
+          [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.totalTasks = result.count
-          this.sectionCounts[TaskSection.All] = result.count
+          this.pagedTasks.set(result.results)
+          this.totalTasks.set(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.totalTasks > 0
+            this.pagedTasks().length === 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>
-            @if (selectedDocuments.size > 0) {
-                &nbsp;({{selectedDocuments.size}} selected)
+            <ng-container i18n>{totalDocuments(), plural, =1 {One document in trash} other {{{totalDocuments() || 0}} total documents in trash}}</ng-container>
+            @if (selectedDocuments().size > 0) {
+                &nbsp;({{selectedDocuments().size}} selected)
             }
         </div>
-        @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>
+        @if (documentsInTrash().length > 20) {
+            <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
-    expect(component.selectedDocuments.size).toEqual(0)
+    component.documentsInTrash.set(documentsInTrash)
+    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[] = []
-  public selectedDocuments: Set<number> = new Set()
-  public allToggled: boolean = false
-  public page: number = 1
-  public totalDocuments: number
+  readonly documentsInTrash = signal<Document[]>([])
+  readonly selectedDocuments = signal<Set<number>>(new Set())
+  readonly allToggled = signal(false)
+  readonly page = signal(1)
+  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.totalDocuments = r.count
-          this.selectedDocuments.clear()
+          this.documentsInTrash.set(r.results)
+          this.totalDocuments.set(r.count)
+          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)
-      ? this.selectedDocuments.delete(object.id)
-      : this.selectedDocuments.add(object.id)
+    const selectedDocuments = new Set(this.selectedDocuments())
+    selectedDocuments.has(object.id)
+      ? selectedDocuments.delete(object.id)
+      : selectedDocuments.add(object.id)
+    this.selectedDocuments.set(selectedDocuments)
   }
 
   clearSelection() {
-    this.allToggled = false
-    this.selectedDocuments.clear()
+    this.allToggled.set(false)
+    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[]
-  groups: Group[]
+  readonly users = signal<User[]>(null)
+  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) {
-    <span class="badge rounded-pill z-3 pe-none bg-secondary me-2 position-absolute top-0 left-0">{{ toasts.length }}</span>
+  @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>
   }
   <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(component.toasts).toContainEqual({
+    expect(getToastsSpy).toHaveBeenCalled()
+    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
-
-  public toasts: Toast[] = []
-
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.subscription = this.toastService.getToasts().subscribe((toasts) => {
-      this.toasts = [...toasts]
-    })
-  }
+  readonly toasts = toSignal(
+    this.toastService.getToasts().pipe(map((toasts) => [...toasts])),
+    { initialValue: [] as Toast[] }
+  )
 
   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[] = []
-  public archiveFallback: boolean = false
-  public deleteOriginals: boolean = false
-  private _documents: Document[] = []
-  get documents(): Document[] {
-    return this._documents
+  private documentIDsSignal = signal<number[]>([])
+  private archiveFallbackSignal = signal(false)
+  private deleteOriginalsSignal = signal(false)
+  private documentsSignal = signal<Document[]>([])
+  private metadataDocumentIDSignal = signal(-1)
+
+  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
-  public showPDFNote: boolean = true
+  private documentIDSignal = signal<number>(undefined)
+  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[]
-  correspondents: Correspondent[]
-  documentTypes: DocumentType[]
+  private accountsSignal = signal<MailAccount[]>(undefined)
+  private correspondentsSignal = signal<Correspondent[]>(undefined)
+  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[]
-  passwordIsSet: boolean = false
-  public totpLoading: boolean = false
+  private groupsSignal = signal<Group[]>(undefined)
+  private passwordIsSetSignal = signal(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[]
-  correspondents: Correspondent[]
-  documentTypes: DocumentType[]
-  storagePaths: StoragePath[]
-  mailRules: MailRule[]
-  customFields: CustomField[]
-  dateCustomFields: CustomField[]
+  private templatesSignal = signal<Workflow[]>(undefined)
+  private correspondentsSignal = signal<Correspondent[]>(undefined)
+  private documentTypesSignal = signal<DocumentType[]>(undefined)
+  private storagePathsSignal = signal<StoragePath[]>(undefined)
+  private mailRulesSignal = signal<MailRule[]>(undefined)
+  private customFieldsSignal = signal<CustomField[]>(undefined)
+  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()
-  documentIds: number[]
+  private documentIdsSignal = signal<number[]>(undefined)
+  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 hotkeys: Map<string, string> = new Map()
+  public get title(): string {
+    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 = ''
-  public copied: boolean = false
+  private titleSignal = signal('')
+  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
-  versionID?: number
+  private documentIDSignal = signal<number>(undefined)
+  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
-  public error: any
+  private networkActiveSignal = signal(false)
+  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 codesCopied: boolean = false
+  public get copied(): boolean {
+    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.error.email_confirm = $localize`Emails must match`
+        this.setFieldError('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.error.password_confirm = $localize`Passwords must match`
+        this.setFieldError('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()
-    this.selectionCount = this._documents.length
-    this.documentPreview = this._documents.slice(0, 10)
+    const documents = docs.concat()
+    this.documentsSignal.set(documents)
+    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[] = []
-  error: string | null = null
-  copiedSlug: string | null = null
+  get bundles(): ShareLinkBundleSummary[] {
+    return this.bundlesSignal()
+  }
+
+  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()
-  title = $localize`Share Links`
+  private titleSignal = signal($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
-      : SystemStatusItemStatus.ERROR
+    this.updateWebsocketStatus(this.websocketStatusService.isConnected())
     this.websocketStatusService
       .onConnectionStatus()
       .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((connected) => {
-        this.status.websocket_connected = connected
-          ? SystemStatusItemStatus.OK
-          : SystemStatusItemStatus.ERROR
-      })
+      .subscribe((connected) => this.updateWebsocketStatus(connected))
   }
 
   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', () => {
-    const unsubscribeSpy = jest.spyOn(
-      (component as any).subscription,
-      'unsubscribe'
-    )
-    component.ngOnDestroy()
-    expect(unsubscribeSpy).toHaveBeenCalled()
-  })
-
-  it('should subscribe to toastService', () => {
-    component.ngOnInit()
+  it('should update from toastService', () => {
     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
-
-  ngOnDestroy(): void {
-    this.subscription?.unsubscribe()
-  }
-
-  ngOnInit(): void {
-    this.subscription = this.toastService.showToast.subscribe((toast) => {
-      this.toasts = toast ? [toast] : []
-    })
-  }
+  readonly toasts = toSignal(
+    merge(
+      this.toastService.showToast.pipe(map((toast) => (toast ? [toast] : []))),
+      this.closedToast.pipe(map(() => [] as Toast[]))
+    ),
+    { initialValue: [] as Toast[] }
+  )
 
   closeToast() {
-    this.toastService.closeToast(this.toasts[0])
-    this.toasts = []
+    this.toastService.closeToast(this.toasts()[0])
+    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(
-      this.dashboardViews,
-      event.previousIndex,
-      event.currentIndex
-    )
+    const dashboardViews = [...this.dashboardViews()]
+    moveItemInArray(dashboardViews, event.previousIndex, event.currentIndex)
+    this.dashboardViews.set(dashboardViews)
 
     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]="loading"
+  [loading]="false"
   [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"
-          [ngStyle]="{ opacity: !loading && show ? 1 : 1 - (i * 1/documents.length) }"
+          [document]="d"
+          [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(
-        takeUntil(this.unsubscribeNotifier),
-        tap((result) => {
-          this.show = true
-          this.documents = result.results
-          this.count = result.count
-          this.savedViewService.setDocumentCount(this.savedView, result.count)
-        }),
-        delay(500)
-      )
+      .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result) => {
+        this.documents = result.results
+        this.count = result.count
+        this.savedViewService.setDocumentCount(this.savedView, result.count)
         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/`)
   })

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

@@ -1,6 +1,6 @@
 import { DecimalPipe } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, OnDestroy, OnInit } from '@angular/core'
+import { Component, inject, OnDestroy, OnInit, signal } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
@@ -55,21 +55,20 @@ export class StatisticsWidgetComponent
   private websocketConnectionService = inject(WebsocketStatusService)
   private documentListViewService = inject(DocumentListViewService)
 
-  loading: boolean = false
-
-  statistics: Statistics = {}
+  readonly loading = signal(false)
+  readonly statistics = signal<Statistics>({})
 
   subscription: Subscription
   private unsubscribeNotifer: Subject<any> = new Subject()
 
   reload() {
-    if (this.loading) return
-    this.loading = true
+    if (this.loading()) return
+    this.loading.set(true)
     this.http
       .get<Statistics>(`${environment.apiBaseUrl}statistics/`)
       .pipe(takeUntil(this.unsubscribeNotifer), first())
       .subscribe((statistics) => {
-        this.loading = false
+        this.loading.set(false)
         const fileTypeMax = 5
         if (statistics.document_file_type_counts?.length > fileTypeMax) {
           const others = statistics.document_file_type_counts.slice(fileTypeMax)
@@ -85,7 +84,7 @@ export class StatisticsWidgetComponent
             ),
           })
         }
-        this.statistics = statistics
+        this.statistics.set(statistics)
       })
   }
 
@@ -101,11 +100,11 @@ export class StatisticsWidgetComponent
   }
 
   getFileTypePercent(filetype: DocumentFileType): number {
-    return (filetype.mime_type_count / this.statistics?.documents_total) * 100
+    return (filetype.mime_type_count / this.statistics()?.documents_total) * 100
   }
 
   getItemOpacity(i: number): number {
-    return 1 - i / this.statistics?.document_file_type_counts.length
+    return 1 - i / this.statistics()?.document_file_type_counts.length
   }
 
   ngOnInit(): void {
@@ -127,8 +126,8 @@ export class StatisticsWidgetComponent
     this.documentListViewService.quickFilter([
       {
         rule_type: FILTER_HAS_TAGS_ANY,
-        value: this.statistics.inbox_tags
-          .map((tagID) => tagID.toString())
+        value: this.statistics()
+          .inbox_tags.map((tagID) => tagID.toString())
           .join(','),
       },
     ])

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

@@ -1,19 +1,20 @@
-@if (!cardless) {
-  <div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
+@if (!cardless()) {
+  <div class="card shadow-sm bg-light fade" [class.show]="show()" cdkDrag [cdkDragDisabled]="!draggable()" cdkDragPreviewContainer="parent">
     <div class="card-header">
       <div class="d-flex justify-content-between align-items-center">
         <div class="d-flex align-items-center">
-          @if (draggable) {
+          @if (draggable()) {
             <div class="ms-n2 me-1" cdkDragHandle>
               <i-bs name="grip-vertical"></i-bs>
             </div>
           }
-          <h6 class="card-title mb-0">{{title}}</h6>
-          @if (badge) {
-            <span class="badge bg-info text-dark ms-2">{{badge}}</span>
+          <h6 class="card-title mb-0">{{title()}}</h6>
+          <ng-content select="[title-badge]"></ng-content>
+          @if (badge() !== null && badge() !== undefined) {
+            <span class="badge bg-info text-dark ms-2">{{badge()}}</span>
           }
         </div>
-        @if (loading) {
+        @if (loading()) {
           <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
           <div class="visually-hidden" i18n>Loading...</div>
         }
@@ -25,7 +26,7 @@
     </div>
   </div>
 } @else {
-  <div class="fade" [class.show]="show">
+  <div class="fade" [class.show]="show()">
     <ng-container [ngTemplateOutlet]="content"></ng-container>
   </div>
 }

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss

@@ -1,3 +1,23 @@
 i-bs {
     cursor: move;
 }
+
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}

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

@@ -45,21 +45,19 @@ describe('WidgetFrameComponent', () => {
   })
 
   it('should show title', () => {
-    component.title = 'Foo'
+    fixture.componentRef.setInput('title', 'Foo')
     fixture.detectChanges()
     expect(fixture.debugElement.nativeElement.textContent).toContain('Foo')
   })
 
   it('should show loading indicator', () => {
     expect(fixture.debugElement.query(By.css('.spinner-border'))).toBeNull()
-    component.loading = true
+    fixture.componentRef.setInput('loading', true)
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
   })
 
   it('should show', () => {
-    expect(component.show).toBeFalsy()
-    jest.advanceTimersByTime(100)
-    expect(component.show).toBeTruthy()
+    expect(component.show()).toBeTruthy()
   })
 })

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

@@ -1,8 +1,7 @@
 import { DragDropModule } from '@angular/cdk/drag-drop'
 import { NgTemplateOutlet } from '@angular/common'
-import { AfterViewInit, Component, Input } from '@angular/core'
+import { AfterViewInit, Component, input, signal } from '@angular/core'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { LoadingComponentWithPermissions } from 'src/app/components/loading-component/loading.component'
 
 @Component({
   selector: 'pngx-widget-frame',
@@ -10,32 +9,20 @@ import { LoadingComponentWithPermissions } from 'src/app/components/loading-comp
   styleUrls: ['./widget-frame.component.scss'],
   imports: [DragDropModule, NgxBootstrapIconsModule, NgTemplateOutlet],
 })
-export class WidgetFrameComponent
-  extends LoadingComponentWithPermissions
-  implements AfterViewInit
-{
-  constructor() {
-    super()
-  }
+export class WidgetFrameComponent implements AfterViewInit {
+  readonly show = signal(false)
 
-  @Input()
-  title: string
+  loading = input(false)
 
-  @Input()
-  loading: boolean = false
+  title = input<string>()
 
-  @Input()
-  draggable: any
+  draggable = input<any>()
 
-  @Input()
-  cardless: boolean = false
+  cardless = input(false)
 
-  @Input()
-  badge: string
+  badge = input<string | number>(null)
 
   ngAfterViewInit(): void {
-    setTimeout(() => {
-      this.show = true
-    }, 100)
+    this.show.set(true)
   }
 }

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

@@ -445,8 +445,7 @@
       <button type="submit" class="order-3 btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
       @if (hasNext()) {
         <button type="button" class="order-1 btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
-      }
-      @if (!hasNext()) {
+      } @else {
         <button type="button" class="order-2 btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
       }
       <button type="button" class="order-0 btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
@@ -473,6 +472,7 @@
           <div class="preview-sticky pdf-viewer-container">
             <pngx-pdf-viewer
               [src]="pdfSource"
+              [password]="pdfPassword"
               [renderMode]="PdfRenderMode.All"
               [(page)]="previewCurrentPage"
               [zoomScale]="previewZoomScale"

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

@@ -853,6 +853,7 @@ describe('DocumentDetailComponent', () => {
         .find((b) => b.nativeElement.textContent === 'Save & next')
     ).toBeUndefined()
     nextSpy.mockReturnValue(true)
+    component.networkActive = true
     fixture.detectChanges()
     expect(
       fixture.debugElement
@@ -1530,11 +1531,13 @@ describe('DocumentDetailComponent', () => {
   })
 
   it('should clear pdf source if preview URL is empty', () => {
-    component.pdfSource = { url: '/preview', password: 'secret' } as any
+    component.pdfSource = '/preview'
+    component.pdfPassword = 'secret'
     component.previewUrl = null
     ;(component as any).updatePdfSource()
 
-    expect(component.pdfSource).toEqual({ url: null, password: undefined })
+    expect(component.pdfSource).toEqual(null)
+    expect(component.pdfPassword).toBeUndefined()
   })
 
   it('should close incoming update modal if one is open', () => {
@@ -1871,9 +1874,8 @@ describe('DocumentDetailComponent', () => {
     expect(component.thumbUrl).toBe('thumb-version')
     expect(component.previewText).toBe('version text')
     expect(component.documentForm.get('content').value).toBe('version-content')
-    const pdfSource = component.pdfSource as { url: string; password?: string }
-    expect(pdfSource.url).toBe('preview-version')
-    expect(pdfSource.password).toBeUndefined()
+    expect(component.pdfSource).toBe('preview-version')
+    expect(component.pdfPassword).toBeUndefined()
 
     previewSpy.mockReturnValueOnce('preview-error')
     component.selectVersion(11)

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

@@ -1,6 +1,13 @@
 import { AsyncPipe, NgTemplateOutlet } from '@angular/common'
 import { HttpClient, HttpResponse } from '@angular/common/http'
-import { Component, inject, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import {
+  Component,
+  inject,
+  OnDestroy,
+  OnInit,
+  signal,
+  ViewChild,
+} from '@angular/core'
 import {
   FormArray,
   FormControl,
@@ -115,7 +122,6 @@ import { PDFEditorComponent } from '../common/pdf-editor/pdf-editor.component'
 import { PngxPdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
 import {
   PdfRenderMode,
-  PdfSource,
   PdfZoomLevel,
   PdfZoomScale,
   PngxPdfDocumentProxy,
@@ -228,33 +234,34 @@ export class DocumentDetailComponent
   expandOriginalMetadata = false
   expandArchivedMetadata = false
 
-  error: any
+  private errorSignal = signal<any>(undefined)
 
-  networkActive = false
+  private networkActiveSignal = signal(false)
 
-  documentId: number
-  document: Document
-  metadata: DocumentMetadata
-  suggestions: DocumentSuggestions
-  suggestionsLoading: boolean = false
-  users: User[]
+  private documentIdSignal = signal<number>(undefined)
+  private documentSignal = signal<Document>(undefined)
+  private metadataSignal = signal<DocumentMetadata>(undefined)
+  private suggestionsSignal = signal<DocumentSuggestions>(undefined)
+  private suggestionsLoadingSignal = signal(false)
+  private usersSignal = signal<User[]>(undefined)
 
-  title: string
+  private titleSignal = signal<string>(undefined)
   titleSubject: Subject<string> = new Subject()
-  previewUrl: string
-  pdfSource?: PdfSource
-  thumbUrl: string
-  previewText: string
-  previewLoaded: boolean = false
-  tiffURL: string
-  tiffError: string
+  private previewUrlSignal = signal<string>(undefined)
+  private pdfSourceSignal = signal<string>(undefined)
+  private pdfPasswordSignal = signal<string>(undefined)
+  private thumbUrlSignal = signal<string>(undefined)
+  private previewTextSignal = signal<string>(undefined)
+  private previewLoadedSignal = signal(false)
+  private tiffURLSignal = signal<string>(undefined)
+  private tiffErrorSignal = signal<string>(undefined)
 
   // Versioning
-  selectedVersionId: number
+  private selectedVersionIdSignal = signal<number>(undefined)
 
-  correspondents: Correspondent[]
-  documentTypes: DocumentType[]
-  storagePaths: StoragePath[]
+  private correspondentsSignal = signal<Correspondent[]>(undefined)
+  private documentTypesSignal = signal<DocumentType[]>(undefined)
+  private storagePathsSignal = signal<StoragePath[]>(undefined)
 
   documentForm: FormGroup = new FormGroup({
     title: new FormControl(''),
@@ -269,10 +276,10 @@ export class DocumentDetailComponent
     custom_fields: new FormArray([]),
   })
 
-  previewCurrentPage: number = 1
-  previewNumPages: number
-  previewZoomSetting: PdfZoomLevel = PdfZoomLevel.One
-  previewZoomScale: PdfZoomScale = PdfZoomScale.PageWidth
+  private previewCurrentPageSignal = signal(1)
+  private previewNumPagesSignal = signal<number>(undefined)
+  private previewZoomSettingSignal = signal<PdfZoomLevel>(PdfZoomLevel.One)
+  private previewZoomScaleSignal = signal<PdfZoomScale>(PdfZoomScale.PageWidth)
 
   store: BehaviorSubject<any>
   isDirty$: Observable<boolean>
@@ -287,9 +294,9 @@ export class DocumentDetailComponent
 
   ogDate: Date
 
-  customFields: CustomField[]
+  private customFieldsSignal = signal<CustomField[]>(undefined)
 
-  public downloading: boolean = false
+  private downloadingSignal = signal(false)
   public useFormattedFilename: boolean = false
 
   public readonly CustomFieldDataType = CustomFieldDataType
@@ -314,13 +321,238 @@ export class DocumentDetailComponent
   }
 
   DocumentDetailNavIDs = DocumentDetailNavIDs
-  activeNavID: number
+  private activeNavIDSignal = signal<number>(undefined)
+
+  get error(): any {
+    return this.errorSignal()
+  }
+
+  set error(value: any) {
+    this.errorSignal.set(value)
+  }
+
+  get networkActive(): boolean {
+    return this.networkActiveSignal()
+  }
+
+  set networkActive(value: boolean) {
+    this.networkActiveSignal.set(value)
+  }
+
+  get documentId(): number {
+    return this.documentIdSignal()
+  }
+
+  set documentId(value: number) {
+    this.documentIdSignal.set(value)
+  }
+
+  get document(): Document {
+    return this.documentSignal()
+  }
+
+  set document(value: Document) {
+    this.documentSignal.set(value)
+  }
+
+  get metadata(): DocumentMetadata {
+    return this.metadataSignal()
+  }
+
+  set metadata(value: DocumentMetadata) {
+    this.metadataSignal.set(value)
+  }
+
+  get suggestions(): DocumentSuggestions {
+    return this.suggestionsSignal()
+  }
+
+  set suggestions(value: DocumentSuggestions) {
+    this.suggestionsSignal.set(value)
+  }
+
+  get suggestionsLoading(): boolean {
+    return this.suggestionsLoadingSignal()
+  }
+
+  set suggestionsLoading(value: boolean) {
+    this.suggestionsLoadingSignal.set(value)
+  }
+
+  get users(): User[] {
+    return this.usersSignal()
+  }
+
+  set users(value: User[]) {
+    this.usersSignal.set(value)
+  }
+
+  get title(): string {
+    return this.titleSignal()
+  }
+
+  set title(value: string) {
+    this.titleSignal.set(value)
+  }
+
+  get previewUrl(): string {
+    return this.previewUrlSignal()
+  }
+
+  set previewUrl(value: string) {
+    this.previewUrlSignal.set(value)
+  }
+
+  get pdfSource(): string {
+    return this.pdfSourceSignal()
+  }
+
+  set pdfSource(value: string) {
+    this.pdfSourceSignal.set(value)
+  }
+
+  get pdfPassword(): string {
+    return this.pdfPasswordSignal()
+  }
+
+  set pdfPassword(value: string) {
+    this.pdfPasswordSignal.set(value)
+  }
+
+  get thumbUrl(): string {
+    return this.thumbUrlSignal()
+  }
+
+  set thumbUrl(value: string) {
+    this.thumbUrlSignal.set(value)
+  }
+
+  get previewText(): string {
+    return this.previewTextSignal()
+  }
+
+  set previewText(value: string) {
+    this.previewTextSignal.set(value)
+  }
+
+  get previewLoaded(): boolean {
+    return this.previewLoadedSignal()
+  }
+
+  set previewLoaded(value: boolean) {
+    this.previewLoadedSignal.set(value)
+  }
+
+  get tiffURL(): string {
+    return this.tiffURLSignal()
+  }
+
+  set tiffURL(value: string) {
+    this.tiffURLSignal.set(value)
+  }
+
+  get tiffError(): string {
+    return this.tiffErrorSignal()
+  }
+
+  set tiffError(value: string) {
+    this.tiffErrorSignal.set(value)
+  }
+
+  get selectedVersionId(): number {
+    return this.selectedVersionIdSignal()
+  }
+
+  set selectedVersionId(value: number) {
+    this.selectedVersionIdSignal.set(value)
+  }
+
+  get correspondents(): Correspondent[] {
+    return this.correspondentsSignal()
+  }
+
+  set correspondents(value: Correspondent[]) {
+    this.correspondentsSignal.set(value)
+  }
+
+  get documentTypes(): DocumentType[] {
+    return this.documentTypesSignal()
+  }
+
+  set documentTypes(value: DocumentType[]) {
+    this.documentTypesSignal.set(value)
+  }
+
+  get storagePaths(): StoragePath[] {
+    return this.storagePathsSignal()
+  }
+
+  set storagePaths(value: StoragePath[]) {
+    this.storagePathsSignal.set(value)
+  }
+
+  get previewCurrentPage(): number {
+    return this.previewCurrentPageSignal()
+  }
+
+  set previewCurrentPage(value: number) {
+    this.previewCurrentPageSignal.set(value)
+  }
+
+  get previewNumPages(): number {
+    return this.previewNumPagesSignal()
+  }
+
+  set previewNumPages(value: number) {
+    this.previewNumPagesSignal.set(value)
+  }
+
+  get previewZoomSetting(): PdfZoomLevel {
+    return this.previewZoomSettingSignal()
+  }
+
+  set previewZoomSetting(value: PdfZoomLevel) {
+    this.previewZoomSettingSignal.set(value)
+  }
+
+  get previewZoomScale(): PdfZoomScale {
+    return this.previewZoomScaleSignal()
+  }
+
+  set previewZoomScale(value: PdfZoomScale) {
+    this.previewZoomScaleSignal.set(value)
+  }
+
+  get downloading(): boolean {
+    return this.downloadingSignal()
+  }
+
+  set downloading(value: boolean) {
+    this.downloadingSignal.set(value)
+  }
+
+  get activeNavID(): number {
+    return this.activeNavIDSignal()
+  }
+
+  set activeNavID(value: number) {
+    this.activeNavIDSignal.set(value)
+  }
+
+  get customFields(): CustomField[] {
+    return this.customFieldsSignal()
+  }
+
+  set customFields(value: CustomField[]) {
+    this.customFieldsSignal.set(value)
+  }
 
   titleKeyUp(event) {
     this.titleSubject.next(event.target?.value)
   }
 
   get useNativePdfViewer(): boolean {
+    this.settings.trackChanges()
     return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
   }
 
@@ -329,10 +561,12 @@ export class DocumentDetailComponent
   }
 
   get aiEnabled(): boolean {
+    this.settings.trackChanges()
     return this.settings.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
   get archiveContentRenderType(): ContentRenderType {
+    this.settings.trackChanges()
     const hasArchiveVersion =
       this.metadata?.has_archive_version ?? !!this.document?.archived_file_name
     return hasArchiveVersion
@@ -343,16 +577,19 @@ export class DocumentDetailComponent
   }
 
   get originalContentRenderType(): ContentRenderType {
+    this.settings.trackChanges()
     return this.getRenderType(
       this.metadata?.original_mime_type || this.document?.mime_type
     )
   }
 
   get showThumbnailOverlay(): boolean {
+    this.settings.trackChanges()
     return this.settings.get(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL)
   }
 
   isFieldHidden(fieldId: DocumentDetailFieldID): boolean {
+    this.settings.trackChanges()
     return this.settings
       .get(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
       .includes(fieldId)
@@ -375,10 +612,8 @@ export class DocumentDetailComponent
   }
 
   private updatePdfSource() {
-    this.pdfSource = {
-      url: this.previewUrl,
-      password: this.password,
-    }
+    this.pdfSource = this.previewUrl
+    this.pdfPassword = this.password
   }
 
   private loadMetadataForSelectedVersion() {
@@ -1494,9 +1729,7 @@ export class DocumentDetailComponent
   pdfPreviewLoaded(pdf: PngxPdfDocumentProxy) {
     this.previewNumPages = pdf.numPages
     if (this.password) this.requiresPassword = false
-    setTimeout(() => {
-      this.previewLoaded = true
-    }, 300)
+    this.previewLoaded = true
   }
 
   onError(event) {

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

@@ -2,6 +2,26 @@
   overflow-wrap: anywhere;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img-container {
   position: relative;
 }

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

@@ -67,15 +67,14 @@ describe('DocumentCardLargeComponent', () => {
 
     fixture = TestBed.createComponent(DocumentCardLargeComponent)
     component = fixture.componentInstance
-    component.document = doc
+    component.document = { ...doc, tags: [...doc.tags], notes: [...doc.notes] }
     fixture.detectChanges()
     jest.useFakeTimers()
   })
 
   it('should show the card', () => {
-    expect(component.show).toBeFalsy()
+    expect(component.show).toBeTruthy()
     component.ngAfterViewInit()
-    jest.advanceTimersByTime(100)
     expect(component.show).toBeTruthy()
   })
 
@@ -91,10 +90,13 @@ describe('DocumentCardLargeComponent', () => {
 
   it('should display search hits with colored score', () => {
     // high
-    component.document.__search_hit__ = {
-      score: 0.9,
-      rank: 1,
-      highlights: 'cheesecake',
+    component.document = {
+      ...component.document,
+      __search_hit__: {
+        score: 0.9,
+        rank: 1,
+        highlights: 'cheesecake',
+      },
     }
     fixture.detectChanges()
     let search_hit = fixture.debugElement.query(By.css('.search-score'))
@@ -102,14 +104,20 @@ describe('DocumentCardLargeComponent', () => {
     expect(component.searchScoreClass).toEqual('success')
 
     // medium
-    component.document.__search_hit__.score = 0.6
+    component.document = {
+      ...component.document,
+      __search_hit__: { ...component.document.__search_hit__, score: 0.6 },
+    }
     fixture.detectChanges()
     search_hit = fixture.debugElement.query(By.css('.search-score'))
     expect(search_hit).not.toBeUndefined()
     expect(component.searchScoreClass).toEqual('warning')
 
     // low
-    component.document.__search_hit__.score = 0.1
+    component.document = {
+      ...component.document,
+      __search_hit__: { ...component.document.__search_hit__, score: 0.1 },
+    }
     fixture.detectChanges()
     search_hit = fixture.debugElement.query(By.css('.search-score'))
     expect(search_hit).not.toBeUndefined()
@@ -117,10 +125,13 @@ describe('DocumentCardLargeComponent', () => {
   })
 
   it('should display note highlights', () => {
-    component.document.__search_hit__ = {
-      score: 0.9,
-      rank: 1,
-      note_highlights: '<span>bananas</span>',
+    component.document = {
+      ...component.document,
+      __search_hit__: {
+        score: 0.9,
+        rank: 1,
+        note_highlights: '<span>bananas</span>',
+      },
     }
     fixture.detectChanges()
     expect(fixture.nativeElement.textContent).toContain('bananas')
@@ -128,11 +139,14 @@ describe('DocumentCardLargeComponent', () => {
   })
 
   it('should fall back to document content when a search hit has no highlights', () => {
-    component.document.__search_hit__ = {
-      score: 0.9,
-      rank: 1,
-      highlights: '',
-      note_highlights: null,
+    component.document = {
+      ...component.document,
+      __search_hit__: {
+        score: 0.9,
+        rank: 1,
+        highlights: '',
+        note_highlights: null,
+      },
     }
     fixture.detectChanges()
 

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

@@ -7,6 +7,7 @@ import {
   Output,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -14,7 +15,6 @@ import {
   NgbTooltipModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { delay, of } from 'rxjs'
 import {
   DEFAULT_DISPLAY_FIELDS,
   DisplayField,
@@ -65,14 +65,31 @@ export class DocumentCardLargeComponent
 {
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
+  private selectedSignal = signal(false)
+  private displayFieldsSignal = signal<string[]>(
+    DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
+  )
+  private documentSignal = signal<Document>(undefined)
 
   DisplayField = DisplayField
 
   @Input()
-  selected = false
+  get selected(): boolean {
+    return this.selectedSignal()
+  }
+
+  set selected(selected: boolean) {
+    this.selectedSignal.set(selected)
+  }
 
   @Input()
-  displayFields: string[] = DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
+  get displayFields(): string[] {
+    return this.displayFieldsSignal()
+  }
+
+  set displayFields(displayFields: string[]) {
+    this.displayFieldsSignal.set(displayFields)
+  }
 
   @Output()
   toggleSelected = new EventEmitter()
@@ -82,7 +99,13 @@ export class DocumentCardLargeComponent
   }
 
   @Input()
-  document: Document
+  get document(): Document {
+    return this.documentSignal()
+  }
+
+  set document(document: Document) {
+    this.documentSignal.set(document)
+  }
 
   @Output()
   dblClickDocument = new EventEmitter()
@@ -108,11 +131,7 @@ export class DocumentCardLargeComponent
   popoverHidden = true
 
   ngAfterViewInit(): void {
-    of(true)
-      .pipe(delay(50))
-      .subscribe(() => {
-        this.show = true
-      })
+    this.show = true
   }
 
   get searchScoreClass() {

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -2,6 +2,26 @@
   font-size: 90%;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img {
   object-fit: cover;
   object-position: top left;

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.spec.ts

@@ -52,9 +52,8 @@ describe('DocumentCardSmallComponent', () => {
   })
 
   it('should show the card', () => {
-    expect(component.show).toBeFalsy()
+    expect(component.show).toBeTruthy()
     component.ngAfterViewInit()
-    jest.advanceTimersByTime(100)
     expect(component.show).toBeTruthy()
   })
 
@@ -67,7 +66,7 @@ describe('DocumentCardSmallComponent', () => {
     expect(
       fixture.debugElement.queryAll(By.directive(TagComponent))
     ).toHaveLength(5)
-    component.document.tags = [1, 2]
+    component.document = { ...component.document, tags: [1, 2] }
     fixture.detectChanges()
     expect(
       fixture.debugElement.queryAll(By.directive(TagComponent))
@@ -75,7 +74,7 @@ describe('DocumentCardSmallComponent', () => {
   })
 
   it('should increase limit tags to 6 if no notes', () => {
-    component.document.notes = []
+    component.document = { ...component.document, notes: [] }
     fixture.detectChanges()
     expect(
       fixture.debugElement.queryAll(By.directive(TagComponent))
@@ -85,7 +84,7 @@ describe('DocumentCardSmallComponent', () => {
   it('should clear hidden tag counter when tag count falls below the limit', () => {
     expect(component.moreTags).toEqual(3)
 
-    component.document.tags = [1, 2, 3, 4, 5, 6]
+    component.document = { ...component.document, tags: [1, 2, 3, 4, 5, 6] }
     fixture.detectChanges()
 
     expect(component.moreTags).toBeNull()

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts

@@ -7,6 +7,7 @@ import {
   Output,
   ViewChild,
   inject,
+  signal,
 } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import {
@@ -14,8 +15,6 @@ import {
   NgbTooltipModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { of } from 'rxjs'
-import { delay } from 'rxjs/operators'
 import {
   DEFAULT_DISPLAY_FIELDS,
   DisplayField,
@@ -66,20 +65,43 @@ export class DocumentCardSmallComponent
 {
   private documentService = inject(DocumentService)
   settingsService = inject(SettingsService)
+  private selectedSignal = signal(false)
+  private documentSignal = signal<Document>(undefined)
+  private displayFieldsSignal = signal<string[]>(
+    DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
+  )
 
   DisplayField = DisplayField
 
   @Input()
-  selected = false
+  get selected(): boolean {
+    return this.selectedSignal()
+  }
+
+  set selected(selected: boolean) {
+    this.selectedSignal.set(selected)
+  }
 
   @Output()
   toggleSelected = new EventEmitter()
 
   @Input()
-  document: Document
+  get document(): Document {
+    return this.documentSignal()
+  }
+
+  set document(document: Document) {
+    this.documentSignal.set(document)
+  }
 
   @Input()
-  displayFields: string[] = DEFAULT_DISPLAY_FIELDS.map((f) => f.id)
+  get displayFields(): string[] {
+    return this.displayFieldsSignal()
+  }
+
+  set displayFields(displayFields: string[]) {
+    this.displayFieldsSignal.set(displayFields)
+  }
 
   @Output()
   dblClickDocument = new EventEmitter()
@@ -96,16 +118,17 @@ export class DocumentCardSmallComponent
   @Output()
   clickStoragePath = new EventEmitter<number>()
 
-  moreTags: number = null
+  get moreTags(): number {
+    const limit = this.document?.notes.length > 0 ? 6 : 7
+    return this.document?.tags.length > limit
+      ? this.document.tags.length - (limit - 1)
+      : null
+  }
 
   @ViewChild('popupPreview') popupPreview: PreviewPopupComponent
 
   ngAfterViewInit(): void {
-    of(true)
-      .pipe(delay(50))
-      .subscribe(() => {
-        this.show = true
-      })
+    this.show = true
   }
 
   getIsThumbInverted() {
@@ -123,10 +146,8 @@ export class DocumentCardSmallComponent
   get tagIDs() {
     const limit = this.document.notes.length > 0 ? 6 : 7
     if (this.document.tags.length > limit) {
-      this.moreTags = this.document.tags.length - (limit - 1)
       return this.document.tags.slice(0, limit - 1)
     } else {
-      this.moreTags = null
       return this.document.tags
     }
   }

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

@@ -777,7 +777,7 @@ describe('DocumentListComponent', () => {
   })
 
   it('should hide columns if no perms or notes disabled', () => {
-    jest.spyOn(permissionService, 'currentUserCan').mockReturnValue(true)
+    permissionService.initialize([], { is_superuser: true } as any)
     jest.spyOn(documentListService, 'documents', 'get').mockReturnValue(docs)
     expect(documentListService.sortField).toEqual('created')
 
@@ -798,7 +798,7 @@ describe('DocumentListComponent', () => {
     ).toHaveLength(9)
 
     // insufficient perms
-    jest.spyOn(permissionService, 'currentUserCan').mockReturnValue(false)
+    permissionService.initialize([], { is_superuser: false } as any)
     fixture.detectChanges()
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))

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

@@ -570,6 +570,7 @@ export class DocumentListComponent
   }
 
   get notesEnabled(): boolean {
+    this.settingsService.trackChanges()
     return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
   }
 

src-ui/src/app/components/document-list/save-view-config-dialog/save-view-config-dialog.component.ts

@@ -5,6 +5,7 @@ import {
   OnInit,
   Output,
   inject,
+  signal,
 } from '@angular/core'
 import {
   FormControl,
@@ -32,29 +33,49 @@ import { TextComponent } from '../../common/input/text/text.component'
 })
 export class SaveViewConfigDialogComponent implements OnInit {
   private modal = inject(NgbActiveModal)
+  private errorSignal = signal(undefined)
+  private buttonsEnabledSignal = signal(true)
+  private defaultNameSignal = signal('')
+  private closeEnabledSignal = signal(false)
 
   @Output()
   public saveClicked = new EventEmitter()
 
   @Input()
-  error
+  get error() {
+    return this.errorSignal()
+  }
+
+  set error(error) {
+    this.errorSignal.set(error)
+  }
 
   @Input()
-  buttonsEnabled = true
+  get buttonsEnabled(): boolean {
+    return this.buttonsEnabledSignal()
+  }
 
-  closeEnabled = false
+  set buttonsEnabled(buttonsEnabled: boolean) {
+    this.buttonsEnabledSignal.set(buttonsEnabled)
+  }
+
+  get closeEnabled(): boolean {
+    return this.closeEnabledSignal()
+  }
+
+  set closeEnabled(closeEnabled: boolean) {
+    this.closeEnabledSignal.set(closeEnabled)
+  }
 
   users: User[]
 
-  _defaultName = ''
-
   get defaultName() {
-    return this._defaultName
+    return this.defaultNameSignal()
   }
 
   @Input()
   set defaultName(value: string) {
-    this._defaultName = value
+    this.defaultNameSignal.set(value)
     this.saveViewConfigForm.patchValue({ name: value })
   }
 

src-ui/src/app/components/document-notes/document-notes.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,
@@ -31,22 +38,51 @@ export class DocumentNotesComponent extends ComponentWithPermissions {
   private notesService = inject(DocumentNotesService)
   private toastService = inject(ToastService)
   private usersService = inject(UserService)
+  private documentIdSignal = signal<number>(undefined)
+  private notesSignal = signal<DocumentNote[]>([])
+  private addDisabledSignal = signal(false)
+  private networkActiveSignal = signal(false)
 
   noteForm: FormGroup = new FormGroup({
     newNote: new FormControl(''),
   })
 
-  networkActive = false
+  get networkActive(): boolean {
+    return this.networkActiveSignal()
+  }
+
+  set networkActive(networkActive: boolean) {
+    this.networkActiveSignal.set(networkActive)
+  }
+
   newNoteError: boolean = false
 
   @Input()
-  documentId: number
+  get documentId(): number {
+    return this.documentIdSignal()
+  }
+
+  set documentId(documentId: number) {
+    this.documentIdSignal.set(documentId)
+  }
 
   @Input()
-  notes: DocumentNote[] = []
+  get notes(): DocumentNote[] {
+    return this.notesSignal()
+  }
+
+  set notes(notes: DocumentNote[]) {
+    this.notesSignal.set(notes)
+  }
 
   @Input()
-  addDisabled: boolean = false
+  get addDisabled(): boolean {
+    return this.addDisabledSignal()
+  }
+
+  set addDisabled(addDisabled: boolean) {
+    this.addDisabledSignal.set(addDisabled)
+  }
 
   @Output()
   updated: EventEmitter<DocumentNote[]> = new EventEmitter()

src-ui/src/app/components/file-drop/file-drop.component.html

@@ -1,7 +1,7 @@
-<div [class.pe-none]="fileIsOver">
+<div [class.pe-none]="fileIsOver()">
     <ng-content select="[content]"></ng-content>
 </div>
 
-<div class="global-dropzone-overlay position-fixed top-0 start-0 bottom-0 end-0 text-center pe-none" [class.active]="fileIsOver && !hidden">
+<div class="global-dropzone-overlay position-fixed top-0 start-0 bottom-0 end-0 text-center pe-none" [class.active]="fileIsOver() && !hidden()">
     <h2 class="pe-none position-absolute top-50 start-50 translate-middle" i18n>Drop files to begin upload</h2>
 </div>

src-ui/src/app/components/file-drop/file-drop.component.spec.ts

@@ -61,7 +61,7 @@ describe('FileDropComponent', () => {
     component.onDragOver(new Event('dragover') as DragEvent)
     tick(1)
     fixture.detectChanges()
-    expect(component.fileIsOver).toBeFalsy()
+    expect(component.fileIsOver()).toBeFalsy()
     const dropzone = fixture.debugElement.query(
       By.css('.global-dropzone-overlay')
     )
@@ -85,13 +85,13 @@ describe('FileDropComponent', () => {
 
   it('should support drag drop, initiate upload', fakeAsync(() => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
-    expect(component.fileIsOver).toBeFalsy()
+    expect(component.fileIsOver()).toBeFalsy()
     const overEvent = new Event('dragover') as DragEvent
     ;(overEvent as any).dataTransfer = { types: ['Files'] }
     component.onDragOver(overEvent)
     tick(1)
     fixture.detectChanges()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(component.fileIsOver()).toBeTruthy()
     component.onDragLeave(new Event('dragleave') as DragEvent)
     tick(700)
     fixture.detectChanges()
@@ -121,13 +121,13 @@ describe('FileDropComponent', () => {
 
   it('should support drag drop, initiate upload with webkitGetAsEntry', fakeAsync(() => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
-    expect(component.fileIsOver).toBeFalsy()
+    expect(component.fileIsOver()).toBeFalsy()
     const overEvent = new Event('dragover') as DragEvent
     ;(overEvent as any).dataTransfer = { types: ['Files'] }
     component.onDragOver(overEvent)
     tick(1)
     fixture.detectChanges()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(component.fileIsOver()).toBeTruthy()
     component.onDragLeave(new Event('dragleave') as DragEvent)
     tick(700)
     fixture.detectChanges()
@@ -202,13 +202,13 @@ describe('FileDropComponent', () => {
 
   it('should support drag drop, initiate upload without DataTransfer API support', fakeAsync(() => {
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
-    expect(component.fileIsOver).toBeFalsy()
+    expect(component.fileIsOver()).toBeFalsy()
     const overEvent = new Event('dragover') as DragEvent
     ;(overEvent as any).dataTransfer = { types: ['Files'] }
     component.onDragOver(overEvent)
     tick(1)
     fixture.detectChanges()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(component.fileIsOver()).toBeTruthy()
     component.onDragLeave(new Event('dragleave') as DragEvent)
     tick(700)
     fixture.detectChanges()
@@ -315,8 +315,8 @@ describe('FileDropComponent', () => {
     ;(overEvent as any).dataTransfer = { types: ['Files'] }
     component.onDragOver(overEvent)
     tick(1)
-    expect(component.hidden).toBeFalsy()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(component.hidden()).toBeFalsy()
+    expect(component.fileIsOver()).toBeTruthy()
     jest.spyOn(document, 'hidden', 'get').mockReturnValue(true)
     component.onVisibilityChange()
     expect(leaveSpy).toHaveBeenCalled()
@@ -331,8 +331,8 @@ describe('FileDropComponent', () => {
     ;(overEvent as any).dataTransfer = { types: ['Files'] }
     component.onDragOver(overEvent)
     tick(1)
-    expect(component.hidden).toBeFalsy()
-    expect(component.fileIsOver).toBeTruthy()
+    expect(component.hidden()).toBeFalsy()
+    expect(component.fileIsOver()).toBeTruthy()
     jest.spyOn(document, 'hidden', 'get').mockReturnValue(true)
     component.onWindowBlur()
     expect(leaveSpy).toHaveBeenCalled()

src-ui/src/app/components/file-drop/file-drop.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, inject } from '@angular/core'
+import { Component, HostListener, inject, signal } from '@angular/core'
 import {
   PermissionAction,
   PermissionsService,
@@ -21,8 +21,8 @@ export class FileDropComponent {
   private permissionsService = inject(PermissionsService)
 
   private fileLeaveTimeoutID: any
-  fileIsOver: boolean = false
-  hidden: boolean = true
+  fileIsOver = signal<boolean>(false)
+  hidden = signal<boolean>(true)
 
   public get dragDropEnabled(): boolean {
     return (
@@ -42,9 +42,9 @@ export class FileDropComponent {
     this.settings.globalDropzoneActive = true
     // allows transition
     setTimeout(() => {
-      this.fileIsOver = true
+      this.fileIsOver.set(true)
     }, 1)
-    this.hidden = false
+    this.hidden.set(false)
     // stop fileLeave timeout
     clearTimeout(this.fileLeaveTimeoutID)
   }
@@ -61,10 +61,10 @@ export class FileDropComponent {
     const ms = immediate ? 0 : 500
 
     this.fileLeaveTimeoutID = setTimeout(() => {
-      this.fileIsOver = false
+      this.fileIsOver.set(false)
       // await transition completed
       setTimeout(() => {
-        this.hidden = true
+        this.hidden.set(true)
       }, 150)
     }, ms)
   }

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

@@ -1,4 +1,4 @@
-import { Directive, OnDestroy } from '@angular/core'
+import { Directive, OnDestroy, signal } from '@angular/core'
 import { Subject } from 'rxjs'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 
@@ -7,8 +7,24 @@ export abstract class LoadingComponentWithPermissions
   extends ComponentWithPermissions
   implements OnDestroy
 {
-  public loading: boolean = true
-  public show: boolean = false
+  private loadingSignal = signal(true)
+  private showSignal = signal(false)
+
+  public get loading(): boolean {
+    return this.loadingSignal()
+  }
+
+  public set loading(value: boolean) {
+    this.loadingSignal.set(value)
+  }
+
+  public get show(): boolean {
+    return this.showSignal()
+  }
+
+  public set show(value: boolean) {
+    this.showSignal.set(value)
+  }
 
   protected unsubscribeNotifier: Subject<any> = new Subject()
 

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

@@ -15,7 +15,7 @@
     </li>
   }
 
-  @for (field of fields; track field) {
+  @for (field of fields(); track field) {
     <li class="list-group-item">
       <div class="row fade" [class.show]="show">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
@@ -64,7 +64,7 @@
       </div>
     </li>
   }
-  @if (!loading && fields.length === 0) {
+  @if (!loading && fields().length === 0) {
     <li class="list-group-item" i18n>No fields defined.</li>
   }
 </ul>