Ok now show the difference

Bumps the frontend-eslint-dependencies group with 4 updates in the /src-ui directory: [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin), [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser), [@typescript-eslint/utils](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/utils) and [eslint](https://github.com/eslint/eslint).


Updates `@typescript-eslint/eslint-plugin` from 8.67.0 to 8.68.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.68.0/packages/eslint-plugin)

Updates `@typescript-eslint/parser` from 8.67.0 to 8.68.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.68.0/packages/parser)

Updates `@typescript-eslint/utils` from 8.67.0 to 8.68.0
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/utils/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v8.68.0/packages/utils)

Updates `eslint` from 10.8.1 to 10.9.1
- [Release notes](https://github.com/eslint/eslint/releases)
- [Commits](https://github.com/eslint/eslint/compare/v10.8.1...v10.9.1)

---
updated-dependencies:
- dependency-name: "@typescript-eslint/eslint-plugin"
  dependency-version: 8.68.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: frontend-eslint-dependencies
- dependency-name: "@typescript-eslint/parser"
  dependency-version: 8.68.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: frontend-eslint-dependencies
- dependency-name: "@typescript-eslint/utils"
  dependency-version: 8.68.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: frontend-eslint-dependencies
- dependency-name: eslint
  dependency-version: 10.9.1
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: frontend-eslint-dependencies
...

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

.github/DISCUSSION_TEMPLATE/support.yml

@@ -38,7 +38,6 @@ body:
       label: Installation method
       options:
         - Docker - official image
-        - Docker - linuxserver.io image
         - Bare metal
         - Other (please describe above)
   - type: textarea

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -87,10 +87,8 @@ body:
       label: Installation method
       options:
         - Docker - official image
-        - Docker - linuxserver.io image
         - Bare metal
         - Other (please describe above)
-      description: Note there are significant differences from the official image and linuxserver.io, please check if your issue is specific to the third-party image.
     validations:
       required: true
   - type: textarea

.github/workflows/ci-backend.yml

@@ -63,7 +63,7 @@ jobs:
       - name: Detect changes
         id: filter
         if: steps.force.outputs.run_all != 'true'
-        uses: dorny/paths-filter@7b450fff21473bca461d4b92ce414b9d0420d706 # v4.0.2
+        uses: dorny/paths-filter@ceb8a2b8f2d89434be7ff52d3de7ec3738c5cc9d # v4.0.3
         with:
           base: ${{ steps.range.outputs.base }}
           ref: ${{ steps.range.outputs.ref }}
@@ -100,7 +100,7 @@ jobs:
         with:
           python-version: "${{ matrix.python-version }}"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true
@@ -178,7 +178,7 @@ jobs:
         with:
           python-version: "${{ env.DEFAULT_PYTHON }}"
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true

.github/workflows/ci-docker.yml

@@ -106,9 +106,9 @@ jobs:
           echo "repository=${repo_name}"
           echo "name=${repo_name}" >> $GITHUB_OUTPUT
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
+        uses: docker/setup-buildx-action@37fe631027851001ddb9b187196cc803df7f5f0e # v4.3.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -182,22 +182,22 @@ jobs:
           echo "Downloaded digests:"
           ls -la /tmp/digests/
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
+        uses: docker/setup-buildx-action@37fe631027851001ddb9b187196cc803df7f5f0e # v4.3.0
       - name: Login to GitHub Container Registry
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Login to Docker Hub
         if: needs.build-arch.outputs.push-external == 'true'
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
       - name: Login to Quay.io
         if: needs.build-arch.outputs.push-external == 'true'
-        uses: docker/login-action@abd2ef45e78c5afb21d64d4ca52ee8550d9572c7 # v4.5.1
+        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
         with:
           registry: quay.io
           username: ${{ secrets.QUAY_USERNAME }}

.github/workflows/ci-docs.yml

@@ -50,7 +50,7 @@ jobs:
       - name: Detect changes
         id: filter
         if: steps.force.outputs.run_all != 'true'
-        uses: dorny/paths-filter@7b450fff21473bca461d4b92ce414b9d0420d706 # v4.0.2
+        uses: dorny/paths-filter@ceb8a2b8f2d89434be7ff52d3de7ec3738c5cc9d # v4.0.3
         with:
           base: ${{ steps.range.outputs.base }}
           ref: ${{ steps.range.outputs.ref }}
@@ -78,7 +78,7 @@ jobs:
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: true

.github/workflows/ci-frontend.yml

@@ -60,7 +60,7 @@ jobs:
       - name: Detect changes
         id: filter
         if: steps.force.outputs.run_all != 'true'
-        uses: dorny/paths-filter@7b450fff21473bca461d4b92ce414b9d0420d706 # v4.0.2
+        uses: dorny/paths-filter@ceb8a2b8f2d89434be7ff52d3de7ec3738c5cc9d # v4.0.3
         with:
           base: ${{ steps.range.outputs.base }}
           ref: ${{ steps.range.outputs.ref }}
@@ -81,7 +81,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24
@@ -113,7 +113,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24
@@ -152,7 +152,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24
@@ -201,7 +201,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24
@@ -216,7 +216,7 @@ jobs:
         with:
           python-version: '3.12'
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: '0.12.x'
           enable-cache: false
@@ -255,7 +255,7 @@ jobs:
           fetch-depth: 2
           persist-credentials: false
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24

.github/workflows/ci-lint.yml

@@ -25,4 +25,4 @@ jobs:
         with:
           python-version: "3.14"
       - name: Run prek
-        uses: j178/prek-action@5337cb91e0fa35a7ff31b9ca345126d8bbbcdf16 # v2.0.6
+        uses: j178/prek-action@4e14d07f9231acabce116ccfca13b13dd9755ece # v3.0.0

.github/workflows/ci-release.yml

@@ -20,7 +20,7 @@ jobs:
       statuses: read
     steps:
       - name: Wait for Docker build
-        uses: lewagon/wait-on-check-action@2271c86c146b96545b4e871b855e10ffa6f50773 # v1.9.0
+        uses: lewagon/wait-on-check-action@369769072fe522a3a8a85c03c96af1e5242a1994 # v1.9.1
         with:
           ref: ${{ github.sha }}
           check-name: 'Merge and Push Manifest'
@@ -40,7 +40,7 @@ jobs:
           persist-credentials: false
       # ---- Frontend Build ----
       - name: Install pnpm
-        uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24
@@ -59,7 +59,7 @@ jobs:
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: false
@@ -171,7 +171,7 @@ jobs:
           fi
       - name: Create release and changelog
         id: create-release
-        uses: release-drafter/release-drafter@eada3c96a64734dd381cfbda23511034e328ddb0 # v7.6.0
+        uses: release-drafter/release-drafter@34d80673e067bdc0c24568d3af899c216adcfaa9 # v7.7.0
         with:
           name: Paperless-ngx ${{ steps.get-version.outputs.version }}
           tag: ${{ steps.get-version.outputs.version }}
@@ -182,7 +182,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Upload release archive
-        uses: shogo82148/actions-upload-release-asset@394b3c11c3cfc038b5396ad265c074065cf875c3 # v1.10.2
+        uses: shogo82148/actions-upload-release-asset@aaba0f56bdbc1071f4af234d5cb16055e8a400de # v1.10.4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           upload_url: ${{ steps.create-release.outputs.upload_url }}
@@ -212,7 +212,7 @@ jobs:
         with:
           python-version: ${{ env.DEFAULT_PYTHON_VERSION }}
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         with:
           version: ${{ env.DEFAULT_UV_VERSION }}
           enable-cache: false

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

@@ -26,7 +26,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Run zizmor
-        uses: zizmorcore/zizmor-action@6fc4b006235f201fdab3722e17240ab420d580e5 # v0.6.1
+        uses: zizmorcore/zizmor-action@3dc1ecc9bcb9e94e9b2c709687979e1298497054 # v0.6.2
   semgrep:
     name: Semgrep CE
     runs-on: ubuntu-24.04
@@ -44,7 +44,7 @@ jobs:
       - 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@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
+        uses: github/codeql-action/upload-sarif@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
         if: always()
         with:
           sarif_file: results.sarif

.github/workflows/codeql-analysis.yml

@@ -39,7 +39,7 @@ jobs:
           persist-credentials: false
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
+        uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
         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@e4fba868fa4b1b91e1fdab776edc8cfbe6e9fb81 # v4.37.3
+        uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9

.github/workflows/crowdin.yml

@@ -22,7 +22,7 @@ jobs:
           token: ${{ secrets.PNGX_BOT_PAT }}
           persist-credentials: false
       - name: crowdin action
-        uses: crowdin/github-action@c7af9bc98b01694653031fef2a0dc6c7888ce9bc # v2.17.0
+        uses: crowdin/github-action@e4a6c1338b4063c77d46a81875265f9e8bd76f95 # v3.0.0
         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@eada3c96a64734dd381cfbda23511034e328ddb0 # v7.6.0
+        uses: release-drafter/release-drafter@34d80673e067bdc0c24568d3af899c216adcfaa9 # v7.7.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/repo-maintenance.yml

@@ -14,7 +14,7 @@ jobs:
       issues: write
       pull-requests: write
     steps:
-      - uses: actions/stale@1e223db275d687790206a7acac4d1a11bd6fe629 # v10.4.0
+      - uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
         with:
           days-before-stale: 7
           days-before-close: 14

.github/workflows/translate-strings.yml

@@ -29,7 +29,7 @@ jobs:
           sudo apt-get update -qq
           sudo apt-get install -qq --no-install-recommends gettext
       - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
+        uses: astral-sh/setup-uv@20cfd1bf945f4377ade1205e4dbc17946fc9a30d # v10.0.1
         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@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+        uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
         with:
           package_json_file: src-ui/package.json
       - name: Use Node.js 24

.pre-commit-config.yaml

@@ -50,18 +50,18 @@ repos:
           - 'prettier-plugin-organize-imports@4.3.0'
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.16.1
+    rev: v0.16.5
     hooks:
       - id: ruff-check
       - id: ruff-format
   - repo: https://github.com/tox-dev/pyproject-fmt
-    rev: "v2.26.0"
+    rev: "v2.28.1"
     hooks:
       - id: pyproject-fmt
         additional_dependencies: [tomli]
   # Dockerfile hooks
   - repo: https://github.com/AleksaC/hadolint-py
-    rev: v2.14.0
+    rev: v2.15.1
     hooks:
       - id: hadolint
   # Shell script hooks

Dockerfile

@@ -30,7 +30,7 @@ RUN set -eux \
 # Purpose: Installs s6-overlay and rootfs
 # Comments:
 #  - Don't leave anything extra in here either
-FROM ghcr.io/astral-sh/uv:0.12.5-python3.14-trixie-slim AS s6-overlay-base
+FROM ghcr.io/astral-sh/uv:0.12.9-python3.14-trixie-slim AS s6-overlay-base
 
 WORKDIR /usr/src/s6
 

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

@@ -4,7 +4,7 @@
 # correct networking for the tests
 services:
   gotenberg:
-    image: docker.io/gotenberg/gotenberg:8.34
+    image: docker.io/gotenberg/gotenberg:8.36
     hostname: gotenberg
     container_name: gotenberg
     network_mode: host
@@ -24,7 +24,7 @@ services:
     network_mode: host
     restart: unless-stopped
   greenmail:
-    image: docker.io/greenmail/standalone:2.1.11
+    image: docker.io/greenmail/standalone:2.1.13
     hostname: greenmail
     container_name: greenmail
     environment:
@@ -35,7 +35,7 @@ services:
       - "3143:3143" # IMAP
     restart: unless-stopped
   nginx:
-    image: docker.io/nginx:1.31.3-alpine
+    image: docker.io/nginx:1.31.5-alpine
     hostname: nginx
     container_name: nginx
     ports:

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

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

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

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

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

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

docs/changelog.md

@@ -1,5 +1,90 @@
 # Changelog
 
+## paperless-ngx 3.1.3
+
+### Bug Fixes
+
+- Fix: use the header loading indicator on tasks page [@shamoon](https://github.com/shamoon) ([#13949](https://github.com/paperless-ngx/paperless-ngx/pull/13949))
+- Fix: fix load sidebar size animating [@shamoon](https://github.com/shamoon) ([#13947](https://github.com/paperless-ngx/paperless-ngx/pull/13947))
+- Fix: wrap long words without spaces in dropdowns [@shamoon](https://github.com/shamoon) ([#13945](https://github.com/paperless-ngx/paperless-ngx/pull/13945))
+- Fix: tweak tool calling localization prompt [@shamoon](https://github.com/shamoon) ([#13943](https://github.com/paperless-ngx/paperless-ngx/pull/13943))
+- Fix: skip vector store document id filter for unrestricted chat users [@stumpylog](https://github.com/stumpylog) ([#13937](https://github.com/paperless-ngx/paperless-ngx/pull/13937))
+- Fix: adopt the request stream when pinning an outbound host [@ThomasSteinbach](https://github.com/ThomasSteinbach) ([#13927](https://github.com/paperless-ngx/paperless-ngx/pull/13927))
+- Fix: ensure apply ai suggestions always runs after document created [@shamoon](https://github.com/shamoon) ([#13940](https://github.com/paperless-ngx/paperless-ngx/pull/13940))
+- Fix: Handle failures when enqueuing files for consumption [@stumpylog](https://github.com/stumpylog) ([#13935](https://github.com/paperless-ngx/paperless-ngx/pull/13935))
+- Fix: Handle Celery mail task chord errors [@stumpylog](https://github.com/stumpylog) ([#13936](https://github.com/paperless-ngx/paperless-ngx/pull/13936))
+- Fix/chore: refactor some signal-backed conversion technical debt [@shamoon](https://github.com/shamoon) ([#13902](https://github.com/paperless-ngx/paperless-ngx/pull/13902))
+- Fix: fix slim sidebar saved view dragging appearance [@shamoon](https://github.com/shamoon) ([#13906](https://github.com/paperless-ngx/paperless-ngx/pull/13906))
+- Fix: use signal-backed queries input in CF dropdown to reflect changes immediately under zoneless [@shamoon](https://github.com/shamoon) ([#13901](https://github.com/paperless-ngx/paperless-ngx/pull/13901))
+- Fix: use root doc metadata for filename generation [@shamoon](https://github.com/shamoon) ([#13893](https://github.com/paperless-ngx/paperless-ngx/pull/13893))
+- Fix: some css cleanup [@shamoon](https://github.com/shamoon) ([#13891](https://github.com/paperless-ngx/paperless-ngx/pull/13891))
+
+### Dependencies
+
+<details>
+<summary>7 changes</summary>
+
+- Chore(deps): Bump the uv group across 1 directory with 2 updates @[dependabot[bot]](https://github.com/apps/dependabot) ([#13958](https://github.com/paperless-ngx/paperless-ngx/pull/13958))
+- docker-compose(deps): bump nginx from 1.31.3-alpine to 1.31.5-alpine in /docker/compose @[dependabot[bot]](https://github.com/apps/dependabot) ([#13909](https://github.com/paperless-ngx/paperless-ngx/pull/13909))
+- docker-compose(deps): Bump greenmail/standalone from 2.1.11 to 2.1.13 in /docker/compose @[dependabot[bot]](https://github.com/apps/dependabot) ([#13907](https://github.com/paperless-ngx/paperless-ngx/pull/13907))
+- Chore(deps-dev): Bump postcss-selector-parser from 6.1.2 to 6.1.4 in /src/paperless\_mail/templates in the npm\_and\_yarn group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13905](https://github.com/paperless-ngx/paperless-ngx/pull/13905))
+- Chore(deps): Bump nltk from 3.10.0 to 3.10.3 in the data-nlp-search group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13917](https://github.com/paperless-ngx/paperless-ngx/pull/13917))
+- Chore(deps): Bump the frontend-angular-dependencies group across 1 directory with 14 updates @[dependabot[bot]](https://github.com/apps/dependabot) ([#13915](https://github.com/paperless-ngx/paperless-ngx/pull/13915))
+- Chore(deps): Bump djangorestframework from 3.17.1 to 3.17.2 in the uv group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13904](https://github.com/paperless-ngx/paperless-ngx/pull/13904))
+
+</details>
+
+### All App Changes
+
+<details>
+<summary>22 changes</summary>
+
+- Chore(deps): Bump the uv group across 1 directory with 2 updates @[dependabot[bot]](https://github.com/apps/dependabot) ([#13958](https://github.com/paperless-ngx/paperless-ngx/pull/13958))
+- Chore(deps-dev): Bump postcss-selector-parser from 6.1.2 to 6.1.4 in /src/paperless\_mail/templates in the npm\_and\_yarn group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13905](https://github.com/paperless-ngx/paperless-ngx/pull/13905))
+- Chore(deps): Bump nltk from 3.10.0 to 3.10.3 in the data-nlp-search group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13917](https://github.com/paperless-ngx/paperless-ngx/pull/13917))
+- Fix: use the header loading indicator on tasks page [@shamoon](https://github.com/shamoon) ([#13949](https://github.com/paperless-ngx/paperless-ngx/pull/13949))
+- Chore(deps): Bump the frontend-angular-dependencies group across 1 directory with 14 updates @[dependabot[bot]](https://github.com/apps/dependabot) ([#13915](https://github.com/paperless-ngx/paperless-ngx/pull/13915))
+- Chore(deps): Bump djangorestframework from 3.17.1 to 3.17.2 in the uv group across 1 directory @[dependabot[bot]](https://github.com/apps/dependabot) ([#13904](https://github.com/paperless-ngx/paperless-ngx/pull/13904))
+- Fix: fix load sidebar size animating [@shamoon](https://github.com/shamoon) ([#13947](https://github.com/paperless-ngx/paperless-ngx/pull/13947))
+- Fix: wrap long words without spaces in dropdowns [@shamoon](https://github.com/shamoon) ([#13945](https://github.com/paperless-ngx/paperless-ngx/pull/13945))
+- Fix: tweak tool calling localization prompt [@shamoon](https://github.com/shamoon) ([#13943](https://github.com/paperless-ngx/paperless-ngx/pull/13943))
+- Fix: skip vector store document id filter for unrestricted chat users [@stumpylog](https://github.com/stumpylog) ([#13937](https://github.com/paperless-ngx/paperless-ngx/pull/13937))
+- Fix: adopt the request stream when pinning an outbound host [@ThomasSteinbach](https://github.com/ThomasSteinbach) ([#13927](https://github.com/paperless-ngx/paperless-ngx/pull/13927))
+- Fix: ensure apply ai suggestions always runs after document created [@shamoon](https://github.com/shamoon) ([#13940](https://github.com/paperless-ngx/paperless-ngx/pull/13940))
+- Fix: Handle failures when enqueuing files for consumption [@stumpylog](https://github.com/stumpylog) ([#13935](https://github.com/paperless-ngx/paperless-ngx/pull/13935))
+- Fix: Handle Celery mail task chord errors [@stumpylog](https://github.com/stumpylog) ([#13936](https://github.com/paperless-ngx/paperless-ngx/pull/13936))
+- Fix/chore: refactor some signal-backed conversion technical debt [@shamoon](https://github.com/shamoon) ([#13902](https://github.com/paperless-ngx/paperless-ngx/pull/13902))
+- Security: validate remote OCR endpoint [@stumpylog](https://github.com/stumpylog) ([#13897](https://github.com/paperless-ngx/paperless-ngx/pull/13897))
+- Fix: fix slim sidebar saved view dragging appearance [@shamoon](https://github.com/shamoon) ([#13906](https://github.com/paperless-ngx/paperless-ngx/pull/13906))
+- Security: Minor additional hardening [@stumpylog](https://github.com/stumpylog) ([#13898](https://github.com/paperless-ngx/paperless-ngx/pull/13898))
+- Chore: consolidate pickle hmac signing [@shamoon](https://github.com/shamoon) ([#13899](https://github.com/paperless-ngx/paperless-ngx/pull/13899))
+- Fix: use signal-backed queries input in CF dropdown to reflect changes immediately under zoneless [@shamoon](https://github.com/shamoon) ([#13901](https://github.com/paperless-ngx/paperless-ngx/pull/13901))
+- Fix: use root doc metadata for filename generation [@shamoon](https://github.com/shamoon) ([#13893](https://github.com/paperless-ngx/paperless-ngx/pull/13893))
+- Fix: some css cleanup [@shamoon](https://github.com/shamoon) ([#13891](https://github.com/paperless-ngx/paperless-ngx/pull/13891))
+
+</details>
+
+## paperless-ngx 3.1.2
+
+### Bug Fixes
+
+- Fix: fix dark mode select disabled color, ensure disabled cursor on display mode dropdown [@shamoon](https://github.com/shamoon) ([#13881](https://github.com/paperless-ngx/paperless-ngx/pull/13881))
+- Fix: add disable to the drag-drop list component [@shamoon](https://github.com/shamoon) ([#13880](https://github.com/paperless-ngx/paperless-ngx/pull/13880))
+
+### Documentation
+
+- Chore: update screenshots for v3+ [@shamoon](https://github.com/shamoon) ([#13883](https://github.com/paperless-ngx/paperless-ngx/pull/13883))
+
+### All App Changes
+
+<details>
+<summary>2 changes</summary>
+
+- Fix: fix dark mode select disabled color, ensure disabled cursor on display mode dropdown [@shamoon](https://github.com/shamoon) ([#13881](https://github.com/paperless-ngx/paperless-ngx/pull/13881))
+- Fix: add disable to the drag-drop list component [@shamoon](https://github.com/shamoon) ([#13880](https://github.com/paperless-ngx/paperless-ngx/pull/13880))
+
+</details>
+
 ## paperless-ngx 3.1.1
 
 ### Bug Fixes

docs/configuration.md

@@ -2088,6 +2088,12 @@ password. All of these options come from their similarly-named [Django settings]
 
     Defaults to "always".
 
+#### [`PAPERLESS_REMOTE_OCR_ALLOW_INTERNAL_ENDPOINTS=<bool>`](#PAPERLESS_REMOTE_OCR_ALLOW_INTERNAL_ENDPOINTS) {#PAPERLESS_REMOTE_OCR_ALLOW_INTERNAL_ENDPOINTS}
+
+: If set to false, Paperless blocks remote OCR endpoint URLs that resolve to non-public addresses (e.g., localhost, etc).
+
+    Defaults to True.
+
 ## AI {#ai}
 
 #### [`PAPERLESS_AI_ENABLED=<bool>`](#PAPERLESS_AI_ENABLED) {#PAPERLESS_AI_ENABLED}

docs/development.md

@@ -415,10 +415,10 @@ plain class attributes (not instance attributes or properties):
 
 ```python
 class MyCustomParser:
-    name    = "My Format Parser"   # human-readable name shown in logs
+    name = "My Format Parser"  # human-readable name shown in logs
-    version = "1.0.0"              # semantic version string
+    version = "1.0.0"  # semantic version string
-    author  = "Acme Corp"          # author / organisation
+    author = "Acme Corp"  # author / organisation
-    url     = "https://example.com/my-parser"  # docs or issue tracker
+    url = "https://example.com/my-parser"  # docs or issue tracker
 ```
 
 **Declaring supported MIME types**
@@ -482,7 +482,8 @@ attribute are treated as fully local and are always considered.
 @property
 def can_produce_archive(self) -> bool:
     """True if parse() can produce a searchable PDF archive copy."""
-    return True   # or False if your parser doesn't produce PDFs
+    return True  # or False if your parser doesn't produce PDFs
+
 
 @property
 def requires_pdf_rendition(self) -> bool:
@@ -507,6 +508,7 @@ from types import TracebackType
 
 from django.conf import settings
 
+
 class MyCustomParser:
     ...
 
@@ -539,8 +541,9 @@ implementation is fine:
 ```python
 from paperless.parsers import ParserContext
 
+
 def configure(self, context: ParserContext) -> None:
-    pass   # override if you need context.mailrule_id, etc.
+    pass  # override if you need context.mailrule_id, etc.
 ```
 
 **Parsing**
@@ -552,6 +555,7 @@ Raise `documents.parsers.ParseError` on any unrecoverable failure.
 ```python
 from documents.parsers import ParseError
 
+
 def parse(
     self,
     document_path: Path,
@@ -577,18 +581,20 @@ def get_text(self) -> str:
     # Return the extracted text, or an empty string if none was found.
     return self._text
 
+
 def get_date(self) -> "datetime.datetime | None":
     # Return a datetime extracted from the document, or None to let
     # Paperless-ngx use its default date-guessing logic.
     return None
 
+
 def get_archive_path(self) -> Path | None:
     return self._archive_path
 
+
 def get_page_count(self, document_path: Path, mime_type: str) -> int | None:
     # If the format doesn't have the concept of pages, return None
     return count_pages(document_path)
-
 ```
 
 **Thumbnail**
@@ -611,7 +617,6 @@ Implement them if your format supports the information; otherwise return
 `None` / `[]`.
 
 ```python
-
 def extract_metadata(
     self,
     document_path: Path,
@@ -619,6 +624,7 @@ def extract_metadata(
 ) -> "list[MetadataEntry]":
     # Must never raise. Return [] if metadata cannot be read.
     from paperless.parsers import MetadataEntry
+
     return [
         MetadataEntry(
             namespace="https://example.com/ns/",
@@ -681,17 +687,19 @@ from paperless.parsers import ParserContext
 
 
 class XmlDocumentParser:
-    name    = "XML Parser"
+    name = "XML Parser"
     version = "1.0.0"
-    author  = "Acme Corp"
+    author = "Acme Corp"
-    url     = "https://example.com/xml-parser"
+    url = "https://example.com/xml-parser"
 
     @classmethod
     def supported_mime_types(cls) -> dict[str, str]:
         return {"application/xml": ".xml", "text/xml": ".xml"}
 
     @classmethod
-    def score(cls, mime_type: str, filename: str, path: Path | None = None) -> int | None:
+    def score(
+        cls, mime_type: str, filename: str, path: Path | None = None
+    ) -> int | None:
         return 10
 
     @property
@@ -704,7 +712,9 @@ class XmlDocumentParser:
 
     def __init__(self, logging_group: object = None) -> None:
         settings.SCRATCH_DIR.mkdir(parents=True, exist_ok=True)
-        self._tempdir = Path(tempfile.mkdtemp(prefix="paperless-", dir=settings.SCRATCH_DIR))
+        self._tempdir = Path(
+            tempfile.mkdtemp(prefix="paperless-", dir=settings.SCRATCH_DIR)
+        )
         self._text: str = ""
 
     def __enter__(self) -> Self:
@@ -716,7 +726,9 @@ class XmlDocumentParser:
     def configure(self, context: ParserContext) -> None:
         pass
 
-    def parse(self, document_path: Path, mime_type: str, *, produce_archive: bool = True) -> None:
+    def parse(
+        self, document_path: Path, mime_type: str, *, produce_archive: bool = True
+    ) -> None:
         try:
             tree = ET.parse(document_path)
             self._text = " ".join(tree.getroot().itertext())
@@ -734,6 +746,7 @@ class XmlDocumentParser:
 
     def get_thumbnail(self, document_path: Path, mime_type: str) -> Path:
         from PIL import Image, ImageDraw
+
         img = Image.new("RGB", (500, 700), color="white")
         ImageDraw.Draw(img).text((10, 10), "XML Document", fill="black")
         out = self._tempdir / "thumb.webp"
@@ -822,6 +835,7 @@ def _parse_string(
     Parse a single date string using dateparser with configured settings.
     """
 
+
 def _filter_date(
     self,
     date: datetime.datetime | None,

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "3.1.2"
+version = "3.1.3"
 description = "A community-supported supercharged document management system: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.11"
@@ -42,12 +42,12 @@ dependencies = [
   "drf-spectacular-sidecar~=2026.7.1",
   "drf-writable-nested~=0.7.1",
   "filelock~=3.32.0",
-  "flower~=2.0.1",
+  "flower>=2.0.1,<2.2",
-  "gotenberg-client~=0.14.0",
+  "gotenberg-client[httpx]~=1.0",
   "httpx-oauth~=0.17",
   "ijson>=3.5.1",
   "imap-tools~=1.14.0",
-  "jinja2~=3.1.5",
+  "jinja2~=3.1.6",
   "langdetect~=1.0.9",
   "llama-index-core>=0.14.23",
   "llama-index-embeddings-huggingface>=0.6.1",
@@ -56,7 +56,7 @@ dependencies = [
   "llama-index-llms-ollama>=0.9.1",
   "llama-index-llms-openai-like>=0.7.1",
   "nltk~=3.10.0",
-  "ocrmypdf~=17.7.0",
+  "ocrmypdf>=17.7,<17.11",
   "openai>=2.48",
   "pathvalidate~=3.3.1",
   "pdf2image~=1.17.0",
@@ -66,14 +66,14 @@ dependencies = [
   "python-ipware~=3.0.0",
   "python-magic~=0.4.27",
   "rapidfuzz~=3.14.5",
-  "redis[hiredis]~=5.2.1",
+  "redis[hiredis]~=6.4.0",
   "regex>=2026.7.19",
   "scikit-learn~=1.9.0",
   "sentence-transformers>=5.6.1",
   "setproctitle~=1.3.4",
   "sqlite-vec==0.1.9",
   "tantivy~=0.26.0",
-  "tika-client~=0.11.0",
+  "tika-client[httpx]~=1.0",
   "torch~=2.13.0",
   "watchfiles>=1.2",
   "whitenoise~=6.11",
@@ -153,10 +153,6 @@ environments = [
   "sys_platform == 'linux'",
 ]
 package = false
-[[tool.uv.index]]
-name = "pytorch-cpu"
-url = "https://download.pytorch.org/whl/cpu"
-explicit = true
 [tool.uv.sources]
 # Markers are chosen to select these almost exclusively when building the Docker image
 psycopg-c = [
@@ -168,6 +164,10 @@ psycopg-c = [
 torch = [
   { index = "pytorch-cpu" },
 ]
+[[tool.uv.index]]
+name = "pytorch-cpu"
+url = "https://download.pytorch.org/whl/cpu"
+explicit = true
 
 [tool.ruff]
 target-version = "py311"
@@ -247,7 +247,7 @@ per-file-ignores."src/documents/models.py" = [
 isort.force-single-line = true
 
 [tool.codespell]
-ignore-words-list = "criterias,afterall,valeu,ureue,equest,ure,assertIn,Oktober,commitish"
+ignore-words-list = "criterias,afterall,valeu,ureue,equest,ure,assertIn,Oktober,commitish,NIN,nin"
 skip = """\
   src-ui/src/locale/*,src-ui/pnpm-lock.yaml,src-ui/e2e/*,src/paperless_mail/tests/samples/*,src/paperless/tests/samples\
   /mail/*,src/documents/tests/samples/*,*.po,*.json\
@@ -327,12 +327,6 @@ PAPERLESS_CHANNELS_BACKEND = "channels.layers.InMemoryChannelLayer"
 # I don't think anything hits this, but just in case, basically infinite
 PAPERLESS_TOKEN_THROTTLE_RATE = "1000/min"
 
-[tool.coverage.report]
-exclude_also = [
-  "if settings.AUDIT_LOG_ENABLED:",
-  "if AUDIT_LOG_ENABLED:",
-  "if TYPE_CHECKING:",
-]
 [tool.coverage.run]
 source = [
   "src/",
@@ -343,6 +337,12 @@ omit = [
   "paperless/wsgi.py",
   "paperless/auth.py",
 ]
+[tool.coverage.report]
+exclude_also = [
+  "if settings.AUDIT_LOG_ENABLED:",
+  "if AUDIT_LOG_ENABLED:",
+  "if TYPE_CHECKING:",
+]
 
 [tool.mypy-baseline]
 baseline_path = ".mypy-baseline.txt"

src-ui/e2e/backend.py

@@ -48,6 +48,7 @@ def seed_database() -> None:
     from django.utils import timezone
 
     from documents.models import Correspondent
+    from documents.models import CustomField
     from documents.models import Document
     from documents.models import DocumentType
     from documents.models import Note
@@ -81,6 +82,16 @@ def seed_database() -> None:
         path="e2e/{created_year}/{title}",
         owner=admin,
     )
+    CustomField.objects.create(
+        name="Test Select Field",
+        data_type=CustomField.FieldDataType.SELECT,
+        extra_data={
+            "select_options": [
+                {"id": "abc123", "label": "Alpha"},
+                {"id": "def456", "label": "Beta"},
+            ],
+        },
+    )
 
     today = timezone.localdate()
     documents = []

src-ui/e2e/document-list/document-list.spec.ts

@@ -207,3 +207,41 @@ test('bulk edit', async ({ page }) => {
   await page.getByRole('button', { name: 'Confirm' }).click()
   await bulkEditPromise
 })
+
+test('permissions dropdown stays open when selecting a user', async ({
+  page,
+}) => {
+  await page.goto('/documents')
+  await page.getByRole('button', { name: 'Permissions' }).click()
+  const dropdown = page.locator(
+    'pngx-permissions-filter-dropdown .dropdown-menu'
+  )
+  await expect(dropdown).toBeVisible()
+  await dropdown.locator('ng-select').click()
+  await page.getByRole('option', { name: 'playwright' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.ng-value-label')).toHaveText('playwright')
+})
+
+test('custom fields query dropdown stays open when building a query', async ({
+  page,
+}) => {
+  await page.goto('/documents')
+  await page.getByRole('button', { name: 'Custom fields' }).click()
+  const dropdown = page.locator(
+    'pngx-custom-fields-query-dropdown .dropdown-menu'
+  )
+  await expect(dropdown).toBeVisible()
+
+  // field picker
+  await dropdown.locator('ng-select').first().click()
+  await page.getByRole('option', { name: 'Test Select Field' }).click()
+  await expect(dropdown).toBeVisible()
+
+  // value picker, shown once the operator takes a list of options
+  await dropdown.locator('select').first().selectOption({ label: 'In' })
+  await dropdown.locator('ng-select').last().click()
+  await page.getByRole('option', { name: 'Alpha' }).click()
+  await expect(dropdown).toBeVisible()
+  await expect(dropdown.locator('.ng-value-label').last()).toHaveText('Alpha')
+})

src-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",
@@ -15,16 +15,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^22.1.1",
+    "@angular/cdk": "^22.1.4",
-    "@angular/common": "~22.1.1",
+    "@angular/common": "~22.1.3",
-    "@angular/compiler": "~22.1.1",
+    "@angular/compiler": "~22.1.3",
-    "@angular/core": "~22.1.1",
+    "@angular/core": "~22.1.3",
-    "@angular/forms": "~22.1.1",
+    "@angular/forms": "~22.1.3",
-    "@angular/localize": "~22.1.1",
+    "@angular/localize": "~22.1.3",
-    "@angular/platform-browser": "~22.1.1",
+    "@angular/platform-browser": "~22.1.3",
-    "@angular/router": "~22.1.1",
+    "@angular/router": "~22.1.3",
     "@ng-bootstrap/ng-bootstrap": "^21.0.0",
-    "@ng-select/ng-select": "~23.6.0",
+    "@ng-select/ng-select": "~24.0.2",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.8",
@@ -41,27 +41,27 @@
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1",
     "utif": "^3.1.0",
-    "uuid": "^14.0.1"
+    "uuid": "^14.0.2"
   },
   "devDependencies": {
     "@angular-builders/jest": "^22.0.1",
-    "@angular-devkit/core": "^22.1.3",
+    "@angular-devkit/core": "^22.1.6",
-    "@angular-devkit/schematics": "^22.1.3",
+    "@angular-devkit/schematics": "^22.1.6",
     "@angular-eslint/builder": "22.1.0",
     "@angular-eslint/eslint-plugin": "22.1.0",
     "@angular-eslint/eslint-plugin-template": "22.1.0",
     "@angular-eslint/schematics": "22.1.0",
     "@angular-eslint/template-parser": "22.1.0",
-    "@angular/build": "22.1.3",
+    "@angular/build": "22.1.6",
-    "@angular/cli": "22.1.3",
+    "@angular/cli": "22.1.6",
-    "@angular/compiler-cli": "~22.1.1",
+    "@angular/compiler-cli": "~22.1.3",
     "@playwright/test": "^1.62.1",
     "@types/jest": "^30.0.0",
-    "@types/node": "^26.2.0",
+    "@types/node": "^26.4.0",
-    "@typescript-eslint/eslint-plugin": "^8.67.0",
+    "@typescript-eslint/eslint-plugin": "^8.68.0",
-    "@typescript-eslint/parser": "^8.67.0",
+    "@typescript-eslint/parser": "^8.68.0",
-    "@typescript-eslint/utils": "^8.67.0",
+    "@typescript-eslint/utils": "^8.68.0",
-    "eslint": "^10.8.1",
+    "eslint": "^10.9.1",
     "jest": "30.4.2",
     "jest-environment-jsdom": "^30.4.1",
     "jest-junit": "^17.0.0",

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

@@ -23,17 +23,30 @@
                                     <div class="col">
                                         <div class="card bg-light">
                                             <div class="card-body">
-                                                <div class="card-title d-flex align-items-center">
+                                                <div class="card-title d-flex align-items-center flex-wrap">
                                                     <h6 class="mb-0">
                                                       {{option.title}}
                                                     </h6>
                                                     <a class="btn btn-sm btn-link" title="Read the documentation about this setting" i18n-title [href]="getDocsUrl(option.config_key)" target="_blank" referrerpolicy="no-referrer">
                                                         <i-bs name="info-circle"></i-bs>
                                                     </a>
+                                                    @if (isExternallyConfigured(option.config_key)) {
+                                                      @if (isSet(option.key)) {
+                                                        <span class="badge rounded-pill bg-body-secondary text-dark fw-normal" title="This value overrides {{option.config_key}}, which is set outside Paperless." i18n-title>Overrides external</span>
+                                                      } @else {
+                                                        <span class="badge rounded-pill bg-body-secondary text-dark fw-normal" title="{{option.config_key}} is set outside Paperless. Enter a value here to override it." i18n-title>Set externally</span>
+                                                      }
+                                                    }
                                                     @if (isSet(option.key)) {
-                                                      <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Reset" i18n-title (click)="resetOption(option.key)">
+                                                      @if (isExternallyConfigured(option.config_key)) {
-                                                          <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                                                        <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Use the externally configured value" i18n-title (click)="resetOption(option.key)">
-                                                      </button>
+                                                            <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset to external</ng-container>
+                                                        </button>
+                                                      } @else {
+                                                        <button type="button" class="btn btn-sm btn-link text-danger ms-auto pe-0" title="Reset" i18n-title (click)="resetOption(option.key)">
+                                                            <i-bs class="me-1" name="x"></i-bs><ng-container i18n>Reset</ng-container>
+                                                        </button>
+                                                      }
                                                     }
                                                 </div>
                                                 <div class="mb-n3">

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

@@ -163,6 +163,19 @@ describe('ConfigComponent', () => {
     expect(component.configForm.get('barcodes_enabled').value).toBeNull()
   })
 
+  it('should identify externally configured options', () => {
+    component.externallyConfiguredVariables = new Set([
+      'PAPERLESS_OCR_LANGUAGE',
+    ])
+
+    expect(
+      component.isExternallyConfigured('PAPERLESS_OCR_LANGUAGE')
+    ).toBeTruthy()
+    expect(
+      component.isExternallyConfigured('PAPERLESS_OCR_OUTPUT_TYPE')
+    ).toBeFalsy()
+  })
+
   it('should group options into sections within a category, or not', () => {
     const sections = component.getCategorySections(ConfigCategory.OCR)
     expect(sections).toEqual([null, ConfigSection.RemoteOCR])

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

@@ -69,6 +69,7 @@ export class ConfigComponent
   public configForm = new FormGroup({})
 
   public errors = {}
+  public externallyConfiguredVariables = new Set<string>()
 
   get optionCategories(): string[] {
     return Object.values(ConfigCategory)
@@ -152,6 +153,9 @@ export class ConfigComponent
   }
 
   private initialize(config: PaperlessConfig) {
+    this.externallyConfiguredVariables = new Set(
+      config.externally_configured_variables ?? []
+    )
     if (!this.store) {
       this.store = new BehaviorSubject(config)
 
@@ -162,7 +166,9 @@ export class ConfigComponent
           this.configForm.patchValue(state, { emitEvent: false })
         })
 
-      this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable())
+      this.isDirty$ = dirtyCheck(this.configForm, this.store.asObservable(), {
+        excludeKeys: ['externally_configured_variables'],
+      })
     }
     this.configForm.patchValue(config)
 
@@ -227,6 +233,10 @@ export class ConfigComponent
     return this.configForm.get(key).value != null
   }
 
+  public isExternallyConfigured(configKey: string): boolean {
+    return this.externallyConfiguredVariables.has(configKey)
+  }
+
   public resetOption(key: string) {
     this.configForm.get(key).setValue(null)
   }

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

@@ -3,6 +3,7 @@
   i18n-title
   info="Tasks shows detailed information about document consumption and system tasks."
   i18n-info
+  [loading]="loading() && pagedTasks().length === 0"
   >
   <div class="btn-toolbar col col-md-auto align-items-center gap-2">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
@@ -21,11 +22,6 @@
   </div>
 </pngx-page-header>
 
-@if (loading() && pagedTasks().length === 0) {
-  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-  <div class="visually-hidden" i18n>Loading...</div>
-}
-
 <div class="task-controls mb-3 gap-3 btn-toolbar align-items-center" role="toolbar">
   <div class="task-view-scope btn-group btn-group-sm" role="group">
     <input
@@ -285,6 +281,6 @@
       <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks: tasksForSection(section), section: section}"></ng-container>
     </div>
   }
-} @else {
+} @else if (!loading() || pagedTasks().length > 0) {
   <div class="alert alert-secondary fst-italic" i18n>No tasks match the current filters.</div>
 }

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

@@ -41,6 +41,8 @@ export class TrashComponent
   private modalService = inject(NgbModal)
   private settingsService = inject(SettingsService)
   private router = inject(Router)
+  private readonly emptyTrashDelaySetting =
+    this.settingsService.getSignal<number>(SETTINGS_KEYS.EMPTY_TRASH_DELAY)
 
   readonly documentsInTrash = signal<Document[]>([])
   readonly selectedDocuments = signal<Set<number>>(new Set())
@@ -200,8 +202,7 @@ export class TrashComponent
   }
 
   getDaysRemaining(document: Document): number {
-    this.settingsService.trackChanges()
+    const delay = this.emptyTrashDelaySetting()
-    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))
     return delay - days

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

@@ -111,7 +111,7 @@
             </h6>
             <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
               @for (view of savedViewService.sidebarViews; track view.id) {
-                <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews() || !canSaveSettings"
+                <li class="nav-item app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews() || !canSaveSettings"
                   cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
                   (cdkDragEnded)="onDragEnd($event)">
                   <a class="nav-link" routerLink="view/{{view.id}}"
@@ -128,7 +128,7 @@
                     }
                   </a>
                   @if (settingsService.organizingSidebarSavedViews() && canSaveSettings) {
-                    <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                    <div class="position-absolute end-0 top-0 px-1 py-2" [class.me-n2]="slimSidebarEnabled" cdkDragHandle>
                       <i-bs name="grip-vertical"></i-bs>
                     </div>
                   }
@@ -332,7 +332,7 @@
             </li>
             <li class="nav-item" [class.visually-hidden]="slimSidebarEnabled">
               <div class="text-muted small d-flex align-items-center flex-wrap nav-label">
-                <div class="me-3">
+                <div class="me-2">
                   <a class="text-muted text-decoration-none" target="_blank" rel="noopener noreferrer"
                     href="https://github.com/paperless-ngx/paperless-ngx" ngbPopover="GitHub" i18n-ngbPopover
                     [disablePopover]="!slimSidebarPopoversEnabled" placement="end" container="body"
@@ -341,7 +341,7 @@
                   </a>
                 </div>
                 @if (!settingsService.updateCheckingIsSet || appRemoteVersion()) {
-                  <div class="version-check">
+                  <div class="version-check d-flex align-items-center">
                     <ng-template #updateAvailablePopContent>
                       <span class="small">Paperless-ngx {{ appRemoteVersion().version }} <ng-container i18n>is
                           available.</ng-container><br /><ng-container i18n>Click to view.</ng-container></span>

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

@@ -34,9 +34,7 @@
   }
 
   @media (min-width: 768px) {
-    &.expanded {
+    --pngx-sidebar-width: var(--pngx-sidebar-expanded-width);
-      --pngx-sidebar-width: var(--pngx-sidebar-expanded-width);
-    }
   }
 }
 @media (max-width: 767.98px) {
@@ -113,6 +111,13 @@ main {
     }
   }
 
+  // only animate when the user toggles slim mode
+  .sidebar:not(.animating),
+  .sidebar:not(.animating) ~ main,
+  .sidebar:not(.animating) .sidebar-slim-toggler {
+    transition: none;
+  }
+
   .sidebar.slim {
     max-width: 55px;
 
@@ -123,8 +128,6 @@ main {
   }
 
   .sidebar.slim:not(.animating) {
-    transition: none;
-
     li.nav-item span,
     .sidebar-heading span {
       display: none;
@@ -144,10 +147,6 @@ main {
     }
   }
 
-  .sidebar.slim:not(.animating) ~ main.col-slim {
-    transition: none;
-  }
-
   .sidebar.animating {
     li.nav-item span,
     .sidebar-heading span {
@@ -196,6 +195,26 @@ main {
   --bs-popover-body-padding-y: .5rem;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .sidebar-sticky > ul,
+  .sidebar-sticky > .nav-group {
+    animation: sidebar-nav-in .3s cubic-bezier(.22, .61, .36, 1) backwards;
+  }
+
+  @for $i from 2 through 5 {
+    .sidebar-sticky > :nth-child(#{$i}) {
+      animation-delay: #{($i - 1) * 0.04}s;
+    }
+  }
+}
+
+@keyframes sidebar-nav-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
 .sidebar-sticky {
   position: relative;
   top: 0;

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

@@ -193,6 +193,23 @@ describe('AppFrameComponent', () => {
     expect(savedViewSpy).toHaveBeenCalled()
   })
 
+  it('should update reinitialized signal-backed settings without manual change detection', async () => {
+    settingsService.initializeSettings().subscribe()
+    httpTestingController
+      .expectOne(`${environment.apiBaseUrl}ui_settings/`)
+      .flush({
+        settings: { app_title: 'Reactive title' },
+        user: {},
+        permissions: [],
+      })
+
+    await fixture.whenStable()
+
+    expect(
+      fixture.nativeElement.querySelector('.brand-title').textContent
+    ).toBe('Reactive title')
+  })
+
   it('should check for update if enabled', () => {
     const updateCheckSpy = jest.spyOn(remoteVersionService, 'checkForUpdates')
     updateCheckSpy.mockImplementation(() => {

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

@@ -98,6 +98,29 @@ export class AppFrameComponent
   readonly isMenuCollapsed = signal(true)
   readonly slimSidebarAnimating = signal(false)
   readonly mobileSearchHidden = signal(false)
+  private readonly versionSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.VERSION
+  )
+  private readonly appTitleSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.APP_TITLE
+  )
+  private readonly appLogoSetting = this.settingsService.getSignal<string>(
+    SETTINGS_KEYS.APP_LOGO
+  )
+  private readonly slimSidebarSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.SLIM_SIDEBAR
+  )
+  private readonly attributesSectionsCollapsedSetting =
+    this.settingsService.getSignal<CollapsibleSection[]>(
+      SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED
+    )
+  private readonly aiEnabledSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.AI_ENABLED
+  )
+  private readonly sidebarViewsShowCountSetting =
+    this.settingsService.getSignal<boolean>(
+      SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT
+    )
   private lastScrollY: number = 0
 
   constructor() {
@@ -191,33 +214,23 @@ export class AppFrameComponent
   }
 
   get versionString(): string {
-    this.settingsService.trackChanges()
+    return `${environment.appTitle} v${this.versionSetting()}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
-    return `${environment.appTitle} v${this.settingsService.get(SETTINGS_KEYS.VERSION)}${environment.tag === 'prod' ? '' : ` #${environment.tag}`}`
   }
 
   get appTitle(): string {
-    this.settingsService.trackChanges()
+    return this.appTitleSetting() || environment.appTitle
-    return (
-      this.settingsService.get(SETTINGS_KEYS.APP_TITLE) || environment.appTitle
-    )
   }
 
   get customAppTitle(): string {
-    this.settingsService.trackChanges()
+    return this.appTitleSetting()
-    return this.settingsService.get(SETTINGS_KEYS.APP_TITLE)
   }
 
   get hasCustomBranding(): boolean {
-    this.settingsService.trackChanges()
+    return !!(this.appTitleSetting()?.length || this.appLogoSetting()?.length)
-    return !!(
-      this.settingsService.get(SETTINGS_KEYS.APP_TITLE)?.length ||
-      this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length
-    )
   }
 
   get customAppLogo(): string {
-    this.settingsService.trackChanges()
+    const logo = this.appLogoSetting()
-    const logo = this.settingsService.get(SETTINGS_KEYS.APP_LOGO)
     return logo?.length
       ? environment.apiBaseUrl.replace(/\/api\/$/, logo)
       : null
@@ -262,8 +275,7 @@ export class AppFrameComponent
   }
 
   get slimSidebarEnabled(): boolean {
-    this.settingsService.trackChanges()
+    return this.slimSidebarSetting()
-    return this.settingsService.get(SETTINGS_KEYS.SLIM_SIDEBAR)
   }
 
   set slimSidebarEnabled(enabled: boolean) {
@@ -286,10 +298,9 @@ export class AppFrameComponent
   }
 
   get attributesSectionsCollapsed(): boolean {
-    this.settingsService.trackChanges()
+    return this.attributesSectionsCollapsedSetting()?.includes(
-    return this.settingsService
+      CollapsibleSection.ATTRIBUTES
-      .get(SETTINGS_KEYS.ATTRIBUTES_SECTIONS_COLLAPSED)
+    )
-      ?.includes(CollapsibleSection.ATTRIBUTES)
   }
 
   set attributesSectionsCollapsed(collapsed: boolean) {
@@ -312,8 +323,7 @@ export class AppFrameComponent
   }
 
   get aiEnabled(): boolean {
-    this.settingsService.trackChanges()
+    return this.aiEnabledSetting()
-    return this.settingsService.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
   @HostListener('window:resize')
@@ -480,9 +490,8 @@ export class AppFrameComponent
   }
 
   get showSidebarCounts(): boolean {
-    this.settingsService.trackChanges()
     return (
-      this.settingsService.get(SETTINGS_KEYS.SIDEBAR_VIEWS_SHOW_COUNT) &&
+      this.sidebarViewsShowCountSetting() &&
       !this.settingsService.organizingSidebarSavedViews()
     )
   }

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

@@ -81,6 +81,10 @@ export class GlobalSearchComponent implements OnInit {
   private hotkeyService = inject(HotKeyService)
   private settingsService = inject(SettingsService)
   private locationStrategy = inject(LocationStrategy)
+  private readonly searchFullTypeSetting =
+    this.settingsService.getSignal<GlobalSearchType>(
+      SETTINGS_KEYS.SEARCH_FULL_TYPE
+    )
 
   public DataType = DataType
   readonly query = signal<string>(null)
@@ -97,11 +101,7 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   get useAdvancedForFullSearch(): boolean {
-    this.settingsService.trackChanges()
+    return this.searchFullTypeSetting() === GlobalSearchType.ADVANCED
-    return (
-      this.settingsService.get(SETTINGS_KEYS.SEARCH_FULL_TYPE) ===
-      GlobalSearchType.ADVANCED
-    )
   }
 
   constructor() {

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

@@ -1,12 +1,12 @@
 @if (useDropdown) {
   <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
-    <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled" [aria-label]="title">
+    <button class="btn btn-sm" [ngClass]="!editing && isActive ? 'btn-primary' : 'btn-outline-primary'" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled" [aria-label]="title">
       <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
       @if (isActive) {
         <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
       }
     </button>
-    <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
+    <div [id]="dropdownMenuId" class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
       <ng-container *ngTemplateOutlet="list; context: { queries: selectionModel.queries }"></ng-container>
     </div>
   </div>
@@ -64,10 +64,11 @@
       [disabled]="disabled"
       [virtualScroll]="getSelectOptionsForField(atom.field)?.length > 100"
       [searchFn]="selectOptionSearchFn"
+      [appendTo]="selectAppendTo"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.DocumentLink) {
-    <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+    <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true" [appendTo]="selectAppendTo"></pngx-input-document-link>
   } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Monetary) {
     <input class="w-25 form-control rounded-end" type="text" inputmode="decimal"
       [ngModel]="atom.value"
@@ -88,6 +89,7 @@
       bindLabel="name"
       bindValue="id"
       [searchFn]="customFieldSearchFn"
+      [appendTo]="selectAppendTo"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
     <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
@@ -121,7 +123,7 @@
         <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
       }
       @case (CustomFieldQueryOperator.Contains) {
-        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true" [appendTo]="selectAppendTo"></pngx-input-document-link>
       }
       @case (CustomFieldQueryOperator.In) {
         <ng-select
@@ -133,6 +135,7 @@
           [disabled]="disabled"
           [multiple]="true"
           [searchFn]="selectOptionSearchFn"
+          [appendTo]="selectAppendTo"
           (mousedown)="$event.stopImmediatePropagation()"
         ></ng-select>
       }

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

@@ -1,5 +1,7 @@
+import { _IdGenerator } from '@angular/cdk/a11y'
 import {
   getLocaleNumberSymbol,
+  NgClass,
   NgTemplateOutlet,
   NumberSymbol,
 } from '@angular/common'
@@ -48,25 +50,26 @@ import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.comp
 import { DocumentLinkComponent } from '../input/document-link/document-link.component'
 
 export class CustomFieldQueriesModel {
-  private _queries: CustomFieldQueryElement[] = []
+  private readonly _queries = signal<CustomFieldQueryElement[]>([])
   private rootSubscriptions: Subscription[] = []
 
   public readonly changed = new Subject<CustomFieldQueriesModel>()
 
   public get queries(): CustomFieldQueryElement[] {
-    return this._queries
+    return this._queries()
   }
 
   public set queries(value: CustomFieldQueryElement[]) {
     this.teardownRootSubscriptions()
-    this._queries = value ?? []
+    const queries = value ?? []
-    for (const element of this._queries) {
+    for (const element of queries) {
       this.rootSubscriptions.push(
         element.changed.subscribe(() => {
           this.changed.next(this)
         })
       )
     }
+    this._queries.set(queries)
   }
 
   public clear(fireEvent = true) {
@@ -209,6 +212,7 @@ export class CustomFieldQueriesModel {
     DocumentLinkComponent,
     ReactiveFormsModule,
     NgbDatepickerModule,
+    NgClass,
     NgTemplateOutlet,
     NgSelectModule,
     NgxBootstrapIconsModule,
@@ -247,6 +251,18 @@ export class CustomFieldsQueryDropdownComponent extends LoadingComponentWithPerm
   @Input()
   useDropdown: boolean = true
 
+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-custom-fields-query-dropdown-'
+  )
+
+  /**
+   * Keep ng-select dropdown panels inside the dropdown menu
+   */
+  get selectAppendTo(): string {
+    return this.useDropdown ? `#${this.dropdownMenuId}` : null
+  }
+
   get name(): string {
     return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
   }

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

@@ -3,7 +3,7 @@
     <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
-  <div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div [id]="dropdownMenuId" class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <h6 class="dropdown-header border-bottom" i18n>Created</h6>
     <div class="list-group list-group-flush">
       <div class="list-group-item d-flex p-2 select-item" role="menuitem">
@@ -21,6 +21,7 @@
           bindValue="id"
           bindLabel="name"
           clearable="false"
+          [appendTo]="'#' + dropdownMenuId"
           placeholder="Relative dates"
           i18n-placeholder
           (change)="onSetCreatedRelativeDate($event)">
@@ -97,6 +98,7 @@
             bindValue="id"
             bindLabel="name"
             clearable="false"
+            [appendTo]="'#' + dropdownMenuId"
             placeholder="Relative dates"
             i18n-placeholder
             (change)="onSetAddedRelativeDate($event)">

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

@@ -23,6 +23,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
 import { pngxPopperOptions } from 'src/app/utils/popper-options'
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
+import { _IdGenerator } from '@angular/cdk/a11y'
 
 export interface DateSelection {
   createdTo?: string
@@ -68,6 +69,10 @@ export enum RelativeDate {
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
   public popperOptions = pngxPopperOptions
+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-dates-dropdown-'
+  )
 
   constructor() {
     const settings = inject(SettingsService)

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

@@ -196,6 +196,16 @@ describe('WorkflowEditDialogComponent', () => {
     fixture.detectChanges()
   })
 
+  function setActionSettings({
+    email = true,
+    remoteOcr = true,
+    ai = true,
+  } = {}) {
+    settingsService.set(SETTINGS_KEYS.EMAIL_ENABLED, email)
+    settingsService.set(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED, remoteOcr)
+    settingsService.set(SETTINGS_KEYS.AI_ENABLED, ai)
+  }
+
   it('should support create and edit modes, support adding triggers and actions on new workflow', () => {
     component.dialogMode.set(EditDialogMode.CREATE)
     const createTitleSpy = jest.spyOn(component, 'getCreateTitle')
@@ -218,7 +228,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should return source options, type options, type name, schedule date field options', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
     component.ngOnInit()
     expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
     expect(component.triggerTypeOptions).toEqual(WORKFLOW_TYPE_OPTIONS)
@@ -242,7 +252,7 @@ describe('WorkflowEditDialogComponent', () => {
     )
 
     // Email, remote OCR and AI all disabled
-    jest.spyOn(settingsService, 'get').mockReturnValue(false)
+    setActionSettings({ email: false, remoteOcr: false, ai: false })
     component.ngOnInit()
     expect(component.actionTypeOptions).toEqual(
       WORKFLOW_ACTION_OPTIONS.filter(
@@ -255,7 +265,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR only for consumption workflows', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // A consumption trigger makes the action reachable
     component.object = {
@@ -285,7 +295,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR on a trigger added to a new workflow', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
     component.ngOnInit()
 
     // Nothing for the action to apply to yet
@@ -311,7 +321,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep remote OCR listed when an action already uses it', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -329,9 +339,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer remote OCR when no engine is configured', () => {
-    jest
+    setActionSettings({ remoteOcr: false })
-      .spyOn(settingsService, 'get')
-      .mockImplementation((key) => key !== SETTINGS_KEYS.REMOTE_OCR_CONFIGURED)
 
     component.object = {
       name: 'Workflow 1',
@@ -348,7 +356,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer apply AI suggestions unless every trigger is consumption', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Consumption runs before the document has been parsed, so there would be
     // no content to make suggestions from
@@ -382,7 +390,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep apply AI suggestions listed when an action already uses it', () => {
-    jest.spyOn(settingsService, 'get').mockReturnValue(true)
+    setActionSettings()
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -400,9 +408,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer apply AI suggestions when AI is disabled', () => {
-    jest
+    setActionSettings({ ai: false })
-      .spyOn(settingsService, 'get')
-      .mockImplementation((key) => key !== SETTINGS_KEYS.AI_ENABLED)
 
     component.object = {
       name: 'Workflow 1',

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

@@ -537,6 +537,13 @@ export class WorkflowEditDialogComponent
   readonly dateCustomFields = computed(() =>
     this.customFields()?.filter((f) => f.data_type === CustomFieldDataType.Date)
   )
+  private readonly emailEnabledSetting =
+    this.settingsService.getSignal<boolean>(SETTINGS_KEYS.EMAIL_ENABLED)
+  private readonly remoteOcrConfiguredSetting =
+    this.settingsService.getSignal<boolean>(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED)
+  private readonly aiEnabledSetting = this.settingsService.getSignal<boolean>(
+    SETTINGS_KEYS.AI_ENABLED
+  )
 
   expandedItem: number = null
 
@@ -589,7 +596,7 @@ export class WorkflowEditDialogComponent
   private getAllowedActionTypes() {
     let allowed = WORKFLOW_ACTION_OPTIONS
 
-    if (!this.settingsService.get(SETTINGS_KEYS.EMAIL_ENABLED)) {
+    if (!this.emailEnabledSetting()) {
       allowed = allowed.filter((a) => a.id !== WorkflowActionType.Email)
     }
 
@@ -597,7 +604,7 @@ export class WorkflowEditDialogComponent
     // offered for workflows that run at consumption.
     const formWorkflow: Workflow = this.objectForm?.value
     const remoteOcrUsable =
-      this.settingsService.get(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED) &&
+      this.remoteOcrConfiguredSetting() &&
       (formWorkflow?.triggers?.some(
         (trigger) => trigger.type === WorkflowTriggerType.Consumption
       ) ||
@@ -612,7 +619,7 @@ export class WorkflowEditDialogComponent
     // once every trigger is consumption, so it stays offered on a workflow
     // that has no triggers yet.
     const aiSuggestionsUsable =
-      this.settingsService.get(SETTINGS_KEYS.AI_ENABLED) &&
+      this.aiEnabledSetting() &&
       (!formWorkflow?.triggers?.length ||
         formWorkflow.triggers.some(
           (trigger) => trigger.type !== WorkflowTriggerType.Consumption
@@ -1362,7 +1369,6 @@ export class WorkflowEditDialogComponent
   }
 
   get actionTypeOptions() {
-    this.settingsService.trackChanges()
     // Computed on read rather than cached
     return this.getAllowedActionTypes()
   }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -703,6 +703,40 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     expect(selectionModel.getSelectedItems()).toEqual([other])
   })
 
+  it('re-selects ancestors when a child is re-selected while editing', () => {
+    // https://github.com/paperless-ngx/paperless-ngx/issues/13970
+    const inbox: Tag = { id: 200, name: 'Inbox' }
+    const parent: Tag = { id: 201, name: 'Parent Tag' }
+    const child: Tag = { id: 202, name: 'Child Tag', parent: parent.id }
+
+    selectionModel.editing = true
+    selectionModel.items = [inbox, parent, child]
+    selectionModel.init(
+      new Map([
+        [inbox.id, ToggleableItemState.Selected],
+        [parent.id, ToggleableItemState.Selected],
+        [child.id, ToggleableItemState.Selected],
+      ])
+    )
+
+    // deselecting the parent also deselects the child
+    selectionModel.toggle(parent.id, false)
+    expect(selectionModel.getSelectedItems()).toEqual([inbox])
+
+    // re-selecting the child brings its parent back, so nothing is changed
+    selectionModel.toggle(child.id, false)
+    expect(
+      selectionModel
+        .getSelectedItems()
+        .map((item) => item.id)
+        .sort((a, b) => a - b)
+    ).toEqual([inbox.id, parent.id, child.id])
+    expect(selectionModel.diff()).toEqual({
+      itemsToAdd: [],
+      itemsToRemove: [],
+    })
+  })
+
   it('un-excluding a parent clears excluded descendants', () => {
     const root: Tag = { id: 110, name: 'Root Tag' }
     const child: Tag = { id: 111, name: 'Child Tag', parent: root.id }
@@ -739,7 +773,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     const apple: Tag = { id: 55, name: 'Apple' }
     const zebra: Tag = { id: 56, name: 'Zebra' }
 
-    selectionModel.documentCountSortingEnabled = true
+    selectionModel.editing = true
     selectionModel.items = [apple, zebra]
     expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
       null,
@@ -839,7 +873,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [memoRoot]
     selectionModel.documentCounts = [{ id: memoRoot.id, document_count: 9 }]
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(memoRoot.id)).toEqual(9)
     selectionModel.documentCounts = []
@@ -855,7 +891,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutSelection]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(rootWithoutSelection.id)).toEqual(4)
   })
@@ -865,7 +903,9 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutCounts]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter()
+    const getRootDocCount = (selectionModel as any).createRootDocCounter(
+      selectionModel.items
+    )
 
     expect(getRootDocCount(rootWithoutCounts.id)).toEqual(0)
   })
@@ -966,7 +1006,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     component.selectionModel['temporarySelectionStates'].set(id, state)
     const changedSpy = jest.spyOn(component.selectionModel.changed, 'next')
     component.selectionModel.exclude(id)
-    expect(component.selectionModel.temporaryLogicalOperator).toBe(
+    expect(component.selectionModel.temporaryLogicalOperator()).toBe(
       LogicalOperator.And
     )
     expect(component.selectionModel['temporarySelectionStates'].get(id)).toBe(

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

@@ -64,43 +64,56 @@ export class FilterableDropdownSelectionModel {
 
   manyToOne = false
   singleSelect = false
-  private _logicalOperator: LogicalOperator = LogicalOperator.And
-  temporaryLogicalOperator: LogicalOperator = this._logicalOperator
-  private _intersection: Intersection = Intersection.Include
-  temporaryIntersection: Intersection = this._intersection
 
-  private _documentCounts: SelectionDataItem[] = []
+  private readonly _logicalOperator = signal(LogicalOperator.And)
-  public documentCountSortingEnabled = false
+  readonly temporaryLogicalOperator = signal(LogicalOperator.And)
+  private readonly _intersection = signal(Intersection.Include)
+  readonly temporaryIntersection = signal(Intersection.Include)
+  private readonly _documentCounts = signal<SelectionDataItem[]>([])
+  private readonly _items = signal<MatchingModel[]>([])
+  private readonly _selectionStates = signal(
+    new Map<number, ToggleableItemState>()
+  )
+  private readonly _temporarySelectionStates = signal(
+    new Map<number, ToggleableItemState>()
+  )
+
+  public editing = false
+
+  private get selectionStates(): ReadonlyMap<number, ToggleableItemState> {
+    return this._selectionStates()
+  }
+
+  private get temporarySelectionStates(): ReadonlyMap<
+    number,
+    ToggleableItemState
+  > {
+    return this._temporarySelectionStates()
+  }
 
   public set documentCounts(counts: SelectionDataItem[]) {
-    this._documentCounts = counts
+    this._documentCounts.set(counts)
-    if (this.documentCountSortingEnabled) {
+    if (this.editing) {
-      this.sortItems()
+      this._items.set(this.sortItems(this.items))
     }
   }
 
-  private _items: MatchingModel[] = []
   get items(): MatchingModel[] {
-    return this._items
+    return this._items()
   }
 
   set items(items: MatchingModel[]) {
     if (items) {
-      this._items = Array.from(items)
+      this._items.set(this.withNullItem(this.sortItems(Array.from(items))))
-      this.sortItems()
-      this.setNullItem()
     }
   }
 
-  private setNullItem() {
+  private withNullItem(items: MatchingModel[]): MatchingModel[] {
     if (this.manyToOne && this.logicalOperator === LogicalOperator.Or) {
-      if (this._items[0]?.id === null) {
+      return items[0]?.id === null ? items.slice(1) : items
-        this._items.shift()
-      }
-      return
     }
 
-    const item = {
+    const nullItem = {
       name: $localize`:Filter drop down element to filter for documents with no correspondent/type/tag assigned:Not assigned`,
       id:
         this.manyToOne || this.intersection === Intersection.Include
@@ -108,22 +121,17 @@ export class FilterableDropdownSelectionModel {
           : NEGATIVE_NULL_FILTER_VALUE,
     }
 
-    if (
+    return items[0]?.id === null || items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
-      this._items[0]?.id === null ||
+      ? [nullItem, ...items.slice(1)]
-      this._items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
+      : [nullItem, ...items]
-    ) {
-      this._items[0] = item
-    } else if (this._items) {
-      this._items.unshift(item)
-    }
   }
 
   constructor(manyToOne: boolean = false) {
     this.manyToOne = manyToOne
   }
 
-  private sortItems() {
+  private sortItems(items: MatchingModel[]): MatchingModel[] {
-    this._items.sort((a, b) => {
+    const sorted = [...items].sort((a, b) => {
       if (
         (a.id == null && b.id != null) ||
         (a.id == NEGATIVE_NULL_FILTER_VALUE &&
@@ -154,13 +162,13 @@ export class FilterableDropdownSelectionModel {
       ) {
         return -1
       } else if (
-        this._documentCounts.length &&
+        this._documentCounts().length &&
         this.getDocumentCount(b.id) === 0 &&
         this.getDocumentCount(a.id) > this.getDocumentCount(b.id)
       ) {
         return -1
       } else if (
-        this._documentCounts.length &&
+        this._documentCounts().length &&
         this.getDocumentCount(a.id) === 0 &&
         this.getDocumentCount(a.id) < this.getDocumentCount(b.id)
       ) {
@@ -170,15 +178,11 @@ export class FilterableDropdownSelectionModel {
       }
     })
 
-    if (this._documentCounts.length) {
+    return this._documentCounts().length
-      this.promoteBranchesWithDocumentCounts()
+      ? this.promoteBranchesWithDocumentCounts(sorted)
-    }
+      : sorted
   }
 
-  private selectionStates = new Map<number, ToggleableItemState>()
-
-  private temporarySelectionStates = new Map<number, ToggleableItemState>()
-
   getSelectedItems() {
     return this.items.filter(
       (i) =>
@@ -194,30 +198,33 @@ export class FilterableDropdownSelectionModel {
   }
 
   set(id: number, state: ToggleableItemState, fireEvent = true) {
+    const states = new Map(this.temporarySelectionStates)
     if (state == ToggleableItemState.NotSelected) {
-      this.temporarySelectionStates.delete(id)
+      states.delete(id)
     } else {
-      this.temporarySelectionStates.set(id, state)
+      states.set(id, state)
     }
+    this._temporarySelectionStates.set(states)
     if (fireEvent) {
       this.changed.next(this)
     }
   }
 
   toggle(id: number, fireEvent = true) {
-    let state = this.temporarySelectionStates.get(id)
+    const states = new Map(this.temporarySelectionStates)
+    let state = states.get(id)
     if (
       state == undefined ||
       (state != ToggleableItemState.Selected &&
         state != ToggleableItemState.Excluded)
     ) {
       if (this.manyToOne || this.singleSelect) {
-        this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
+        states.set(id, ToggleableItemState.Selected)
 
         if (this.singleSelect) {
-          for (let key of this.temporarySelectionStates.keys()) {
+          for (let key of states.keys()) {
             if (key != id) {
-              this.temporarySelectionStates.delete(key)
+              states.delete(key)
             }
           }
         }
@@ -233,25 +240,29 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        this.temporarySelectionStates.set(id, newState)
+        states.set(id, newState)
+      }
+      if (this.editing && states.get(id) == ToggleableItemState.Selected) {
+        this.addAncestorSelections(states, id)
       }
     } else if (
       state == ToggleableItemState.Selected ||
       state == ToggleableItemState.Excluded
     ) {
-      this.temporarySelectionStates.delete(id)
+      states.delete(id)
-      this.clearDescendantSelections(id)
+      this.clearDescendantSelections(states, id)
     }
 
     if (!id) {
-      for (let key of this.temporarySelectionStates.keys()) {
+      for (let key of states.keys()) {
         if (key) {
-          this.temporarySelectionStates.delete(key)
+          states.delete(key)
         }
       }
     } else {
-      this.temporarySelectionStates.delete(null)
+      states.delete(null)
     }
+    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -259,20 +270,21 @@ export class FilterableDropdownSelectionModel {
   }
 
   exclude(id: number, fireEvent: boolean = true) {
-    let state = this.temporarySelectionStates.get(id)
+    const states = new Map(this.temporarySelectionStates)
+    let state = states.get(id)
     if (id && (state == null || state != ToggleableItemState.Excluded)) {
-      this.temporaryLogicalOperator = this._logicalOperator = this.manyToOne
+      const operator = this.manyToOne ? LogicalOperator.And : LogicalOperator.Or
-        ? LogicalOperator.And
+      this.temporaryLogicalOperator.set(operator)
-        : LogicalOperator.Or
+      this._logicalOperator.set(operator)
 
       if (this.manyToOne || this.singleSelect) {
-        this.temporarySelectionStates.set(id, ToggleableItemState.Excluded)
+        states.set(id, ToggleableItemState.Excluded)
-        this.clearDescendantSelections(id)
+        this.clearDescendantSelections(states, id)
 
         if (this.singleSelect) {
-          for (let key of this.temporarySelectionStates.keys()) {
+          for (let key of states.keys()) {
             if (key != id) {
-              this.temporarySelectionStates.delete(key)
+              states.delete(key)
             }
           }
         }
@@ -287,17 +299,18 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        this.temporarySelectionStates.set(id, newState)
+        states.set(id, newState)
         if (newState == ToggleableItemState.Excluded) {
-          this.clearDescendantSelections(id)
+          this.clearDescendantSelections(states, id)
         }
       }
     } else if (!id || state == ToggleableItemState.Excluded) {
-      this.temporarySelectionStates.delete(id)
+      states.delete(id)
       if (id) {
-        this.clearDescendantSelections(id)
+        this.clearDescendantSelections(states, id)
       }
     }
+    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -308,9 +321,27 @@ export class FilterableDropdownSelectionModel {
     return this.selectionStates.get(id) || ToggleableItemState.NotSelected
   }
 
-  private clearDescendantSelections(id: number) {
+  private clearDescendantSelections(
+    states: Map<number, ToggleableItemState>,
+    id: number
+  ) {
     for (const descendantID of this.getDescendantIDs(id)) {
-      this.temporarySelectionStates.delete(descendantID)
+      states.delete(descendantID)
+    }
+  }
+
+  private addAncestorSelections(
+    states: Map<number, ToggleableItemState>,
+    id: number
+  ) {
+    const parentById = this.buildParentById(this.items)
+    const seen = new Set<number>([id])
+    let parentID = parentById.get(id)
+
+    while (typeof parentID === 'number' && !seen.has(parentID)) {
+      seen.add(parentID)
+      states.set(parentID, ToggleableItemState.Selected)
+      parentID = parentById.get(parentID)
     }
   }
 
@@ -320,7 +351,7 @@ export class FilterableDropdownSelectionModel {
 
     while (queue.length) {
       const parentID = queue.shift()
-      for (const item of this._items) {
+      for (const item of this.items) {
         if (
           typeof item?.id === 'number' &&
           typeof (item as any)['parent'] === 'number' &&
@@ -336,12 +367,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get logicalOperator(): LogicalOperator {
-    return this.temporaryLogicalOperator
+    return this.temporaryLogicalOperator()
   }
 
   set logicalOperator(operator: LogicalOperator) {
-    this.temporaryLogicalOperator = operator
+    this.temporaryLogicalOperator.set(operator)
-    this.setNullItem()
+    this._items.set(this.withNullItem(this.items))
   }
 
   toggleOperator() {
@@ -349,12 +380,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get intersection(): Intersection {
-    return this.temporaryIntersection
+    return this.temporaryIntersection()
   }
 
   set intersection(intersection: Intersection) {
-    this.temporaryIntersection = intersection
+    this.temporaryIntersection.set(intersection)
-    this.setNullItem()
+    this._items.set(this.withNullItem(this.items))
   }
 
   toggleIntersection() {
@@ -364,18 +395,20 @@ export class FilterableDropdownSelectionModel {
         ? ToggleableItemState.Selected
         : ToggleableItemState.Excluded
 
-    this.temporarySelectionStates.forEach((state, key) => {
+    const states = new Map(this.temporarySelectionStates)
+    states.forEach((state, key) => {
       if (key === null && this.intersection === Intersection.Exclude) {
-        this.temporarySelectionStates.set(NEGATIVE_NULL_FILTER_VALUE, newState)
+        states.set(NEGATIVE_NULL_FILTER_VALUE, newState)
       } else if (
         key === NEGATIVE_NULL_FILTER_VALUE &&
         this.intersection === Intersection.Include
       ) {
-        this.temporarySelectionStates.set(null, newState)
+        states.set(null, newState)
       } else {
-        this.temporarySelectionStates.set(key, newState)
+        states.set(key, newState)
       }
     })
+    this._temporarySelectionStates.set(states)
 
     this.changed.next(this)
   }
@@ -395,10 +428,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   clear(fireEvent = true) {
-    this.temporarySelectionStates.clear()
+    this._temporarySelectionStates.set(new Map())
-    this.temporaryLogicalOperator = this._logicalOperator = LogicalOperator.And
+    this.temporaryLogicalOperator.set(LogicalOperator.And)
-    this.temporaryIntersection = this._intersection = Intersection.Include
+    this._logicalOperator.set(LogicalOperator.And)
-    this.setNullItem()
+    this.temporaryIntersection.set(Intersection.Include)
+    this._intersection.set(Intersection.Include)
+    this._items.set(this.withNullItem(this.items))
     if (fireEvent) {
       this.changed.next(this)
     }
@@ -419,9 +454,9 @@ export class FilterableDropdownSelectionModel {
       )
     ) {
       return true
-    } else if (this.temporaryLogicalOperator !== this._logicalOperator) {
+    } else if (this.temporaryLogicalOperator() !== this._logicalOperator()) {
       return true
-    } else if (this.temporaryIntersection !== this._intersection) {
+    } else if (this.temporaryIntersection() !== this._intersection()) {
       return true
     } else {
       return false
@@ -438,23 +473,29 @@ export class FilterableDropdownSelectionModel {
   }
 
   getDocumentCount(id: number) {
-    return this._documentCounts.find((c) => c.id === id)?.document_count
+    return this._documentCounts().find((c) => c.id === id)?.document_count
   }
 
-  private promoteBranchesWithDocumentCounts() {
+  private promoteBranchesWithDocumentCounts(
-    const parentById = this.buildParentById()
+    items: MatchingModel[]
+  ): MatchingModel[] {
+    const parentById = this.buildParentById(items)
     const findRootId = this.createRootFinder(parentById)
-    const getRootDocCount = this.createRootDocCounter()
+    const getRootDocCount = this.createRootDocCounter(items)
-    const summaries = this.buildBranchSummaries(findRootId, getRootDocCount)
+    const summaries = this.buildBranchSummaries(
+      items,
+      findRootId,
+      getRootDocCount
+    )
     const orderedBranches = this.orderBranchesByPriority(summaries)
 
-    this._items = orderedBranches.flatMap((summary) => summary.items)
+    return orderedBranches.flatMap((summary) => summary.items)
   }
 
-  private buildParentById(): Map<number, number | null> {
+  private buildParentById(items: MatchingModel[]): Map<number, number | null> {
     const parentById = new Map<number, number | null>()
 
-    for (const item of this._items) {
+    for (const item of items) {
       if (typeof item?.id === 'number') {
         const parentValue = (item as any)['parent']
         parentById.set(
@@ -492,7 +533,9 @@ export class FilterableDropdownSelectionModel {
     return findRootId
   }
 
-  private createRootDocCounter(): (rootId: number) => number {
+  private createRootDocCounter(
+    items: MatchingModel[]
+  ): (rootId: number) => number {
     const docCountMemo = new Map<number, number>()
 
     return (rootId: number): number => {
@@ -507,7 +550,7 @@ export class FilterableDropdownSelectionModel {
         return explicit
       }
 
-      const rootItem = this._items.find((i) => i.id === rootId)
+      const rootItem = items.find((i) => i.id === rootId)
       const fallback =
         typeof (rootItem as any)?.['document_count'] === 'number'
           ? (rootItem as any)['document_count']
@@ -519,12 +562,13 @@ export class FilterableDropdownSelectionModel {
   }
 
   private buildBranchSummaries(
+    items: MatchingModel[],
     findRootId: (id: number) => number,
     getRootDocCount: (rootId: number) => number
   ): Map<string, BranchSummary> {
     const summaries = new Map<string, BranchSummary>()
 
-    for (const [index, item] of this._items.entries()) {
+    for (const [index, item] of items.entries()) {
       const { key, special, rootId } = this.describeBranchItem(
         item,
         index,
@@ -616,28 +660,23 @@ export class FilterableDropdownSelectionModel {
   }
 
   init(map: Map<number, ToggleableItemState>) {
-    this.temporarySelectionStates = map
+    this._temporarySelectionStates.set(new Map(map))
     this.apply()
   }
 
   apply() {
-    this.selectionStates.clear()
+    this._selectionStates.set(new Map(this.temporarySelectionStates))
-    this.temporarySelectionStates.forEach((value, key) => {
+    this._logicalOperator.set(this.temporaryLogicalOperator())
-      this.selectionStates.set(key, value)
+    this._intersection.set(this.temporaryIntersection())
-    })
+    this._items.set(this.sortItems(this.items))
-    this._logicalOperator = this.temporaryLogicalOperator
-    this._intersection = this.temporaryIntersection
-    this.sortItems()
   }
 
   reset(complete: boolean = false) {
-    this.temporarySelectionStates.clear()
     if (complete) {
-      this.selectionStates.clear()
+      this._selectionStates.set(new Map())
+      this._temporarySelectionStates.set(new Map())
     } else {
-      this.selectionStates.forEach((value, key) => {
+      this._temporarySelectionStates.set(new Map(this.selectionStates))
-        this.temporarySelectionStates.set(key, value)
-      })
     }
   }
 
@@ -710,7 +749,7 @@ export class FilterableDropdownComponent
       model.manyToOne = this.selectionModel.manyToOne
       model.singleSelect = this._editing && !model.manyToOne
     }
-    model.documentCountSortingEnabled = this._editing
+    model.editing = this._editing
     model.changed.subscribe((updatedModel) => {
       this.selectionModelChange.next(updatedModel)
     })
@@ -748,7 +787,7 @@ export class FilterableDropdownComponent
     if (this.selectionModel) {
       this.selectionModel.singleSelect =
         this._editing && !this.selectionModel.manyToOne
-      this.selectionModel.documentCountSortingEnabled = this._editing
+      this.selectionModel.editing = this._editing
     }
   }
 

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss

@@ -7,6 +7,8 @@
   padding-left: calc(calc(var(--depth) - 2) * 1rem);
   display: flex;
   align-items: center;
+    min-width: 0;
+    overflow-wrap: anywhere;
 
   .indicator {
     display: inline-block;
@@ -18,3 +20,7 @@
     margin-left: .5rem;
   }
 }
+
+  .badge {
+    flex-shrink: 0;
+  }

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

@@ -33,6 +33,7 @@
     [compareWith]="compareDocuments"
     [trackByFn]="trackByFn"
     [minTermLength]="2"
+    [appendTo]="appendTo"
     [loading]="loading()"
     [typeahead]="documentsInput$"
     (mousedown)="$event.stopImmediatePropagation()"

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

@@ -81,6 +81,12 @@ export class DocumentLinkComponent
   @Input()
   placeholder: string = $localize`Search for documents`
 
+  /**
+   * Parent for ng-select dropdown, needed to prevent close on click.
+   */
+  @Input()
+  appendTo: string = null
+
   get selectedDocumentIDs(): number[] {
     return this.selectedDocuments.map((d) => d.id)
   }

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

@@ -22,7 +22,7 @@
 }
 
 // Dropdown hierarchy reveal for ng-select options
-:host ::ng-deep .ng-dropdown-panel .ng-option {
+::ng-deep .ng-dropdown-panel .ng-option {
   overflow-x: auto !important;
 
   .tag-option-row {
@@ -41,12 +41,12 @@
   }
 }
 
-:host ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
   max-width: 1000px;
 }
 
 ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
   background: transparent;
 }

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

@@ -207,6 +207,21 @@ describe('TagsComponent', () => {
     expect(component.value).toEqual([2, 1])
   })
 
+  it('should propagate parents added via ng-select selection', () => {
+    const parent: Tag = { id: 1, name: 'parent' }
+    const child: Tag = { id: 2, name: 'child', parent: 1 }
+    component.tags = [parent, child]
+    fixture.detectChanges()
+    let propagated: number[]
+    component.registerOnChange((value: number[]) => (propagated = value))
+
+    component.value = []
+    component.select.select(component.select.itemsList.findItem(child.id))
+
+    expect(component.value).toEqual([2, 1])
+    expect(propagated).toEqual([2, 1])
+  })
+
   it('should not duplicate parents when adding sibling nested tags', () => {
     const root: Tag = { id: 1, name: 'root' }
     const parent: Tag = { id: 2, name: 'parent', parent: 1 }

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

@@ -173,6 +173,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
       if (parent && !this.value.includes(parent.id)) {
         this.value = [...this.value, parent.id]
         this.onAdd(parent)
+        this.onChange(this.value) // re-emit for ng-select
       }
     }
   }

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

@@ -22,7 +22,7 @@
 }
 
 ::ng-deep .pngx-pdf-viewer-container {
-  overflow: hidden;
+  overflow: hidden !important;
 }
 
 .hover-actions {

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

@@ -3,11 +3,11 @@
     <i-bs name="person-fill-lock"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
     <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge><span class="visually-hidden">selected</span>
   </button>
-  <div class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
+  <div [id]="dropdownMenuId" class="dropdown-menu permission-filter-dropdown shadow py-0 w-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
     <div class="list-group list-group-flush">
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NONE)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.NONE) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.NONE) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -17,7 +17,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.SELF) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.SELF) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -27,7 +27,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -37,7 +37,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -47,7 +47,7 @@
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
@@ -57,17 +57,22 @@
       </button>
       <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
         <div class="selected-icon me-1">
-          @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
+          @if (selectionModel.ownerFilter() === OwnerFilterType.OTHERS) {
-            <i-bs width="1em" height="1em" name="check"></i-bs>
+            <a class="text-reset focus-variants" href="javascript:void(0)" (click)="clearIncludeUsers()" aria-label="Clear selected users" i18n-aria-label>
+              <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+              <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
+            </a>
           }
         </div>
         <div class="me-1 w-100">
           <ng-select
             name="user"
             class="user-select small"
-            [(ngModel)]="selectionModel.includeUsers"
+            [ngModel]="selectionModel.includeUsers()"
+            (ngModelChange)="selectionModel.includeUsers.set($event)"
             [disabled]="disabled"
             [clearable]="false"
+            [appendTo]="'#' + dropdownMenuId"
             [items]="users()"
             bindLabel="username"
             multiple="true"
@@ -78,10 +83,10 @@
           </ng-select>
         </div>
       </button>
-      @if (selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+      @if (selectionModel.ownerFilter() === OwnerFilterType.NONE || selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
         <div class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
           <div class="form-check form-switch w-100">
-            <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (change)="onChange()" [disabled]="disabled">
+            <input type="checkbox" class="form-check-input" id="hideUnowned" [ngModel]="selectionModel.hideUnowned()" (ngModelChange)="selectionModel.hideUnowned.set($event)" (change)="onChange()" [disabled]="disabled">
             <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
           </div>
         </div>

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

@@ -6,3 +6,18 @@
     min-width: 1em;
     min-height: 1em;
 }
+
+.focus-variants {
+  .variant-focused {
+    display: none;
+  }
+
+  &:hover, &:focus {
+    .variant-unfocused {
+      display: none;
+    }
+    .variant-focused {
+      display: block;
+    }
+  }
+}

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

@@ -90,56 +90,56 @@ describe('PermissionsFilterDropdownComponent', () => {
     component.setFilter(OwnerFilterType.OTHERS)
     expect(component.isActive).toBeTruthy()
     component.setFilter(OwnerFilterType.NONE)
-    component.selectionModel.hideUnowned = true
+    component.selectionModel.hideUnowned.set(true)
     expect(component.isActive).toBeTruthy()
   })
 
   it('should describe concrete user filters honestly', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.SELF
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SELF)
-    component.selectionModel.userID = 1
+    component.selectionModel.userID.set(1)
     expect(component.ownerFilterLabel).toEqual('Owned by user1')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.NOT_SELF
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NOT_SELF)
-    component.selectionModel.excludeUsers = [1]
+    component.selectionModel.excludeUsers.set([1])
     expect(component.ownerExclusionFilterLabel).toEqual('Not owned by user1')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.SHARED_BY_ME
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SHARED_BY_ME)
-    component.selectionModel.userID = 1
+    component.selectionModel.userID.set(1)
     expect(component.sharedByFilterLabel).toEqual('Shared by user1')
   })
 
   it('should describe concrete filters when usernames are unavailable', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.SELF
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SELF)
-    component.selectionModel.userID = 99
+    component.selectionModel.userID.set(99)
     expect(component.ownerFilterLabel).toEqual('Owned by another user')
 
-    component.selectionModel.ownerFilter = OwnerFilterType.NOT_SELF
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NOT_SELF)
-    component.selectionModel.excludeUsers = [99]
+    component.selectionModel.excludeUsers.set([99])
     expect(component.ownerExclusionFilterLabel).toEqual(
       'Not owned by another user'
     )
 
-    component.selectionModel.excludeUsers = [98, 99]
+    component.selectionModel.excludeUsers.set([98, 99])
     expect(component.ownerExclusionFilterLabel).toEqual(
       'Not owned by selected users'
     )
 
-    component.selectionModel.ownerFilter = OwnerFilterType.SHARED_BY_ME
+    component.selectionModel.ownerFilter.set(OwnerFilterType.SHARED_BY_ME)
-    component.selectionModel.userID = 99
+    component.selectionModel.userID.set(99)
     expect(component.sharedByFilterLabel).toEqual('Shared by another user')
   })
 
   it('should retain relative labels for filters bound to the current user', () => {
-    component.selectionModel.userID = currentUserID
+    component.selectionModel.userID.set(currentUserID)
     expect(component.ownerFilterLabel).toEqual('My documents')
     expect(component.sharedByFilterLabel).toEqual('Shared by me')
 
-    component.selectionModel.excludeUsers = [currentUserID]
+    component.selectionModel.excludeUsers.set([currentUserID])
     expect(component.ownerExclusionFilterLabel).toEqual('Shared with me')
   })
 
   it('should retain relative labels for inactive filter choices', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     expect(component.ownerFilterLabel).toEqual('My documents')
     expect(component.ownerExclusionFilterLabel).toEqual('Shared with me')
@@ -148,32 +148,56 @@ describe('PermissionsFilterDropdownComponent', () => {
 
   it('should support reset', () => {
     component.setFilter(OwnerFilterType.OTHERS)
-    expect(component.selectionModel.ownerFilter).not.toEqual(
+    expect(component.selectionModel.ownerFilter()).not.toEqual(
       OwnerFilterType.NONE
     )
     component.reset()
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
   })
 
   it('should toggle owner filter type when users selected', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     // this would normally be done by select component
-    component.selectionModel.includeUsers = [12]
+    component.selectionModel.includeUsers.set([12])
     component.onUserSelect()
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.OTHERS)
+    expect(component.selectionModel.ownerFilter()).toEqual(
+      OwnerFilterType.OTHERS
+    )
 
     // this would normally be done by select component
-    component.selectionModel.includeUsers = null
+    component.selectionModel.includeUsers.set(null)
     component.onUserSelect()
 
-    expect(component.selectionModel.ownerFilter).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
   })
+  it('should clear selected users', () => {
+    component.selectionModel.includeUsers.set([12])
+    component.onUserSelect()
+    component.selectionModel.hideUnowned.set(true)
+    expect(component.selectionModel.ownerFilter()).toEqual(
+      OwnerFilterType.OTHERS
+    )
+
+    component.clearIncludeUsers()
+
+    expect(component.selectionModel.includeUsers()).toEqual([])
+    expect(component.selectionModel.ownerFilter()).toEqual(OwnerFilterType.NONE)
+    expect(component.selectionModel.hideUnowned()).toBeTruthy()
+  })
+
   it('should emit a selection model depending on the type of owner filter set', () => {
-    component.selectionModel.ownerFilter = OwnerFilterType.NONE
+    const emitted = () => ({
+      excludeUsers: ownerFilterSetResult.excludeUsers(),
+      hideUnowned: ownerFilterSetResult.hideUnowned(),
+      includeUsers: ownerFilterSetResult.includeUsers(),
+      ownerFilter: ownerFilterSetResult.ownerFilter(),
+      userID: ownerFilterSetResult.userID(),
+    })
+    component.selectionModel.ownerFilter.set(OwnerFilterType.NONE)
 
     component.setFilter(OwnerFilterType.SELF)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -182,7 +206,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.NOT_SELF)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [currentUserID],
       hideUnowned: false,
       includeUsers: [],
@@ -191,7 +215,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.NONE)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -200,7 +224,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.SHARED_BY_ME)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],
@@ -209,7 +233,7 @@ describe('PermissionsFilterDropdownComponent', () => {
     })
 
     component.setFilter(OwnerFilterType.UNOWNED)
-    expect(ownerFilterSetResult).toEqual({
+    expect(emitted()).toEqual({
       excludeUsers: [],
       hideUnowned: false,
       includeUsers: [],

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

@@ -1,3 +1,4 @@
+import { _IdGenerator } from '@angular/cdk/a11y'
 import { NgClass } from '@angular/common'
 import {
   Component,
@@ -25,18 +26,18 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
 export class PermissionsSelectionModel {
-  ownerFilter: OwnerFilterType
+  readonly ownerFilter = signal(OwnerFilterType.NONE)
-  hideUnowned: boolean
+  readonly hideUnowned = signal(false)
-  userID: number
+  readonly userID = signal<number>(null)
-  includeUsers: number[]
+  readonly includeUsers = signal<number[]>([])
-  excludeUsers: number[]
+  readonly excludeUsers = signal<number[]>([])
 
   clear() {
-    this.ownerFilter = OwnerFilterType.NONE
+    this.ownerFilter.set(OwnerFilterType.NONE)
-    this.userID = null
+    this.userID.set(null)
-    this.hideUnowned = false
+    this.hideUnowned.set(false)
-    this.includeUsers = []
+    this.includeUsers.set([])
-    this.excludeUsers = []
+    this.excludeUsers.set([])
   }
 }
 
@@ -70,6 +71,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   public OwnerFilterType = OwnerFilterType
 
+  private readonly idGenerator = inject(_IdGenerator)
+  public readonly dropdownMenuId = this.idGenerator.getId(
+    'pngx-permissions-filter-dropdown-'
+  )
+
   @Input()
   title: string
 
@@ -84,33 +90,31 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   readonly users = signal<User[]>([])
 
-  hideUnowned: boolean
-
   get isActive(): boolean {
     return (
-      this.selectionModel.ownerFilter !== OwnerFilterType.NONE ||
+      this.selectionModel.ownerFilter() !== OwnerFilterType.NONE ||
-      this.selectionModel.hideUnowned
+      this.selectionModel.hideUnowned()
     )
   }
 
   get ownerFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.SELF ||
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.SELF ||
-      this.selectionModel?.userID === this.settingsService.currentUser()?.id
+      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
     ) {
       return $localize`My documents`
     }
 
-    const username = this.getUsername(this.selectionModel?.userID)
+    const username = this.getUsername(this.selectionModel?.userID())
     return username
       ? $localize`Owned by ${username}`
       : $localize`Owned by another user`
   }
 
   get ownerExclusionFilterLabel(): string {
-    const excludedUsers = this.selectionModel?.excludeUsers ?? []
+    const excludedUsers = this.selectionModel?.excludeUsers() ?? []
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.NOT_SELF ||
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.NOT_SELF ||
       (excludedUsers.length === 1 &&
         excludedUsers[0] === this.settingsService.currentUser()?.id)
     ) {
@@ -130,13 +134,13 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   get sharedByFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter !== OwnerFilterType.SHARED_BY_ME ||
+      this.selectionModel?.ownerFilter() !== OwnerFilterType.SHARED_BY_ME ||
-      this.selectionModel?.userID === this.settingsService.currentUser()?.id
+      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
     ) {
       return $localize`Shared by me`
     }
 
-    const username = this.getUsername(this.selectionModel?.userID)
+    const username = this.getUsername(this.selectionModel?.userID())
     return username
       ? $localize`Shared by ${username}`
       : $localize`Shared by another user`
@@ -169,34 +173,36 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
   }
 
   setFilter(type: OwnerFilterType) {
-    this.selectionModel.ownerFilter = type
+    this.selectionModel.ownerFilter.set(type)
-    if (this.selectionModel.ownerFilter === OwnerFilterType.SELF) {
+    if (this.selectionModel.ownerFilter() === OwnerFilterType.SELF) {
-      this.selectionModel.includeUsers = []
+      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers = []
+      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.userID = this.settingsService.currentUser().id
+      this.selectionModel.userID.set(this.settingsService.currentUser().id)
-      this.selectionModel.hideUnowned = false
+      this.selectionModel.hideUnowned.set(false)
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
-      this.selectionModel.userID = null
+      this.selectionModel.userID.set(null)
-      this.selectionModel.includeUsers = []
+      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers = [this.settingsService.currentUser().id]
+      this.selectionModel.excludeUsers.set([
-      this.selectionModel.hideUnowned = false
+        this.settingsService.currentUser().id,
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NONE) {
+      ])
-      this.selectionModel.userID = null
+      this.selectionModel.hideUnowned.set(false)
-      this.selectionModel.includeUsers = []
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NONE) {
-      this.selectionModel.excludeUsers = []
+      this.selectionModel.userID.set(null)
-      this.selectionModel.hideUnowned = false
+      this.selectionModel.includeUsers.set([])
+      this.selectionModel.excludeUsers.set([])
+      this.selectionModel.hideUnowned.set(false)
     } else if (
-      this.selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME
+      this.selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME
     ) {
-      this.selectionModel.userID = this.settingsService.currentUser()?.id
+      this.selectionModel.userID.set(this.settingsService.currentUser()?.id)
-      this.selectionModel.includeUsers = []
+      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers = []
+      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.hideUnowned = false
+      this.selectionModel.hideUnowned.set(false)
-    } else if (this.selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
-      this.selectionModel.userID = null
+      this.selectionModel.userID.set(null)
-      this.selectionModel.includeUsers = []
+      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers = []
+      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.hideUnowned = false
+      this.selectionModel.hideUnowned.set(false)
     }
     this.onChange()
   }
@@ -205,12 +211,17 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
     this.ownerFilterSet.emit(this.selectionModel)
   }
 
+  clearIncludeUsers() {
+    this.selectionModel.includeUsers.set([])
+    this.onUserSelect()
+  }
+
   onUserSelect() {
-    if (this.selectionModel.includeUsers?.length) {
+    this.selectionModel.ownerFilter.set(
-      this.selectionModel.ownerFilter = OwnerFilterType.OTHERS
+      this.selectionModel.includeUsers()?.length
-    } else {
+        ? OwnerFilterType.OTHERS
-      this.selectionModel.ownerFilter = OwnerFilterType.NONE
+        : OwnerFilterType.NONE
-    }
+    )
     this.onChange()
   }
 

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

@@ -1209,24 +1209,53 @@ describe('DocumentDetailComponent', () => {
     expect(fixture.debugElement.queryAll(By.css('textarea.rtl'))).not.toBeNull()
   })
 
-  it('should display built-in pdf viewer if not disabled', () => {
+  it('should display built-in pdf viewer if not disabled', async () => {
     initNormally()
-    component.document().archived_file_name = 'file.pdf'
+    component.document.update((document) => ({
+      ...document,
+      archived_file_name: 'file.pdf',
+    }))
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
     expect(component.useNativePdfViewer).toBeFalsy()
-    fixture.detectChanges()
+    await fixture.whenStable()
     expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
   })
 
   it('should display native pdf viewer if enabled', () => {
     initNormally()
-    component.document().archived_file_name = 'file.pdf'
+    component.document.update((document) => ({
+      ...document,
+      archived_file_name: 'file.pdf',
+    }))
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, true)
     expect(component.useNativePdfViewer).toBeTruthy()
     fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('object'))).not.toBeNull()
   })
 
+  it('should reflect signal-backed document detail display settings', () => {
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL, false)
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS, [
+      component.DocumentDetailFieldID.Correspondent,
+    ])
+
+    expect(component.showThumbnailOverlay).toBeFalsy()
+    expect(
+      component.isFieldHidden(component.DocumentDetailFieldID.Correspondent)
+    ).toBeTruthy()
+    expect(
+      component.isFieldHidden(component.DocumentDetailFieldID.DocumentType)
+    ).toBeFalsy()
+
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL, true)
+    settingsService.set(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS, [])
+
+    expect(component.showThumbnailOverlay).toBeTruthy()
+    expect(
+      component.isFieldHidden(component.DocumentDetailFieldID.Correspondent)
+    ).toBeFalsy()
+  })
+
   it('should attempt to retrieve metadata', () => {
     const metadataSpy = jest.spyOn(documentService, 'getMetadata')
     metadataSpy.mockReturnValue(of({ has_archive_version: true }))
@@ -1685,7 +1714,10 @@ describe('DocumentDetailComponent', () => {
 
   it('should change preview element by render type', () => {
     initNormally()
-    component.document().archived_file_name = 'file.pdf'
+    component.document.update((document) => ({
+      ...document,
+      archived_file_name: 'file.pdf',
+    }))
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.PDF
@@ -1694,8 +1726,11 @@ describe('DocumentDetailComponent', () => {
       fixture.debugElement.query(By.css('pdf-viewer-container'))
     ).not.toBeUndefined()
 
-    component.document().archived_file_name = undefined
+    component.document.update((document) => ({
-    component.document().mime_type = 'text/plain'
+      ...document,
+      archived_file_name: undefined,
+      mime_type: 'text/plain',
+    }))
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Text
@@ -1704,7 +1739,10 @@ describe('DocumentDetailComponent', () => {
       fixture.debugElement.query(By.css('div.preview-sticky'))
     ).not.toBeUndefined()
 
-    component.document().mime_type = 'image/jpeg'
+    component.document.update((document) => ({
+      ...document,
+      mime_type: 'image/jpeg',
+    }))
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Image
@@ -1712,9 +1750,12 @@ describe('DocumentDetailComponent', () => {
     expect(
       fixture.debugElement.query(By.css('.preview-sticky img'))
     ).not.toBeUndefined()
-    ;((component.document().mime_type =
+    component.document.update((document) => ({
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'),
+      ...document,
-      fixture.detectChanges())
+      mime_type:
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    }))
+    fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Other
     )

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

@@ -227,6 +227,19 @@ export class DocumentDetailComponent
   private deviceDetectorService = inject(DeviceDetectorService)
   private savedViewService = inject(SavedViewService)
   private readonly websocketStatusService = inject(WebsocketStatusService)
+  private readonly useNativePdfViewerSetting = this.settings.getSignal<boolean>(
+    SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER
+  )
+  private readonly aiEnabledSetting = this.settings.getSignal<boolean>(
+    SETTINGS_KEYS.AI_ENABLED
+  )
+  private readonly showThumbnailOverlaySetting =
+    this.settings.getSignal<boolean>(
+      SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
+    )
+  private readonly hiddenFieldsSetting = this.settings.getSignal<
+    DocumentDetailFieldID[]
+  >(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
 
   @ViewChild('inputTitle')
   titleInput: TextComponent
@@ -333,8 +346,7 @@ export class DocumentDetailComponent
   }
 
   get useNativePdfViewer(): boolean {
-    this.settings.trackChanges()
+    return this.useNativePdfViewerSetting()
-    return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
   }
 
   get isMobile(): boolean {
@@ -342,12 +354,10 @@ export class DocumentDetailComponent
   }
 
   get aiEnabled(): boolean {
-    this.settings.trackChanges()
+    return this.aiEnabledSetting()
-    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
@@ -359,22 +369,17 @@ 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.showThumbnailOverlaySetting()
-    return this.settings.get(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL)
   }
 
   isFieldHidden(fieldId: DocumentDetailFieldID): boolean {
-    this.settings.trackChanges()
+    return this.hiddenFieldsSetting().includes(fieldId)
-    return this.settings
-      .get(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
-      .includes(fieldId)
   }
 
   private getRenderType(mimeType: string): ContentRenderType {

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

@@ -60,16 +60,16 @@
       <div class="list-group list-group-flush border-0 pt-1 pb-2 card-info">
          @if (document()) {
           @if (displayFields().includes(DisplayField.DOCUMENT_TYPE) && document().document_type) {
-            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle document type filter" i18n-title
+            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle document type filter" i18n-title
               (click)="clickDocumentType.emit(document().document_type);$event.stopPropagation()">
-              <i-bs width="1em" height="1em" class="me-2 text-muted" name="file-earmark"></i-bs>
+              <i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="file-earmark"></i-bs>
               <small>{{document().document_type | documentTypeName | async}}</small>
             </button>
           }
           @if (displayFields().includes(DisplayField.STORAGE_PATH) && document().storage_path) {
-            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0" title="Toggle storage path filter" i18n-title
+            <button type="button" class="list-group-item list-group-item-action bg-transparent ps-0 p-1 border-0 d-flex align-items-start" title="Toggle storage path filter" i18n-title
               (click)="clickStoragePath.emit(document().storage_path);$event.stopPropagation()">
-              <i-bs width="1em" height="1em" class="me-2 text-muted" name="folder"></i-bs>
+              <i-bs width="1em" height="1em" class="me-2 text-muted flex-shrink-0" name="folder"></i-bs>
               <small>{{document().storage_path | storagePathName | async}}</small>
             </button>
           }

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

@@ -69,6 +69,11 @@
   button {
     line-height: 1;
 
+    small {
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
     &:hover,
     &:focus {
       background-color: transparent !important;

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

@@ -116,7 +116,7 @@
 
 </pngx-page-header>
 
-<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body">
+<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body rounded shadow-sm">
   <pngx-filter-editor [hidden]="isBulkEditing" [disabled]="isBulkEditing" [filterRules]="list.filterRules" (filterRulesChange)="onFilterRulesChange($event)" (resetFilterRules)="onFilterRulesReset($event)" [unmodifiedFilterRules]="unmodifiedFilterRules()" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
   <pngx-bulk-editor [hidden]="!isBulkEditing" [disabled]="!isBulkEditing"></pngx-bulk-editor>
 </div>

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

@@ -121,6 +121,8 @@ export class DocumentListComponent
   settingsService = inject(SettingsService)
   private hotKeyService = inject(HotKeyService)
   permissionService = inject(PermissionsService)
+  private readonly notesEnabledSetting =
+    this.settingsService.getSignal<boolean>(SETTINGS_KEYS.NOTES_ENABLED)
 
   DisplayField = DisplayField
   DisplayMode = DisplayMode
@@ -574,8 +576,7 @@ export class DocumentListComponent
   }
 
   get notesEnabled(): boolean {
-    this.settingsService.trackChanges()
+    return this.notesEnabledSetting()
-    return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
   }
 
   resetFilters() {

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

@@ -621,6 +621,43 @@ describe('FilterEditorComponent', () => {
     component.toggleTag(2) // coverage
   })
 
+  it('should reflect ingested tag filter rules in the dropdown toggle', () => {
+    const dropdown = fixture.debugElement.query(
+      By.css('pngx-filterable-dropdown')
+    )
+    const toggle = dropdown.nativeElement.querySelector('#dropdown_tags')
+    expect(toggle.classList.contains('btn-primary')).toBeFalsy()
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).toBeNull()
+
+    // switching to a view with a tag filter
+    component.filterRules = [
+      {
+        rule_type: FILTER_HAS_TAGS_ALL,
+        value: '2',
+      },
+    ]
+    fixture.detectChanges()
+    expect(toggle.classList.contains('btn-primary')).toBeTruthy()
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).not.toBeNull()
+
+    // and back to a view without one
+    component.filterRules = [
+      {
+        rule_type: FILTER_HAS_CORRESPONDENT_ANY,
+        value: '12',
+      },
+    ]
+    fixture.detectChanges()
+    expect(toggle.classList.contains('btn-primary')).toBeFalsy()
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).toBeNull()
+  })
+
   it('should ingest filter rules for has any tags', () => {
     expect(component.tagSelectionModel.getSelectedItems()).toHaveLength(0)
     component.filterRules = [
@@ -1034,8 +1071,51 @@ describe('FilterEditorComponent', () => {
     ).toEqual([42, CustomFieldQueryOperator.Exists, 'true'])
   })
 
+  it('should reflect ingested custom field query rules in the dropdown toggle', () => {
+    const dropdown = fixture.debugElement.query(
+      By.css('pngx-custom-fields-query-dropdown')
+    )
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).toBeNull()
+
+    // switching to a view with a custom field query
+    component.filterRules = [
+      {
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: '["OR",[[42,"exists","true"]]]',
+      },
+    ]
+    fixture.detectChanges()
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).not.toBeNull()
+    expect(
+      dropdown.nativeElement
+        .querySelector('#dropdown_toggle')
+        .classList.contains('btn-primary')
+    ).toBeTruthy()
+
+    // and back to a view without one
+    component.filterRules = [
+      {
+        rule_type: FILTER_HAS_TAGS_ALL,
+        value: '19',
+      },
+    ]
+    fixture.detectChanges()
+    expect(
+      dropdown.nativeElement.querySelector('pngx-clearable-badge')
+    ).toBeNull()
+    expect(
+      dropdown.nativeElement
+        .querySelector('#dropdown_toggle')
+        .classList.contains('btn-primary')
+    ).toBeFalsy()
+  })
+
   it('should ingest filter rules for owner', () => {
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.NONE
     )
     component.filterRules = [
@@ -1044,15 +1124,38 @@ describe('FilterEditorComponent', () => {
         value: '100',
       },
     ]
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.SELF
     )
-    expect(component.permissionsSelectionModel.hideUnowned).toBeFalsy()
+    expect(component.permissionsSelectionModel.hideUnowned()).toBeFalsy()
-    expect(component.permissionsSelectionModel.userID).toEqual(100)
+    expect(component.permissionsSelectionModel.userID()).toEqual(100)
+  })
+
+  it('should reflect ingested owner filter rules in the dropdown toggle', () => {
+    const dropdown = fixture.debugElement.query(
+      By.css('pngx-permissions-filter-dropdown')
+    )
+    const toggle = dropdown.nativeElement.querySelector('button')
+    expect(toggle.classList.contains('btn-primary')).toBeFalsy()
+
+    // switching to a view with an owner filter
+    component.filterRules = [
+      {
+        rule_type: FILTER_OWNER,
+        value: '100',
+      },
+    ]
+    fixture.detectChanges()
+    expect(toggle.classList.contains('btn-primary')).toBeTruthy()
+
+    // and back to a view without one
+    component.filterRules = []
+    fixture.detectChanges()
+    expect(toggle.classList.contains('btn-primary')).toBeFalsy()
   })
 
   it('should ingest filter rules for owner is others', () => {
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.NONE
     )
     component.filterRules = [
@@ -1061,14 +1164,14 @@ describe('FilterEditorComponent', () => {
         value: '50',
       },
     ]
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.OTHERS
     )
-    expect(component.permissionsSelectionModel.includeUsers).toContain(50)
+    expect(component.permissionsSelectionModel.includeUsers()).toContain(50)
   })
 
   it('should ingest filter rules for owner does not include others', () => {
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.NONE
     )
     component.filterRules = [
@@ -1077,14 +1180,14 @@ describe('FilterEditorComponent', () => {
         value: '50',
       },
     ]
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.NOT_SELF
     )
-    expect(component.permissionsSelectionModel.excludeUsers).toContain(50)
+    expect(component.permissionsSelectionModel.excludeUsers()).toContain(50)
   })
 
   it('should ingest filter rules for owner is null', () => {
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.NONE
     )
     component.filterRules = [
@@ -1093,10 +1196,10 @@ describe('FilterEditorComponent', () => {
         value: 'true',
       },
     ]
-    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
       OwnerFilterType.UNOWNED
     )
-    expect(component.permissionsSelectionModel.hideUnowned).toBeFalsy()
+    expect(component.permissionsSelectionModel.hideUnowned()).toBeFalsy()
   })
 
   it('should ingest filter rules for owner is not null', () => {
@@ -1106,14 +1209,14 @@ describe('FilterEditorComponent', () => {
         value: 'false',
       },
     ]
-    expect(component.permissionsSelectionModel.hideUnowned).toBeTruthy()
+    expect(component.permissionsSelectionModel.hideUnowned()).toBeTruthy()
     component.filterRules = [
       {
         rule_type: FILTER_OWNER_ISNULL,
         value: '0',
       },
     ]
-    expect(component.permissionsSelectionModel.hideUnowned).toBeTruthy()
+    expect(component.permissionsSelectionModel.hideUnowned()).toBeTruthy()
   })
 
   it('should ingest filter rules for shared by me', () => {
@@ -1123,7 +1226,7 @@ describe('FilterEditorComponent', () => {
         value: '2',
       },
     ]
-    expect(component.permissionsSelectionModel.userID).toEqual(2)
+    expect(component.permissionsSelectionModel.userID()).toEqual(2)
   })
 
   // GET filterRules
@@ -1889,7 +1992,10 @@ describe('FilterEditorComponent', () => {
         value: '1',
       },
     ])
-    component.permissionsSelectionModel.excludeUsers.push(2)
+    component.permissionsSelectionModel.excludeUsers.update((users) => [
+      ...users,
+      2,
+    ])
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {
@@ -1939,8 +2045,11 @@ describe('FilterEditorComponent', () => {
     // TODO: mock input in code
     // userSelect.query(By.css('input')).nativeElement.value = '3'
     // userSelect.triggerEventHandler('change')
-    component.permissionsSelectionModel.ownerFilter = OwnerFilterType.OTHERS
+    component.permissionsSelectionModel.ownerFilter.set(OwnerFilterType.OTHERS)
-    component.permissionsSelectionModel.includeUsers.push(3)
+    component.permissionsSelectionModel.includeUsers.update((users) => [
+      ...users,
+      3,
+    ])
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {
@@ -1960,7 +2069,7 @@ describe('FilterEditorComponent', () => {
     ownerToggle.nativeElement.checked = true
     // ownerToggle.triggerEventHandler('change')
     // TODO: ngModel isn't doing this here
-    component.permissionsSelectionModel.hideUnowned = true
+    component.permissionsSelectionModel.hideUnowned.set(true)
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {

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

@@ -735,38 +735,50 @@ export class FilterEditorComponent
           this._textFilter = rule.value
           break
         case FILTER_OWNER:
-          this.permissionsSelectionModel.ownerFilter = OwnerFilterType.SELF
+          this.permissionsSelectionModel.ownerFilter.set(OwnerFilterType.SELF)
-          this.permissionsSelectionModel.hideUnowned = false
+          this.permissionsSelectionModel.hideUnowned.set(false)
           if (rule.value)
-            this.permissionsSelectionModel.userID = parseInt(rule.value, 10)
+            this.permissionsSelectionModel.userID.set(
+              Number.parseInt(rule.value, 10)
+            )
           break
         case FILTER_OWNER_ANY:
-          this.permissionsSelectionModel.ownerFilter = OwnerFilterType.OTHERS
+          this.permissionsSelectionModel.ownerFilter.set(OwnerFilterType.OTHERS)
           if (rule.value)
-            this.permissionsSelectionModel.includeUsers.push(
+            this.permissionsSelectionModel.includeUsers.update((users) => [
-              parseInt(rule.value, 10)
+              ...users,
-            )
+              Number.parseInt(rule.value, 10),
+            ])
           break
         case FILTER_OWNER_DOES_NOT_INCLUDE:
-          this.permissionsSelectionModel.ownerFilter = OwnerFilterType.NOT_SELF
+          this.permissionsSelectionModel.ownerFilter.set(
+            OwnerFilterType.NOT_SELF
+          )
           if (rule.value)
-            this.permissionsSelectionModel.excludeUsers.push(
+            this.permissionsSelectionModel.excludeUsers.update((users) => [
-              parseInt(rule.value, 10)
+              ...users,
-            )
+              Number.parseInt(rule.value, 10),
+            ])
           break
         case FILTER_SHARED_BY_USER:
-          this.permissionsSelectionModel.ownerFilter =
+          this.permissionsSelectionModel.ownerFilter.set(
             OwnerFilterType.SHARED_BY_ME
+          )
           if (rule.value)
-            this.permissionsSelectionModel.userID = parseInt(rule.value, 10)
+            this.permissionsSelectionModel.userID.set(
+              Number.parseInt(rule.value, 10)
+            )
           break
         case FILTER_OWNER_ISNULL:
           if (rule.value === 'true' || rule.value === '1') {
-            this.permissionsSelectionModel.hideUnowned = false
+            this.permissionsSelectionModel.hideUnowned.set(false)
-            this.permissionsSelectionModel.ownerFilter = OwnerFilterType.UNOWNED
+            this.permissionsSelectionModel.ownerFilter.set(
+              OwnerFilterType.UNOWNED
+            )
           } else {
-            this.permissionsSelectionModel.hideUnowned =
+            this.permissionsSelectionModel.hideUnowned.set(
               rule.value === 'false' || rule.value === '0'
+            )
             break
           }
       }
@@ -1074,34 +1086,35 @@ export class FilterEditorComponent
         })
       }
     }
-    if (this.permissionsSelectionModel.ownerFilter == OwnerFilterType.SELF) {
+    if (this.permissionsSelectionModel.ownerFilter() == OwnerFilterType.SELF) {
       filterRules.push({
         rule_type: FILTER_OWNER,
-        value: this.permissionsSelectionModel.userID.toString(),
+        value: this.permissionsSelectionModel.userID().toString(),
       })
     } else if (
-      this.permissionsSelectionModel.ownerFilter == OwnerFilterType.NOT_SELF
+      this.permissionsSelectionModel.ownerFilter() == OwnerFilterType.NOT_SELF
     ) {
       filterRules.push({
         rule_type: FILTER_OWNER_DOES_NOT_INCLUDE,
-        value: this.permissionsSelectionModel.excludeUsers?.join(','),
+        value: this.permissionsSelectionModel.excludeUsers()?.join(','),
       })
     } else if (
-      this.permissionsSelectionModel.ownerFilter == OwnerFilterType.OTHERS
+      this.permissionsSelectionModel.ownerFilter() == OwnerFilterType.OTHERS
     ) {
       filterRules.push({
         rule_type: FILTER_OWNER_ANY,
-        value: this.permissionsSelectionModel.includeUsers?.join(','),
+        value: this.permissionsSelectionModel.includeUsers()?.join(','),
       })
     } else if (
-      this.permissionsSelectionModel.ownerFilter == OwnerFilterType.SHARED_BY_ME
+      this.permissionsSelectionModel.ownerFilter() ==
+      OwnerFilterType.SHARED_BY_ME
     ) {
       filterRules.push({
         rule_type: FILTER_SHARED_BY_USER,
-        value: this.permissionsSelectionModel.userID.toString(),
+        value: this.permissionsSelectionModel.userID().toString(),
       })
     } else if (
-      this.permissionsSelectionModel.ownerFilter == OwnerFilterType.UNOWNED
+      this.permissionsSelectionModel.ownerFilter() == OwnerFilterType.UNOWNED
     ) {
       filterRules.push({
         rule_type: FILTER_OWNER_ISNULL,
@@ -1109,7 +1122,7 @@ export class FilterEditorComponent
       })
     }
 
-    if (this.permissionsSelectionModel.hideUnowned) {
+    if (this.permissionsSelectionModel.hideUnowned()) {
       filterRules.push({
         rule_type: FILTER_OWNER_ISNULL,
         value: 'false',

src-ui/src/app/data/paperless-config.ts

@@ -422,6 +422,7 @@ export const PaperlessConfigOptions: ConfigOption[] = [
 ]
 
 export interface PaperlessConfig extends ObjectWithId {
+  externally_configured_variables: string[]
   output_type: OutputTypeConfig
   pages: number
   language: string

src-ui/src/app/services/settings.service.spec.ts

@@ -210,6 +210,48 @@ describe('SettingsService', () => {
     expect(settingsService.get(SETTINGS_KEYS.THEME_COLOR)).toEqual('#000000')
   })
 
+  it('provides stable signals that update when settings change', () => {
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    req.flush(ui_settings)
+
+    const notesEnabled = settingsService.getSignal<boolean>(
+      SETTINGS_KEYS.NOTES_ENABLED
+    )
+
+    expect(notesEnabled()).toBeTruthy()
+    expect(
+      settingsService.getSignal<boolean>(SETTINGS_KEYS.NOTES_ENABLED)
+    ).toBe(notesEnabled)
+
+    settingsService.set(SETTINGS_KEYS.NOTES_ENABLED, false)
+
+    expect(notesEnabled()).toBeFalsy()
+  })
+
+  it('updates setting signals when settings are reinitialized', () => {
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    req.flush(ui_settings)
+    const appTitle = settingsService.getSignal<string>(SETTINGS_KEYS.APP_TITLE)
+
+    settingsService.initializeSettings().subscribe()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}ui_settings/`
+    )
+    req.flush({
+      ...ui_settings,
+      settings: {
+        ...ui_settings.settings,
+        app_title: 'Updated title',
+      },
+    })
+
+    expect(appTitle()).toBe('Updated title')
+  })
+
   it('sets django cookie for languages', () => {
     httpTestingController
       .expectOne(`${environment.apiBaseUrl}ui_settings/`)

src-ui/src/app/services/settings.service.ts

@@ -2,6 +2,8 @@ import { HttpClient } from '@angular/common/http'
 import {
   DOCUMENT,
   EventEmitter,
+  Signal,
+  computed,
   inject,
   Injectable,
   LOCALE_ID,
@@ -297,6 +299,7 @@ export class SettingsService {
 
   private settings: Record<string, any> = {}
   private readonly settingsVersion = signal(0)
+  private readonly settingSignals = new Map<string, Signal<unknown>>()
   readonly currentUser = signal<User>(undefined)
 
   public settingsSaved: EventEmitter<any> = new EventEmitter()
@@ -326,10 +329,6 @@ export class SettingsService {
     return !UNSAFE_OBJECT_KEYS.has(key)
   }
 
-  public trackChanges(): void {
-    this.settingsVersion()
-  }
-
   private assignSafeSettings(source: Record<string, any>) {
     if (!source || typeof source !== 'object' || Array.isArray(source)) {
       return
@@ -339,6 +338,7 @@ export class SettingsService {
       if (!this.isSafeObjectKey(key)) continue
       this.settings[key] = source[key]
     }
+    this.settingsVersion.update((version) => version + 1)
   }
 
   // this is called by the app initializer in app.module
@@ -594,6 +594,18 @@ export class SettingsService {
     }
   }
 
+  getSignal<T = any>(key: string): Signal<T> {
+    let settingSignal = this.settingSignals.get(key)
+    if (!settingSignal) {
+      settingSignal = computed(() => {
+        this.settingsVersion()
+        return this.get(key)
+      })
+      this.settingSignals.set(key, settingSignal)
+    }
+    return settingSignal as Signal<T>
+  }
+
   set(key: string, value: any) {
     // parse key:key:key into nested object
     let settingObj = this.settings

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

@@ -8,7 +8,7 @@ export const environment = {
   apiVersion: '10', // match src/paperless/settings.py
   appTitle: DEFAULT_APP_TITLE,
   tag: 'prod',
-  version: '3.1.2',
+  version: '3.1.3',
   webSocketHost: window.location.host,
   webSocketProtocol: window.location.protocol == 'https:' ? 'wss:' : 'ws:',
   webSocketBaseUrl: base_url.pathname + 'ws/',