Use locmemcache for ci

.github/workflows/ci-frontend.yml

@@ -185,16 +185,22 @@ jobs:
           flags: frontend-node-${{ matrix.node-version }}
           directory: src-ui/coverage/
   e2e-tests:
-    name: E2E Tests
+    name: "E2E Tests (${{ matrix.shard-index }}/${{ matrix.shard-count }})"
     needs: [changes, install-dependencies]
     if: needs.changes.outputs.frontend_changed == 'true'
     runs-on: ubuntu-24.04
     permissions:
       contents: read
-    container: mcr.microsoft.com/playwright:v1.62.1-noble
+    container: mcr.microsoft.com/playwright:v1.62.0-noble
     env:
       PLAYWRIGHT_BROWSERS_PATH: /ms-playwright
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [24.x]
+        shard-index: [1, 2]
+        shard-count: [2]
     steps:
       - name: Checkout
         uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
@@ -210,17 +216,6 @@ jobs:
           node-version: 24.x
           cache: 'pnpm'
           cache-dependency-path: 'src-ui/pnpm-lock.yaml'
-      - name: Set up Python
-        id: setup-python
-        uses: actions/setup-python@5fda3b95a4ea91299a34e894583c3862153e4b97 # v7.0.0
-        with:
-          python-version: '3.12'
-      - name: Install uv
-        uses: astral-sh/setup-uv@c771a70e6277c0a99b617c7a806ffedaca235ff9 # v9.0.0
-        with:
-          version: '0.12.x'
-          enable-cache: false
-          python-version: ${{ steps.setup-python.outputs.python-version }}
       - name: Cache frontend dependencies
         uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6.1.0
         with:
@@ -230,17 +225,8 @@ jobs:
           key: ${{ runner.os }}-frontend-${{ hashFiles('src-ui/pnpm-lock.yaml') }}
       - name: Install dependencies
         run: cd src-ui && pnpm install --frozen-lockfile
-      - name: Install backend system dependencies
-        run: |
-          apt-get update
-          apt-get install --yes --quiet --no-install-recommends libmagic1
-      - name: Install backend dependencies
-        env:
-          PYTHON_VERSION: ${{ steps.setup-python.outputs.python-version }}
-        # The frozen repository lockfile and its build hooks are trusted.
-        run: uv sync --python "${PYTHON_VERSION}" --no-dev --frozen # NOSONAR
       - name: Run Playwright E2E tests
-        run: cd src-ui && pnpm exec playwright test
+        run: cd src-ui && pnpm exec playwright test --shard ${{ matrix.shard-index }}/${{ matrix.shard-count }}
   frontend-build:
     name: Frontend Build
     needs: [changes, unit-tests, e2e-tests]

docs/advanced_usage.md

@@ -138,9 +138,7 @@ for suggested generation and embedding models.
 With AI enabled, Paperless-ngx can suggest a title, tags, correspondent, document type,
 storage path and dates by sending the document to the LLM. This is **opt-in per request**
 and surfaces through the "Suggest" control on the document detail page, alongside the
-classic classifier-based suggestions — it does not disable them. Suggestions are requested
-automatically when you open a document that carries an inbox tag unless "Automatically request
-suggestions for inbox documents" under Settings > Documents is disabled. Suggestion output
+classic classifier-based suggestions — it does not disable them. Suggestion output
 language can be steered with
 [`PAPERLESS_AI_LLM_OUTPUT_LANGUAGE`](configuration.md#PAPERLESS_AI_LLM_OUTPUT_LANGUAGE)
 (otherwise it follows the user's UI language).

docs/changelog.md

@@ -1,26 +1,5 @@
 # Changelog
 
-## 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,12 +2088,6 @@ 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

@@ -224,19 +224,13 @@ respectively, can be run non-interactively with:
 
 ```bash
 pnpm ng test
-pnpm e2e
+pnpm playwright test
 ```
 
-The Playwright suite starts both the Angular development server and a disposable
-Paperless instance on port 8001. The instance uses SQLite, temporary data and
-media directories, and deterministic sample documents; it is removed when the
-test run finishes. This requires the back-end Python dependencies from the
-regular development setup to be installed with `uv sync`.
-
 Playwright also includes a UI which can be run with:
 
 ```bash
-pnpm e2e:ui
+pnpm playwright test --ui
 ```
 
 ### Building the frontend

docs/usage.md

@@ -317,8 +317,6 @@ a "document already exists" message.
 
 Paperless-ngx can suggest tags, correspondents, document types and storage paths for documents based on the content of the document. This is done using a (non-LLM) machine learning model that is trained on the documents in your database. The suggestions are shown in the document detail page and can be accepted or rejected by the user.
 
-Suggestions are requested automatically when you open a document that still has an inbox tag. To only request them by pressing the "Suggest" button instead, turn off "Automatically request suggestions for inbox documents" under Settings > Documents.
-
 ## AI Features
 
 Paperless-ngx includes several features that use AI to enhance the document management experience. These features are optional and can be enabled or disabled in the settings. If you are using the AI features, you may want to also enable the "LLM index" feature, which supports Retrieval-Augmented Generation (RAG) designed to improve the quality of AI responses. The LLM index feature is not enabled by default and requires additional configuration.

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "paperless-ngx"
-version = "3.1.2"
+version = "3.1.1"
 description = "A community-supported supercharged document management system: scan, index and archive all your physical documents"
 readme = "README.md"
 requires-python = ">=3.11"
@@ -47,7 +47,7 @@ dependencies = [
   "httpx-oauth~=0.17",
   "ijson>=3.5.1",
   "imap-tools~=1.14.0",
-  "jinja2~=3.1.6",
+  "jinja2~=3.1.5",
   "langdetect~=1.0.9",
   "llama-index-core>=0.14.23",
   "llama-index-embeddings-huggingface>=0.6.1",
@@ -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,NIN,nin"
+ignore-words-list = "criterias,afterall,valeu,ureue,equest,ure,assertIn,Oktober,commitish"
 skip = """\
   src-ui/src/locale/*,src-ui/pnpm-lock.yaml,src-ui/e2e/*,src/paperless_mail/tests/samples/*,src/paperless/tests/samples\
   /mail/*,src/documents/tests/samples/*,*.po,*.json\

src-ui/angular.json

@@ -139,17 +139,6 @@
                 }
               ]
             },
-            "e2e": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.e2e.ts"
-                }
-              ],
-              "localize": [
-                "en-US"
-              ]
-            },
             "en-US": {
               "localize": [
                 "en-US"
@@ -166,9 +155,6 @@
           "configurations": {
             "production": {
               "buildTarget": "paperless-ui:build:production"
-            },
-            "e2e": {
-              "buildTarget": "paperless-ui:build:e2e"
             }
           }
         },

src-ui/e2e/admin/requests/api-settings.har

@@ -0,0 +1,194 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.33.0"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "113.0.5672.53"
+    },
+    "entries": [
+      {
+        "startedDateTime": "2023-05-14T07:18:59.856Z",
+        "time": 6.025,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/ui_settings/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, POST, HEAD, OPTIONS" },
+            { "name": "Content-Encoding", "value": "br" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "953" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie, Accept-Encoding" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"user\":{\"id\":2,\"username\":\"testuser\",\"is_superuser\":false,\"groups\":[]},\"settings\":{\"language\":\"\",\"bulk_edit\":{\"confirmation_dialogs\":true,\"apply_on_close\":false},\"documentListSize\":50,\"dark_mode\":{\"use_system\":true,\"enabled\":\"false\",\"thumb_inverted\":\"true\"},\"theme\":{\"color\":\"#9fbf2f\"},\"document_details\":{\"native_pdf_viewer\":false},\"date_display\":{\"date_locale\":\"\",\"date_format\":\"mediumDate\"},\"notifications\":{\"consumer_new_documents\":true,\"consumer_success\":true,\"consumer_failed\":true,\"consumer_suppress_on_dashboard\":true},\"comments_enabled\":true,\"slim_sidebar\":false,\"update_checking\":{\"enabled\":false,\"backend_setting\":\"default\"},\"saved_views\":{\"warn_on_unsaved_change\":true},\"notes_enabled\":true,\"tour_complete\":true},\"permissions\":[\"change_savedview\",\"change_schedule\",\"change_failure\",\"delete_token\",\"add_mailrule\",\"view_failure\",\"view_groupresult\",\"add_note\",\"change_taskresult\",\"view_tag\",\"view_user\",\"add_tag\",\"change_processedmail\",\"change_session\",\"view_taskattributes\",\"delete_groupresult\",\"delete_correspondent\",\"delete_schedule\",\"delete_contenttype\",\"view_chordcounter\",\"view_success\",\"delete_documenttype\",\"add_tokenproxy\",\"delete_paperlesstask\",\"add_log\",\"view_mailaccount\",\"add_uisettings\",\"view_savedview\",\"view_uisettings\",\"delete_storagepath\",\"delete_frontendsettings\",\"change_paperlesstask\",\"view_taskresult\",\"delete_processedmail\",\"view_processedmail\",\"view_session\",\"delete_chordcounter\",\"view_note\",\"delete_session\",\"view_document\",\"change_mailaccount\",\"delete_taskattributes\",\"add_groupobjectpermission\",\"view_mailrule\",\"change_savedviewfilterrule\",\"change_log\",\"change_comment\",\"add_mailaccount\",\"add_frontendsettings\",\"add_userobjectpermission\",\"delete_note\",\"view_token\",\"add_failure\",\"delete_user\",\"add_success\",\"view_ormq\",\"view_tokenproxy\",\"delete_uisettings\",\"change_groupobjectpermission\",\"add_logentry\",\"add_ormq\",\"view_frontendsettings\",\"view_schedule\",\"change_taskattributes\",\"view_documenttype\",\"view_logentry\",\"change_correspondent\",\"add_groupresult\",\"delete_groupobjectpermission\",\"change_mailrule\",\"change_permission\",\"delete_log\",\"view_userobjectpermission\",\"view_correspondent\",\"delete_document\",\"change_uisettings\",\"change_storagepath\",\"change_document\",\"delete_tokenproxy\",\"change_note\",\"delete_permission\",\"change_contenttype\",\"add_token\",\"change_success\",\"delete_logentry\",\"view_savedviewfilterrule\",\"delete_task\",\"add_savedview\",\"add_paperlesstask\",\"add_task\",\"change_documenttype\",\"add_documenttype\",\"change_token\",\"view_task\",\"view_permission\",\"change_task\",\"delete_userobjectpermission\",\"change_group\",\"add_group\",\"change_tag\",\"change_chordcounter\",\"add_storagepath\",\"delete_group\",\"add_taskattributes\",\"delete_mailaccount\",\"delete_tag\",\"add_schedule\",\"delete_failure\",\"delete_mailrule\",\"add_savedviewfilterrule\",\"change_ormq\",\"change_logentry\",\"add_taskresult\",\"view_group\",\"delete_comment\",\"add_contenttype\",\"add_document\",\"change_tokenproxy\",\"delete_success\",\"add_comment\",\"delete_ormq\",\"add_processedmail\",\"view_paperlesstask\",\"delete_savedview\",\"change_user\",\"add_session\",\"view_groupobjectpermission\",\"add_user\",\"add_correspondent\",\"delete_taskresult\",\"view_contenttype\",\"view_storagepath\",\"add_permission\",\"change_userobjectpermission\",\"delete_savedviewfilterrule\",\"change_groupresult\",\"add_chordcounter\",\"view_log\",\"view_comment\",\"change_frontendsettings\"]}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 6.025 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:18:59.990Z",
+        "time": 1.082,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/saved_views/?page=1&page_size=100000",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [
+            {
+              "name": "page",
+              "value": "1"
+            },
+            {
+              "name": "page_size",
+              "value": "100000"
+            }
+          ],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, POST, HEAD, OPTIONS" },
+            { "name": "Content-Encoding", "value": "br" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "851" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie, Accept-Encoding" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"count\":6,\"next\":null,\"previous\":null,\"all\":[8,17,7,4,11,15],\"results\":[{\"id\":8,\"name\":\"Correspondent 2\",\"show_on_dashboard\":false,\"show_in_sidebar\":false,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[{\"rule_type\":3,\"value\":\"2\"}],\"owner\":\"2\",\"user_can_change\":true},{\"id\":17,\"name\":\"In the Last Month\",\"show_on_dashboard\":false,\"show_in_sidebar\":false,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[{\"rule_type\":20,\"value\":\"created:[-1 month to now]\"}],\"owner\":\"2\",\"user_can_change\":true},{\"id\":7,\"name\":\"Inbox\",\"show_on_dashboard\":true,\"show_in_sidebar\":true,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[{\"rule_type\":6,\"value\":\"9\"}],\"owner\":\"2\",\"user_can_change\":true},{\"id\":4,\"name\":\"Recently Added\",\"show_on_dashboard\":true,\"show_in_sidebar\":true,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[],\"owner\":\"2\",\"user_can_change\":true},{\"id\":11,\"name\":\"Tag: Another Sample Tag\",\"show_on_dashboard\":false,\"show_in_sidebar\":true,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[{\"rule_type\":6,\"value\":\"4\"}],\"owner\":\"2\",\"user_can_change\":true},{\"id\":15,\"name\":\"View ASN not empty\",\"show_on_dashboard\":false,\"show_in_sidebar\":false,\"sort_field\":\"created\",\"sort_reverse\":true,\"filter_rules\":[{\"rule_type\":18,\"value\":\"false\"}],\"owner\":\"2\",\"user_can_change\":true}]}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 1.082 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:18:59.990Z",
+        "time": 0.647,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/tasks/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "2" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "[]"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.647 }
+      }
+    ]
+  }
+}

src-ui/e2e/admin/settings.spec.ts

@@ -1,25 +1,12 @@
 import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-test.beforeEach(async ({ page }) => {
-  await page.route('**/api/status/', (route) =>
-    route.fulfill({
-      json: {
-        database: { status: 'OK' },
-        tasks: {
-          redis_status: 'DISABLED',
-          celery_status: 'DISABLED',
-          index_status: 'OK',
-          classifier_status: 'OK',
-          sanity_check_status: 'OK',
-        },
-      },
-    })
-  )
-})
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-settings.har')
 
 test('should activate / deactivate save button when settings change', async ({
   page,
 }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/settings')
   await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled()
   await page.getByLabel('Use system setting').click()
@@ -28,6 +15,7 @@ test('should activate / deactivate save button when settings change', async ({
 })
 
 test('should warn on unsaved changes', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/settings')
   await page.getByLabel('Use system setting').click()
   await page.getByRole('link', { name: 'Dashboard' }).click()
@@ -39,6 +27,7 @@ test('should warn on unsaved changes', async ({ page }) => {
 })
 
 test('should apply appearance changes when set', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/settings')
   await expect(page.locator('html')).toHaveAttribute('data-bs-theme', /auto/)
   await page.getByLabel('Use system setting').click()

src-ui/e2e/backend.py

@@ -1,237 +0,0 @@
-"""Start a disposable Paperless instance for the Playwright test suite."""
-
-# ruff: noqa: INP001, T201
-
-from __future__ import annotations
-
-import datetime
-import logging
-import logging.config
-import os
-import shutil
-import sys
-import tempfile
-import time
-from pathlib import Path
-
-REPOSITORY_ROOT = Path(__file__).resolve().parents[2]
-SOURCE_ROOT = REPOSITORY_ROOT / "src"
-
-
-def configure_environment(instance_root: Path) -> None:
-    paths = {
-        "PAPERLESS_CONSUMPTION_DIR": instance_root / "consume",
-        "PAPERLESS_DATA_DIR": instance_root / "data",
-        "PAPERLESS_MEDIA_ROOT": instance_root / "media",
-        "PAPERLESS_SCRATCH_DIR": instance_root / "scratch",
-    }
-    for name, path in paths.items():
-        path.mkdir(parents=True)
-        os.environ[name] = str(path)
-    (paths["PAPERLESS_DATA_DIR"] / "index").mkdir()
-
-    os.environ.update(
-        {
-            "DJANGO_SETTINGS_MODULE": "paperless.settings",
-            "PAPERLESS_AI_ENABLED": "false",
-            "PAPERLESS_CHANNELS_BACKEND": "channels.layers.InMemoryChannelLayer",
-            "PAPERLESS_DEBUG": "true",
-            "PAPERLESS_SECRET_KEY": "playwright-only-not-a-real-secret",
-        },
-    )
-    sys.path.insert(0, str(SOURCE_ROOT))
-
-
-def seed_database() -> None:
-    from django.contrib.auth.models import User
-    from django.core.management import call_command
-    from django.utils import timezone
-
-    from documents.models import Correspondent
-    from documents.models import Document
-    from documents.models import DocumentType
-    from documents.models import Note
-    from documents.models import SavedView
-    from documents.models import SavedViewFilterRule
-    from documents.models import StoragePath
-    from documents.models import Tag
-    from documents.models import UiSettings
-
-    # Fixed credentials are safe within this disposable, localhost-only instance.
-    admin = User.objects.create_superuser(
-        username="playwright",
-        password="playwright",  # NOSONAR
-    )
-    User.objects.create_user(
-        username="viewer",
-        password="viewer",  # NOSONAR
-    )
-
-    inbox = Tag.objects.create(name="Inbox", is_inbox_tag=True, owner=admin)
-    quick_filter = Tag.objects.create(name="Another Sample Tag", owner=admin)
-    Tag.objects.create(name="TagWithPartial", owner=admin)
-    invoice = DocumentType.objects.create(name="Invoice Test", owner=admin)
-    correspondent_1 = Correspondent.objects.create(
-        name="Test Correspondent 1",
-        owner=admin,
-    )
-    correspondent_2 = Correspondent.objects.create(name="Correspondent 9", owner=admin)
-    storage_path = StoragePath.objects.create(
-        name="Testing 12",
-        path="e2e/{created_year}/{title}",
-        owner=admin,
-    )
-
-    today = timezone.localdate()
-    documents = []
-    for number in range(1, 62):
-        title = f"test document {number}" if number <= 9 else f"document {number}"
-        content = (
-            f"Playwright test content for document {number}"
-            if number <= 32
-            else f"Seeded content for document {number}"
-        )
-        created = today if number == 1 else datetime.date(2021, 1, 1)
-        if number in (2, 3):
-            created = datetime.date(2022, 12, 11)
-
-        documents.append(
-            Document(
-                title=title,
-                content=content,
-                checksum=f"{number:064x}",
-                mime_type="application/pdf",
-                filename=f"{number:07}.pdf",
-                original_filename=f"document-{number}.pdf",
-                archive_serial_number=1122 + number if number <= 6 else None,
-                created=created,
-                owner=admin,
-                document_type=invoice if number <= 3 else None,
-                correspondent=(
-                    correspondent_1
-                    if number <= 4
-                    else correspondent_2
-                    if number <= 7
-                    else None
-                ),
-                storage_path=storage_path if number <= 8 else None,
-            ),
-        )
-
-    Document.objects.bulk_create(documents)
-    originals = Path(os.environ["PAPERLESS_MEDIA_ROOT"]) / "documents" / "originals"
-    originals.mkdir(parents=True)
-    thumbnails = Path(os.environ["PAPERLESS_MEDIA_ROOT"]) / "documents" / "thumbnails"
-    thumbnails.mkdir(parents=True)
-    sample_pdf = SOURCE_ROOT / "documents" / "tests" / "samples" / "simple.pdf"
-    for document in documents:
-        shutil.copyfile(sample_pdf, originals / document.filename)
-        shutil.copyfile(
-            SOURCE_ROOT / "documents" / "resources" / "document.webp",
-            thumbnails / f"{document.pk:07}.webp",
-        )
-
-    for document in documents[:8]:
-        document.tags.add(inbox)
-    documents[0].tags.add(quick_filter)
-
-    for number in range(1, 5):
-        Note.objects.create(
-            note=f"Playwright note {number}",
-            document=documents[0],
-            user=admin,
-        )
-
-    inbox_view = SavedView.objects.create(
-        name="Inbox",
-        owner=admin,
-        sort_field="created",
-        sort_reverse=True,
-        page_size=10,
-        display_mode=SavedView.DisplayMode.TABLE,
-        display_fields=["created", "title", "tag", "documenttype"],
-    )
-    SavedViewFilterRule.objects.create(
-        saved_view=inbox_view,
-        rule_type=6,
-        value=str(inbox.pk),
-    )
-
-    UiSettings.objects.create(
-        user=admin,
-        settings={
-            "language": "",
-            "bulk_edit": {"confirmation_dialogs": True, "apply_on_close": False},
-            "documentListSize": 50,
-            "dark_mode": {
-                "use_system": True,
-                "enabled": False,
-                "thumb_inverted": True,
-            },
-            "theme": {"color": "#9fbf2f"},
-            "document_details": {"native_pdf_viewer": False},
-            "date_display": {"date_locale": "", "date_format": "mediumDate"},
-            "comments_enabled": True,
-            "slim_sidebar": False,
-            "update_checking": {"enabled": False},
-            "saved_views": {
-                "warn_on_unsaved_change": True,
-                "dashboard_views_visible_ids": [inbox_view.pk],
-                "sidebar_views_visible_ids": [inbox_view.pk],
-            },
-            "notes_enabled": True,
-            "tour_complete": True,
-        },
-    )
-
-    call_command(
-        "document_index",
-        "reindex",
-        recreate=True,
-        heap_size_mb=16,
-        verbosity=0,
-    )
-
-
-def main() -> None:
-    started = time.monotonic()
-    with tempfile.TemporaryDirectory(prefix="paperless-playwright-") as instance:
-        configure_environment(Path(instance))
-
-        os.chdir(SOURCE_ROOT)
-        print("Loading the Paperless backend...", flush=True)
-        import django
-
-        django.setup()
-
-        from django.conf import settings
-        from django.core.management import call_command
-
-        settings.CELERY_TASK_ALWAYS_EAGER = True
-        settings.CELERY_TASK_EAGER_PROPAGATES = True
-
-        print("Migrating the disposable database...", flush=True)
-        call_command("migrate", interactive=False, verbosity=0)
-        print("Seeding Playwright data...", flush=True)
-        seed_database()
-        elapsed = time.monotonic() - started
-        print(f"Playwright backend ready in {elapsed:.1f}s", flush=True)
-        settings.LOGGING["handlers"]["console"]["level"] = "WARNING"
-        settings.LOGGING["handlers"]["playwright_null"] = {
-            "class": "logging.NullHandler",
-        }
-        settings.LOGGING["loggers"]["django.server"] = {
-            "handlers": ["playwright_null"],
-            "propagate": False,
-        }
-        logging.config.dictConfig(settings.LOGGING)
-        call_command(
-            "runserver",
-            "localhost:8001",
-            use_reloader=False,
-            verbosity=1,
-        )
-
-
-if __name__ == "__main__":
-    main()

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

@@ -1,13 +1,21 @@
 import { expect, test } from '@playwright/test'
+import path from 'node:path'
+
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-dashboard1.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-dashboard2.har')
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-dashboard3.har')
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-dashboard4.har')
 
 test('dashboard inbox link', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page.getByRole('link', { name: 'Documents in inbox' }).click()
-  await expect(page).toHaveURL(/tags__id__in=1/)
+  await expect(page).toHaveURL(/tags__id__in=9/)
   await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
 })
 
 test('dashboard total documents link', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR2, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page.getByRole('link').filter({ hasText: 'Total documents' }).click()
   await expect(page).toHaveURL(/documents/)
@@ -16,6 +24,7 @@ test('dashboard total documents link', async ({ page }) => {
 })
 
 test('dashboard saved view show all', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR3, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page
     .locator('pngx-widget-frame')
@@ -23,11 +32,12 @@ test('dashboard saved view show all', async ({ page }) => {
     .getByRole('link', { name: 'Show all' })
     .first()
     .click()
-  await expect(page).toHaveURL(/view\/1/)
+  await expect(page).toHaveURL(/view\/7/)
   await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
 })
 
 test('dashboard saved view document links', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR4, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page
     .locator('pngx-widget-frame')
@@ -36,10 +46,11 @@ test('dashboard saved view document links', async ({ page }) => {
     .getByRole('link', { name: /test/ })
     .first()
     .click({ position: { x: 0, y: 0 } })
-  await expect(page).toHaveURL(/documents\/1\/details/)
+  await expect(page).toHaveURL(/documents\/310\/details/)
 })
 
 test('test slim sidebar', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await page.locator('.sidebar-slim-toggler').click()
   await expect(

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

@@ -1,9 +1,14 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type WebSocketRoute } from '@playwright/test'
+import path from 'node:path'
+
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-document-detail.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-detail2.har')
 
 test('should activate / deactivate save button when changes are saved', async ({
   page,
 }) => {
-  await page.goto('/documents/1/')
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  await page.goto('/documents/175/')
   await page.waitForSelector('pngx-document-detail pngx-input-text:first-child')
   await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
     /\w+/
@@ -14,7 +19,8 @@ test('should activate / deactivate save button when changes are saved', async ({
 })
 
 test('should warn on unsaved changes', async ({ page }) => {
-  await page.goto('/documents/1/')
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  await page.goto('/documents/175/')
   await expect(page.getByTitle('Correspondent', { exact: true })).toHaveText(
     /\w+/
   )
@@ -32,27 +38,28 @@ test('should warn on unsaved changes', async ({ page }) => {
 })
 
 test('should support tab direct navigation', async ({ page }) => {
-  await page.goto('/documents/1/details')
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  await page.goto('/documents/175/details')
   await expect(page.getByRole('tab', { name: 'Details' })).toHaveAttribute(
     'aria-selected',
     'true'
   )
-  await page.goto('/documents/1/content')
+  await page.goto('/documents/175/content')
   await expect(page.getByRole('tab', { name: 'Content' })).toHaveAttribute(
     'aria-selected',
     'true'
   )
-  await page.goto('/documents/1/metadata')
+  await page.goto('/documents/175/metadata')
   await expect(page.getByRole('tab', { name: 'Metadata' })).toHaveAttribute(
     'aria-selected',
     'true'
   )
-  await page.goto('/documents/1/notes')
+  await page.goto('/documents/175/notes')
   await expect(page.getByRole('tab', { name: 'Notes' })).toHaveAttribute(
     'aria-selected',
     'true'
   )
-  await page.goto('/documents/1/permissions')
+  await page.goto('/documents/175/permissions')
   await expect(page.getByRole('tab', { name: 'Permissions' })).toHaveAttribute(
     'aria-selected',
     'true'
@@ -60,7 +67,8 @@ test('should support tab direct navigation', async ({ page }) => {
 })
 
 test('should show a mobile preview', async ({ page }) => {
-  await page.goto('/documents/1/')
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  await page.goto('/documents/175/')
   await page.setViewportSize({ width: 400, height: 1000 })
   await expect(page.getByRole('tab', { name: 'Preview' })).toBeVisible()
   await page.getByRole('tab', { name: 'Preview' }).click()
@@ -68,7 +76,8 @@ test('should show a mobile preview', async ({ page }) => {
 })
 
 test('should show a list of notes', async ({ page }) => {
-  await page.goto('/documents/1/notes')
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
+  await page.goto('/documents/175/notes')
   await expect(page.locator('pngx-document-notes')).toBeVisible()
   await expect(
     await page.getByRole('button', {
@@ -79,25 +88,32 @@ test('should show a list of notes', async ({ page }) => {
 })
 
 test('should support quick filters', async ({ page }) => {
-  await page.goto('/documents/1/details')
+  await page.routeFromHAR(REQUESTS_HAR2, { notFound: 'fallback' })
+  await page.goto('/documents/175/details')
   await page
     .getByRole('button', { name: 'Filter documents with these Tags' })
     .click()
-  await expect(page).toHaveURL(
-    /tags__id__all=2,1&sort=created&reverse=1&page=1/
-  )
+  await expect(page).toHaveURL(/tags__id__all=4&sort=created&reverse=1&page=1/)
 })
 
 test('should finish reloading the preview after a remote document update', async ({
   page,
 }) => {
+  let resolveStatusSocket: (socket: WebSocketRoute) => void
+  const statusSocketReady = new Promise<WebSocketRoute>((resolve) => {
+    resolveStatusSocket = resolve
+  })
+  await page.routeWebSocket(/\/ws\/status\/$/, (socket) => {
+    resolveStatusSocket(socket)
+  })
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   let previewRequestCount = 0
   page.on('request', (request) => {
-    if (request.url().includes('/api/documents/1/preview/')) {
+    if (request.url().includes('/api/documents/175/preview/')) {
       previewRequestCount++
     }
   })
-  await page.goto('/documents/1/details')
+  await page.goto('/documents/175/details')
 
   await page.locator('pngx-document-detail').waitFor()
   await expect(page.getByTitle('Storage path', { exact: true })).toHaveText(
@@ -112,37 +128,27 @@ test('should finish reloading the preview after a remote document update', async
   expect(previewWasLoaded).toBe(true)
   const previewRequestsBeforeReload = previewRequestCount
 
-  await expect
-    .poll(() =>
-      page.evaluate(() => {
-        const detail = document.querySelector('pngx-document-detail')
-        return (window as any).ng.getComponent(detail).networkActive()
-      })
-    )
-    .toBe(false)
+  const statusSocket = await statusSocketReady
   const documentReloaded = page.waitForResponse(
     (response) =>
-      response.url().includes('/api/documents/1/?full_perms=true') &&
+      response.url().includes('/api/documents/175/?full_perms=true') &&
       response.request().method() === 'GET'
   )
-  await page.evaluate(() => {
-    const detail = document.querySelector('pngx-document-detail')
-    const component = (window as any).ng.getComponent(detail)
-    component.handleIncomingDocumentUpdated({
-      document_id: 1,
-      modified: '2099-07-26T20:00:00Z',
+  statusSocket.send(
+    JSON.stringify({
+      type: 'document_updated',
+      data: {
+        document_id: 175,
+        modified: '2026-07-26T20:00:00Z',
+      },
     })
-  })
+  )
   await documentReloaded
+
+  await expect(
+    page.getByText('Document reloaded with latest changes.').first()
+  ).toBeVisible()
   await expect
     .poll(() => previewRequestCount)
-    .toBeGreaterThan(previewRequestsBeforeReload)
-  await expect
-    .poll(() =>
-      page.evaluate(() => {
-        const detail = document.querySelector('pngx-document-detail')
-        return (window as any).ng.getComponent(detail).previewLoaded()
-      })
-    )
-    .toBe(true)
+    .toBeGreaterThan(previewRequestsBeforeReload + 1)
 })

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

@@ -1,10 +1,19 @@
 import { expect, test } from '@playwright/test'
+import path from 'node:path'
+
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-document-list1.har')
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-list2.har')
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-document-list3.har')
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-document-list4.har')
+const REQUESTS_HAR5 = path.join(__dirname, 'requests/api-document-list5.har')
+const REQUESTS_HAR6 = path.join(__dirname, 'requests/api-document-list6.har')
 
 test('basic filtering', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
   await page.goto('/documents')
   await page.getByRole('button', { name: 'Tags' }).click()
   await page.getByRole('menuitem', { name: 'Inbox' }).click()
-  await expect(page).toHaveURL(/tags__id__all=1/)
+  await expect(page).toHaveURL(/tags__id__all=9/)
   await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
   await page.getByRole('button', { name: 'Document type' }).click()
   await page.getByRole('menuitem', { name: /^Invoice Test/ }).click()
@@ -14,27 +23,28 @@ test('basic filtering', async ({ page }) => {
   await page.getByRole('button', { name: 'Correspondent' }).click()
   await page.getByRole('menuitem', { name: 'Test Correspondent 1' }).click()
   await page.getByRole('menuitem', { name: 'Correspondent 9' }).click()
-  await expect(page).toHaveURL(/correspondent__id__in=(?:1,2|2,1)/)
+  await expect(page).toHaveURL(/correspondent__id__in=12,1/)
   await expect(page.locator('pngx-document-list')).toHaveText(/7 documents/)
   await page
     .locator('pngx-filter-editor')
     .getByTitle('Correspondent')
     .getByText('Exclude')
     .click()
-  await expect(page).toHaveURL(/correspondent__id__none=(?:1,2|2,1)/)
+  await expect(page).toHaveURL(/correspondent__id__none=12,1/)
   await expect(page.locator('pngx-document-list')).toHaveText(/54 documents/)
   // clear button
   await page.getByRole('button', { name: '2 selected', exact: true }).click()
   await expect(page.locator('pngx-document-list')).toHaveText(/61 documents/)
   await page.getByRole('button', { name: 'Storage path' }).click()
   await page.getByRole('menuitem', { name: 'Testing 12' }).click()
-  await expect(page).toHaveURL(/storage_path__id__in=1/)
+  await expect(page).toHaveURL(/storage_path__id__in=5/)
   await expect(page.locator('pngx-document-list')).toHaveText(/8 documents/)
   await page.getByRole('button', { name: 'Reset filters' }).first().click()
   await expect(page.locator('pngx-document-list')).toHaveText(/61 documents/)
 })
 
 test('text filtering', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR2, { notFound: 'fallback' })
   await page.goto('/documents')
   await page.getByRole('main').getByRole('combobox').click()
   await page.getByRole('main').getByRole('combobox').fill('test')
@@ -47,7 +57,7 @@ test('text filtering', async ({ page }) => {
   await page.getByRole('button', { name: 'Title', exact: true }).click()
   await page.getByRole('button', { name: 'Advanced search' }).click()
   await expect(page).toHaveURL(/query=test/)
-  await expect(page.locator('pngx-document-list')).toHaveText(/32 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/26 documents/)
   await page.getByRole('button', { name: 'Advanced search' }).click()
   await page.getByRole('button', { name: 'ASN' }).click()
   await page.getByRole('main').getByRole('combobox').nth(1).fill('1123')
@@ -70,6 +80,7 @@ test('text filtering', async ({ page }) => {
 })
 
 test('date filtering', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR3, { notFound: 'fallback' })
   await page.goto('/documents')
   await page.getByRole('button', { name: 'Dates' }).click()
   await page.locator('.ng-arrow-wrapper').first().click()
@@ -83,14 +94,15 @@ test('date filtering', async ({ page }) => {
   await page.getByRole('option', { name: 'Within 3 months' }).click()
   await page.getByLabel('Dates selected').locator('button').first().click()
   await page.getByLabel('Dates selected').locator('button').first().click()
-  const createdFrom = page.getByRole('textbox', { name: 'mm/dd/yyyy' }).first()
-  await createdFrom.fill('12/11/2022')
-  await createdFrom.press('Enter')
+  await page.getByRole('combobox', { name: 'Select month' }).selectOption('12')
+  await page.getByRole('combobox', { name: 'Select year' }).selectOption('2022')
+  await page.getByText('11', { exact: true }).click()
   await page.getByRole('button', { name: 'Title & content' }).click()
-  await expect(page.locator('pngx-document-list')).toHaveText(/3 documents/)
+  await expect(page.locator('pngx-document-list')).toHaveText(/2 documents/)
 })
 
 test('sorting', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR4, { notFound: 'fallback' })
   await page.goto('/documents')
   await page.getByRole('button', { name: 'Sort' }).click()
   await page.getByRole('button', { name: 'ASN' }).click()
@@ -128,6 +140,7 @@ test('sorting', async ({ page }) => {
 })
 
 test('change views', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR5, { notFound: 'fallback' })
   await page.goto('/documents')
   await page.locator('.btn-group > label').first().click()
   await expect(page.locator('pngx-document-list table')).toBeVisible()
@@ -138,18 +151,12 @@ test('change views', async ({ page }) => {
 })
 
 test('bulk edit', async ({ page }) => {
-  const uiSettingsLoaded = page.waitForResponse(
-    (response) => response.url().includes('/api/ui_settings/') && response.ok()
-  )
+  await page.routeFromHAR(REQUESTS_HAR6, { notFound: 'fallback' })
   await page.goto('/documents')
-  await uiSettingsLoaded
 
+  await page.locator('pngx-document-card-small').nth(0).click()
   await page
-    .locator('pngx-document-card-small .doc-img-container')
-    .nth(0)
-    .click()
-  await page
-    .locator('pngx-document-card-small .doc-img-container')
+    .locator('pngx-document-card-small')
     .nth(3)
     .click({
       modifiers: ['Shift'],
@@ -169,14 +176,8 @@ test('bulk edit', async ({ page }) => {
   )
   await page.getByRole('button', { name: 'None' }).click()
 
-  await page
-    .locator('pngx-document-card-small .doc-img-container')
-    .nth(1)
-    .click()
-  await page
-    .locator('pngx-document-card-small .doc-img-container')
-    .nth(2)
-    .click()
+  await page.locator('pngx-document-card-small').nth(1).click()
+  await page.locator('pngx-document-card-small').nth(2).click()
 
   await page.getByRole('button', { name: 'Tags' }).click()
   await page
@@ -184,26 +185,15 @@ test('bulk edit', async ({ page }) => {
     .fill('TagWithPartial')
   await page.getByRole('menuitem', { name: 'TagWithPartial' }).click()
 
+  await page.getByRole('button', { name: 'Apply' }).click()
+
   const bulkEditPromise = page.waitForRequest((request) => {
-    if (
-      !request.url().includes('/api/documents/bulk_edit/') ||
-      request.method() !== 'POST'
-    ) {
-      return false
-    }
     const postData = request.postDataJSON()
     let isValid = postData['method'] == 'modify_tags'
-    isValid =
-      isValid &&
-      [
-        ...postData['parameters']['add_tags'],
-        ...postData['parameters']['remove_tags'],
-      ].includes(3)
-    return isValid
+    isValid = isValid && postData['parameters']['add_tags'].includes(5)
+    return request.url().toString().includes('bulk_edit') && isValid
   })
 
-  await page.getByRole('button', { name: 'Apply' }).click()
-  await expect(page.getByRole('button', { name: 'Confirm' })).toBeVisible()
   await page.getByRole('button', { name: 'Confirm' }).click()
   await bulkEditPromise
 })

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

@@ -1,12 +1,10 @@
 import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-test.use({
-  extraHTTPHeaders: {
-    Authorization: `Basic ${Buffer.from('viewer:viewer').toString('base64')}`,
-  },
-})
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-global-permissions.har')
 
 test('should not allow user to edit settings', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(page.getByRole('link', { name: 'Settings' })).not.toBeAttached()
   await page.goto('/settings')
@@ -16,6 +14,7 @@ test('should not allow user to edit settings', async ({ page }) => {
 })
 
 test('should not allow user to view documents', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
     page.locator('nav').getByRole('link', { name: 'Documents' })
@@ -31,6 +30,7 @@ test('should not allow user to view documents', async ({ page }) => {
 })
 
 test('should not allow user to view correspondents', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
@@ -42,6 +42,7 @@ test('should not allow user to view correspondents', async ({ page }) => {
 })
 
 test('should not allow user to view tags', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
@@ -53,6 +54,7 @@ test('should not allow user to view tags', async ({ page }) => {
 })
 
 test('should not allow user to view document types', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
@@ -64,6 +66,7 @@ test('should not allow user to view document types', async ({ page }) => {
 })
 
 test('should not allow user to view storage paths', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(
     page.getByRole('link', { name: 'Attributes' })
@@ -75,6 +78,7 @@ test('should not allow user to view storage paths', async ({ page }) => {
 })
 
 test('should not allow user to view logs', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(page.getByRole('link', { name: 'Logs' })).not.toBeAttached()
   await page.goto('/logs')
@@ -84,6 +88,7 @@ test('should not allow user to view logs', async ({ page }) => {
 })
 
 test('should not allow user to view tasks', async ({ page }) => {
+  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
   await page.goto('/dashboard')
   await expect(page.getByRole('link', { name: 'Tasks' })).not.toBeAttached()
   await page.goto('/tasks')

src-ui/e2e/permissions/requests/api-global-permissions.har

@@ -0,0 +1,353 @@
+{
+  "log": {
+    "version": "1.2",
+    "creator": {
+      "name": "Playwright",
+      "version": "1.33.0"
+    },
+    "browser": {
+      "name": "chromium",
+      "version": "113.0.5672.53"
+    },
+    "entries": [
+      {
+        "startedDateTime": "2023-05-14T07:16:51.455Z",
+        "time": 5.787,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/ui_settings/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, POST, HEAD, OPTIONS" },
+            { "name": "Content-Encoding", "value": "br" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "385" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie, Accept-Encoding" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"user\":{\"id\":2,\"username\":\"testuser\",\"is_superuser\":false,\"groups\":[]},\"settings\":{\"language\":\"\",\"bulk_edit\":{\"confirmation_dialogs\":true,\"apply_on_close\":false},\"documentListSize\":50,\"dark_mode\":{\"use_system\":false,\"enabled\":\"false\",\"thumb_inverted\":\"true\"},\"theme\":{\"color\":\"#9fbf2f\"},\"document_details\":{\"native_pdf_viewer\":false},\"date_display\":{\"date_locale\":\"\",\"date_format\":\"mediumDate\"},\"notifications\":{\"consumer_new_documents\":true,\"consumer_success\":true,\"consumer_failed\":true,\"consumer_suppress_on_dashboard\":true},\"comments_enabled\":true,\"slim_sidebar\":false,\"update_checking\":{\"enabled\":false,\"backend_setting\":\"default\"},\"saved_views\":{\"warn_on_unsaved_change\":true},\"notes_enabled\":true,\"tour_complete\":true},\"permissions\":[]}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 5.787 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:16:51.578Z",
+        "time": 0.566,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/tasks/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "2" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "[]"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.566 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:16:51.578Z",
+        "time": 0.452,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/statistics/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "257" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"documents_total\":61,\"documents_inbox\":8,\"inbox_tag\":9,\"document_file_type_counts\":[{\"mime_type\":\"application/pdf\",\"mime_type_count\":57},{\"mime_type\":\"text/plain\",\"mime_type_count\":3},{\"mime_type\":\"text/csv\",\"mime_type_count\":1}],\"character_count\":2407053}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.452 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:16:51.691Z",
+        "time": 0.891,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/ui_settings/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, POST, HEAD, OPTIONS" },
+            { "name": "Content-Encoding", "value": "br" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "385" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie, Accept-Encoding" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"user\":{\"id\":2,\"username\":\"testuser\",\"is_superuser\":false,\"groups\":[]},\"settings\":{\"language\":\"\",\"bulk_edit\":{\"confirmation_dialogs\":true,\"apply_on_close\":false},\"documentListSize\":50,\"dark_mode\":{\"use_system\":false,\"enabled\":\"false\",\"thumb_inverted\":\"true\"},\"theme\":{\"color\":\"#9fbf2f\"},\"document_details\":{\"native_pdf_viewer\":false},\"date_display\":{\"date_locale\":\"\",\"date_format\":\"mediumDate\"},\"notifications\":{\"consumer_new_documents\":true,\"consumer_success\":true,\"consumer_failed\":true,\"consumer_suppress_on_dashboard\":true},\"comments_enabled\":true,\"slim_sidebar\":false,\"update_checking\":{\"enabled\":false,\"backend_setting\":\"default\"},\"saved_views\":{\"warn_on_unsaved_change\":true},\"notes_enabled\":true,\"tour_complete\":true},\"permissions\":[]}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.891 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:16:51.739Z",
+        "time": 0.405,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/tasks/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "2" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "[]"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.405 }
+      },
+      {
+        "startedDateTime": "2023-05-14T07:16:51.739Z",
+        "time": 0.665,
+        "request": {
+          "method": "GET",
+          "url": "http://localhost:8000/api/statistics/",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Accept", "value": "application/json; version=3" },
+            { "name": "Accept-Encoding", "value": "gzip, deflate, br" },
+            { "name": "Accept-Language", "value": "en-US" },
+            { "name": "Connection", "value": "keep-alive" },
+            { "name": "Host", "value": "localhost:8000" },
+            { "name": "Origin", "value": "http://localhost:4200" },
+            { "name": "Referer", "value": "http://localhost:4200/" },
+            { "name": "Sec-Fetch-Dest", "value": "empty" },
+            { "name": "Sec-Fetch-Mode", "value": "cors" },
+            { "name": "Sec-Fetch-Site", "value": "same-site" },
+            { "name": "User-Agent", "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5672.53 Safari/537.36" }
+          ],
+          "queryString": [],
+          "headersSize": -1,
+          "bodySize": -1
+        },
+        "response": {
+          "status": 200,
+          "statusText": "OK",
+          "httpVersion": "HTTP/1.1",
+          "cookies": [],
+          "headers": [
+            { "name": "Access-Control-Allow-Origin", "value": "http://localhost:4200" },
+            { "name": "Allow", "value": "GET, HEAD, OPTIONS" },
+            { "name": "Content-Language", "value": "en-us" },
+            { "name": "Content-Length", "value": "257" },
+            { "name": "Content-Type", "value": "application/json" },
+            { "name": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+            { "name": "Referrer-Policy", "value": "same-origin" },
+            { "name": "Vary", "value": "Accept, Accept-Language, Origin, Cookie" },
+            { "name": "X-Api-Version", "value": "3" },
+            { "name": "X-Content-Type-Options", "value": "nosniff" },
+            { "name": "X-Frame-Options", "value": "ANY" },
+            { "name": "X-Version", "value": "1.14.4" }
+          ],
+          "content": {
+            "size": -1,
+            "mimeType": "application/json",
+            "text": "{\"documents_total\":61,\"documents_inbox\":8,\"inbox_tag\":9,\"document_file_type_counts\":[{\"mime_type\":\"application/pdf\",\"mime_type_count\":57},{\"mime_type\":\"text/plain\",\"mime_type_count\":3},{\"mime_type\":\"text/csv\",\"mime_type_count\":1}],\"character_count\":2407053}"
+          },
+          "headersSize": -1,
+          "bodySize": -1,
+          "redirectURL": ""
+        },
+        "cache": {},
+        "timings": { "send": -1, "wait": -1, "receive": 0.665 }
+      }
+    ]
+  }
+}

src-ui/package.json

@@ -1,15 +1,11 @@
 {
   "name": "paperless-ngx-ui",
-  "version": "3.1.2",
+  "version": "3.1.1",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "e2e": "playwright test",
-    "e2e:backend": "uv run --project .. --no-sync python e2e/backend.py",
-    "e2e:ui": "playwright test --ui",
-    "start:e2e": "ng serve --configuration=e2e",
     "test": "ng test",
     "lint": "ng lint"
   },

src-ui/playwright.config.ts

@@ -14,25 +14,17 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 3 : 0,
-  /* Keep parallelism modest for the shared SQLite backend. */
-  workers: 2,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
-  /* Run the disposable backend and local UI before starting the tests. */
-  webServer: [
-    {
-      url: 'http://localhost:8001/accounts/login/',
-      command: 'npm run e2e:backend',
-      reuseExistingServer: false,
-      timeout: 2 * 60 * 1000,
-    },
-    {
-      port,
-      command: 'npm run start:e2e',
-      reuseExistingServer: !process.env.CI,
-      timeout: 2 * 60 * 1000,
-    },
-  ],
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    port,
+    command: 'pnpm run start',
+    reuseExistingServer: !process.env.CI,
+    timeout: 2 * 60 * 1000,
+  },
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

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

@@ -237,12 +237,6 @@
               </div>
             </div>
 
-            <div class="row">
-              <div class="col">
-                <pngx-input-check i18n-title title="Automatically request suggestions for inbox documents" i18n-hint hint="If un-checked, suggestions must be requested via the Suggest button." formControlName="documentEditingAutoSuggest"></pngx-input-check>
-              </div>
-            </div>
-
             <div class="row">
               <div class="col">
                 <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>

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

@@ -267,7 +267,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(33)
+    expect(setSpy).toHaveBeenCalledTimes(32)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))

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

@@ -168,7 +168,6 @@ export class SettingsComponent
     pdfEditorDefaultEditMode: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
     documentEditingOverlayThumbnail: new FormControl(null),
-    documentEditingAutoSuggest: new FormControl(null),
     documentDetailsHiddenFields: new FormControl([]),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
@@ -369,9 +368,6 @@ export class SettingsComponent
       documentEditingOverlayThumbnail: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
       ),
-      documentEditingAutoSuggest: this.settings.get(
-        SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST
-      ),
       documentDetailsHiddenFields: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS
       ),
@@ -569,10 +565,6 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
       this.settingsForm.value.documentEditingOverlayThumbnail
     )
-    this.settings.set(
-      SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST,
-      this.settingsForm.value.documentEditingAutoSuggest
-    )
     this.settings.set(
       SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS,
       this.settingsForm.value.documentDetailsHiddenFields

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

@@ -41,8 +41,6 @@ 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())
@@ -202,7 +200,8 @@ export class TrashComponent
   }
 
   getDaysRemaining(document: Document): number {
-    const delay = this.emptyTrashDelaySetting()
+    this.settingsService.trackChanges()
+    const delay = this.settingsService.get(SETTINGS_KEYS.EMPTY_TRASH_DELAY)
     const diff = new Date().getTime() - new Date(document.deleted_at).getTime()
     const days = Math.ceil(diff / (1000 * 3600 * 24))
     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 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews() || !canSaveSettings"
+                <li class="nav-item w-100 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-1 py-2" [class.me-n2]="slimSidebarEnabled" cdkDragHandle>
+                    <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="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-2">
+                <div class="me-3">
                   <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 d-flex align-items-center">
+                  <div class="version-check">
                     <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.spec.ts

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

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

@@ -81,10 +81,6 @@ 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)
@@ -101,7 +97,11 @@ export class GlobalSearchComponent implements OnInit {
   @ViewChildren('secondaryButton') secondaryButtons: QueryList<ElementRef>
 
   get useAdvancedForFullSearch(): boolean {
-    return this.searchFullTypeSetting() === GlobalSearchType.ADVANCED
+    this.settingsService.trackChanges()
+    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,6 +1,6 @@
 @if (useDropdown) {
   <div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
-    <button class="btn btn-sm" [ngClass]="!editing && isActive ? 'btn-primary' : 'btn-outline-primary'" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled" [aria-label]="title">
+    <button class="btn btn-sm 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>

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

@@ -1,6 +1,5 @@
 import {
   getLocaleNumberSymbol,
-  NgClass,
   NgTemplateOutlet,
   NumberSymbol,
 } from '@angular/common'
@@ -49,26 +48,25 @@ import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.comp
 import { DocumentLinkComponent } from '../input/document-link/document-link.component'
 
 export class CustomFieldQueriesModel {
-  private readonly _queries = signal<CustomFieldQueryElement[]>([])
+  private _queries: 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()
-    const queries = value ?? []
-    for (const element of queries) {
+    this._queries = value ?? []
+    for (const element of this._queries) {
       this.rootSubscriptions.push(
         element.changed.subscribe(() => {
           this.changed.next(this)
         })
       )
     }
-    this._queries.set(queries)
   }
 
   public clear(fireEvent = true) {
@@ -211,7 +209,6 @@ export class CustomFieldQueriesModel {
     DocumentLinkComponent,
     ReactiveFormsModule,
     NgbDatepickerModule,
-    NgClass,
     NgTemplateOutlet,
     NgSelectModule,
     NgxBootstrapIconsModule,

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

@@ -196,16 +196,6 @@ 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')
@@ -228,7 +218,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should return source options, type options, type name, schedule date field options', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
     component.ngOnInit()
     expect(component.sourceOptions).toEqual(DOCUMENT_SOURCE_OPTIONS)
     expect(component.triggerTypeOptions).toEqual(WORKFLOW_TYPE_OPTIONS)
@@ -252,7 +242,7 @@ describe('WorkflowEditDialogComponent', () => {
     )
 
     // Email, remote OCR and AI all disabled
-    setActionSettings({ email: false, remoteOcr: false, ai: false })
+    jest.spyOn(settingsService, 'get').mockReturnValue(false)
     component.ngOnInit()
     expect(component.actionTypeOptions).toEqual(
       WORKFLOW_ACTION_OPTIONS.filter(
@@ -265,7 +255,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR only for consumption workflows', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
 
     // A consumption trigger makes the action reachable
     component.object = {
@@ -295,7 +285,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer remote OCR on a trigger added to a new workflow', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
     component.ngOnInit()
 
     // Nothing for the action to apply to yet
@@ -321,7 +311,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep remote OCR listed when an action already uses it', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -339,7 +329,9 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer remote OCR when no engine is configured', () => {
-    setActionSettings({ remoteOcr: false })
+    jest
+      .spyOn(settingsService, 'get')
+      .mockImplementation((key) => key !== SETTINGS_KEYS.REMOTE_OCR_CONFIGURED)
 
     component.object = {
       name: 'Workflow 1',
@@ -356,7 +348,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should offer apply AI suggestions unless every trigger is consumption', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
 
     // Consumption runs before the document has been parsed, so there would be
     // no content to make suggestions from
@@ -390,7 +382,7 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should keep apply AI suggestions listed when an action already uses it', () => {
-    setActionSettings()
+    jest.spyOn(settingsService, 'get').mockReturnValue(true)
 
     // Otherwise changing the trigger would silently blank the selection
     component.object = {
@@ -408,7 +400,9 @@ describe('WorkflowEditDialogComponent', () => {
   })
 
   it('should not offer apply AI suggestions when AI is disabled', () => {
-    setActionSettings({ ai: false })
+    jest
+      .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,13 +537,6 @@ 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
 
@@ -596,7 +589,7 @@ export class WorkflowEditDialogComponent
   private getAllowedActionTypes() {
     let allowed = WORKFLOW_ACTION_OPTIONS
 
-    if (!this.emailEnabledSetting()) {
+    if (!this.settingsService.get(SETTINGS_KEYS.EMAIL_ENABLED)) {
       allowed = allowed.filter((a) => a.id !== WorkflowActionType.Email)
     }
 
@@ -604,7 +597,7 @@ export class WorkflowEditDialogComponent
     // offered for workflows that run at consumption.
     const formWorkflow: Workflow = this.objectForm?.value
     const remoteOcrUsable =
-      this.remoteOcrConfiguredSetting() &&
+      this.settingsService.get(SETTINGS_KEYS.REMOTE_OCR_CONFIGURED) &&
       (formWorkflow?.triggers?.some(
         (trigger) => trigger.type === WorkflowTriggerType.Consumption
       ) ||
@@ -619,7 +612,7 @@ export class WorkflowEditDialogComponent
     // once every trigger is consumption, so it stays offered on a workflow
     // that has no triggers yet.
     const aiSuggestionsUsable =
-      this.aiEnabledSetting() &&
+      this.settingsService.get(SETTINGS_KEYS.AI_ENABLED) &&
       (!formWorkflow?.triggers?.length ||
         formWorkflow.triggers.some(
           (trigger) => trigger.type !== WorkflowTriggerType.Consumption
@@ -1369,6 +1362,7 @@ 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

@@ -839,9 +839,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [memoRoot]
     selectionModel.documentCounts = [{ id: memoRoot.id, document_count: 9 }]
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter(
-      selectionModel.items
-    )
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
 
     expect(getRootDocCount(memoRoot.id)).toEqual(9)
     selectionModel.documentCounts = []
@@ -857,9 +855,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutSelection]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter(
-      selectionModel.items
-    )
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
 
     expect(getRootDocCount(rootWithoutSelection.id)).toEqual(4)
   })
@@ -869,9 +865,7 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     selectionModel.items = [rootWithoutCounts]
     selectionModel.documentCounts = []
 
-    const getRootDocCount = (selectionModel as any).createRootDocCounter(
-      selectionModel.items
-    )
+    const getRootDocCount = (selectionModel as any).createRootDocCounter()
 
     expect(getRootDocCount(rootWithoutCounts.id)).toEqual(0)
   })
@@ -972,7 +966,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,56 +64,43 @@ 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 readonly _logicalOperator = signal(LogicalOperator.And)
-  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>()
-  )
-
+  private _documentCounts: SelectionDataItem[] = []
   public documentCountSortingEnabled = 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.set(counts)
+    this._documentCounts = counts
     if (this.documentCountSortingEnabled) {
-      this._items.set(this.sortItems(this.items))
+      this.sortItems()
     }
   }
 
+  private _items: MatchingModel[] = []
   get items(): MatchingModel[] {
-    return this._items()
+    return this._items
   }
 
   set items(items: MatchingModel[]) {
     if (items) {
-      this._items.set(this.withNullItem(this.sortItems(Array.from(items))))
+      this._items = Array.from(items)
+      this.sortItems()
+      this.setNullItem()
     }
   }
 
-  private withNullItem(items: MatchingModel[]): MatchingModel[] {
+  private setNullItem() {
     if (this.manyToOne && this.logicalOperator === LogicalOperator.Or) {
-      return items[0]?.id === null ? items.slice(1) : items
+      if (this._items[0]?.id === null) {
+        this._items.shift()
+      }
+      return
     }
 
-    const nullItem = {
+    const item = {
       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
@@ -121,17 +108,22 @@ export class FilterableDropdownSelectionModel {
           : NEGATIVE_NULL_FILTER_VALUE,
     }
 
-    return items[0]?.id === null || items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
-      ? [nullItem, ...items.slice(1)]
-      : [nullItem, ...items]
+    if (
+      this._items[0]?.id === null ||
+      this._items[0]?.id === NEGATIVE_NULL_FILTER_VALUE
+    ) {
+      this._items[0] = item
+    } else if (this._items) {
+      this._items.unshift(item)
+    }
   }
 
   constructor(manyToOne: boolean = false) {
     this.manyToOne = manyToOne
   }
 
-  private sortItems(items: MatchingModel[]): MatchingModel[] {
-    const sorted = [...items].sort((a, b) => {
+  private sortItems() {
+    this._items.sort((a, b) => {
       if (
         (a.id == null && b.id != null) ||
         (a.id == NEGATIVE_NULL_FILTER_VALUE &&
@@ -162,13 +154,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)
       ) {
@@ -178,11 +170,15 @@ export class FilterableDropdownSelectionModel {
       }
     })
 
-    return this._documentCounts().length
-      ? this.promoteBranchesWithDocumentCounts(sorted)
-      : sorted
+    if (this._documentCounts.length) {
+      this.promoteBranchesWithDocumentCounts()
+    }
   }
 
+  private selectionStates = new Map<number, ToggleableItemState>()
+
+  private temporarySelectionStates = new Map<number, ToggleableItemState>()
+
   getSelectedItems() {
     return this.items.filter(
       (i) =>
@@ -198,33 +194,30 @@ export class FilterableDropdownSelectionModel {
   }
 
   set(id: number, state: ToggleableItemState, fireEvent = true) {
-    const states = new Map(this.temporarySelectionStates)
     if (state == ToggleableItemState.NotSelected) {
-      states.delete(id)
+      this.temporarySelectionStates.delete(id)
     } else {
-      states.set(id, state)
+      this.temporarySelectionStates.set(id, state)
     }
-    this._temporarySelectionStates.set(states)
     if (fireEvent) {
       this.changed.next(this)
     }
   }
 
   toggle(id: number, fireEvent = true) {
-    const states = new Map(this.temporarySelectionStates)
-    let state = states.get(id)
+    let state = this.temporarySelectionStates.get(id)
     if (
       state == undefined ||
       (state != ToggleableItemState.Selected &&
         state != ToggleableItemState.Excluded)
     ) {
       if (this.manyToOne || this.singleSelect) {
-        states.set(id, ToggleableItemState.Selected)
+        this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
 
         if (this.singleSelect) {
-          for (let key of states.keys()) {
+          for (let key of this.temporarySelectionStates.keys()) {
             if (key != id) {
-              states.delete(key)
+              this.temporarySelectionStates.delete(key)
             }
           }
         }
@@ -240,26 +233,25 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        states.set(id, newState)
+        this.temporarySelectionStates.set(id, newState)
       }
     } else if (
       state == ToggleableItemState.Selected ||
       state == ToggleableItemState.Excluded
     ) {
-      states.delete(id)
-      this.clearDescendantSelections(states, id)
+      this.temporarySelectionStates.delete(id)
+      this.clearDescendantSelections(id)
     }
 
     if (!id) {
-      for (let key of states.keys()) {
+      for (let key of this.temporarySelectionStates.keys()) {
         if (key) {
-          states.delete(key)
+          this.temporarySelectionStates.delete(key)
         }
       }
     } else {
-      states.delete(null)
+      this.temporarySelectionStates.delete(null)
     }
-    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -267,21 +259,20 @@ export class FilterableDropdownSelectionModel {
   }
 
   exclude(id: number, fireEvent: boolean = true) {
-    const states = new Map(this.temporarySelectionStates)
-    let state = states.get(id)
+    let state = this.temporarySelectionStates.get(id)
     if (id && (state == null || state != ToggleableItemState.Excluded)) {
-      const operator = this.manyToOne ? LogicalOperator.And : LogicalOperator.Or
-      this.temporaryLogicalOperator.set(operator)
-      this._logicalOperator.set(operator)
+      this.temporaryLogicalOperator = this._logicalOperator = this.manyToOne
+        ? LogicalOperator.And
+        : LogicalOperator.Or
 
       if (this.manyToOne || this.singleSelect) {
-        states.set(id, ToggleableItemState.Excluded)
-        this.clearDescendantSelections(states, id)
+        this.temporarySelectionStates.set(id, ToggleableItemState.Excluded)
+        this.clearDescendantSelections(id)
 
         if (this.singleSelect) {
-          for (let key of states.keys()) {
+          for (let key of this.temporarySelectionStates.keys()) {
             if (key != id) {
-              states.delete(key)
+              this.temporarySelectionStates.delete(key)
             }
           }
         }
@@ -296,18 +287,17 @@ export class FilterableDropdownSelectionModel {
         ) {
           newState = ToggleableItemState.NotSelected
         }
-        states.set(id, newState)
+        this.temporarySelectionStates.set(id, newState)
         if (newState == ToggleableItemState.Excluded) {
-          this.clearDescendantSelections(states, id)
+          this.clearDescendantSelections(id)
         }
       }
     } else if (!id || state == ToggleableItemState.Excluded) {
-      states.delete(id)
+      this.temporarySelectionStates.delete(id)
       if (id) {
-        this.clearDescendantSelections(states, id)
+        this.clearDescendantSelections(id)
       }
     }
-    this._temporarySelectionStates.set(states)
 
     if (fireEvent) {
       this.changed.next(this)
@@ -318,12 +308,9 @@ export class FilterableDropdownSelectionModel {
     return this.selectionStates.get(id) || ToggleableItemState.NotSelected
   }
 
-  private clearDescendantSelections(
-    states: Map<number, ToggleableItemState>,
-    id: number
-  ) {
+  private clearDescendantSelections(id: number) {
     for (const descendantID of this.getDescendantIDs(id)) {
-      states.delete(descendantID)
+      this.temporarySelectionStates.delete(descendantID)
     }
   }
 
@@ -333,7 +320,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' &&
@@ -349,12 +336,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get logicalOperator(): LogicalOperator {
-    return this.temporaryLogicalOperator()
+    return this.temporaryLogicalOperator
   }
 
   set logicalOperator(operator: LogicalOperator) {
-    this.temporaryLogicalOperator.set(operator)
-    this._items.set(this.withNullItem(this.items))
+    this.temporaryLogicalOperator = operator
+    this.setNullItem()
   }
 
   toggleOperator() {
@@ -362,12 +349,12 @@ export class FilterableDropdownSelectionModel {
   }
 
   get intersection(): Intersection {
-    return this.temporaryIntersection()
+    return this.temporaryIntersection
   }
 
   set intersection(intersection: Intersection) {
-    this.temporaryIntersection.set(intersection)
-    this._items.set(this.withNullItem(this.items))
+    this.temporaryIntersection = intersection
+    this.setNullItem()
   }
 
   toggleIntersection() {
@@ -377,20 +364,18 @@ export class FilterableDropdownSelectionModel {
         ? ToggleableItemState.Selected
         : ToggleableItemState.Excluded
 
-    const states = new Map(this.temporarySelectionStates)
-    states.forEach((state, key) => {
+    this.temporarySelectionStates.forEach((state, key) => {
       if (key === null && this.intersection === Intersection.Exclude) {
-        states.set(NEGATIVE_NULL_FILTER_VALUE, newState)
+        this.temporarySelectionStates.set(NEGATIVE_NULL_FILTER_VALUE, newState)
       } else if (
         key === NEGATIVE_NULL_FILTER_VALUE &&
         this.intersection === Intersection.Include
       ) {
-        states.set(null, newState)
+        this.temporarySelectionStates.set(null, newState)
       } else {
-        states.set(key, newState)
+        this.temporarySelectionStates.set(key, newState)
       }
     })
-    this._temporarySelectionStates.set(states)
 
     this.changed.next(this)
   }
@@ -410,12 +395,10 @@ export class FilterableDropdownSelectionModel {
   }
 
   clear(fireEvent = true) {
-    this._temporarySelectionStates.set(new Map())
-    this.temporaryLogicalOperator.set(LogicalOperator.And)
-    this._logicalOperator.set(LogicalOperator.And)
-    this.temporaryIntersection.set(Intersection.Include)
-    this._intersection.set(Intersection.Include)
-    this._items.set(this.withNullItem(this.items))
+    this.temporarySelectionStates.clear()
+    this.temporaryLogicalOperator = this._logicalOperator = LogicalOperator.And
+    this.temporaryIntersection = this._intersection = Intersection.Include
+    this.setNullItem()
     if (fireEvent) {
       this.changed.next(this)
     }
@@ -436,9 +419,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
@@ -455,29 +438,23 @@ 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(
-    items: MatchingModel[]
-  ): MatchingModel[] {
-    const parentById = this.buildParentById(items)
+  private promoteBranchesWithDocumentCounts() {
+    const parentById = this.buildParentById()
     const findRootId = this.createRootFinder(parentById)
-    const getRootDocCount = this.createRootDocCounter(items)
-    const summaries = this.buildBranchSummaries(
-      items,
-      findRootId,
-      getRootDocCount
-    )
+    const getRootDocCount = this.createRootDocCounter()
+    const summaries = this.buildBranchSummaries(findRootId, getRootDocCount)
     const orderedBranches = this.orderBranchesByPriority(summaries)
 
-    return orderedBranches.flatMap((summary) => summary.items)
+    this._items = orderedBranches.flatMap((summary) => summary.items)
   }
 
-  private buildParentById(items: MatchingModel[]): Map<number, number | null> {
+  private buildParentById(): Map<number, number | null> {
     const parentById = new Map<number, number | null>()
 
-    for (const item of items) {
+    for (const item of this._items) {
       if (typeof item?.id === 'number') {
         const parentValue = (item as any)['parent']
         parentById.set(
@@ -515,9 +492,7 @@ export class FilterableDropdownSelectionModel {
     return findRootId
   }
 
-  private createRootDocCounter(
-    items: MatchingModel[]
-  ): (rootId: number) => number {
+  private createRootDocCounter(): (rootId: number) => number {
     const docCountMemo = new Map<number, number>()
 
     return (rootId: number): number => {
@@ -532,7 +507,7 @@ export class FilterableDropdownSelectionModel {
         return explicit
       }
 
-      const rootItem = items.find((i) => i.id === rootId)
+      const rootItem = this._items.find((i) => i.id === rootId)
       const fallback =
         typeof (rootItem as any)?.['document_count'] === 'number'
           ? (rootItem as any)['document_count']
@@ -544,13 +519,12 @@ 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 items.entries()) {
+    for (const [index, item] of this._items.entries()) {
       const { key, special, rootId } = this.describeBranchItem(
         item,
         index,
@@ -642,23 +616,28 @@ export class FilterableDropdownSelectionModel {
   }
 
   init(map: Map<number, ToggleableItemState>) {
-    this._temporarySelectionStates.set(new Map(map))
+    this.temporarySelectionStates = map
     this.apply()
   }
 
   apply() {
-    this._selectionStates.set(new Map(this.temporarySelectionStates))
-    this._logicalOperator.set(this.temporaryLogicalOperator())
-    this._intersection.set(this.temporaryIntersection())
-    this._items.set(this.sortItems(this.items))
+    this.selectionStates.clear()
+    this.temporarySelectionStates.forEach((value, key) => {
+      this.selectionStates.set(key, value)
+    })
+    this._logicalOperator = this.temporaryLogicalOperator
+    this._intersection = this.temporaryIntersection
+    this.sortItems()
   }
 
   reset(complete: boolean = false) {
+    this.temporarySelectionStates.clear()
     if (complete) {
-      this._selectionStates.set(new Map())
-      this._temporarySelectionStates.set(new Map())
+      this.selectionStates.clear()
     } else {
-      this._temporarySelectionStates.set(new Map(this.selectionStates))
+      this.selectionStates.forEach((value, key) => {
+        this.temporarySelectionStates.set(key, value)
+      })
     }
   }
 

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

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

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

@@ -3,7 +3,6 @@
     <div class="d-flex flex-wrap flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
         cdkDropList #selectedList="cdkDropList"
         cdkDropListOrientation="mixed"
-        [cdkDropListDisabled]="disabled"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="[unselectedList]">
         @for (item of selectedItems; track item.id) {
@@ -18,7 +17,6 @@
     <div class="d-flex flex-wrap flex-row gap-2 w-100" style="min-height: 1em;"
         cdkDropList #unselectedList="cdkDropList"
         cdkDropListOrientation="mixed"
-        [cdkDropListDisabled]="disabled"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="[selectedList]">
         @for (item of unselectedItems; track item.id) {

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss

@@ -1,11 +1,3 @@
 .badge {
     cursor: move;
 }
-
-.cdk-drop-list-disabled {
-    cursor: not-allowed !important;
-
-    * {
-      pointer-events: none !important;
-    }
-}

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts

@@ -98,29 +98,4 @@ describe('DragDropSelectComponent', () => {
       { id: '3', name: 'Item 3' },
     ])
   })
-
-  it('should disable drag and drop when the control is disabled', () => {
-    component.items = [
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' },
-    ]
-    component.writeValue(['1', '2'])
-    component.setDisabledState(true)
-    fixture.detectChanges()
-
-    expect(component.selectedList.disabled).toBe(true)
-    expect(component.unselectedList.disabled).toBe(true)
-
-    component.drop({
-      previousContainer: component.selectedList,
-      container: component.selectedList,
-      previousIndex: 0,
-      currentIndex: 1,
-    } as any)
-
-    expect(component.selectedItems).toEqual([
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' },
-    ])
-  })
 })

src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts

@@ -46,8 +46,6 @@ export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
   }
 
   public drop(event: CdkDragDrop<string[]>) {
-    if (this.disabled) return
-
     if (
       event.previousContainer === event.container &&
       event.container === this.selectedList

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

@@ -7,7 +7,7 @@
     <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,7 +57,7 @@
       </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>
           }
         </div>
@@ -65,8 +65,7 @@
           <ng-select
             name="user"
             class="user-select small"
-            [ngModel]="selectionModel.includeUsers()"
-            (ngModelChange)="selectionModel.includeUsers.set($event)"
+            [(ngModel)]="selectionModel.includeUsers"
             [disabled]="disabled"
             [clearable]="false"
             [items]="users()"
@@ -79,10 +78,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]="selectionModel.hideUnowned()" (ngModelChange)="selectionModel.hideUnowned.set($event)" (change)="onChange()" [disabled]="disabled">
+            <input type="checkbox" class="form-check-input" id="hideUnowned" [(ngModel)]="this.selectionModel.hideUnowned" (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.spec.ts

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

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

@@ -25,18 +25,18 @@ import { ComponentWithPermissions } from '../../with-permissions/with-permission
 import { ClearableBadgeComponent } from '../clearable-badge/clearable-badge.component'
 
 export class PermissionsSelectionModel {
-  readonly ownerFilter = signal(OwnerFilterType.NONE)
-  readonly hideUnowned = signal(false)
-  readonly userID = signal<number>(null)
-  readonly includeUsers = signal<number[]>([])
-  readonly excludeUsers = signal<number[]>([])
+  ownerFilter: OwnerFilterType
+  hideUnowned: boolean
+  userID: number
+  includeUsers: number[]
+  excludeUsers: number[]
 
   clear() {
-    this.ownerFilter.set(OwnerFilterType.NONE)
-    this.userID.set(null)
-    this.hideUnowned.set(false)
-    this.includeUsers.set([])
-    this.excludeUsers.set([])
+    this.ownerFilter = OwnerFilterType.NONE
+    this.userID = null
+    this.hideUnowned = false
+    this.includeUsers = []
+    this.excludeUsers = []
   }
 }
 
@@ -84,31 +84,33 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   readonly users = signal<User[]>([])
 
+  hideUnowned: boolean
+
   get isActive(): boolean {
     return (
-      this.selectionModel.ownerFilter() !== OwnerFilterType.NONE ||
-      this.selectionModel.hideUnowned()
+      this.selectionModel.ownerFilter !== OwnerFilterType.NONE ||
+      this.selectionModel.hideUnowned
     )
   }
 
   get ownerFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter() !== OwnerFilterType.SELF ||
-      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
+      this.selectionModel?.ownerFilter !== OwnerFilterType.SELF ||
+      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)
     ) {
@@ -128,13 +130,13 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
 
   get sharedByFilterLabel(): string {
     if (
-      this.selectionModel?.ownerFilter() !== OwnerFilterType.SHARED_BY_ME ||
-      this.selectionModel?.userID() === this.settingsService.currentUser()?.id
+      this.selectionModel?.ownerFilter !== OwnerFilterType.SHARED_BY_ME ||
+      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`
@@ -167,36 +169,34 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
   }
 
   setFilter(type: OwnerFilterType) {
-    this.selectionModel.ownerFilter.set(type)
-    if (this.selectionModel.ownerFilter() === OwnerFilterType.SELF) {
-      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.userID.set(this.settingsService.currentUser().id)
-      this.selectionModel.hideUnowned.set(false)
-    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NOT_SELF) {
-      this.selectionModel.userID.set(null)
-      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers.set([
-        this.settingsService.currentUser().id,
-      ])
-      this.selectionModel.hideUnowned.set(false)
-    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.NONE) {
-      this.selectionModel.userID.set(null)
-      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.hideUnowned.set(false)
+    this.selectionModel.ownerFilter = type
+    if (this.selectionModel.ownerFilter === OwnerFilterType.SELF) {
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.userID = this.settingsService.currentUser().id
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = [this.settingsService.currentUser().id]
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.NONE) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
     } else if (
-      this.selectionModel.ownerFilter() === OwnerFilterType.SHARED_BY_ME
+      this.selectionModel.ownerFilter === OwnerFilterType.SHARED_BY_ME
     ) {
-      this.selectionModel.userID.set(this.settingsService.currentUser()?.id)
-      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.hideUnowned.set(false)
-    } else if (this.selectionModel.ownerFilter() === OwnerFilterType.UNOWNED) {
-      this.selectionModel.userID.set(null)
-      this.selectionModel.includeUsers.set([])
-      this.selectionModel.excludeUsers.set([])
-      this.selectionModel.hideUnowned.set(false)
+      this.selectionModel.userID = this.settingsService.currentUser()?.id
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
+    } else if (this.selectionModel.ownerFilter === OwnerFilterType.UNOWNED) {
+      this.selectionModel.userID = null
+      this.selectionModel.includeUsers = []
+      this.selectionModel.excludeUsers = []
+      this.selectionModel.hideUnowned = false
     }
     this.onChange()
   }
@@ -206,11 +206,11 @@ export class PermissionsFilterDropdownComponent extends ComponentWithPermissions
   }
 
   onUserSelect() {
-    this.selectionModel.ownerFilter.set(
-      this.selectionModel.includeUsers()?.length
-        ? OwnerFilterType.OTHERS
-        : OwnerFilterType.NONE
-    )
+    if (this.selectionModel.includeUsers?.length) {
+      this.selectionModel.ownerFilter = OwnerFilterType.OTHERS
+    } else {
+      this.selectionModel.ownerFilter = OwnerFilterType.NONE
+    }
     this.onChange()
   }
 

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

@@ -1209,53 +1209,24 @@ describe('DocumentDetailComponent', () => {
     expect(fixture.debugElement.queryAll(By.css('textarea.rtl'))).not.toBeNull()
   })
 
-  it('should display built-in pdf viewer if not disabled', async () => {
+  it('should display built-in pdf viewer if not disabled', () => {
     initNormally()
-    component.document.update((document) => ({
-      ...document,
-      archived_file_name: 'file.pdf',
-    }))
+    component.document().archived_file_name = 'file.pdf'
     settingsService.set(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER, false)
     expect(component.useNativePdfViewer).toBeFalsy()
-    await fixture.whenStable()
+    fixture.detectChanges()
     expect(fixture.debugElement.query(By.css('pngx-pdf-viewer'))).not.toBeNull()
   })
 
   it('should display native pdf viewer if enabled', () => {
     initNormally()
-    component.document.update((document) => ({
-      ...document,
-      archived_file_name: 'file.pdf',
-    }))
+    component.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 }))
@@ -1473,35 +1444,6 @@ describe('DocumentDetailComponent', () => {
     })
   })
 
-  it('should not automatically get suggestions if auto-suggest is disabled', () => {
-    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST, false)
-    const suggestionsSpy = jest.spyOn(documentService, 'getSuggestions')
-    suggestionsSpy.mockReturnValue(of({ tags: [42] }))
-    initNormally()
-    expect(suggestionsSpy).not.toHaveBeenCalled()
-
-    // still available on demand
-    component.getSuggestions()
-    expect(suggestionsSpy).toHaveBeenCalled()
-  })
-
-  it('should not automatically get AI suggestions if auto-suggest is disabled', () => {
-    settingsService.set(SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST, false)
-    const getSetting = settingsService.get.bind(settingsService)
-    jest
-      .spyOn(settingsService, 'get')
-      .mockImplementation((key) =>
-        key === SETTINGS_KEYS.AI_ENABLED ? true : getSetting(key)
-      )
-    const aiSuggestionsSpy = jest.spyOn(documentService, 'getAiSuggestions')
-    aiSuggestionsSpy.mockReturnValue(of({ tags: [42] }))
-    initNormally()
-    expect(aiSuggestionsSpy).not.toHaveBeenCalled()
-
-    component.getSuggestions()
-    expect(aiSuggestionsSpy).toHaveBeenCalled()
-  })
-
   it('should reset the suggestions loading state if the document changes mid-request', () => {
     const getSetting = settingsService.get.bind(settingsService)
     jest
@@ -1743,10 +1685,7 @@ describe('DocumentDetailComponent', () => {
 
   it('should change preview element by render type', () => {
     initNormally()
-    component.document.update((document) => ({
-      ...document,
-      archived_file_name: 'file.pdf',
-    }))
+    component.document().archived_file_name = 'file.pdf'
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.PDF
@@ -1755,11 +1694,8 @@ describe('DocumentDetailComponent', () => {
       fixture.debugElement.query(By.css('pdf-viewer-container'))
     ).not.toBeUndefined()
 
-    component.document.update((document) => ({
-      ...document,
-      archived_file_name: undefined,
-      mime_type: 'text/plain',
-    }))
+    component.document().archived_file_name = undefined
+    component.document().mime_type = 'text/plain'
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Text
@@ -1768,10 +1704,7 @@ describe('DocumentDetailComponent', () => {
       fixture.debugElement.query(By.css('div.preview-sticky'))
     ).not.toBeUndefined()
 
-    component.document.update((document) => ({
-      ...document,
-      mime_type: 'image/jpeg',
-    }))
+    component.document().mime_type = 'image/jpeg'
     fixture.detectChanges()
     expect(component.archiveContentRenderType).toEqual(
       component.ContentRenderType.Image
@@ -1779,12 +1712,9 @@ describe('DocumentDetailComponent', () => {
     expect(
       fixture.debugElement.query(By.css('.preview-sticky img'))
     ).not.toBeUndefined()
-    component.document.update((document) => ({
-      ...document,
-      mime_type:
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    }))
-    fixture.detectChanges()
+    ;((component.document().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,22 +227,6 @@ 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 autoSuggestSetting = this.settings.getSignal<boolean>(
-    SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST
-  )
-  private readonly hiddenFieldsSetting = this.settings.getSignal<
-    DocumentDetailFieldID[]
-  >(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
 
   @ViewChild('inputTitle')
   titleInput: TextComponent
@@ -349,7 +333,8 @@ export class DocumentDetailComponent
   }
 
   get useNativePdfViewer(): boolean {
-    return this.useNativePdfViewerSetting()
+    this.settings.trackChanges()
+    return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
   }
 
   get isMobile(): boolean {
@@ -357,14 +342,12 @@ export class DocumentDetailComponent
   }
 
   get aiEnabled(): boolean {
-    return this.aiEnabledSetting()
-  }
-
-  get autoSuggest(): boolean {
-    return this.autoSuggestSetting()
+    this.settings.trackChanges()
+    return this.settings.get(SETTINGS_KEYS.AI_ENABLED)
   }
 
   get archiveContentRenderType(): ContentRenderType {
+    this.settings.trackChanges()
     const hasArchiveVersion =
       this.metadata()?.has_archive_version ??
       !!this.document()?.archived_file_name
@@ -376,17 +359,22 @@ export class DocumentDetailComponent
   }
 
   get originalContentRenderType(): ContentRenderType {
+    this.settings.trackChanges()
     return this.getRenderType(
       this.metadata()?.original_mime_type || this.document()?.mime_type
     )
   }
 
   get showThumbnailOverlay(): boolean {
-    return this.showThumbnailOverlaySetting()
+    this.settings.trackChanges()
+    return this.settings.get(SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL)
   }
 
   isFieldHidden(fieldId: DocumentDetailFieldID): boolean {
-    return this.hiddenFieldsSetting().includes(fieldId)
+    this.settings.trackChanges()
+    return this.settings
+      .get(SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS)
+      .includes(fieldId)
   }
 
   private getRenderType(mimeType: string): ContentRenderType {
@@ -911,7 +899,6 @@ export class DocumentDetailComponent
     this.updateFormForCustomFields()
     this.loadMetadataForSelectedVersion()
     if (
-      this.autoSuggest &&
       this.permissionsService.currentUserHasObjectPermissions(
         PermissionAction.Change,
         doc

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

@@ -14,7 +14,7 @@
   </div>
   <div class="d-none d-sm-flex flex-fill me-3">
     <div class="input-group input-group-sm">
-      <span class="input-group-text bg-transparent border-0" i18n>Select:</span>
+      <span class="input-group-text border-0" i18n>Select:</span>
     </div>
     <div class="btn-group btn-group-sm flex-nowrap">
       @if (list.hasSelection) {
@@ -116,7 +116,7 @@
 
 </pngx-page-header>
 
-<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body rounded shadow-sm">
+<div class="row sticky-top py-3 mt-n2 mt-md-n3 bg-body">
   <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,8 +121,6 @@ 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
@@ -576,7 +574,8 @@ export class DocumentListComponent
   }
 
   get notesEnabled(): boolean {
-    return this.notesEnabledSetting()
+    this.settingsService.trackChanges()
+    return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
   }
 
   resetFilters() {

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

@@ -621,43 +621,6 @@ 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 = [
@@ -1071,51 +1034,8 @@ 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 = [
@@ -1124,38 +1044,15 @@ describe('FilterEditorComponent', () => {
         value: '100',
       },
     ]
-    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
       OwnerFilterType.SELF
     )
-    expect(component.permissionsSelectionModel.hideUnowned()).toBeFalsy()
-    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()
+    expect(component.permissionsSelectionModel.hideUnowned).toBeFalsy()
+    expect(component.permissionsSelectionModel.userID).toEqual(100)
   })
 
   it('should ingest filter rules for owner is others', () => {
-    expect(component.permissionsSelectionModel.ownerFilter()).toEqual(
+    expect(component.permissionsSelectionModel.ownerFilter).toEqual(
       OwnerFilterType.NONE
     )
     component.filterRules = [
@@ -1164,14 +1061,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 = [
@@ -1180,14 +1077,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 = [
@@ -1196,10 +1093,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', () => {
@@ -1209,14 +1106,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', () => {
@@ -1226,7 +1123,7 @@ describe('FilterEditorComponent', () => {
         value: '2',
       },
     ]
-    expect(component.permissionsSelectionModel.userID()).toEqual(2)
+    expect(component.permissionsSelectionModel.userID).toEqual(2)
   })
 
   // GET filterRules
@@ -1992,10 +1889,7 @@ describe('FilterEditorComponent', () => {
         value: '1',
       },
     ])
-    component.permissionsSelectionModel.excludeUsers.update((users) => [
-      ...users,
-      2,
-    ])
+    component.permissionsSelectionModel.excludeUsers.push(2)
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {
@@ -2045,11 +1939,8 @@ describe('FilterEditorComponent', () => {
     // TODO: mock input in code
     // userSelect.query(By.css('input')).nativeElement.value = '3'
     // userSelect.triggerEventHandler('change')
-    component.permissionsSelectionModel.ownerFilter.set(OwnerFilterType.OTHERS)
-    component.permissionsSelectionModel.includeUsers.update((users) => [
-      ...users,
-      3,
-    ])
+    component.permissionsSelectionModel.ownerFilter = OwnerFilterType.OTHERS
+    component.permissionsSelectionModel.includeUsers.push(3)
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {
@@ -2069,7 +1960,7 @@ describe('FilterEditorComponent', () => {
     ownerToggle.nativeElement.checked = true
     // ownerToggle.triggerEventHandler('change')
     // TODO: ngModel isn't doing this here
-    component.permissionsSelectionModel.hideUnowned.set(true)
+    component.permissionsSelectionModel.hideUnowned = true
     fixture.detectChanges()
     expect(component.filterRules).toEqual([
       {

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

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

@@ -61,7 +61,7 @@
           </div>
           <div class="col">
             <label class="form-label" for="display_mode_{{view.id}}" i18n>Display as</label>
-            <select class="form-select form-control" formControlName="display_mode">
+            <select class="form-select" formControlName="display_mode">
               <option [ngValue]="DisplayMode.TABLE" i18n>Table</option>
               <option [ngValue]="DisplayMode.SMALL_CARDS" i18n>Small Cards</option>
               <option [ngValue]="DisplayMode.LARGE_CARDS" i18n>Large Cards</option>

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

@@ -84,8 +84,6 @@ export const SETTINGS_KEYS = {
     'general-settings:document-editing:remove-inbox-tags',
   DOCUMENT_EDITING_OVERLAY_THUMBNAIL:
     'general-settings:document-editing:overlay-thumbnail',
-  DOCUMENT_EDITING_AUTO_SUGGEST:
-    'general-settings:document-editing:auto-suggest',
   DOCUMENT_DETAILS_HIDDEN_FIELDS:
     'general-settings:document-details:hidden-fields',
   SEARCH_DB_ONLY: 'general-settings:search:db-only',
@@ -302,11 +300,6 @@ export const SETTINGS: UiSetting[] = [
     type: 'boolean',
     default: true,
   },
-  {
-    key: SETTINGS_KEYS.DOCUMENT_EDITING_AUTO_SUGGEST,
-    type: 'boolean',
-    default: true,
-  },
   {
     key: SETTINGS_KEYS.DOCUMENT_DETAILS_HIDDEN_FIELDS,
     type: 'array',

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

@@ -210,48 +210,6 @@ 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,8 +2,6 @@ import { HttpClient } from '@angular/common/http'
 import {
   DOCUMENT,
   EventEmitter,
-  Signal,
-  computed,
   inject,
   Injectable,
   LOCALE_ID,
@@ -299,7 +297,6 @@ 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()
@@ -329,6 +326,10 @@ 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
@@ -338,7 +339,6 @@ 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,18 +594,6 @@ 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.e2e.ts

@@ -1,13 +0,0 @@
-export const DEFAULT_APP_TITLE = 'Paperless-ngx'
-
-export const environment = {
-  production: false,
-  apiBaseUrl: 'http://localhost:8001/api/',
-  apiVersion: '10',
-  appTitle: DEFAULT_APP_TITLE,
-  tag: 'e2e',
-  version: 'E2E',
-  webSocketHost: 'localhost:8001',
-  webSocketProtocol: 'ws:',
-  webSocketBaseUrl: '/ws/',
-}

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.1',
   webSocketHost: window.location.host,
   webSocketProtocol: window.location.protocol == 'https:' ? 'wss:' : 'ws:',
   webSocketBaseUrl: base_url.pathname + 'ws/',

src-ui/src/styles.scss

@@ -47,8 +47,6 @@ $grid-breakpoints: (
 );
 
 :root {
-  --bs-border-radius: #{$border-radius};
-
   @each $name, $value in $grid-breakpoints {
     --bs-breakpoint-#{$name}: #{$value};
   }
@@ -80,12 +78,19 @@ body {
 }
 
 .btn {
-  --bs-border-radius-sm: #{$border-radius};
+  --bs-btn-border-radius: .425rem;
+  --bs-border-radius-sm: .425rem;
   font-weight: 500;
 }
 
+.form-control,
+.form-select,
+.input-group-text {
+  border-radius: .425rem;
+}
+
 .pagination, .input-group {
-  --bs-border-radius-sm: #{$border-radius};
+  --bs-border-radius-sm: .425rem;
 }
 
 @media(min-width: 768px) {
@@ -684,6 +689,10 @@ table.table {
   --bs-toast-max-width: var(--pngx-toast-max-width);
 }
 
+.alert {
+  --bs-border-radius: .425rem;
+}
+
 .alert-primary {
   --bs-alert-color: var(--bs-primary);
   --bs-alert-bg: var(--pngx-primary-faded);
@@ -815,6 +824,8 @@ code {
   --bs-accordion-bg: var(--bs-light);
   --bs-accordion-active-color: var(--bs-primary);
   --bs-accordion-active-bg: var(--pngx-bg-alt);
+  --bs-border-radius: .425rem;
+  --bs-accordion-inner-border-radius: calc(.425rem - 1px);
 }
 
 .accordion-button::after {
@@ -838,7 +849,7 @@ code {
 }
 
 /* Animate items as they're being sorted. */
-.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview) {
+.cdk-drop-list-dragging .cdk-drag {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 

src-ui/src/theme.scss

@@ -103,8 +103,6 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h
   --bs-danger-rgb: 183, 22, 49;
   --bs-body-bg: #161618;
   --bs-body-bg-rgb: 22, 22, 24;
-  --bs-secondary-bg: var(--pngx-bg-disabled);
-  --bs-secondary-bg-rgb: 36, 37, 41;
   --bs-light: #1c1c1f;
   --bs-light-rgb: 28, 28, 31;
   --bs-info: var(--pngx-bg-alt);
@@ -113,7 +111,6 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h
   --bs-tertiary-bg: var(--pngx-bg-darker);
   --bs-dark-border-subtle: var(--pngx-bg-darker);
   --bs-border-color-translucent: rgba(0, 0, 0, .175); // override bs
-  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); // slightly darker than bs default
 
   .text-dark, .text-light {
     color: var(--bs-body-color) !important;

src/documents/caching.py

@@ -3,24 +3,25 @@ from __future__ import annotations
 import hashlib
 import logging
 import pickle
+import time
 import uuid
 from binascii import hexlify
 from collections import OrderedDict
 from dataclasses import dataclass
+from hashlib import sha256
 from typing import TYPE_CHECKING
 from typing import Any
 from typing import Final
+from uuid import uuid4
 
 from django.conf import settings
 from django.core.cache import cache
 from django.core.cache import caches
 
 from documents.models import Document
-from paperless.signed_pickle import SignedPickleError
-from paperless.signed_pickle import signed_pickle_dumps
-from paperless.signed_pickle import signed_pickle_loads
 
 if TYPE_CHECKING:
+    from django.contrib.auth.models import User
     from django.core.cache.backends.base import BaseCache
 
     from documents.classifier import DocumentClassifier
@@ -59,6 +60,9 @@ CLASSIFIER_MODIFIED_KEY: Final[str] = "classifier_modified"
 #          validated separately, so candidate-anchored 1001 results are stale
 LLM_CACHE_CLASSIFIER_VERSION: Final[int] = 1002
 
+# How often a request waiting on llm generation re-checks the cache
+LLM_SUGGESTION_POLL_INTERVAL: Final[float] = 0.5
+
 CACHE_1_MINUTE: Final[int] = 60
 CACHE_5_MINUTES: Final[int] = 5 * CACHE_1_MINUTE
 CACHE_50_MINUTES: Final[int] = 50 * CACHE_1_MINUTE
@@ -121,11 +125,9 @@ class StoredLRUCache(LRUCache):
         serialized_data = self._backend.get(self._backend_key)
         try:
             self._data = (
-                signed_pickle_loads(serialized_data)
-                if serialized_data
-                else OrderedDict()
+                pickle.loads(serialized_data) if serialized_data else OrderedDict()
             )
-        except (SignedPickleError, pickle.PickleError):
+        except pickle.PickleError:
             logger.warning(
                 "Cache exists in backend but could not be read (possibly invalid format)",
             )
@@ -137,7 +139,7 @@ class StoredLRUCache(LRUCache):
         """
         self._backend.set(
             self._backend_key,
-            signed_pickle_dumps(self._data),
+            pickle.dumps(self._data),
             self.backend_ttl,
         )
 
@@ -262,6 +264,68 @@ def get_llm_suggestion_cache(
     return None
 
 
+def retrieve_llm_suggestions(
+    document: Document,
+    user: User | None,
+    output_language: str | None,
+    *,
+    backend: str,
+    lock_timeout: int,
+) -> dict:
+    """Return cached LLM suggestions, generating them once across workers."""
+    # Lazy import to avoid pulling in the whole AI stuff
+    from paperless_ai.ai_classifier import get_ai_document_classification
+    from paperless_ai.exceptions import LLMTimeoutError
+
+    lock_key = (
+        f"{get_suggestion_cache_key(document.pk)}_llm_lock_"
+        f"{sha256(backend.encode()).hexdigest()}"
+    )
+    waited = False
+
+    while True:
+        cached = get_llm_suggestion_cache(document.pk, backend=backend)
+        if cached is not None:
+            refresh_suggestions_cache(document.pk)
+            return cached.suggestions
+
+        lock_token = uuid4().hex
+        if cache.add(lock_key, lock_token, lock_timeout):
+            if waited:
+                # The generation we were waiting on has ended without caching
+                # anything so it either failed or outlived its lock. Give up
+                # rather than re-running it
+                cache.delete(lock_key)
+                raise LLMTimeoutError
+
+            try:
+                # The cache may have been populated while acquiring the lock.
+                cached = get_llm_suggestion_cache(document.pk, backend=backend)
+                if cached is not None:
+                    refresh_suggestions_cache(document.pk)
+                    return cached.suggestions
+
+                suggestions = get_ai_document_classification(
+                    document,
+                    user,
+                    output_language,
+                )
+                set_llm_suggestions_cache(
+                    document.pk,
+                    suggestions,
+                    backend=backend,
+                )
+                return suggestions
+            finally:
+                # Don't remove lock if this one expired while generation was still running
+                if cache.get(lock_key) == lock_token:
+                    cache.delete(lock_key)
+
+        waited = True
+        # Another worker is generating suggestions, poll to avoid another LLM request
+        time.sleep(LLM_SUGGESTION_POLL_INTERVAL)
+
+
 def set_llm_suggestions_cache(
     document_id: int,
     suggestions: dict,

src/documents/classifier.py

@@ -28,9 +28,6 @@ from documents.caching import CLASSIFIER_VERSION_KEY
 from documents.caching import StoredLRUCache
 from documents.models import Document
 from documents.models import MatchingModel
-from paperless.signed_pickle import SignedPickleError
-from paperless.signed_pickle import signed_pickle_dumps
-from paperless.signed_pickle import signed_pickle_loads
 
 logger = logging.getLogger("paperless.classifier")
 
@@ -530,17 +527,10 @@ class DocumentClassifier:
         serialized_result = read_cache.get(key)
         if serialized_result is None:
             result = self.data_vectorizer.transform([self.preprocess_content(content)])
-            read_cache.set(key, signed_pickle_dumps(result), CACHE_5_MINUTES)
+            read_cache.set(key, pickle.dumps(result), CACHE_5_MINUTES)
         else:
-            try:
-                result = signed_pickle_loads(serialized_result)
-            except SignedPickleError:
-                result = self.data_vectorizer.transform(
-                    [self.preprocess_content(content)],
-                )
-                read_cache.set(key, signed_pickle_dumps(result), CACHE_5_MINUTES)
-            else:
-                read_cache.touch(key, CACHE_5_MINUTES)
+            read_cache.touch(key, CACHE_5_MINUTES)
+            result = pickle.loads(serialized_result)
         return result
 
     def predict_correspondent(self, content: str) -> int | None:

src/documents/consumer.py

@@ -25,7 +25,6 @@ from documents.data_models import DocumentMetadataOverrides
 from documents.file_handling import create_source_path_directory
 from documents.file_handling import generate_filename
 from documents.file_handling import generate_unique_filename
-from documents.file_handling import validate_path_in_root
 from documents.loggers import LoggingMixin
 from documents.models import Correspondent
 from documents.models import CustomField
@@ -696,10 +695,6 @@ class ConsumerPlugin(
                                     use_format=False,
                                 )
                             document.filename = generated_filename
-                            validate_path_in_root(
-                                document.source_path,
-                                settings.ORIGINALS_DIR,
-                            )
                             create_source_path_directory(document.source_path)
 
                             self._write(
@@ -732,10 +727,6 @@ class ConsumerPlugin(
                                         use_format=False,
                                     )
                                 document.archive_filename = generated_archive_filename
-                                validate_path_in_root(
-                                    document.archive_path,
-                                    settings.ARCHIVE_DIR,
-                                )
                                 create_source_path_directory(document.archive_path)
                                 self._write(
                                     archive_path,

src/documents/file_handling.py

@@ -1,33 +1,12 @@
-import logging
 import os
 from pathlib import Path
 
 from django.conf import settings
 
 from documents.models import Document
-from documents.templating.filepath import is_safe_relative_path
 from documents.templating.filepath import validate_filepath_template_and_render
 from documents.templating.utils import convert_format_str_to_template_format
 
-logger = logging.getLogger("paperless.filehandling")
-
-
-class UnsafeFilePathError(Exception):
-    """
-    Raised when a path generated for a document would land outside of its root.
-    """
-
-
-def validate_path_in_root(path: Path, root: Path) -> None:
-    """
-    Ensures the given absolute path is contained within root, the
-    equivalent guard for the later move.
-    """
-    if not path.resolve().is_relative_to(root.resolve()):
-        msg = f"Refusing to write file outside of root {root}: {path}."
-        logger.warning(msg)
-        raise UnsafeFilePathError(msg)
-
 
 def create_source_path_directory(source_path: Path) -> None:
     source_path.parent.mkdir(parents=True, exist_ok=True)
@@ -142,14 +121,6 @@ def format_filename(document: Document, template_str: str) -> str | None:
         "none",
     )  # backward compatibility
 
-    # Validate again after remove none
-    if not is_safe_relative_path(rendered_filename):
-        logger.warning(
-            "Filename became unsafe after placeholder removal, "
-            "falling back to default naming",
-        )
-        return None
-
     return rendered_filename
 
 

src/documents/management/commands/document_consumer.py

@@ -314,7 +314,7 @@ def _consume_file(
     consumption_dir: Path,
     *,
     subdirs_as_tags: bool,
-) -> bool:
+) -> None:
     """
     Queue a file for consumption.
 
@@ -322,20 +322,15 @@ def _consume_file(
         filepath: Path to the file to consume.
         consumption_dir: Base consumption directory.
         subdirs_as_tags: Whether to create tags from subdirectory names.
-
-    Returns:
-        True if the file was successfully handed to Celery, False otherwise.
-        Callers must not record the file as queued on failure, or the rescan
-        will never retry it.
     """
     # Verify file still exists and is accessible
     try:
         if not filepath.is_file():
             logger.debug(f"Not consuming {filepath}: not a file or doesn't exist")
-            return False
+            return
     except OSError as e:
         logger.warning(f"Not consuming {filepath}: {e}")
-        return False
+        return
 
     # Get tags from path if configured
     tag_ids: list[int] | None = None
@@ -360,9 +355,6 @@ def _consume_file(
         )
     except Exception:
         logger.exception(f"Error while queuing document {filepath}")
-        return False
-
-    return True
 
 
 class Command(BaseCommand):
@@ -500,12 +492,12 @@ class Command(BaseCommand):
             if not consumer_filter(Change.added, str(filepath)):
                 continue
 
-            if _consume_file(
+            _consume_file(
                 filepath=filepath,
                 consumption_dir=directory,
                 subdirs_as_tags=subdirs_as_tags,
-            ):
-                queued.add(filepath.resolve())
+            )
+            queued.add(filepath.resolve())
 
         return queued
 
@@ -659,16 +651,14 @@ class Command(BaseCommand):
 
                     # Check for stable files
                     for stable_path in tracker.get_stable_files():
-                        # Only remember files that were actually queued, so the
-                        # rescan does not re-queue them while the consume task
-                        # has yet to remove them from disk, but does retry a
-                        # failed publish instead of stranding it
-                        if _consume_file(
+                        _consume_file(
                             filepath=stable_path,
                             consumption_dir=directory,
                             subdirs_as_tags=subdirs_as_tags,
-                        ):
-                            queued.add(stable_path)
+                        )
+                        # Remember it so the rescan does not re-queue it while
+                        # the consume task has yet to remove it from disk
+                        queued.add(stable_path)
 
                     # Exit watch loop to reconfigure timeout
                     break