Just save this

[ci skip]

.codecov.yml

@@ -14,6 +14,9 @@ flag_management:
 # codecov will only comment if coverage changes
 comment:
   require_changes: true
+  # https://docs.codecov.com/docs/javascript-bundle-analysis
+  require_bundle_changes: true
+  bundle_change_threshold: "50Kb"
 coverage:
   status:
     project:
@@ -22,7 +25,12 @@ coverage:
         threshold: 1%
     patch:
       default:
-        # For the changed lines only, target 75% covered, but
+        # For the changed lines only, target 100% covered, but
-        # allow as low as 50%
+        # allow as low as 75%
-        target: 75%
+        target: 100%
         threshold: 25%
+# https://docs.codecov.com/docs/javascript-bundle-analysis
+bundle_analysis:
+  # Fail if the bundle size increases by more than 1MB
+  warning_threshold: "1MB"
+  status: true

.devcontainer/README.md

@@ -1,117 +0,0 @@
-# Paperless NGX Development Environment
-
-## Overview
-
-Welcome to the Paperless NGX development environment! This setup uses VSCode DevContainers to provide a consistent and seamless development experience.
-
-### What are DevContainers?
-
-DevContainers are a feature in VSCode that allows you to develop within a Docker container. This ensures that your development environment is consistent across different machines and setups. By defining a containerized environment, you can eliminate the "works on my machine" problem.
-
-### Advantages of DevContainers
-
-- **Consistency**: Same environment for all developers.
-- **Isolation**: Separate development environment from your local machine.
-- **Reproducibility**: Easily recreate the environment on any machine.
-- **Pre-configured Tools**: Include all necessary tools and dependencies in the container.
-
-## DevContainer Setup
-
-The DevContainer configuration provides up all the necessary services for Paperless NGX, including:
-
-- Redis
-- Gotenberg
-- Tika
-
-Data is stored using Docker volumes to ensure persistence across container restarts.
-
-## Configuration Files
-
-The setup includes debugging configurations (`launch.json`) and tasks (`tasks.json`) to help you manage and debug various parts of the project:
-
-- **Backend Debugging:**
-  - `manage.py runserver`
-  - `manage.py document-consumer`
-  - `celery`
-- **Maintenance Tasks:**
-  - Create superuser
-  - Run migrations
-  - Recreate virtual environment (`.venv` with pipenv)
-  - Compile frontend assets
-
-## Getting Started
-
-### Step 1: Running the DevContainer
-
-To start the DevContainer:
-
-1. Open VSCode.
-2. Open the project folder.
-3. Open the command palette:
-   - **Windows/Linux**: `Ctrl+Shift+P`
-   - **Mac**: `Cmd+Shift+P`
-4. Type and select `Dev Containers: Rebuild and Reopen in Container`.
-
-VSCode will build and start the DevContainer environment.
-
-### Step 2: Initial Setup
-
-Once the DevContainer is up and running, perform the following steps:
-
-1. **Compile Frontend Assets**:
-
-   - Open the command palette:
-     - **Windows/Linux**: `Ctrl+Shift+P`
-     - **Mac**: `Cmd+Shift+P`
-   - Select `Tasks: Run Task`.
-   - Choose `Frontend Compile`.
-
-2. **Run Database Migrations**:
-
-   - Open the command palette:
-     - **Windows/Linux**: `Ctrl+Shift+P`
-     - **Mac**: `Cmd+Shift+P`
-   - Select `Tasks: Run Task`.
-   - Choose `Migrate Database`.
-
-3. **Create Superuser**:
-   - Open the command palette:
-     - **Windows/Linux**: `Ctrl+Shift+P`
-     - **Mac**: `Cmd+Shift+P`
-   - Select `Tasks: Run Task`.
-   - Choose `Create Superuser`.
-
-### Debugging and Running Services
-
-You can start and debug backend services either as debugging sessions via `launch.json` or as tasks.
-
-#### Using `launch.json`:
-
-1. Press `F5` or go to the **Run and Debug** view in VSCode.
-2. Select the desired configuration:
-   - `Runserver`
-   - `Document Consumer`
-   - `Celery`
-
-#### Using Tasks:
-
-1. Open the command palette:
-   - **Windows/Linux**: `Ctrl+Shift+P`
-   - **Mac**: `Cmd+Shift+P`
-2. Select `Tasks: Run Task`.
-3. Choose the desired task:
-   - `Runserver`
-   - `Document Consumer`
-   - `Celery`
-
-### Additional Maintenance Tasks
-
-Additional tasks are available for common maintenance operations:
-
-- **Recreate .venv**: For setting up the virtual environment using pipenv.
-- **Migrate Database**: To apply database migrations.
-- **Create Superuser**: To create an admin user for the application.
-
-## Let's Get Started!
-
-Follow the steps above to get your development environment up and running. Happy coding!

.devcontainer/devcontainer.json

@@ -3,13 +3,25 @@
     "dockerComposeFile": "docker-compose.devcontainer.sqlite-tika.yml",
     "service": "paperless-development",
     "workspaceFolder": "/usr/src/paperless/paperless-ngx",
-    "postCreateCommand": "/bin/bash -c pre-commit install && pipenv install --dev",
+    "postCreateCommand": "pipenv install --dev && pipenv run pre-commit install",
     "customizations": {
         "vscode": {
           "extensions": [
             "mhutchie.git-graph",
-              "ms-python.python"
+            "ms-python.python",
-            ]
+            "ms-vscode.js-debug-nightly",
+            "eamodio.gitlens",
+            "yzhang.markdown-all-in-one"
+          ],
+          "settings": {
+            "python.defaultInterpreterPath": "/usr/src/paperless/paperless-ngx/.venv/bin/python",
+            "python.pythonPath": "/usr/src/paperless/paperless-ngx/.venv/bin/python",
+            "python.terminal.activateEnvInCurrentTerminal": true,
+            "editor.formatOnPaste": false,
+            "editor.formatOnSave": true,
+            "editor.formatOnType": true,
+            "files.trimTrailingWhitespace": true
+          }
         }
       },
       "remoteUser": "paperless"

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

@@ -27,7 +27,7 @@ services:
     image: docker.io/library/redis:7
     restart: unless-stopped
     volumes:
-      - redisdata:/data
+      - ./redisdata:/data
 
   # No ports need to be exposed; the VSCode DevContainer plugin manages them.
   paperless-development:
@@ -43,14 +43,16 @@ services:
     volumes:
       - ..:/usr/src/paperless/paperless-ngx:delegated
       - ../.devcontainer/vscode:/usr/src/paperless/paperless-ngx/.vscode:delegated # VSCode config files
-      - pipenv:/usr/src/paperless/paperless-ngx/.venv # Pipenv environment persisted in volume
+      - pipenv:/usr/src/paperless/paperless-ngx/.venv
       - /usr/src/paperless/paperless-ngx/src/documents/static/frontend # Static frontend files exist only in container
       - /usr/src/paperless/paperless-ngx/src/.pytest_cache
       - /usr/src/paperless/paperless-ngx/.ruff_cache
       - /usr/src/paperless/paperless-ngx/htmlcov
       - /usr/src/paperless/paperless-ngx/.coverage
-      - data:/usr/src/paperless/paperless-ngx/data
+      - ./data:/usr/src/paperless/paperless-ngx/data
-      - media:/usr/src/paperless/paperless-ngx/media
+      - ./media:/usr/src/paperless/paperless-ngx/media
+      - ./consume:/usr/src/paperless/paperless-ngx/consume
+      - ~/.gitconfig:/usr/src/paperless/.gitconfig:ro
     environment:
       PAPERLESS_REDIS: redis://broker:6379
       PAPERLESS_TIKA_ENABLED: 1
@@ -78,7 +80,4 @@ services:
     restart: unless-stopped
 
 volumes:
-  data:
-  media:
-  redisdata:
   pipenv:

.devcontainer/vscode/launch.json

@@ -2,42 +2,57 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "manage.py runserver",
+            "name": "Chrome: Debug Angular Frontend",
+						"description": "Debug the Angular Dev Frontend in Chrome",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}/src-ui",
+            "preLaunchTask": "Start: Frontend Angular"
+        },
+        {
+            "name": "Debug: Backend Server (manage.py runserver)",
+						"description": "Debug the Django Backend Server",
             "type": "python",
             "request": "launch",
             "program": "${workspaceFolder}/src/manage.py",
-            "console": "integratedTerminal",
+            "args": [
-            "justMyCode": true,
+                "runserver"
-            "args": ["runserver"],
+            ],
-            "django": true
+            "django": true,
-        },
-        {
-            "name": "manage.py document_consumer",
-            "type": "python",
-            "request": "launch",
-            "program": "${workspaceFolder}/src/manage.py",
-            "console": "integratedTerminal",
-            "justMyCode": true,
-            "args": ["document_consumer"],
-            "django": true
-        },
-        {
-            "name": "celery",
-            "type": "python",
-            "cwd": "${workspaceFolder}/src",
-            "request": "launch",
-            "module": "celery",
             "console": "integratedTerminal",
             "env": {
                 "PYTHONPATH": "${workspaceFolder}/src"
             },
+            "python": "${workspaceFolder}/.venv/bin/python"
+        },
+        {
+            "name": "Debug: Consumer Service (manage.py document_consumer)",
+						"description": "Debug the Consumer Service which processes files from a directory",
+            "type": "python",
+            "request": "launch",
+            "program": "${workspaceFolder}/src/manage.py",
             "args": [
-                "-A",
+                "document_consumer"
-                "paperless",
+            ],
-                "worker",
+            "django": true,
-                "-l",
+            "console": "integratedTerminal",
-                "DEBUG"
+            "env": {
-            ]
+                "PYTHONPATH": "${workspaceFolder}/src"
+            },
+            "python": "${workspaceFolder}/.venv/bin/python"
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Debug: FullStack",
+						"description": "Debug run the Angular dev frontend, Django backend, and consumer service",
+            "configurations": [
+                "Chrome: Debug Angular Frontend",
+                "Debug: Backend Server (manage.py runserver)",
+                "Debug: Consumer Service (manage.py document_consumer)"
+            ],
+            "preLaunchTask": "Start: Celery Worker"
         }
     ]
 }

.devcontainer/vscode/tasks.json

@@ -2,7 +2,64 @@
 	"version": "2.0.0",
 	"tasks": [
 		{
-		"label": "manage.py document_consumer",
+			"label": "Start: Celery Worker",
+			"description": "Start the Celery Worker which processes background and consume tasks",
+			"type": "shell",
+			"command": "pipenv run celery --app paperless worker -l DEBUG",
+			"isBackground": true,
+			"options": {
+				"cwd": "${workspaceFolder}/src"
+			},
+			"problemMatcher": [
+				{
+					"owner": "custom",
+					"pattern": [
+						{
+							"regexp": ".",
+							"file": 1,
+							"location": 2,
+							"message": 3
+						}
+					],
+					"background": {
+						"activeOnStart": true,
+						"beginsPattern": "celery.*",
+						"endsPattern": "ready"
+					}
+				}
+			]
+		},
+		{
+			"label": "Start: Frontend Angular",
+			"description": "Start the Frontend Angular Dev Server",
+			"type": "shell",
+			"command": "npm start",
+			"isBackground": true,
+			"options": {
+				"cwd": "${workspaceFolder}/src-ui"
+			},
+			"problemMatcher": [
+				{
+					"owner": "custom",
+					"pattern": [
+						{
+							"regexp": ".",
+							"file": 1,
+							"location": 2,
+							"message": 3
+						}
+					],
+					"background": {
+						"activeOnStart": true,
+						"beginsPattern": ".*",
+						"endsPattern": "Compiled successfully"
+					}
+				}
+			]
+		},
+		{
+			"label": "Start: Consumer Service (manage.py document_consumer)",
+			"description": "Start the Consumer Service which processes files from a directory",
 			"type": "shell",
 			"command": "pipenv run python manage.py document_consumer",
 			"group": "build",
@@ -18,10 +75,10 @@
 			"options": {
 				"cwd": "${workspaceFolder}/src"
 			}
-
 		},
 		{
-			"label": "manage.py runserver",
+			"label": "Start: Backend Server (manage.py runserver)",
+			"description": "Start the Backend Server which serves the Django API and the compiled Angular frontend",
 			"type": "shell",
 			"command": "pipenv run python manage.py runserver",
 			"group": "build",
@@ -37,10 +94,10 @@
 			"options": {
 				"cwd": "${workspaceFolder}/src"
 			}
-
 		},
 		{
 			"label": "Maintenance: manage.py migrate",
+			"description": "Apply database migrations",
 			"type": "shell",
 			"command": "pipenv run python manage.py migrate",
 			"group": "none",
@@ -57,8 +114,28 @@
 				"cwd": "${workspaceFolder}/src"
 			}
 		},
+		{
+			"label": "Maintenance: Build Documentation",
+			"description": "Build the documentation with MkDocs",
+			"type": "shell",
+			"command": "pipenv run mkdocs build --config-file mkdocs.yml && pipenv run mkdocs serve",
+			"group": "none",
+			"presentation": {
+				"echo": true,
+				"reveal": "always",
+				"focus": true,
+				"panel": "shared",
+				"showReuseMessage": false,
+				"clear": true,
+				"revealProblems": "onProblem"
+			},
+			"options": {
+				"cwd": "${workspaceFolder}"
+			}
+		},
 		{
 			"label": "Maintenance: manage.py createsuperuser",
+			"description": "Create a superuser",
 			"type": "shell",
 			"command": "pipenv run python manage.py createsuperuser",
 			"group": "none",
@@ -75,26 +152,9 @@
 				"cwd": "${workspaceFolder}/src"
 			}
 		},
-	  {
-		"label": "compile frontend",
-		"type": "shell",
-		"command": "npm ci && ./node_modules/.bin/ng build --configuration production",
-		"group": "none",
-		"presentation": {
-			"echo": true,
-			"reveal": "always",
-			"focus": true,
-			"panel": "shared",
-			"showReuseMessage": false,
-			"clear": true,
-			"revealProblems": "onProblem"
-		},
-		"options": {
-			"cwd": "${workspaceFolder}/src-ui"
-		}
-	  },
 		{
 			"label": "Maintenance: recreate .venv",
+			"description": "Recreate the python virtual environment and install python dependencies",
 			"type": "shell",
 			"command": "rm -R -v .venv/* || pipenv install --dev",
 			"group": "none",
@@ -112,13 +172,21 @@
 			}
 		},
 		{
-		"label": "Celery Worker",
+			"label": "Maintenance: Install Frontend Dependencies",
-		"type": "shell",
+			"description": "Install frontend (npm) dependencies",
-		"command": "pipenv run celery --app paperless worker -l DEBUG",
+			"type": "npm",
-		"group": {
+			"script": "install",
-		  "kind": "build",
+			"path": "src-ui",
-		  "isDefault": true
+			"group": "clean",
+			"problemMatcher": [],
+			"detail": "install dependencies from package"
 		},
+		{
+			"description": "Clean install frontend dependencies and build the frontend for production",
+			"label": "Maintenance: Compile frontend for production",
+			"type": "shell",
+			"command": "npm ci && ./node_modules/.bin/ng build --configuration production",
+			"group": "none",
 			"presentation": {
 				"echo": true,
 				"reveal": "always",
@@ -129,8 +197,27 @@
 				"revealProblems": "onProblem"
 			},
 			"options": {
-			"cwd": "${workspaceFolder}/src"
+				"cwd": "${workspaceFolder}/src-ui"
-		}
 			}
+		},
+		{
+			"label": "Project Setup: Run all Init Tasks",
+			"description": "Runs all init tasks to setup the project including migrate the database, create a superuser and compile the frontend for production",
+			"dependsOrder": "sequence",
+			"dependsOn": [
+				"Maintenance: manage.py migrate",
+				"Maintenance: manage.py createsuperuser",
+				"Maintenance: Compile frontend for production"
+			]
+		},
+		{
+			"label": "Project Start: Run all Services",
+			"description": "Runs all services required to start the project including the Celery Worker, the Consumer Service and the Backend Server",
+			"dependsOn": [
+				"Start: Celery Worker",
+				"Start: Consumer Service (manage.py document_consumer)",
+				"Start: Backend Server (manage.py runserver)"
 			]
 		}
+	]
+}

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -98,7 +98,7 @@ body:
       label: Browser
       description: Which browser you are using, if relevant.
       placeholder: e.g. Chrome, Safari
-  - type: input
+  - type: textarea
     id: config-changes
     attributes:
       label: Configuration changes
@@ -110,6 +110,8 @@ body:
       options:
         - label: I believe this issue is a bug that affects all users of Paperless-ngx, not something specific to my installation.
           required: true
+        - label: This issue is not about the OCR or archive creation of a specific file(s). Otherwise, please see above regarding OCR tools.
+          required: true
         - label: I have already searched for relevant existing issues and discussions before opening this report.
           required: true
         - label: I have updated the title field above with a concise description.

.github/ISSUE_TEMPLATE/config.yml

@@ -2,10 +2,10 @@ blank_issues_enabled: false
 contact_links:
   - name: 🤔 Questions and Help
     url: https://github.com/paperless-ngx/paperless-ngx/discussions
-    about: This issue tracker is not for support questions. Please refer to our Discussions.
+    about: General questions or support for using Paperless-ngx.
   - name: 💬 Chat
     url: https://matrix.to/#/#paperlessngx:matrix.org
     about: Want to discuss Paperless-ngx with others? Check out our chat.
   - name: 🚀 Feature Request
     url: https://github.com/paperless-ngx/paperless-ngx/discussions/new?category=feature-requests
-    about: Remember to search for existing feature requests and "up-vote" any you like
+    about: Remember to search for existing feature requests and "up-vote" those that you like.

.github/workflows/ci.yml

@@ -16,9 +16,9 @@ on:
 env:
   # This is the version of pipenv all the steps will use
   # If changing this, change Dockerfile
-  DEFAULT_PIP_ENV_VERSION: "2024.0.1"
+  DEFAULT_PIP_ENV_VERSION: "2024.4.0"
   # This is the default version of Python to use in most steps which aren't specific
-  DEFAULT_PYTHON_VERSION: "3.10"
+  DEFAULT_PYTHON_VERSION: "3.11"
 
 jobs:
   pre-commit:
@@ -30,7 +30,7 @@ jobs:
       github.repository
 
     name: Linting Checks
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       -
         name: Checkout repository
@@ -46,7 +46,7 @@ jobs:
 
   documentation:
     name: "Build & Deploy Documentation"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     steps:
@@ -95,12 +95,12 @@ jobs:
 
   tests-backend:
     name: "Backend Tests (Python ${{ matrix.python-version }})"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     strategy:
       matrix:
-        python-version: ['3.9', '3.10', '3.11']
+        python-version: ['3.10', '3.11', '3.12']
       fail-fast: false
     steps:
       -
@@ -170,7 +170,7 @@ jobs:
 
   install-frontend-depedendencies:
     name: "Install Frontend Dependencies"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - pre-commit
     steps:
@@ -201,7 +201,7 @@ jobs:
 
   tests-frontend:
     name: "Frontend Tests (Node ${{ matrix.node-version }} - ${{ matrix.shard-index }}/${{ matrix.shard-count }})"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - install-frontend-depedendencies
     strategy:
@@ -260,8 +260,8 @@ jobs:
           retention-days: 7
 
   tests-coverage-upload:
-    name: "Upload Coverage"
+    name: "Upload to Codecov"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - tests-backend
       - tests-frontend
@@ -283,7 +283,7 @@ jobs:
           merge-multiple: true
       -
         name: Upload frontend coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           # not required for public repos, but intermittently fails otherwise
           token: ${{ secrets.CODECOV_TOKEN }}
@@ -299,17 +299,41 @@ jobs:
           path: src/
       -
         name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v5
         with:
           # not required for public repos, but intermittently fails otherwise
           token: ${{ secrets.CODECOV_TOKEN }}
           # future expansion
           flags: backend
           directory: src/
+      -
+        name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: 'npm'
+          cache-dependency-path: 'src-ui/package-lock.json'
+      -
+        name: Cache frontend dependencies
+        id: cache-frontend-deps
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.npm
+            ~/.cache
+          key: ${{ runner.os }}-frontenddeps-${{ hashFiles('src-ui/package-lock.json') }}
+      -
+        name: Re-link Angular cli
+        run: cd src-ui && npm link @angular/cli
+      -
+        name: Build frontend and upload analysis
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+        run: cd src-ui && ng build --configuration=production
 
   build-docker-image:
     name: Build Docker image for ${{ github.ref_name }}
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     if: github.event_name == 'push' && (startsWith(github.ref, 'refs/heads/feature-') || startsWith(github.ref, 'refs/heads/fix-') || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/beta' || contains(github.ref, 'beta.rc') || startsWith(github.ref, 'refs/tags/v'))
     concurrency:
       group: ${{ github.workflow }}-build-docker-image-${{ github.ref_name }}
@@ -382,7 +406,7 @@ jobs:
       -
         name: Login to Docker Hub
         uses: docker/login-action@v3
-        # Don't attempt to login is not pushing to Docker Hub
+        # Don't attempt to login if not pushing to Docker Hub
         if: steps.push-other-places.outputs.enable == 'true'
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -390,7 +414,7 @@ jobs:
       -
         name: Login to Quay.io
         uses: docker/login-action@v3
-        # Don't attempt to login is not pushing to Quay.io
+        # Don't attempt to login if not pushing to Quay.io
         if: steps.push-other-places.outputs.enable == 'true'
         with:
           registry: quay.io
@@ -437,7 +461,7 @@ jobs:
     needs:
       - build-docker-image
       - documentation
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       -
         name: Checkout
@@ -458,12 +482,6 @@ jobs:
         name: Install Python dependencies
         run: |
           pipenv --python ${{ steps.setup-python.outputs.python-version }} sync --dev
-      -
-        name: Patch whitenoise
-        run: |
-          curl --fail --silent --show-error --location --output 484.patch https://github.com/evansd/whitenoise/pull/484.patch
-          patch -d $(pipenv --venv)/lib/python3.10/site-packages --verbose -p2 < 484.patch
-          rm 484.patch
       -
         name: Install system dependencies
         run: |
@@ -551,7 +569,7 @@ jobs:
 
   publish-release:
     name: "Publish Release"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     outputs:
       prerelease: ${{ steps.get_version.outputs.prerelease }}
       changelog: ${{ steps.create-release.outputs.body }}
@@ -601,7 +619,7 @@ jobs:
 
   append-changelog:
     name: "Append Changelog"
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - publish-release
     if: needs.publish-release.outputs.prerelease == 'false'
@@ -631,7 +649,9 @@ jobs:
           git checkout ${{ needs.publish-release.outputs.version }}-changelog
           echo -e "# Changelog\n\n${{ needs.publish-release.outputs.changelog }}\n" > changelog-new.md
           echo "Manually linking usernames"
-          sed -i -r 's|@(.+?) \(\[#|[@\1](https://github.com/\1) ([#|ig' changelog-new.md
+          sed -i -r 's|@([a-zA-Z0-9_]+) \(\[#|[@\1](https://github.com/\1) ([#|g' changelog-new.md
+          echo "Removing unneeded comment tags"
+          sed -i -r 's|@<!---->|@|g' changelog-new.md
           CURRENT_CHANGELOG=`tail --lines +2 changelog.md`
           echo -e "$CURRENT_CHANGELOG" >> changelog-new.md
           mv changelog-new.md changelog.md

.github/workflows/cleanup-tags.yml

@@ -21,7 +21,7 @@ jobs:
   cleanup-images:
     name: Cleanup Image Tags for ${{ matrix.primary-name }}
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
       matrix:
@@ -33,7 +33,7 @@ jobs:
       -
         name: Clean temporary images
         if: "${{ env.TOKEN != '' }}"
-        uses: stumpylog/image-cleaner-action/ephemeral@v0.7.0
+        uses: stumpylog/image-cleaner-action/ephemeral@v0.9.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"
@@ -47,7 +47,7 @@ jobs:
   cleanup-untagged-images:
     name: Cleanup Untagged Images Tags for ${{ matrix.primary-name }}
     if: github.repository_owner == 'paperless-ngx'
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     needs:
       - cleanup-images
     strategy:
@@ -61,7 +61,7 @@ jobs:
       -
         name: Clean untagged images
         if: "${{ env.TOKEN != '' }}"
-        uses: stumpylog/image-cleaner-action/untagged@v0.7.0
+        uses: stumpylog/image-cleaner-action/untagged@v0.9.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ on:
 jobs:
   analyze:
     name: Analyze
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     permissions:
       actions: read
       contents: read

.github/workflows/crowdin.yml

@@ -15,7 +15,8 @@ on:
 jobs:
   synchronize-with-crowdin:
     name: Crowdin Sync
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
 
     steps:
     - name: Checkout

.github/workflows/project-actions.yml

@@ -15,7 +15,7 @@ permissions:
 jobs:
   pr_opened_or_reopened:
     name: pr_opened_or_reopened
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     permissions:
       # write permission is required for autolabeler
       pull-requests: write

.github/workflows/repo-maintenance.yml

@@ -16,7 +16,8 @@ concurrency:
 jobs:
   stale:
     name: 'Stale'
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/stale@v9
         with:
@@ -31,7 +32,8 @@ jobs:
             for your contributions. See our [contributing guidelines](https://github.com/paperless-ngx/paperless-ngx/blob/dev/CONTRIBUTING.md#automatic-repository-maintenance) for more details.
   lock-threads:
     name: 'Lock Old Threads'
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
     steps:
       - uses: dessant/lock-threads@v5
         with:
@@ -56,7 +58,8 @@ jobs:
             See our [contributing guidelines](https://github.com/paperless-ngx/paperless-ngx/blob/dev/CONTRIBUTING.md#automatic-repository-maintenance) for more details.
   close-answered-discussions:
     name: 'Close Answered Discussions'
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:
@@ -112,7 +115,8 @@ jobs:
             }
   close-outdated-discussions:
     name: 'Close Outdated Discussions'
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:
@@ -203,7 +207,8 @@ jobs:
             }
   close-unsupported-feature-requests:
     name: 'Close Unsupported Feature Requests'
-    runs-on: ubuntu-latest
+    if: github.repository_owner == 'paperless-ngx'
+    runs-on: ubuntu-24.04
     steps:
       - uses: actions/github-script@v7
         with:
@@ -212,15 +217,20 @@ jobs:
               return new Promise(resolve => setTimeout(resolve, ms));
             }
 
+            const CUTOFF_MAX_COUNT = 80;
             const CUTOFF_1_DAYS = 180;
             const CUTOFF_1_COUNT = 5;
             const CUTOFF_2_DAYS = 365;
-            const CUTOFF_2_COUNT = 10;
+            const CUTOFF_2_COUNT = 20;
+            const CUTOFF_3_DAYS = 730;
+            const CUTOFF_3_COUNT = 40;
 
             const cutoff1Date = new Date();
             cutoff1Date.setDate(cutoff1Date.getDate() - CUTOFF_1_DAYS);
             const cutoff2Date = new Date();
             cutoff2Date.setDate(cutoff2Date.getDate() - CUTOFF_2_DAYS);
+            const cutoff3Date = new Date();
+            cutoff3Date.setDate(cutoff3Date.getDate() - CUTOFF_3_DAYS);
 
             const query = `query(
                 $owner:String!,
@@ -250,9 +260,12 @@ jobs:
             const result = await github.graphql(query, variables);
 
             for (const discussion of result.repository.discussions.nodes) {
-              const discussionDate = new Date(discussion.updatedAt);
+              const discussionUpdatedDate = new Date(discussion.updatedAt);
-              if ((discussionDate < cutoff1Date && discussion.upvoteCount < CUTOFF_1_COUNT) ||
+              const discussionCreatedDate = new Date(discussion.createdAt);
-                  (discussionDate < cutoff2Date && discussion.upvoteCount < CUTOFF_2_COUNT)) {
+              if ((discussionUpdatedDate < cutoff1Date && discussion.upvoteCount < CUTOFF_MAX_COUNT) ||
+                  (discussionCreatedDate < cutoff1Date && discussion.upvoteCount < CUTOFF_1_COUNT) ||
+                  (discussionCreatedDate < cutoff2Date && discussion.upvoteCount < CUTOFF_2_COUNT) ||
+                  (discussionCreatedDate < cutoff3Date && discussion.upvoteCount < CUTOFF_3_COUNT)) {
                 console.log(`Closing discussion #${discussion.number} (${discussion.id}), last updated at ${discussion.updatedAt} with votes ${discussion.upvoteCount}`);
                 const addCommentMutation = `mutation($discussion:ID!, $body:String!) {
                   addDiscussionComment(input:{discussionId:$discussion, body:$body}) {

.gitignore

@@ -100,3 +100,9 @@ scripts/nuke
 
 # celery schedule file
 celerybeat-schedule*
+
+# ignore .devcontainer sub folders
+/.devcontainer/consume/
+/.devcontainer/data/
+/.devcontainer/media/
+/.devcontainer/redisdata/

.pre-commit-config.yaml

@@ -5,7 +5,7 @@
 repos:
   # General hooks
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.6.0
+    rev: v5.0.0
     hooks:
       - id: check-docstring-first
       - id: check-json
@@ -36,8 +36,9 @@ repos:
         exclude_types:
           - pofile
           - json
-  - repo: https://github.com/pre-commit/mirrors-prettier
+  # See https://github.com/prettier/prettier/issues/15742 for the fork reason
-    rev: 'v3.1.0'
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: 'v3.3.3'
     hooks:
       - id: prettier
         types_or:
@@ -45,9 +46,12 @@ repos:
           - ts
           - markdown
         exclude: "(^Pipfile\\.lock$)"
+        additional_dependencies:
+          - prettier@3.3.3
+          - 'prettier-plugin-organize-imports@4.1.0'
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: 'v0.5.2'
+    rev: v0.9.2
     hooks:
       - id: ruff
       - id: ruff-format
@@ -61,6 +65,8 @@ repos:
     rev: v6.2.1
     hooks:
       - id: beautysh
+        additional_dependencies:
+          - setuptools
         args:
           - "--tab"
   - repo: https://github.com/shellcheck-py/shellcheck-py

.prettierrc

@@ -1,16 +0,0 @@
-{
-    # https://prettier.io/docs/en/options.html#semicolons
-    "semi": false,
-    # https://prettier.io/docs/en/options.html#quotes
-    "singleQuote": true,
-    # https://prettier.io/docs/en/options.html#trailing-commas
-    "trailingComma": "es5",
-    "overrides": [
-        {
-            "files": ["index.md", "administration.md"],
-            "options": {
-                "tabWidth": 4
-            }
-        }
-    ]
-}

.prettierrc.js

@@ -0,0 +1,19 @@
+const config = {
+	// https://prettier.io/docs/en/options.html#semicolons
+	semi: false,
+	// https://prettier.io/docs/en/options.html#quotes
+	singleQuote: true,
+	// https://prettier.io/docs/en/options.html#trailing-commas
+	trailingComma: 'es5',
+	overrides: [
+		{
+			files: ['docs/*.md'],
+			options: {
+				tabWidth: 4,
+			},
+		},
+	],
+	plugins: [require('prettier-plugin-organize-imports')],
+}
+
+module.exports = config

.python-version

@@ -1 +1 @@
-3.9.19
+3.10.15

.ruff.toml

@@ -2,7 +2,7 @@ fix = true
 line-length = 88
 respect-gitignore = true
 src = ["src"]
-target-version = "py39"
+target-version = "py310"
 output-format = "grouped"
 show-fixes = true
 
@@ -31,17 +31,55 @@ extend-select = [
   "PLE",   # https://docs.astral.sh/ruff/rules/#pylint-pl
   "RUF",   # https://docs.astral.sh/ruff/rules/#ruff-specific-rules-ruf
   "FLY",   # https://docs.astral.sh/ruff/rules/#flynt-fly
+  "PTH",   # https://docs.astral.sh/ruff/rules/#flake8-use-pathlib-pth
 ]
-# TODO PTH https://docs.astral.sh/ruff/rules/#flake8-use-pathlib-pth
 ignore = ["DJ001", "SIM105", "RUF012"]
 
 [lint.per-file-ignores]
 ".github/scripts/*.py" = ["E501", "INP001", "SIM117"]
 "docker/wait-for-redis.py" = ["INP001", "T201"]
+"src/documents/consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/file_handling.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/document_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/management/commands/document_exporter.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/0012_auto_20160305_0040.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/0014_document_checksum.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/1003_mime_types.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/migrations/1012_fix_archive_files.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/models.py" = ["SIM115", "PTH"]  # TODO PTH Enable & remove
+"src/documents/parsers.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/signals/handlers.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tasks.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_app_config.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_bulk_download.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_api_documents.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_classifier.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_file_handling.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_consumer.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_exporter.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_management_thumbnails.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_archive_files.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_document_pages_count.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_migration_mime_type.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_sanity_check.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_tasks.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/tests/test_views.py" = ["PTH"]  # TODO Enable & remove
+"src/documents/views.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/checks.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/settings.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/tests/test_checks.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/urls.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless/views.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_mail/mail.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_mail/preprocessor.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tesseract/parsers.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tesseract/tests/test_parser.py" = ["RUF001", "PTH"]  # TODO PTH Enable & remove
+"src/paperless_tika/tests/test_live_tika.py" = ["PTH"]  # TODO Enable & remove
+"src/paperless_tika/tests/test_tika_parser.py" = ["PTH"]  # TODO Enable & remove
 "*/tests/*.py" = ["E501", "SIM117"]
 "*/migrations/*.py" = ["E501", "SIM", "T201"]
-"src/paperless_tesseract/tests/test_parser.py" = ["RUF001"]
-"src/documents/models.py" = ["SIM115"]
 
 [lint.isort]
 force-single-line = true

CONTRIBUTING.md

@@ -11,7 +11,7 @@ If you want to implement something big:
 
 ## Python
 
-Paperless supports python 3.9 - 3.11 at this time. We format Python code with [ruff](https://docs.astral.sh/ruff/formatter/).
+Paperless supports python 3.10 - 3.12 at this time. We format Python code with [ruff](https://docs.astral.sh/ruff/formatter/).
 
 ## Branches
 
@@ -147,7 +147,7 @@ community members. That said, in an effort to keep the repository organized and
 - Issues, pull requests and discussions that are closed will be locked after 30 days of inactivity.
 - Discussions with a marked answer will be automatically closed.
 - Discussions in the 'General' or 'Support' categories will be closed after 180 days of inactivity.
-- Feature requests that do not meet the following thresholds will be closed: 5 "up-votes" after 180 days of inactivity or 10 "up-votes" after 365 days.
+- Feature requests that do not meet the following thresholds will be closed: 180 days of inactivity, < 5 "up-votes" after 180 days, < 20 "up-votes" after 1 year or < 80 "up-votes" at 2 years.
 
 In all cases, threads can be re-opened by project maintainers and, of course, users can always create a new discussion for related concerns.
 Finally, remember that all information remains searchable and 'closed' feature requests can still serve as inspiration for new features.

Dockerfile

@@ -18,7 +18,7 @@ ARG PNGX_TAG_VERSION=
 # Add the tag to the environment file if its a tagged dev build
 RUN set -eux && \
 case "${PNGX_TAG_VERSION}" in \
-  dev|fix*|feature*) \
+  dev|beta|fix*|feature*) \
     sed -i -E "s/version: '([0-9\.]+)'/version: '\1 #${PNGX_TAG_VERSION}'/g" /src/src-ui/src/environments/environment.prod.ts \
     ;; \
 esac
@@ -31,7 +31,7 @@ RUN set -eux \
 # Comments:
 #  - pipenv dependencies are not left in the final image
 #  - pipenv can't touch the final image somehow
-FROM --platform=$BUILDPLATFORM docker.io/python:3.11-alpine AS pipenv-base
+FROM --platform=$BUILDPLATFORM docker.io/python:3.12-alpine AS pipenv-base
 
 WORKDIR /usr/src/pipenv
 
@@ -39,7 +39,7 @@ COPY Pipfile* ./
 
 RUN set -eux \
   && echo "Installing pipenv" \
-    && python3 -m pip install --no-cache-dir --upgrade pipenv==2024.0.1 \
+    && python3 -m pip install --no-cache-dir --upgrade pipenv==2024.4.0 \
   && echo "Generating requirement.txt" \
     && pipenv requirements > requirements.txt
 
@@ -47,7 +47,7 @@ RUN set -eux \
 # Purpose: The final image
 # Comments:
 #  - Don't leave anything extra in here
-FROM docker.io/python:3.11-slim-bookworm AS main-app
+FROM docker.io/python:3.12-slim-bookworm AS main-app
 
 LABEL org.opencontainers.image.authors="paperless-ngx team <hello@paperless-ngx.com>"
 LABEL org.opencontainers.image.documentation="https://docs.paperless-ngx.com/"
@@ -233,20 +233,16 @@ RUN --mount=type=cache,target=/root/.cache/pip/,id=pip-cache \
     && python3 -m pip install --no-cache-dir --upgrade wheel \
   && echo "Installing Python requirements" \
     && curl --fail --silent --show-error --location \
-    --output psycopg_c-3.2.1-cp311-cp311-linux_x86_64.whl \
+    --output psycopg_c-3.2.3-cp312-cp312-linux_x86_64.whl \
-    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.1/psycopg_c-3.2.1-cp311-cp311-linux_x86_64.whl \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.3/psycopg_c-3.2.3-cp312-cp312-linux_x86_64.whl \
     && curl --fail --silent --show-error --location \
-    --output psycopg_c-3.2.1-cp311-cp311-linux_aarch64.whl  \
+    --output psycopg_c-3.2.3-cp312-cp312-linux_aarch64.whl  \
-    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.1/psycopg_c-3.2.1-cp311-cp311-linux_aarch64.whl \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.3/psycopg_c-3.2.3-cp312-cp312-linux_aarch64.whl \
     && python3 -m pip install --default-timeout=1000 --find-links . --requirement requirements.txt \
-  && echo "Patching whitenoise for compression speedup" \
-    && curl --fail --silent --show-error --location --output 484.patch https://github.com/evansd/whitenoise/pull/484.patch \
-    && patch -d /usr/local/lib/python3.11/site-packages --verbose -p2 < 484.patch \
-    && rm 484.patch \
   && echo "Installing NLTK data" \
     && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" snowball_data \
     && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" stopwords \
-    && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" punkt \
+    && python3 -W ignore::RuntimeWarning -m nltk.downloader -d "/usr/share/nltk_data" punkt_tab \
   && echo "Cleaning up image" \
     && apt-get --yes purge ${BUILD_PACKAGES} \
     && apt-get --yes autoremove --purge \
@@ -275,6 +271,8 @@ RUN set -eux \
     && mkdir --parents --verbose /usr/src/paperless/media \
     && mkdir --parents --verbose /usr/src/paperless/consume \
     && mkdir --parents --verbose /usr/src/paperless/export \
+  && echo "Creating gnupg directory" \
+    && mkdir -m700 --verbose /usr/src/paperless/.gnupg \
   && echo "Adjusting all permissions" \
     && chown --from root:root --changes --recursive paperless:paperless /usr/src/paperless \
   && echo "Collecting static files" \

Pipfile

@@ -7,35 +7,37 @@ name = "pypi"
 dateparser = "~=1.2"
 # WARNING: django does not use semver.
 #          Only patch versions are guaranteed to not introduce breaking changes.
-django = "~=4.2.14"
+django = "~=5.1.5"
-django-allauth = {extras = ["socialaccount"], version = "*"}
+django-allauth = {extras = ["mfa", "socialaccount"], version = "*"}
 django-auditlog = "*"
 django-celery-results = "*"
 django-compression-middleware = "*"
 django-cors-headers = "*"
 django-extensions = "*"
-django-filter = "~=24.2"
+django-filter = "~=24.3"
 django-guardian = "*"
 django-multiselectfield = "*"
 django-soft-delete = "*"
-djangorestframework = "==3.15.2"
+djangorestframework = "~=3.15.2"
 djangorestframework-guardian = "*"
 drf-writable-nested = "*"
 bleach = "*"
 celery = {extras = ["redis"], version = "*"}
-channels = "~=4.1"
+channels = "~=4.2"
 channels-redis = "*"
 concurrent-log-handler = "*"
 filelock = "*"
 flower = "*"
 gotenberg-client = "*"
 gunicorn = "*"
+httpx-oauth = "*"
 imap-tools = "*"
 inotifyrecursive = "~=0.3"
+jinja2 = "~=3.1"
 langdetect = "*"
 mysqlclient = "*"
 nltk = "*"
-ocrmypdf = "~=15.4"
+ocrmypdf = "~=16.8"
 pathvalidate = "*"
 pdf2image = "*"
 psycopg = {version = "*", extras = ["c"]}
@@ -47,23 +49,24 @@ python-magic = "*"
 pyzbar = "*"
 rapidfuzz = "*"
 redis = {extras = ["hiredis"], version = "*"}
-scikit-learn = "~=1.5"
+scikit-learn = "~=1.6"
 setproctitle = "*"
 tika-client = "*"
 tqdm = "*"
 # See https://github.com/paperless-ngx/paperless-ngx/issues/5494
 uvicorn = {extras = ["standard"], version = "==0.25.0"}
-watchdog = "~=4.0"
+watchdog = "~=6.0"
-whitenoise = "~=6.7"
+whitenoise = "~=6.8"
 whoosh = "~=2.7"
 zxing-cpp = {version = "*", platform_machine = "== 'x86_64'"}
 
+
 [dev-packages]
 # Linting
 pre-commit = "*"
 ruff = "*"
-# Testing
 factory-boy = "*"
+# Testing
 pytest = "*"
 pytest-cov = "*"
 pytest-django = "*"

README.md

@@ -37,7 +37,7 @@ Thanks to the generous folks at [DigitalOcean](https://m.do.co/c/8d70b916d462),
   <a href="https://m.do.co/c/8d70b916d462" style="padding-top: 4px; display: block;">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_white.svg" width="140px">
-      <source media="(prefers-color-scheme: light)" srcset="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_black_.svg" width="140px">
+      <source media="(prefers-color-scheme: light)" srcset="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_blue.svg" width="140px">
       <img src="https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/SVG/DO_Logo_horizontal_black_.svg" width="140px">
     </picture>
   </a>
@@ -55,7 +55,7 @@ A full list of [features](https://docs.paperless-ngx.com/#features) and [screens
 
 # Getting started
 
-The easiest way to deploy paperless is `docker compose`. The files in the [`/docker/compose` directory](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose) are configured to pull the image from GitHub Packages.
+The easiest way to deploy paperless is `docker compose`. The files in the [`/docker/compose` directory](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose) are configured to pull the image from the GitHub container registry.
 
 If you'd like to jump right in, you can configure a `docker compose` environment with our install script:
 

docker/compose/docker-compose.env

@@ -1,26 +1,17 @@
+###############################################################################
+# Paperless-ngx settings                                                      #
+###############################################################################
+
+# See http://docs.paperless-ngx.com/configuration/ for all available options.
+
 # The UID and GID of the user used to run paperless in the container. Set this
 # to your UID and GID on the host so that you have write access to the
 # consumption directory.
 #USERMAP_UID=1000
 #USERMAP_GID=1000
 
-# Additional languages to install for text recognition, separated by a
+# See the documentation linked above for all options. A few commonly adjusted settings
-# whitespace. Note that this is
+# are provided below.
-# different from PAPERLESS_OCR_LANGUAGE (default=eng), which defines the
-# language used for OCR.
-# The container installs English, German, Italian, Spanish and French by
-# default.
-# See https://packages.debian.org/search?keywords=tesseract-ocr-&searchon=names&suite=buster
-# for available languages.
-#PAPERLESS_OCR_LANGUAGES=tur ces
-
-###############################################################################
-# Paperless-specific settings                                                 #
-###############################################################################
-
-# All settings defined in the paperless.conf.example can be used here. The
-# Docker setup does not use the configuration file.
-# A few commonly adjusted settings are provided below.
 
 # This is required if you will be exposing Paperless-ngx on a public domain
 # (if doing so please consider security measures such as reverse proxy)
@@ -30,13 +21,17 @@
 # be a very long sequence of random characters. You don't need to remember it.
 #PAPERLESS_SECRET_KEY=change-me
 
-# Use this variable to set a timezone for the Paperless Docker containers. If not specified, defaults to UTC.
+# Use this variable to set a timezone for the Paperless Docker containers. Defaults to UTC.
 #PAPERLESS_TIME_ZONE=America/Los_Angeles
 
 # The default language to use for OCR. Set this to the language most of your
 # documents are written in.
 #PAPERLESS_OCR_LANGUAGE=eng
 
-# Set if accessing paperless via a domain subpath e.g. https://domain.com/PATHPREFIX and using a reverse-proxy like traefik or nginx
+# Additional languages to install for text recognition, separated by a whitespace.
-#PAPERLESS_FORCE_SCRIPT_NAME=/PATHPREFIX
+# Note that this is different from PAPERLESS_OCR_LANGUAGE (default=eng), which defines
-#PAPERLESS_STATIC_URL=/PATHPREFIX/static/ # trailing slash required
+# the language used for OCR.
+# The container installs English, German, Italian, Spanish and French by default.
+# See https://packages.debian.org/search?keywords=tesseract-ocr-&searchon=names&suite=buster
+# for available languages.
+#PAPERLESS_OCR_LANGUAGES=tur ces

docker/compose/docker-compose.portainer.yml

@@ -19,6 +19,8 @@
 #
 # - Open portainer Stacks list and click 'Add stack'
 # - Paste the contents of this file and assign a name, e.g. 'paperless'
+# - Upload 'docker-compose.env' by clicking on 'Load variables from .env file'
+# - Modify the environment variables as needed
 # - Click 'Deploy the stack' and wait for it to be deployed
 # - Open the list of containers, select paperless_webserver_1
 # - Click 'Console' and then 'Connect' to open the command line inside the container
@@ -61,28 +63,8 @@ services:
     environment:
       PAPERLESS_REDIS: redis://broker:6379
       PAPERLESS_DBHOST: db
-# The UID and GID of the user used to run paperless in the container. Set this
+    env_file:
-# to your UID and GID on the host so that you have write access to the
+      - stack.env
-# consumption directory.
-      USERMAP_UID: 1000
-      USERMAP_GID: 100
-# Additional languages to install for text recognition, separated by a
-# whitespace. Note that this is
-# different from PAPERLESS_OCR_LANGUAGE (default=eng), which defines the
-# language used for OCR.
-# The container installs English, German, Italian, Spanish and French by
-# default.
-# See https://packages.debian.org/search?keywords=tesseract-ocr-&searchon=names&suite=buster
-# for available languages.
-      #PAPERLESS_OCR_LANGUAGES: tur ces
-# Adjust this key if you plan to make paperless available publicly. It should
-# be a very long sequence of random characters. You don't need to remember it.
-      #PAPERLESS_SECRET_KEY: change-me
-# Use this variable to set a timezone for the Paperless Docker containers. If not specified, defaults to UTC.
-      #PAPERLESS_TIME_ZONE: America/Los_Angeles
-# The default language to use for OCR. Set this to the language most of your
-# documents are written in.
-      #PAPERLESS_OCR_LANGUAGE: eng
 
 volumes:
   data:

docker/docker-entrypoint.sh

@@ -122,18 +122,28 @@ install_languages() {
 	if [ ${#langs[@]} -eq 0 ]; then
 		return
 	fi
-	apt-get update
 
+	# Build list of packages to install
+	to_install=()
 	for lang in "${langs[@]}"; do
 		pkg="tesseract-ocr-$lang"
 
 		if dpkg --status "$pkg" &>/dev/null; then
 			echo "Package $pkg already installed!"
 			continue
+		else
+			to_install+=("$pkg")
 		fi
+	done
+
+	# Use apt only when we install packages
+	if [ ${#to_install[@]} -gt 0 ]; then
+		apt-get update
+
+		for pkg in "${to_install[@]}"; do
 
 			if ! apt-cache show "$pkg" &>/dev/null; then
-			echo "Package $pkg not found! :("
+				echo "Skipped $pkg: Package not found! :("
 				continue
 			fi
 
@@ -143,6 +153,7 @@ install_languages() {
 				exit 1
 			fi
 		done
+	fi
 }
 
 echo "Paperless-ngx docker container starting..."

docker/env-from-file.sh

@@ -16,7 +16,7 @@ do
 	# Check if it starts with "PAPERLESS_" and ends in "_FILE"
 	if [[ ${env_name} == PAPERLESS_*_FILE ]]; then
 		# This should have been named different..
-		if [[ ${env_name} == "PAPERLESS_OCR_SKIP_ARCHIVE_FILE" ]]; then
+		if [[ ${env_name} == "PAPERLESS_OCR_SKIP_ARCHIVE_FILE" || ${env_name} == "PAPERLESS_MODEL_FILE" ]]; then
 			continue
 		fi
 		# Extract the value of the environment

docker/install_management_commands.sh

@@ -14,7 +14,9 @@ for command in decrypt_documents \
 	document_thumbnails \
 	document_sanity_checker \
 	document_fuzzy_match \
-	manage_superuser;
+	manage_superuser \
+	convert_mariadb_uuid \
+	prune_audit_logs;
 do
 	echo "installing $command..."
 	sed "s/management_command/$command/g" management_script.sh > /usr/local/bin/$command

docs/administration.md

@@ -19,6 +19,8 @@ Options available to any installation of paperless:
     export. Therefore, incremental backups with `rsync` are entirely
     possible.
 
+    The exporter does not include API tokens and they will need to be re-generated after importing.
+
 !!! caution
 
     You cannot import the export generated with one version of paperless in
@@ -79,8 +81,8 @@ $ docker compose down
 1.  If you pull the image from the docker hub, all you need to do is:
 
     ```shell-session
-    $ docker compose pull
+    docker compose pull
-    $ docker compose up
+    docker compose up
     ```
 
     The Docker Compose files refer to the `latest` version, which is
@@ -89,9 +91,9 @@ $ docker compose down
 1.  If you built the image yourself, do the following:
 
     ```shell-session
-    $ git pull
+    git pull
-    $ docker compose build
+    docker compose build
-    $ docker compose up
+    docker compose up
     ```
 
 Running `docker compose up` will also apply any new database migrations.
@@ -153,7 +155,7 @@ following:
     environment before that, if you use one.
 
     ```shell-session
-    $ pip install -r requirements.txt
+    pip install -r requirements.txt
     ```
 
     !!! note
@@ -166,8 +168,8 @@ following:
 3.  Migrate the database.
 
     ```shell-session
-    $ cd src
+    cd src
-    $ python3 manage.py migrate # (1)
+    python3 manage.py migrate # (1)
     ```
 
     1.  Including `sudo -Hu <paperless_user>` may be required
@@ -239,6 +241,7 @@ document_exporter target [-c] [-d] [-f] [-na] [-nt] [-p] [-sm] [-z]
 
 optional arguments:
 -c,  --compare-checksums
+-cj, --compare-json
 -d,  --delete
 -f,  --use-filename-format
 -na, --no-archive
@@ -248,6 +251,7 @@ optional arguments:
 -z,  --zip
 -zn, --zip-name
 --data-only
+--no-progress-bar
 --passphrase
 ```
 
@@ -266,7 +270,8 @@ only export changed and added files. Paperless determines whether a file
 has changed by inspecting the file attributes "date/time modified" and
 "size". If that does not work out for you, specify `-c` or
 `--compare-checksums` and paperless will attempt to compare file
-checksums instead. This is slower.
+checksums instead. This is slower. The manifest and metadata json files
+are always updated, unless `cj` or `--compare-json` is specified.
 
 Paperless will not remove any existing files in the export directory. If
 you want paperless to also remove files that do not belong to the
@@ -310,6 +315,10 @@ value set in `-zn` or `--zip-name`.
 If `--data-only` is provided, only the database will be exported. This option is intended
 to facilitate database upgrades without needing to clean documents and thumbnails from the media directory.
 
+If `--no-progress-bar` is provided, the progress bar will be hidden, rendering the
+exporter quiet. This option is useful for scripting scenarios, such as when using the
+exporter with `crontab`.
+
 If `--passphrase` is provided, it will be used to encrypt certain fields in the export. This value
 must be provided to import. If this value is lost, the export cannot be imported.
 
@@ -332,8 +341,9 @@ document_importer source
 ```
 
 | Option              | Required | Default | Description                                                               |
-| -------------- | -------- | ------- | ------------------------------------------------------------------------- |
+| ------------------- | -------- | ------- | ------------------------------------------------------------------------- |
 | source              | Yes      | N/A     | The directory containing an export                                        |
+| `--no-progress-bar` | No       | False   | If provided, the progress bar will be hidden                              |
 | `--data-only`       | No       | False   | If provided, only import data, do not import document files or thumbnails |
 | `--passphrase`      | No       | N/A     | If your export was encrypted with a passphrase, must be provided          |
 
@@ -614,3 +624,12 @@ document_fuzzy_match [--ratio] [--processes N]
     If providing the `--delete` option, it is highly recommended to have a backup.
     While every effort has been taken to ensure proper operation, there is always the
     chance of deletion of a file you want to keep.
+
+### Prune history (audit log) entries {#prune-history}
+
+If the audit log is enabled Paperless-ngx keeps an audit log of all changes made to documents. Functionality to automatically remove entries for deleted documents was added but
+entries created prior to this are not removed. This command allows you to prune the audit log of entries that are no longer needed.
+
+```shell
+prune_audit_logs
+```

docs/advanced_usage.md

@@ -265,7 +265,7 @@ This variable allows you to configure the filename (folders are allowed)
 using placeholders. For example, configuring this to
 
 ```bash
-PAPERLESS_FILENAME_FORMAT={created_year}/{correspondent}/{title}
+PAPERLESS_FILENAME_FORMAT={{ created_year }}/{{ correspondent }}/{{ title }}
 ```
 
 will create a directory structure as follows:
@@ -298,39 +298,39 @@ will create a directory structure as follows:
     when changing `PAPERLESS_FILENAME_FORMAT` you will need to manually run the
     [`document renamer`](administration.md#renamer) to move any existing documents.
 
-#### Placeholders
+### Placeholders {#filename-format-variables}
 
-Paperless provides the following placeholders within filenames:
+Paperless provides the following variables for use within filenames:
 
-- `{asn}`: The archive serial number of the document, or "none".
+-   `{{ asn }}`: The archive serial number of the document, or "none".
-- `{correspondent}`: The name of the correspondent, or "none".
+-   `{{ correspondent }}`: The name of the correspondent, or "none".
-- `{document_type}`: The name of the document type, or "none".
+-   `{{ document_type }}`: The name of the document type, or "none".
-- `{tag_list}`: A comma separated list of all tags assigned to the
+-   `{{ tag_list }}`: A comma separated list of all tags assigned to the
     document.
-- `{title}`: The title of the document.
+-   `{{ title }}`: The title of the document.
-- `{created}`: The full date (ISO format) the document was created.
+-   `{{ created }}`: The full date (ISO 8601 format, e.g. `2024-03-14`) the document was created.
-- `{created_year}`: Year created only, formatted as the year with
+-   `{{ created_year }}`: Year created only, formatted as the year with
     century.
-- `{created_year_short}`: Year created only, formatted as the year
+-   `{{ created_year_short }}`: Year created only, formatted as the year
     without century, zero padded.
-- `{created_month}`: Month created only (number 01-12).
+-   `{{ created_month }}`: Month created only (number 01-12).
-- `{created_month_name}`: Month created name, as per locale
+-   `{{ created_month_name }}`: Month created name, as per locale
-- `{created_month_name_short}`: Month created abbreviated name, as per
+-   `{{ created_month_name_short }}`: Month created abbreviated name, as per
     locale
-- `{created_day}`: Day created only (number 01-31).
+-   `{{ created_day }}`: Day created only (number 01-31).
-- `{added}`: The full date (ISO format) the document was added to
+-   `{{ added }}`: The full date (ISO format) the document was added to
     paperless.
-- `{added_year}`: Year added only.
+-   `{{ added_year }}`: Year added only.
-- `{added_year_short}`: Year added only, formatted as the year without
+-   `{{ added_year_short }}`: Year added only, formatted as the year without
     century, zero padded.
-- `{added_month}`: Month added only (number 01-12).
+-   `{{ added_month }}`: Month added only (number 01-12).
-- `{added_month_name}`: Month added name, as per locale
+-   `{{ added_month_name }}`: Month added name, as per locale
-- `{added_month_name_short}`: Month added abbreviated name, as per
+-   `{{ added_month_name_short }}`: Month added abbreviated name, as per
     locale
-- `{added_day}`: Day added only (number 01-31).
+-   `{{ added_day }}`: Day added only (number 01-31).
-- `{owner_username}`: Username of document owner, if any, or "none"
+-   `{{ owner_username }}`: Username of document owner, if any, or "none"
-- `{original_name}`: Document original filename, minus the extension, if any, or "none"
+-   `{{ original_name }}`: Document original filename, minus the extension, if any, or "none"
-- `{doc_pk}`: The paperless identifier (primary key) for the document.
+-   `{{ doc_pk }}`: The paperless identifier (primary key) for the document.
 
 !!! warning
 
@@ -338,6 +338,11 @@ Paperless provides the following placeholders within filenames:
     you may run into the limits of your operating system's maximum path lengths.
     In that case, files will retain the previous path instead and the issue logged.
 
+!!! tip
+
+    These variables are all simple strings, but the format can be a full template.
+    See [Filename Templates](#filename-templates) for even more advanced formatting.
+
 Paperless will try to conserve the information from your database as
 much as possible. However, some characters that you can use in document
 titles and correspondent names (such as `: \ /` and a couple more) are
@@ -363,7 +368,7 @@ paperless will fall back to using the default naming scheme instead.
     However, keep in mind that inside docker, if files get stored outside of
     the predefined volumes, they will be lost after a restart.
 
-##### Empty placeholders
+#### Empty placeholders
 
 You can affect how empty placeholders are treated by changing the
 [`PAPERLESS_FILENAME_FORMAT_REMOVE_NONE`](configuration.md#PAPERLESS_FILENAME_FORMAT_REMOVE_NONE) setting.
@@ -390,8 +395,8 @@ For example, you could define the following two storage paths:
     the correspondence.
 
 ```
-By Year = {created_year}/{correspondent}/{title}
+By Year = {{ created_year }}/{{ correspondent }}/{{ title }}
-Insurances = Insurances/{correspondent}/{created_year}-{created_month}-{created_day} {title}
+Insurances = Insurances/{{ correspondent }}/{{ created_year }}-{{ created_month }}-{{ created_day }} {{ title }}
 ```
 
 If you then map these storage paths to the documents, you might get the
@@ -418,6 +423,97 @@ Insurances/                             # Insurances
     Defining a storage path is optional. If no storage path is defined for a
     document, the global [`PAPERLESS_FILENAME_FORMAT`](configuration.md#PAPERLESS_FILENAME_FORMAT) is applied.
 
+### Filename Templates {#filename-templates}
+
+The filename formatting uses [Jinja templates](https://jinja.palletsprojects.com/en/3.1.x/templates/) to build the filename.
+This allows for complex logic to be included in the format, including [logical structures](https://jinja.palletsprojects.com/en/3.1.x/templates/#list-of-control-structures)
+and [filters](https://jinja.palletsprojects.com/en/3.1.x/templates/#id11) to manipulate the [variables](#filename-format-variables)
+provided. The template is provided as a string, potentially multiline, and rendered into a single line.
+
+In addition, the entire Document instance is available to be utilized in a more advanced way, as well as some variables which only make sense to be accessed
+with more complex logic.
+
+#### Additional Variables
+
+-   `{{ tag_name_list }}`: A list of tag names applied to the document, ordered by the tag name. Note this is a list, not a single string
+-   `{{ custom_fields }}`: A mapping of custom field names to their type and value. A user can access the mapping by field name or check if a field is applied by checking its existence in the variable.
+
+!!! tip
+
+    To access a custom field which has a space in the name, use the `get_cf_value` filter.  See the examples below.
+    This helps get fields by name and handle a default value if the named field is not attached to a Document.
+
+#### Examples
+
+This example will construct a path based on the archive serial number range:
+
+```jinja
+somepath/
+{% if document.archive_serial_number >= 0 and document.archive_serial_number <= 200 %}
+  asn-000-200/{{title}}
+{% elif document.archive_serial_number >= 201 and document.archive_serial_number <= 400 %}
+  asn-201-400
+  {% if document.archive_serial_number >= 201 and document.archive_serial_number < 300 %}
+    /asn-2xx
+  {% elif document.archive_serial_number >= 300 and document.archive_serial_number < 400 %}
+    /asn-3xx
+  {% endif %}
+{% endif %}
+/{{ title }}
+```
+
+For a document with an ASN of 205, it would result in `somepath/asn-201-400/asn-2xx/Title.pdf`, but
+a document with an ASN of 355 would be placed in `somepath/asn-201-400/asn-3xx/Title.pdf`.
+
+```jinja
+{% if document.mime_type == "application/pdf" %}
+  pdfs
+{% elif document.mime_type == "image/png" %}
+  pngs
+{% else %}
+  others
+{% endif %}
+/{{ title }}
+```
+
+For a PDF document, it would result in `pdfs/Title.pdf`, but for a PNG document, the path would be `pngs/Title.png`.
+
+To use custom fields:
+
+```jinja
+{% if "Invoice" in custom_fields %}
+  invoices/{{ custom_fields.Invoice.value }}
+{% else %}
+  not-invoices/{{ title }}
+{% endif %}
+```
+
+If the document has a custom field named "Invoice" with a value of 123, it would be filed into the `invoices/123.pdf`, but a document without the custom field
+would be filed to `not-invoices/Title.pdf`
+
+If the custom field is named "Invoice Number", you would access the value of it via the `get_cf_value` filter due to quirks of the Django Template Language:
+
+```jinja
+"invoices/{{ custom_fields|get_cf_value('Invoice Number') }}"
+```
+
+You can also use a custom `datetime` filter to format dates:
+
+```jinja
+invoices/
+{{ custom_fields|get_cf_value("Date Field","2024-01-01")|datetime('%Y') }}/
+{{ custom_fields|get_cf_value("Date Field","2024-01-01")|datetime('%m') }}/
+{{ custom_fields|get_cf_value("Date Field","2024-01-01")|datetime('%d') }}/
+Invoice_{{ custom_fields|get_cf_value("Select Field") }}_{{ custom_fields|get_cf_value("Date Field","2024-01-01")|replace("-", "") }}.pdf
+```
+
+This will create a path like `invoices/2022/01/01/Invoice_OptionTwo_20220101.pdf` if the custom field "Date Field" is set to January 1, 2022 and "Select Field" is set to `OptionTwo`.
+
+## Automatic recovery of invalid PDFs {#pdf-recovery}
+
+Paperless will attempt to "clean" certain invalid PDFs with `qpdf` before processing if, for example, the mime_type
+detection is incorrect. This can happen if the PDF is not properly formatted or contains errors.
+
 ## Celery Monitoring {#celery-monitoring}
 
 The monitoring tool
@@ -489,10 +585,13 @@ services:
 ### Case Sensitivity
 
 The database interface does not provide a method to configure a MySQL
-database to be case sensitive. This would prevent a user from creating a
+database to be case-sensitive. A case-**in**sensitive database prevents a user from creating a
 tag `Name` and `NAME` as they are considered the same.
 
-Per Django documentation, to enable this requires manual intervention.
+However, there is a downside to turning on case sensitivity, as it also makes searches case-sensitive,
+so for example a document with the title `Invoice` won't be found when searching for `invoice`.
+
+Per Django documentation, making a database case-sensitive requires manual intervention.
 To enable case sensitive tables, you can execute the following command
 against each table:
 
@@ -509,6 +608,8 @@ existing tables) with:
     an older system may fix issues that can arise while setting up Paperless-ngx but
     `utf8mb3` can cause issues with consumption (where `utf8mb4` does not).
 
+For more information on this topic, you can refer to [this](https://code.djangoproject.com/ticket/9682) Django issue.
+
 ### Missing timezones
 
 MySQL as well as MariaDB do not have any timezone information by default (though some
@@ -690,3 +791,57 @@ More details about configuration option for various providers can be found in th
 
 Once external auth is set up, 'regular' login can be disabled with the [PAPERLESS_DISABLE_REGULAR_LOGIN](configuration.md#PAPERLESS_DISABLE_REGULAR_LOGIN) setting and / or users can be automatically
 redirected with the [PAPERLESS_REDIRECT_LOGIN_TO_SSO](configuration.md#PAPERLESS_REDIRECT_LOGIN_TO_SSO) setting.
+
+## Decryption of encrypted emails before consumption {#gpg-decryptor}
+
+Paperless-ngx can be configured to decrypt gpg encrypted emails before consumption.
+
+### Requirements
+
+You need a recent version of `gpg-agent >= 2.1.1` installed on your host.
+Your host needs to be setup for decrypting your emails via `gpg-agent`, see this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-use-gpg-to-encrypt-and-sign-messages#encrypt-and-decrypt-messages-with-gpg) for instance.
+Test your setup and make sure that you can encrypt and decrypt files using your key
+
+```
+gpg --encrypt --armor -r person@email.com name_of_file
+gpg --decrypt name_of_file.asc
+```
+
+### Setup
+
+First, enable the [PAPERLESS_ENABLE_GPG_DECRYPTOR environment variable](configuration.md#PAPERLESS_ENABLE_GPG_DECRYPTOR).
+
+Then determine your local `gpg-agent` socket by invoking
+
+```
+gpgconf --list-dir agent-socket
+```
+
+on your host. A possible output is `~/.gnupg/S.gpg-agent`.
+Also find the location of your public keyring.
+
+If using docker, you'll need to add the following volume mounts to your `docker-compose.yml` file:
+
+```yaml
+webserver:
+    volumes:
+        - /home/user/.gnupg/pubring.gpg:/usr/src/paperless/.gnupg/pubring.gpg
+        - <path to gpg-agent socket>:/usr/src/paperless/.gnupg/S.gpg-agent
+```
+
+For a 'bare-metal' installation no further configuration is necessary. If you
+want to use a separate `GNUPG_HOME`, you can do so by configuring the [PAPERLESS_EMAIL_GNUPG_HOME environment variable](configuration.md#PAPERLESS_EMAIL_GNUPG_HOME).
+
+### Troubleshooting
+
+-   Make sure, that `gpg-agent` is running on your host machine
+-   Make sure, that encryption and decryption works from inside the container using the `gpg` commands from above.
+-   Check that all files in `/usr/src/paperless/.gnupg` have correct permissions
+
+```shell
+paperless@9da1865df327:~/.gnupg$ ls -al
+drwx------ 1 paperless paperless   4096 Aug 18 17:52 .
+drwxr-xr-x 1 paperless paperless   4096 Aug 18 17:52 ..
+srw------- 1 paperless paperless      0 Aug 18 17:22 S.gpg-agent
+-rw------- 1 paperless paperless 147940 Jul 24 10:23 pubring.gpg
+```

docs/api.md

@@ -54,6 +54,7 @@ fields:
 -   `archived_file_name`: Verbose filename of the archived document.
     Read-only. Null if no archived document is available.
 -   `notes`: Array of notes associated with the document.
+-   `page_count`: Number of pages.
 -   `set_permissions`: Allows setting document permissions. Optional,
     write-only. See [below](#permissions).
 -   `custom_fields`: Array of custom fields & values, specified as
@@ -235,12 +236,6 @@ results:
 Pagination works exactly the same as it does for normal requests on this
 endpoint.
 
-Certain limitations apply to full text queries:
-
-- Results are always sorted by search score. The results matching the
-  query best will show up first.
-- Only a small subset of filtering parameters are supported.
-
 Furthermore, each returned document has an additional `__search_hit__`
 attribute with various information about the search results:
 
@@ -280,6 +275,51 @@ attribute with various information about the search results:
 -   `rank` is the index of the search results. The first result will
     have rank 0.
 
+### Filtering by custom fields
+
+You can filter documents by their custom field values by specifying the
+`custom_field_query` query parameter. Here are some recipes for common
+use cases:
+
+1. Documents with a custom field "due" (date) between Aug 1, 2024 and
+   Sept 1, 2024 (inclusive):
+
+    `?custom_field_query=["due", "range", ["2024-08-01", "2024-09-01"]]`
+
+2. Documents with a custom field "customer" (text) that equals "bob"
+   (case sensitive):
+
+    `?custom_field_query=["customer", "exact", "bob"]`
+
+3. Documents with a custom field "answered" (boolean) set to `true`:
+
+    `?custom_field_query=["answered", "exact", true]`
+
+4. Documents with a custom field "favorite animal" (select) set to either
+   "cat" or "dog":
+
+    `?custom_field_query=["favorite animal", "in", ["cat", "dog"]]`
+
+5. Documents with a custom field "address" (text) that is empty:
+
+    `?custom_field_query=["OR", ["address", "isnull", true], ["address", "exact", ""]]`
+
+6. Documents that don't have a field called "foo":
+
+    `?custom_field_query=["foo", "exists", false]`
+
+7. Documents that have document links "references" to both document 3 and 7:
+
+    `?custom_field_query=["references", "contains", [3, 7]]`
+
+All field types support basic operations including `exact`, `in`, `isnull`,
+and `exists`. String, URL, and monetary fields support case-insensitive
+substring matching operations including `icontains`, `istartswith`, and
+`iendswith`. Integer, float, and date fields support arithmetic comparisons
+including `gt` (>), `gte` (>=), `lt` (<), `lte` (<=), and `range`.
+Lastly, document link fields support a `contains` operator that behaves
+like a "is superset of" check.
+
 ### `/api/search/autocomplete/`
 
 Get auto completions for a partial search term.
@@ -325,6 +365,10 @@ The endpoint supports the following optional form fields:
 -   `custom_fields`: An array of custom field ids to assign (with an empty
     value) to the document.
 
+!!! note
+
+    Sending a `Content-Length` header with correct size is mandatory.
+
 The endpoint will immediately return HTTP 200 if the document consumption
 process was started successfully, with the UUID of the consumption task
 as the data. No additional status information about the consumption process
@@ -433,6 +477,11 @@ The following methods are supported:
     -   Requires `parameters`:
         -   `"pages": [..]` The list should be a list of integers e.g. `"[2,3,4]"`
     -   The delete_pages operation only accepts a single document.
+-   `modify_custom_fields`
+    -   Requires `parameters`:
+        -   `"add_custom_fields": { CUSTOM_FIELD_ID: VALUE }`: JSON object consisting of custom field id:value pairs to add to the document, can also be a list of custom field IDs
+            to add with empty values.
+        -   `"remove_custom_fields": [CUSTOM_FIELD_ID]`: custom field ids to remove from the document.
 
 ### Objects
 
@@ -516,3 +565,11 @@ Initial API version.
 
 -   Consumption templates were refactored to workflows and API endpoints
     changed as such.
+
+#### Version 5
+
+-   Added bulk deletion methods for documents and objects.
+
+#### Version 6
+
+-   Moved acknowledge tasks endpoint to be under `/api/tasks/acknowledge/`.

docs/assets/extra.css

@@ -10,7 +10,7 @@
     --md-hue: 222;
 }
 
-@media (min-width: 400px) {
+@media (min-width: 768px) {
     .grid-left {
         width: 33%;
         float: left;

docs/configuration.md

@@ -38,7 +38,7 @@ matcher.
         `redis://<username>:<password>@<host>:<port>/<DBIndex>`
 
     [More information on securing your Redis
-    Instance](https://redis.io/docs/getting-started/#securing-redis).
+    Instance](https://redis.io/docs/latest/operate/oss_and_stack/management/security).
 
     Defaults to `redis://localhost:6379`.
 
@@ -596,11 +596,11 @@ system. See the corresponding
 
 : Disables the regular frontend username / password login, i.e. once you have setup SSO. Note that this setting does not disable the Django admin login nor logging in with local credentials via the API. To prevent access to the Django admin, consider blocking `/admin/` in your [web server or reverse proxy configuration](https://github.com/paperless-ngx/paperless-ngx/wiki/Using-a-Reverse-Proxy-with-Paperless-ngx).
 
-You can optionally also automatically redirect users to the SSO login with [PAPERLESS_REDIRECT_LOGIN_TO_SSO](#PAPERLESS_REDIRECT_LOGIN_TO_SSO)
+    You can optionally also automatically redirect users to the SSO login with [PAPERLESS_REDIRECT_LOGIN_TO_SSO](#PAPERLESS_REDIRECT_LOGIN_TO_SSO)
 
     Defaults to False
 
-#### ['PAPERLESS_REDIRECT_LOGIN_TO_SSO=<bool>`](#PAPERLESS_REDIRECT_LOGIN_TO_SSO) {#PAPERLESS_REDIRECT_LOGIN_TO_SSO}
+#### [`PAPERLESS_REDIRECT_LOGIN_TO_SSO=<bool>`](#PAPERLESS_REDIRECT_LOGIN_TO_SSO) {#PAPERLESS_REDIRECT_LOGIN_TO_SSO}
 
 : When this setting is enabled users will automatically be redirected (using javascript) to the first SSO provider login. You may still want to disable the frontend login form for clarity.
 
@@ -608,9 +608,18 @@ You can optionally also automatically redirect users to the SSO login with [PAPE
 
 #### [`PAPERLESS_ACCOUNT_SESSION_REMEMBER=<bool>`](#PAPERLESS_ACCOUNT_SESSION_REMEMBER) {#PAPERLESS_ACCOUNT_SESSION_REMEMBER}
 
-: See the corresponding
+: If false, sessions will expire at browser close, if true will use `PAPERLESS_SESSION_COOKIE_AGE` for expiration. See the corresponding
 [django-allauth documentation](https://docs.allauth.org/en/latest/account/configuration.html)
 
+    Defaults to True
+
+#### [`PAPERLESS_SESSION_COOKIE_AGE=<int>`](#PAPERLESS_SESSION_COOKIE_AGE) {#PAPERLESS_SESSION_COOKIE_AGE}
+
+: Login session cookie expiration. Applies if `PAPERLESS_ACCOUNT_SESSION_REMEMBER` is enabled. See the corresponding
+[django documentation](https://docs.djangoproject.com/en/5.1/ref/settings/#std-setting-SESSION_COOKIE_AGE)
+
+    Defaults to 1209600 (2 weeks)
+
 ## OCR settings {#ocr}
 
 Paperless uses [OCRmyPDF](https://ocrmypdf.readthedocs.io/en/latest/)
@@ -1149,6 +1158,12 @@ within your documents.
     second, and year last order. Characters D, M, or Y can be shuffled
     to meet the required order.
 
+#### [`PAPERLESS_ENABLE_GPG_DECRYPTOR=<bool>`](#PAPERLESS_ENABLE_GPG_DECRYPTOR) {#PAPERLESS_ENABLE_GPG_DECRYPTOR}
+
+: Enable or disable the GPG decryptor for encrypted emails. See [GPG Decryptor](advanced_usage.md#gpg-decryptor) for more information.
+
+    Defaults to false.
+
 ### Polling {#polling}
 
 #### [`PAPERLESS_CONSUMER_POLLING=<num>`](#PAPERLESS_CONSUMER_POLLING) {#PAPERLESS_CONSUMER_POLLING}
@@ -1192,6 +1207,52 @@ consumers working on the same file. Configure this to prevent that.
 
     Defaults to 0.5 seconds.
 
+## Incoming Mail {#incoming_mail}
+
+### Email OAuth {#email_oauth}
+
+#### [`PAPERLESS_OAUTH_CALLBACK_BASE_URL=<str>`](#PAPERLESS_OAUTH_CALLBACK_BASE_URL) {#PAPERLESS_OAUTH_CALLBACK_BASE_URL}
+
+: The base URL for the OAuth callback. This is used to construct the full URL for the OAuth callback. This should be the URL that the Paperless instance is accessible at. If not set, defaults to the `PAPERLESS_URL` setting. At least one of these settings must be set to enable OAuth Email setup.
+
+    Defaults to none (thus will use [PAPERLESS_URL](#PAPERLESS_URL)).
+
+!!! note
+
+    This setting only applies to OAuth Email setup (not to the SSO setup).
+
+#### [`PAPERLESS_GMAIL_OAUTH_CLIENT_ID=<str>`](#PAPERLESS_GMAIL_OAUTH_CLIENT_ID) {#PAPERLESS_GMAIL_OAUTH_CLIENT_ID}
+
+: The OAuth client ID for Gmail. This is required for Gmail OAuth Email setup. See [OAuth Email Setup](usage.md#oauth-email-setup) for more information.
+
+    Defaults to none.
+
+#### [`PAPERLESS_GMAIL_OAUTH_CLIENT_SECRET=<str>`](#PAPERLESS_GMAIL_OAUTH_CLIENT_SECRET) {#PAPERLESS_GMAIL_OAUTH_CLIENT_SECRET}
+
+: The OAuth client secret for Gmail. This is required for Gmail OAuth Email setup. See [OAuth Email Setup](usage.md#oauth-email-setup) for more information.
+
+    Defaults to none.
+
+#### [`PAPERLESS_OUTLOOK_OAUTH_CLIENT_ID=<str>`](#PAPERLESS_OUTLOOK_OAUTH_CLIENT_ID) {#PAPERLESS_OUTLOOK_OAUTH_CLIENT_ID}
+
+: The OAuth client ID for Outlook. This is required for Outlook OAuth Email setup. See [OAuth Email Setup](usage.md#oauth-email-setup) for more information.
+
+    Defaults to none.
+
+#### [`PAPERLESS_OUTLOOK_OAUTH_CLIENT_SECRET=<str>`](#PAPERLESS_OUTLOOK_OAUTH_CLIENT_SECRET) {#PAPERLESS_OUTLOOK_OAUTH_CLIENT_SECRET}
+
+: The OAuth client secret for Outlook. This is required for Outlook OAuth Email setup. See [OAuth Email Setup](usage.md#oauth-email-setup) for more information.
+
+    Defaults to none.
+
+### Encrypted Emails {#encrypted_emails}
+
+#### [`PAPERLESS_EMAIL_GNUPG_HOME=<str>`](#PAPERLESS_EMAIL_GNUPG_HOME) {#PAPERLESS_EMAIL_GNUPG_HOME}
+
+: Optional, sets the `GNUPG_HOME` path to use with GPG decryptor for encrypted emails. See [GPG Decryptor](advanced_usage.md#gpg-decryptor) for more information. If not set, defaults to the default `GNUPG_HOME` path.
+
+    Defaults to <not set>.
+
 ## Barcodes {#barcodes}
 
 #### [`PAPERLESS_CONSUMER_ENABLE_BARCODES=<bool>`](#PAPERLESS_CONSUMER_ENABLE_BARCODES) {#PAPERLESS_CONSUMER_ENABLE_BARCODES}
@@ -1230,6 +1291,12 @@ change this.
 
     Defaults to "PATCHT"
 
+#### [`PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES=<bool>`](#PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES) {#PAPERLESS_CONSUMER_BARCODE_RETAIN_SPLIT_PAGES}
+
+: If set to true, all pages that are split by a barcode (such as PATCHT) will be kept.
+
+    Defaults to false.
+
 #### [`PAPERLESS_CONSUMER_ENABLE_ASN_BARCODE=<bool>`](#PAPERLESS_CONSUMER_ENABLE_ASN_BARCODE) {#PAPERLESS_CONSUMER_ENABLE_ASN_BARCODE}
 
 : Enables the detection of barcodes in the scanned document and
@@ -1277,6 +1344,15 @@ combination with PAPERLESS_CONSUMER_BARCODE_UPSCALE bigger than 1.0.
 
     Defaults to "300"
 
+#### [`PAPERLESS_CONSUMER_BARCODE_MAX_PAGES=<int>`](#PAPERLESS_CONSUMER_BARCODE_MAX_PAGES) {#PAPERLESS_CONSUMER_BARCODE_MAX_PAGES}
+
+: Because barcode detection is a computationally-intensive operation, this setting
+limits the detection of barcodes to a number of first pages. If your scanner has
+a limit for the number of pages that can be scanned it would be sensible to set this
+as the limit here.
+
+    Defaults to "0", allowing all pages to be checked for barcodes.
+
 #### [`PAPERLESS_CONSUMER_ENABLE_TAG_BARCODE=<bool>`](#PAPERLESS_CONSUMER_ENABLE_TAG_BARCODE) {#PAPERLESS_CONSUMER_ENABLE_TAG_BARCODE}
 
 : Enables the detection of barcodes in the scanned document and
@@ -1447,7 +1523,7 @@ one pod).
 actual user ID on the host system, which you can get by executing
 
     ``` shell-session
-    $ id -u
+    id -u
     ```
 
     Paperless will change ownership on its folders to this user, so you
@@ -1462,7 +1538,7 @@ actual user ID on the host system, which you can get by executing
 actual group ID on the host system, which you can get by executing
 
     ``` shell-session
-    $ id -g
+    id -g
     ```
 
     Paperless will change ownership on its folders to this group, so you

docs/development.md

@@ -69,13 +69,13 @@ first-time setup.
 3.  Create `consume` and `media` directories:
 
     ```bash
-    $ mkdir -p consume media
+    mkdir -p consume media
     ```
 
 4.  Install the Python dependencies:
 
     ```bash
-    $ pipenv install --dev
+    pipenv install --dev
     ```
 
     !!! note
@@ -85,7 +85,7 @@ first-time setup.
 5.  Install pre-commit hooks:
 
     ```bash
-    $ pre-commit install
+    pre-commit install
     ```
 
 6.  Apply migrations and create a superuser for your development instance:
@@ -93,8 +93,8 @@ first-time setup.
     ```bash
     # src/
 
-    $ python3 manage.py migrate
+    python3 manage.py migrate
-    $ python3 manage.py createsuperuser
+    python3 manage.py createsuperuser
     ```
 
 7.  You can now either ...
@@ -108,7 +108,7 @@ first-time setup.
     -   spin up a bare redis container
 
         ```
-      $ docker run -d -p 6379:6379 --restart unless-stopped redis:latest
+        docker run -d -p 6379:6379 --restart unless-stopped redis:latest
         ```
 
 8.  Continue with either back-end or front-end development – or both :-).
@@ -176,7 +176,7 @@ The front end is built using AngularJS. In order to get started, you need Node.j
 1.  Install the Angular CLI. You might need sudo privileges to perform this command:
 
     ```bash
-    $ npm install -g @angular/cli
+    npm install -g @angular/cli
     ```
 
 2.  Make sure that it's on your path.
@@ -184,13 +184,13 @@ The front end is built using AngularJS. In order to get started, you need Node.j
 3.  Install all necessary modules:
 
     ```bash
-    $ npm install
+    npm install
     ```
 
 4.  You can launch a development server by running:
 
     ```bash
-    $ ng serve
+    ng serve
     ```
 
     This will automatically update whenever you save. However, in-place
@@ -335,13 +335,13 @@ If you want to build the documentation locally, this is how you do it:
 1.  Have an active pipenv shell (`pipenv shell`) and install Python dependencies:
 
     ```bash
-    $ pipenv install --dev
+    pipenv install --dev
     ```
 
 2.  Build the documentation
 
     ```bash
-    $ mkdocs build --config-file mkdocs.yml
+    mkdocs build --config-file mkdocs.yml
     ```
 
     _alternatively..._
@@ -352,7 +352,7 @@ If you want to build the documentation locally, this is how you do it:
     something.
 
     ```bash
-    $ mkdocs serve
+    mkdocs serve
     ```
 
 ## Building the Docker image
@@ -360,10 +360,10 @@ If you want to build the documentation locally, this is how you do it:
 The docker image is primarily built by the GitHub actions workflow, but
 it can be faster when developing to build and tag an image locally.
 
-Building the image works as with any image:
+Make sure you have the `docker-buildx` package installed. Building the image works as with any image:
 
 ```
-docker build --file Dockerfile --tag paperless:local --progress simple .
+docker build --file Dockerfile --tag paperless:local .
 ```
 
 ## Extending Paperless-ngx
@@ -450,3 +450,26 @@ def myparser_consumer_declaration(sender, **kwargs):
     mime types have many extensions associated with them and the Python
     methods responsible for guessing the extension do not always return
     the same value.
+
+## Using Visual Studio Code devcontainer
+
+Another easy way to get started with development is to use Visual Studio
+Code devcontainers. This approach will create a preconfigured development
+environment with all of the required tools and dependencies.
+[Learn more about devcontainers](https://code.visualstudio.com/docs/devcontainers/containers).
+The .devcontainer/vscode/tasks.json and .devcontainer/vscode/launch.json files
+contain more information about the specific tasks and launch configurations (see the
+non-standard "description" field).
+
+To get started:
+
+1. Clone the repository on your machine and open the Paperless-ngx folder in VS Code.
+
+2. VS Code will prompt you with "Reopen in container". Do so and wait for the environment to start.
+
+3. Initialize the project by running the task **Project Setup: Run all Init Tasks**. This
+   will initialize the database tables and create a superuser. Then you can compile the front end
+   for production or run the frontend in debug mode.
+
+4. The project is ready for debugging, start either run the fullstack debug or individual debug
+   processes. Yo spin up the project without debugging run the task **Project Start: Run all Services**

docs/faq.md

@@ -132,3 +132,11 @@ Multiple options for ASGI servers exist:
 -   `daphne` as a standalone server, which is the reference
     implementation for ASGI.
 -   `uvicorn` as a standalone server
+
+## _What about the Redis licensing change and using one of the open source forks_?
+
+Currently (October 2024), forks of Redis such as Valkey or Redirect are not officially supported by our upstream
+libraries, so using one of these to replace Redis is not officially supported.
+
+However, they do claim to be compatible with the Redis protocol and will likely work, but we will
+not be updating from using Redis as the broker officially just yet.

docs/setup.md

@@ -2,10 +2,10 @@
 
 You can go multiple routes to setup and run Paperless:
 
-- [Use the easy install docker script](#docker_script)
+-   [Use the script to setup a Docker install](#docker_script)
-- [Pull the image from Docker Hub](#docker_hub)
+-   [Use the Docker compose templates](#docker)
 -   [Build the Docker image yourself](#docker_build)
-- [Install Paperless directly on your system manually (bare metal)](#bare_metal)
+-   [Install Paperless-ngx directly on your system manually ("bare metal")](#bare_metal)
 -   A user-maintained list of commercial hosting providers can be found [in the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects)
 
 The Docker routes are quick & easy. These are the recommended routes.
@@ -18,108 +18,66 @@ The bare metal route is complicated to setup but makes it easier should
 you want to contribute some code back. You need to configure and run the
 above mentioned components yourself.
 
-### Docker using the Installation Script {#docker_script}
+### Use the Installation Script {#docker_script}
 
-Paperless provides an interactive installation script. This script will
+Paperless provides an interactive installation script to setup a Docker Compose
-ask you for a couple configuration options, download and create the
+installation. The script asks for a couple configuration options, and will then create the
-necessary configuration files, pull the docker image, start paperless
+necessary configuration files, pull the docker image, start Paperless-ngx and create your superuser
-and create your user account. This script essentially performs all the
+account. The script essentially automatically performs the steps described in [Docker setup](#docker).
-steps described in [Docker setup](#docker_hub) automatically.
 
-1.  Make sure that Docker and Docker Compose are installed.
+1.  Make sure that Docker and Docker Compose are [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
-
-    !!! tip
-
-        See the Docker installation instructions at https://docs.docker.com/engine/install/
 
 2.  Download and run the installation script:
 
     ```shell-session
-    $ bash -c "$(curl --location --silent --show-error https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/install-paperless-ngx.sh)"
+    bash -c "$(curl --location --silent --show-error https://raw.githubusercontent.com/paperless-ngx/paperless-ngx/main/install-paperless-ngx.sh)"
     ```
 
     !!! note
 
-        macOS users will need to install e.g. [gnu-sed](https://formulae.brew.sh/formula/gnu-sed) with support
+        macOS users will need to install [gnu-sed](https://formulae.brew.sh/formula/gnu-sed) with support
-        for running as `sed`.
+        for running as `sed` as well as [wget](https://formulae.brew.sh/formula/wget).
 
-### From GHCR / Docker Hub {#docker_hub}
+### Use Docker Compose {#docker}
 
-1.  Login with your user and create a folder in your home-directory to have a place for your
+1.  Make sure that Docker and Docker Compose are [installed](https://docs.docker.com/engine/install/){:target="\_blank"}.
-    configuration files and consumption directory.
-
-    ```shell-session
-    $ mkdir -v ~/paperless-ngx
-    ```
 
 2.  Go to the [/docker/compose directory on the project
-    page](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose)
+    page](https://github.com/paperless-ngx/paperless-ngx/tree/main/docker/compose){:target="\_blank"}
-    and download one of the `docker-compose.*.yml` files,
+    and download one of the `docker-compose.*.yml` files, depending on which database backend
-    depending on which database backend you want to use. Rename this
+    you want to use. Place the files in a local directory and rename it `docker-compose.yml`. Download the
-    file to `docker-compose.yml`. If you want to enable
+    `docker-compose.env` file and the `.env` file as well in the same directory.
-    optional support for Office documents, download a file with
+
-    `-tika` in the file name. Download the
+    If you want to enable optional support for Office and other documents, download a
-    `docker-compose.env` file and the `.env` file as well and store them
+    file with `-tika` in the file name.
-    in the same directory.
 
     !!! tip
 
         For new installations, it is recommended to use PostgreSQL as the
         database backend.
 
-3.  Install [Docker](https://docs.docker.com/engine/install/) and
+3.  Modify `docker-compose.yml` as needed. For example, you may want to change the paths to the
-    [Docker Compose](https://docs.docker.com/compose/install/).
+    consumption, media etc. directories to use 'bind mounts'.
-
+    Find the line that specifies where to mount the directory, e.g.:
-    !!! warning
-
-        If you want to use the included `docker-compose.*.yml` file, you
-        need to have at least Docker version **17.09.0** and Docker Compose
-        version **v2**. To check do: `docker compose version` or `docker -v`
-
-        See the [Docker installation guide](https://docs.docker.com/engine/install/) on how to install the current
-        version of Docker for your operating system or Linux distribution of
-        choice. To get the latest version of Docker Compose, follow the
-        [Docker Compose installation guide](https://docs.docker.com/compose/install/linux/) if your package repository
-        doesn't include it.
-
-4.  Modify `docker-compose.yml` to your preferences. You may want to
-    change the path to the consumption directory. Find the line that
-    specifies where to mount the consumption directory:
 
     ```yaml
     - ./consume:/usr/src/paperless/consume
     ```
 
-    Replace the part BEFORE the colon with a local directory of your
+    Replace the part _before_ the colon with a local directory of your choice:
-    choice:
 
     ```yaml
     - /home/jonaswinkler/paperless-inbox:/usr/src/paperless/consume
     ```
 
-    Don't change the part after the colon or paperless won't find your
+    You may also want to change the default port that the webserver will
-    documents.
+    use from the default (8000) to something else, e.g. for port 8010:
-
-    You may also need to change the default port that the webserver will
-    use from the default (8000):
-
-    ```yaml
-    ports:
-      - 8000:8000
-    ```
-
-    Replace the part BEFORE the colon with a port of your choice:
 
     ```yaml
     ports:
         - 8010:8000
     ```
 
-    Don't change the part after the colon or edit other lines that
-    refer to port 8000. Modifying the part before the colon will map
-    requests on another port to the webserver running on the default
-    port.
-
     **Rootless**
 
     !!! warning
@@ -143,21 +101,16 @@ steps described in [Docker setup](#docker_hub) automatically.
     >   user: <user_id>
     > ```
 
-5.  Modify `docker-compose.env`, following the comments in the file. The
+4.  Modify `docker-compose.env` with any configuration options you'd like.
-    most important change is to set `USERMAP_UID` and `USERMAP_GID` to
+    See the [configuration documentation](configuration.md) for all options.
-    the uid and gid of your user on the host system. Use `id -u` and
-    `id -g` to get these.
 
-    This ensures that both the docker container and you on the host
+    You may also need to set `USERMAP_UID` and `USERMAP_GID` to
-    machine have write access to the consumption directory. If your UID
+    the uid and gid of your user on the host system. Use `id -u` and
+    `id -g` to get these. This ensures that both the container and the host
+    user have write access to the consumption directory. If your UID
     and GID on the host system is 1000 (the default for the first normal
     user on most systems), it will work out of the box without any
-    modifications. `id "username"` to check.
+    modifications. Run `id "username"` to check.
-
-    !!! note
-
-        You can copy any setting from the file `paperless.conf.example` and
-        paste it here. Have a look at [configuration](configuration.md) to see what's available.
 
     !!! note
 
@@ -174,33 +127,30 @@ steps described in [Docker setup](#docker_hub) automatically.
         [`PAPERLESS_CONSUMER_POLLING`](configuration.md#PAPERLESS_CONSUMER_POLLING), which will disable inotify. See
         [here](configuration.md#polling).
 
-6.  Run `docker compose pull`. This will pull the image.
+5.  Run `docker compose pull`. This will pull the image from the GitHub container registry
+    by default but you can change the image to pull from Docker Hub by changing the `image`
+    line to `image: paperlessngx/paperless-ngx:latest`.
 
-7.  To be able to login, you will need a super user. To create it,
+6.  To be able to login, you will need a "superuser". To create it,
     execute the following command:
 
     ```shell-session
-    $ docker compose run --rm webserver createsuperuser
+    docker compose run --rm webserver createsuperuser
     ```
 
     or using docker exec from within the container:
 
     ```shell-session
-    $ python3 manage.py createsuperuser
+    python3 manage.py createsuperuser
     ```
 
-    This will prompt you to set a username, an optional e-mail address
+    This will guide you through the superuser setup.
-    and finally a password (at least 8 characters).
 
-8.  Run `docker compose up -d`. This will create and start the necessary containers.
+7.  Run `docker compose up -d`. This will create and start the necessary containers.
 
-9.  The default `docker-compose.yml` exports the webserver on your local
+8.  Congratulations! Your Paperless-ngx instance should now be accessible at `http://127.0.0.1:8000`
-    port
+    (or similar, depending on your configuration). Use the superuser credentials you have
-
+    created in the previous step to login.
-    8000\. If you did not change this, you should now be able to visit
-    your Paperless instance at `http://127.0.0.1:8000` or your servers
-    IP-Address:8000. Use the login credentials you have created with the
-    previous step.
 
 ### Build the Docker image yourself {#docker_build}
 
@@ -234,11 +184,11 @@ steps described in [Docker setup](#docker_hub) automatically.
             context: .
     ```
 
-4.  Follow steps 3 to 8 of [Docker Setup](#docker_hub). When asked to run
+4.  Follow the [Docker setup](#docker) above except when asked to run
-    `docker compose pull` to pull the image, do
+    `docker compose pull` to pull the image, run
 
     ```shell-session
-    $ docker compose build
+    docker compose build
     ```
 
     instead to build the image.
@@ -250,7 +200,7 @@ a minimal installation of Debian/Buster, which is the current stable
 release at the time of writing. Windows is not and will never be
 supported.
 
-Paperless requires Python 3. At this time, 3.9 - 3.11 are tested versions.
+Paperless requires Python 3. At this time, 3.10 - 3.12 are tested versions.
 Newer versions may work, but some dependencies may not fully support newer versions.
 Support for older Python versions may be dropped as they reach end of life or as newer versions
 are released, dependency support is confirmed, etc.
@@ -269,14 +219,13 @@ are released, dependency support is confirmed, etc.
     -   `libpq-dev` for PostgreSQL
     -   `libmagic-dev` for mime type detection
     -   `mariadb-client` for MariaDB compile time
-    - `mime-support` for mime type detection
     -   `libzbar0` for barcode detection
     -   `poppler-utils` for barcode detection
 
     Use this list for your preferred package management:
 
     ```
-    python3 python3-pip python3-dev imagemagick fonts-liberation gnupg libpq-dev default-libmysqlclient-dev pkg-config libmagic-dev mime-support libzbar0 poppler-utils
+    python3 python3-pip python3-dev imagemagick fonts-liberation gnupg libpq-dev default-libmysqlclient-dev pkg-config libmagic-dev libzbar0 poppler-utils
     ```
 
     These dependencies are required for OCRmyPDF, which is used for text
@@ -304,6 +253,7 @@ are released, dependency support is confirmed, etc.
 
     -   `libatlas-base-dev`
     -   `libxslt1-dev`
+    -   `mime-support`
 
     You will also need these for installing some of the python dependencies:
 
@@ -540,8 +490,7 @@ are released, dependency support is confirmed, etc.
 15. Optional: If using the NLTK machine learning processing (see
     [`PAPERLESS_ENABLE_NLTK`](configuration.md#PAPERLESS_ENABLE_NLTK) for details),
     download the NLTK data for the Snowball
-    Stemmer, Stopwords and Punkt tokenizer to your
+    Stemmer, Stopwords and Punkt tokenizer to `/usr/share/nltk_data`. Refer to the [NLTK
-    `PAPERLESS_DATA_DIR/nltk`. Refer to the [NLTK
     instructions](https://www.nltk.org/data.html) for details on how to
     download the data.
 
@@ -608,8 +557,8 @@ Migration to paperless-ngx is then performed in a few simple steps:
 1.  Stop paperless.
 
     ```bash
-    $ cd /path/to/current/paperless
+    cd /path/to/current/paperless
-    $ docker compose down
+    docker compose down
     ```
 
 2.  Do a backup for two purposes: If something goes wrong, you still
@@ -633,7 +582,7 @@ Migration to paperless-ngx is then performed in a few simple steps:
         names of your volumes with
 
         ``` shell-session
-        $ docker volume ls | grep _data
+        docker volume ls | grep _data
         ```
 
         and adjust the project name in the `.env` file so that it matches
@@ -644,7 +593,7 @@ Migration to paperless-ngx is then performed in a few simple steps:
     after you migrated your existing SQLite database.
 
 5.  Adjust `docker-compose.yml` and `docker-compose.env` to your needs.
-    See [Docker setup](#docker_hub) details on
+    See [Docker setup](#docker) details on
     which edits are advised.
 
 6.  [Update paperless.](administration.md#updating)
@@ -654,7 +603,7 @@ Migration to paperless-ngx is then performed in a few simple steps:
     the search index:
 
     ```shell-session
-    $ docker compose run --rm webserver document_index reindex
+    docker compose run --rm webserver document_index reindex
     ```
 
     This will migrate your database and create the search index. After
@@ -663,7 +612,7 @@ Migration to paperless-ngx is then performed in a few simple steps:
 8.  Start paperless-ngx.
 
     ```bash
-    $ docker compose up -d
+    docker compose up -d
     ```
 
     This will run paperless in the background and automatically start it

docs/troubleshooting.md

@@ -18,7 +18,7 @@ Check for the following issues:
     automatically. Manually invoke the task processor by executing
 
     ```shell-session
-  $ celery --app paperless worker
+    celery --app paperless worker
     ```
 
 -   Look at the output of paperless and inspect it for any errors.
@@ -144,7 +144,7 @@ The following error occurred while consuming document.pdf: [Errno 13] Permission
 This happens when paperless does not have permission to delete files
 inside the consumption directory. Ensure that `USERMAP_UID` and
 `USERMAP_GID` are set to the user id and group id you use on the host
-operating system, if these are different from `1000`. See [Docker setup](setup.md#docker_hub).
+operating system, if these are different from `1000`. See [Docker setup](setup.md#docker).
 
 Also ensure that you are able to read and write to the consumption
 directory on the host.
@@ -353,6 +353,20 @@ ways from the original. As the logs indicate, if you encounter this error you ca
 `PAPERLESS_OCR_USER_ARGS: '{"continue_on_soft_render_error": true}'` to try to 'force'
 processing documents with this issue.
 
+## Logs show "possible incompatible database column" when deleting documents {#convert-uuid-field}
+
+You may see errors when deleting documents like:
+
+```
+Data too long for column 'transaction_id' at row 1
+```
+
+This error can occur in installations which have upgraded from a version of Paperless-ngx that used Django 4 (Paperless-ngx versions prior to v2.13.0) with a MariaDB/MySQL database. Due to the backawards-incompatible change in Django 5, the column "documents_document.transaction_id" will need to be re-created, which can be done with a one-time run of the following management command:
+
+```shell-session
+$ python3 manage.py convert_mariadb_uuid
+```
+
 ## Platform-Specific Deployment Troubleshooting
 
 A user-maintained wiki page is available to help troubleshoot issues that may arise when trying to deploy Paperless-ngx on specific platforms, for example SELinux. Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Platform%E2%80%90Specific-Troubleshooting).

docs/usage.md

@@ -1,9 +1,9 @@
 # Usage Overview
 
-Paperless is an application that manages your personal documents. With
+Paperless-ngx is an application that manages your personal documents. With
-the help of a document scanner (see [the scanners wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Scanner-&-Software-Recommendations)),
+the (optional) help of a document scanner (see [the scanners wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Scanner-&-Software-Recommendations)), Paperless-ngx transforms your unwieldy
-paperless transforms your unwieldy physical document binders into a searchable archive
+physical documents into a searchable archive and provides many utilities
-and provides many utilities for finding and managing your documents.
+for finding and managing your documents.
 
 ## Terms and definitions
 
@@ -12,10 +12,10 @@ documents:
 
 -   The _consumer_ watches a specified folder and adds all documents in
     that folder to paperless.
-- The _web server_ provides a UI that you use to manage and search for
+-   The _web server_ (web UI) provides a UI that you use to manage and
-  your scanned documents.
+    search documents.
 
-Each document has a couple of fields that you can assign to them:
+Each document has data fields that you can assign to them:
 
 -   A _Document_ is a piece of paper that sometimes contains valuable
     information.
@@ -41,6 +41,53 @@ Each document has a couple of fields that you can assign to them:
 -   The _content_ of a document is the text that was OCR'ed from the
     document. This text is fed into the search engine and is used for
     matching tags, correspondents and document types.
+-   Paperless-ngx also supports _custom fields_ which can be used to
+    store additional metadata about a document.
+
+## The Web UI
+
+The web UI is the primary way to interact with Paperless-ngx. It is a
+single-page application that is built with modern web technologies and
+is designed to be fast and responsive. The web UI includes a robust
+interface for filtering, viewing, searching and editing documents.
+You can also manage tags, correspondents, document types, and other
+settings from the web UI.
+
+The web UI also includes a 'tour' feature that can be accessed from the
+settings page or from the dashboard for new users. The tour highlights
+some of the key features of the web UI and can be useful for new users.
+
+### Dashboard
+
+The dashboard is the first page you see when you log in. By default, it
+does not show any documents, but you can add saved views to the dashboard
+to show documents that match certain criteria. The dashboard also includes
+a button to upload documents to Paperless-ngx but you can also drag and
+drop files anywhere in the app to initiate the consumption process.
+
+### Document List
+
+The document list is the primary way to view and interact with your documents.
+You can filter the list by tags, correspondents, document types, and other
+criteria. You can also edit documents in bulk including assigning tags,
+correspondents, document types, and custom fields. Selecting document(s) from
+the list will allow you to perform the various bulk edit operations. The
+document list also includes a search bar that allows you to search for documents
+by title, ASN, and use advanced search syntax.
+
+### Document Detail
+
+The document detail page shows all the information about a single document.
+You can view the document, edit its metadata, assign tags, correspondents,
+document types, and custom fields. You can also view the document history,
+download the document or share it via a share link.
+
+### Management Lists
+
+Paperless-ngx includes management lists for tags, correspondents, document types
+and more. These areas allow you to view, add, edit, delete and manage permissions
+for these objects. You can also manage saved views, mail accounts, mail rules,
+workflows and more from the management sections.
 
 ## Adding documents to paperless
 
@@ -112,7 +159,7 @@ process.
 Please see [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Related-Projects) for a user-maintained list of related projects and
 software (e.g. for mobile devices) that is compatible with Paperless-ngx.
 
-### IMAP (Email) {#usage-email}
+### Email {#usage-email}
 
 You can tell paperless-ngx to consume documents from your email
 accounts. This is a very flexible and powerful feature, if you regularly
@@ -136,7 +183,8 @@ These rules perform the following:
 
 Paperless will check all emails only once and completely ignore messages
 that do not match your filters. It will also only perform the rule action
-on e-mails that it has consumed documents from.
+on e-mails that it has consumed documents from. The filename attachment
+patterns can include wildcards and multiple patterns separated by a comma.
 
 The actions all ensure that the same mail is not consumed twice by
 different means. These are as follows:
@@ -199,6 +247,14 @@ different means. These are as follows:
 Paperless is set up to check your mails every 10 minutes. This can be
 configured via [`PAPERLESS_EMAIL_TASK_CRON`](configuration.md#PAPERLESS_EMAIL_TASK_CRON)
 
+#### OAuth Email Setup
+
+Paperless-ngx supports OAuth2 authentication for Gmail and Outlook email accounts. To set up an email account with OAuth2, you will need to create a 'developer' app with the respective provider and obtain the client ID and client secret and set the appropriate [configuration variables](configuration.md#email_oauth). You will also need to set either [`PAPERLESS_OAUTH_CALLBACK_BASE_URL`](configuration.md#PAPERLESS_OAUTH_CALLBACK_BASE_URL) or [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) to the correct value for the OAuth2 flow to work correctly.
+
+Specific instructions for setting up the required 'developer' app with Google or Microsoft are beyond the scope of this documentation, but you can find user-maintained instructions in [the wiki](https://github.com/paperless-ngx/paperless-ngx/wiki/Email-OAuth-App-Setup) or by searching the web.
+
+Once setup, navigating to the email settings page in Paperless-ngx will allow you to add an email account for Gmail or Outlook using OAuth2. After authenticating, you will be presented with the newly-created account where you will need to enter and save your email address. After this, the account will work as any other email account in Paperless-ngx and refreshing tokens will be handled automatically.
+
 ### REST API
 
 You can also submit a document using the REST API, see [POSTing documents](api.md#file-uploads)
@@ -237,9 +293,13 @@ Settings > Users & Groups, assuming the user has access. If a user is designated
 as a member of a group those permissions will be inherited and this is reflected in the UI. Explicit
 permissions can be granted to limit access to certain parts of the UI (and corresponding API endpoints).
 
-!!! note
+!!! tip
 
-    Superusers can access all parts of the front and backend application as well as any and all objects.
+    By default, new users are not granted any permissions, except those inherited from any group(s) of which they are a member.
+
+#### Superusers
+
+Superusers can access all parts of the front and backend application as well as any and all objects. Superuser status can only be granted by another superuser.
 
 #### Admin Status
 
@@ -248,29 +308,29 @@ as well as accessing the Django backend.
 
 #### Detailed Explanation of Global Permissions {#global-permissions}
 
-Global permissions define what areas of the app and API endpoints the user can access. For example, they
+Global permissions define what areas of the app and API endpoints users can access. For example, they
 determine if a user can create, edit, delete or view _any_ documents, but individual documents themselves
 still have "object-level" permissions.
 
 | Type          | Details                                                                                                                                                                  |
-| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | AppConfig     | _Change_ or higher permissions grants access to the "Application Configuration" area.                                                                                    |
-| Correspondent | Grants global permissions to add, edit, delete or view Correspondents.                                                                                                                              |
+| Correspondent | Add, edit, delete or view Correspondents.                                                                                                                                |
-| CustomField   | Grants global permissions to add, edit, delete or view Custom Fields.                                                                                                                               |
+| CustomField   | Add, edit, delete or view Custom Fields.                                                                                                                                 |
-| Document      | Grants global permissions to add, edit, delete or view Documents.                                                                                                                                   |
+| Document      | Add, edit, delete or view Documents.                                                                                                                                     |
-| DocumentType  | Grants global permissions to add, edit, delete or view Document Types.                                                                                                                              |
+| DocumentType  | Add, edit, delete or view Document Types.                                                                                                                                |
-| Group         | Grants global permissions to add, edit, delete or view Groups.                                                                                                                                      |
+| Group         | Add, edit, delete or view Groups.                                                                                                                                        |
-| MailAccount   | Grants global permissions to add, edit, delete or view Mail Accounts.                                                                                                                               |
+| MailAccount   | Add, edit, delete or view Mail Accounts.                                                                                                                                 |
-| MailRule      | Grants global permissions to add, edit, delete or view Mail Rules.                                                                                                                                  |
+| MailRule      | Add, edit, delete or view Mail Rules.                                                                                                                                    |
-| Note          | Grants global permissions to add, edit, delete or view Notes.                                                                                                                                       |
+| Note          | Add, edit, delete or view Notes.                                                                                                                                         |
-| PaperlessTask | Grants global permissions to view or dismiss (_Change_) File Tasks.                                                                                                                                 |
+| PaperlessTask | View or dismiss (_Change_) File Tasks.                                                                                                                                   |
-| SavedView     | Grants global permissions to add, edit, delete or view Saved Views.                                                                                                                                 |
+| SavedView     | Add, edit, delete or view Saved Views.                                                                                                                                   |
-| ShareLink     | Grants global permissions to add, delete or view Share Links.                                                                                                                                       |
+| ShareLink     | Add, delete or view Share Links.                                                                                                                                         |
-| StoragePath   | Grants global permissions to add, edit, delete or view Storage Paths.                                                                                                                               |
+| StoragePath   | Add, edit, delete or view Storage Paths.                                                                                                                                 |
-| Tag           | Grants global permissions to add, edit, delete or view Tags.                                                                                                                                        |
+| Tag           | Add, edit, delete or view Tags.                                                                                                                                          |
-| UISettings    | Grants global permissions to add, edit, delete or view the UI settings that are used by the web app.<br/>Users expected to access the web UI should usually be granted at least _View_ permissions. |
+| UISettings    | Add, edit, delete or view the UI settings that are used by the web app.<br/>:warning: **Users that will access the web UI must be granted at least _View_ permissions.** |
-| User          | Grants global permissions to add, edit, delete or view Users.                                                                                                                                       |
+| User          | Add, edit, delete or view Users.                                                                                                                                         |
-| Workflow      | Grants global permissions to add, edit, delete or view Workflows.<br/>Note that Workflows are global, in other words all users who can access workflows have access to the same set of them.        |
+| Workflow      | Add, edit, delete or view Workflows.<br/>Note that Workflows are global, in other words all users who can access workflows have access to the same set of them.          |
 
 #### Detailed Explanation of Object Permissions {#object-permissions}
 
@@ -286,6 +346,12 @@ In order to enable the password reset feature you will need to setup an SMTP bac
 [`PAPERLESS_EMAIL_HOST`](configuration.md#PAPERLESS_EMAIL_HOST). If your installation does not have
 [`PAPERLESS_URL`](configuration.md#PAPERLESS_URL) set, the reset link included in emails will use the server host.
 
+### Two-factor authentication
+
+Users can enable two-factor authentication (2FA) for their accounts from the 'My Profile' dialog. Opening the dropdown reveals a QR code that can be scanned by a 2FA app (e.g. Google Authenticator) to generate a code. The code must then be entered in the dialog to enable 2FA. If the code is accepted and 2FA is enabled, the user will be shown a set of 10 recovery codes that can be used to login in the event that the 2FA device is lost or unavailable. These codes should be stored securely and cannot be retrieved again. Once enabled, users will be required to enter a code from their 2FA app when logging in.
+
+Should a user lose access to their 2FA device and all recovery codes, a superuser can disable 2FA for the user from the 'Users & Groups' management screen.
+
 ## Workflows
 
 !!! note
@@ -303,6 +369,8 @@ fields and permissions, which will be merged.
 
 ### Workflow Triggers
 
+#### Types
+
 Currently, there are three events that correspond to workflow trigger 'types':
 
 1. **Consumption Started**: _before_ a document is consumed, so events can include filters by source (mail, consumption
@@ -312,8 +380,10 @@ Currently, there are three events that correspond to workflow trigger 'types':
    be used for filtering.
 3. **Document Updated**: when a document is updated. Similar to 'added' events, triggers can include filtering by content matching,
    tags, doc type, or correspondent.
+4. **Scheduled**: a scheduled trigger that can be used to run workflows at a specific time. The date used can be either the document
+   added, created, updated date or you can specify a (date) custom field. You can also specify a day offset from the date.
 
-The following flow diagram illustrates the three trigger types:
+The following flow diagram illustrates the three document trigger types:
 
 ```mermaid
 flowchart TD
@@ -359,25 +429,50 @@ Workflows allow you to filter by:
 
 ### Workflow Actions
 
-There are currently two types of workflow actions, "Assignment", which can assign:
+#### Types
 
-- Title, see [title placeholders](usage.md#title-placeholders) below
+The following workflow action types are available:
+
+##### Assignment
+
+"Assignment" actions can assign:
+
+-   Title, see [workflow placeholders](usage.md#workflow-placeholders) below
 -   Tags, correspondent, document type and storage path
 -   Document owner
 -   View and / or edit permissions to users or groups
 -   Custom fields. Note that no value for the field will be set
 
-and "Removal" actions, which can remove either all of or specific sets of the following:
+##### Removal
+
+"Removal" actions can remove either all of or specific sets of the following:
 
 -   Tags, correspondents, document types or storage paths
 -   Document owner
 -   View and / or edit permissions
 -   Custom fields
 
-#### Title placeholders
+##### Email
 
-Workflow titles can include placeholders but the available options differ depending on the type of
+"Email" actions can send documents via email. This action requires a mail server to be [configured](configuration.md#email-sending). You can specify:
-workflow trigger. This is because at the time of consumption (when the title is to be set), no automatic tags etc. have been
+
+-   The recipient email address(es) separated by commas
+-   The subject and body of the email, which can include placeholders, see [placeholders](usage.md#workflow-placeholders) below
+-   Whether to include the document as an attachment
+
+##### Webhook
+
+"Webhook" actions send a POST request to a specified URL. You can specify:
+
+-   The URL to send the request to
+-   The request body as text or as key-value pairs, which can include placeholders, see [placeholders](usage.md#workflow-placeholders) below.
+-   Encoding for the request body, either JSON or form data
+-   The request headers as key-value pairs
+
+#### Workflow placeholders
+
+Some workflow text can include placeholders but the available options differ depending on the type of
+workflow trigger. This is because at the time of consumption (when the text is to be set), no automatic tags etc. have been
 applied. You can use the following placeholders with any trigger type:
 
 -   `{correspondent}`: assigned correspondent name
@@ -392,6 +487,7 @@ applied. You can use the following placeholders with any trigger type:
 -   `{added_day}`: added day
 -   `{added_time}`: added time in HH:MM format
 -   `{original_filename}`: original file name without extension
+-   `{filename}`: current file name without extension
 
 The following placeholders are only available for "added" or "updated" triggers
 
@@ -403,6 +499,7 @@ The following placeholders are only available for "added" or "updated" triggers
 -   `{created_month_name_short}`: created month short name
 -   `{created_day}`: created day
 -   `{created_time}`: created time in HH:MM format
+-   `{doc_url}`: URL to the document in the web UI. Requires the `PAPERLESS_URL` setting to be set.
 
 ### Workflow permissions
 
@@ -739,8 +836,8 @@ Paperless-ngx consists of the following components:
     with paperless. You may start the webserver directly with
 
     ```shell-session
-  $ cd /path/to/paperless/src/
+    cd /path/to/paperless/src/
-  $ gunicorn -c ../gunicorn.conf.py paperless.wsgi
+    gunicorn -c ../gunicorn.conf.py paperless.wsgi
     ```
 
     or by any other means such as Apache `mod_wsgi`.
@@ -755,8 +852,8 @@ Paperless-ngx consists of the following components:
     Start the consumer with the management command `document_consumer`:
 
     ```shell-session
-  $ cd /path/to/paperless/src/
+    cd /path/to/paperless/src/
-  $ python3 manage.py document_consumer
+    python3 manage.py document_consumer
     ```
 
 -   **The task processor:** Paperless relies on [Celery - Distributed

gunicorn.conf.py

@@ -3,7 +3,7 @@ import os
 # See https://docs.gunicorn.org/en/stable/settings.html for
 # explanations of settings
 
-bind = f'{os.getenv("PAPERLESS_BIND_ADDR", "[::]")}:{os.getenv("PAPERLESS_PORT", 8000)}'
+bind = f"{os.getenv('PAPERLESS_BIND_ADDR', '[::]')}:{os.getenv('PAPERLESS_PORT', 8000)}"
 
 workers = int(os.getenv("PAPERLESS_WEBSERVER_WORKERS", 1))
 worker_class = "paperless.workers.ConfigurableWorker"

install-paperless-ngx.sh

@@ -330,8 +330,13 @@ SECRET_KEY=$(LC_ALL=C tr -dc 'a-zA-Z0-9!#$%&()*+,-./:;<=>?@[\]^_`{|}~' < /dev/ur
 
 DEFAULT_LANGUAGES=("deu eng fra ita spa")
 
-_split_langs="${OCR_LANGUAGE//+/ }"
+# OCR_LANG requires underscores, replace dashes if the user gave them with underscores
-read -r -a OCR_LANGUAGES_ARRAY <<< "${_split_langs}"
+readonly ocr_langs=${OCR_LANGUAGE//-/_}
+# OCR_LANGS (the install version) uses dashes, not underscores, so convert underscore to dash and plus to space
+install_langs=${OCR_LANGUAGE//_/-}    # First convert any underscores to dashes
+install_langs=${install_langs//+/ }    # Then convert plus signs to spaces
+
+read -r -a install_langs_array <<< "${install_langs}"
 
 {
 	if [[ ! $URL == "" ]] ; then
@@ -344,10 +349,10 @@ read -r -a OCR_LANGUAGES_ARRAY <<< "${_split_langs}"
 		echo "USERMAP_GID=$USERMAP_GID"
 	fi
 	echo "PAPERLESS_TIME_ZONE=$TIME_ZONE"
-	echo "PAPERLESS_OCR_LANGUAGE=$OCR_LANGUAGE"
+	echo "PAPERLESS_OCR_LANGUAGE=$ocr_langs"
 	echo "PAPERLESS_SECRET_KEY='$SECRET_KEY'"
-	if [[ ! ${DEFAULT_LANGUAGES[*]} =~ ${OCR_LANGUAGES_ARRAY[*]} ]] ; then
+	if [[ ! ${DEFAULT_LANGUAGES[*]} =~ ${install_langs_array[*]} ]] ; then
-		echo "PAPERLESS_OCR_LANGUAGES=${OCR_LANGUAGES_ARRAY[*]}"
+		echo "PAPERLESS_OCR_LANGUAGES=${install_langs_array[*]}"
 	fi
 } > docker-compose.env
 

mkdocs.yml

@@ -6,6 +6,12 @@ theme:
     text: Roboto
     code: Roboto Mono
   palette:
+    # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+
     # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
@@ -18,7 +24,7 @@ theme:
       scheme: slate
       toggle:
         icon: material/brightness-4
-        name: Switch to light mode
+        name: Switch to system preference
   features:
     - navigation.tabs
     - navigation.top
@@ -49,6 +55,9 @@ markdown_extensions:
         - name: mermaid
           class: mermaid
           format: !!python/name:pymdownx.superfences.fence_code_format
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
 strict: true
 nav:
     - index.md

src-ui/.eslintrc.json

@@ -11,8 +11,7 @@
       ],
       "parserOptions": {
         "project": [
-          "tsconfig.json",
+          "tsconfig.json"
-          "e2e/tsconfig.json"
         ],
         "createDefaultProgram": true
       },

src-ui/angular.json

@@ -33,6 +33,7 @@
           "it-IT": "src/locale/messages.it_IT.xlf",
           "ja-JP": "src/locale/messages.ja_JP.xlf",
           "lb-LU": "src/locale/messages.lb_LU.xlf",
+          "ko-KR": "src/locale/messages.ko_KR.xlf",
           "nl-NL": "src/locale/messages.nl_NL.xlf",
           "no-NO": "src/locale/messages.no_NO.xlf",
           "pl-PL": "src/locale/messages.pl_PL.xlf",
@@ -51,8 +52,11 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-builders/custom-webpack:browser",
           "options": {
+            "customWebpackConfig": {
+                "path": "./extra-webpack.config.ts"
+            },
             "outputPath": "dist/paperless-ui",
             "outputHashing": "none",
             "index": "src/index.html",
@@ -66,8 +70,8 @@
               "src/assets",
               "src/manifest.webmanifest",
               {
-                "glob": "{pdf.worker.min.js,pdf.min.js}",
+                "glob": "{pdf.worker.min.mjs,pdf.min.mjs}",
-                "input": "node_modules/pdfjs-dist/build/",
+                "input": "node_modules/pdfjs-dist/legacy/build/",
                 "output": "/assets/js/"
               }
             ],
@@ -124,7 +128,7 @@
           "defaultConfiguration": ""
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "buildTarget": "paperless-ui:build:en-US"
           },
@@ -135,7 +139,7 @@
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular-builders/custom-webpack:extract-i18n",
           "options": {
             "buildTarget": "paperless-ui:build"
           }

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

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/admin/requests/api-settings.har'
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-settings.har')
 
 test('should activate / deactivate save button when settings change', async ({
   page,
@@ -33,24 +34,3 @@ test('should apply appearance changes when set', async ({ page }) => {
   await page.getByLabel('Enable dark mode').click()
   await expect(page.locator('html')).toHaveAttribute('data-bs-theme', /dark/)
 })
-
-test('should toggle saved view options when set & saved', async ({ page }) => {
-  await page.routeFromHAR(REQUESTS_HAR, { notFound: 'fallback' })
-  await page.goto('/settings/savedviews')
-  await page.getByLabel('Show on dashboard').first().click()
-  await page.getByLabel('Show in sidebar').first().click()
-  const updatePromise = page.waitForRequest((request) => {
-    if (!request.url().includes('8')) return true // skip other saved views
-    const data = request.postDataJSON()
-    const isValid =
-      data['show_on_dashboard'] === true && data['show_in_sidebar'] === true
-    return (
-      isValid &&
-      request.method() === 'PATCH' &&
-      request.url().includes('/api/saved_views/')
-    )
-  })
-  await page.getByRole('button', { name: 'Save' }).scrollIntoViewIfNeeded()
-  await page.getByRole('button', { name: 'Save' }).click()
-  await updatePromise
-})

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

@@ -1,9 +1,10 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR1 = 'e2e/dashboard/requests/api-dashboard1.har'
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-dashboard1.har')
-const REQUESTS_HAR2 = 'e2e/dashboard/requests/api-dashboard2.har'
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-dashboard2.har')
-const REQUESTS_HAR3 = 'e2e/dashboard/requests/api-dashboard3.har'
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-dashboard3.har')
-const REQUESTS_HAR4 = 'e2e/dashboard/requests/api-dashboard4.har'
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-dashboard4.har')
 
 test('dashboard inbox link', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })

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

@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/document-detail/requests/api-document-detail.har'
+const REQUESTS_HAR = path.join(__dirname, 'requests/api-document-detail.har')
-const REQUESTS_HAR2 = 'e2e/document-detail/requests/api-document-detail2.har'
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-detail2.har')
 
 test('should activate / deactivate save button when changes are saved', async ({
   page,

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

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR1 = 'e2e/document-list/requests/api-document-list1.har'
+const REQUESTS_HAR1 = path.join(__dirname, 'requests/api-document-list1.har')
-const REQUESTS_HAR2 = 'e2e/document-list/requests/api-document-list2.har'
+const REQUESTS_HAR2 = path.join(__dirname, 'requests/api-document-list2.har')
-const REQUESTS_HAR3 = 'e2e/document-list/requests/api-document-list3.har'
+const REQUESTS_HAR3 = path.join(__dirname, 'requests/api-document-list3.har')
-const REQUESTS_HAR4 = 'e2e/document-list/requests/api-document-list4.har'
+const REQUESTS_HAR4 = path.join(__dirname, 'requests/api-document-list4.har')
-const REQUESTS_HAR5 = 'e2e/document-list/requests/api-document-list5.har'
+const REQUESTS_HAR5 = path.join(__dirname, 'requests/api-document-list5.har')
-const REQUESTS_HAR6 = 'e2e/document-list/requests/api-document-list6.har'
+const REQUESTS_HAR6 = path.join(__dirname, 'requests/api-document-list6.har')
 
 test('basic filtering', async ({ page }) => {
   await page.routeFromHAR(REQUESTS_HAR1, { notFound: 'fallback' })
@@ -84,13 +85,8 @@ test('date filtering', async ({ page }) => {
   await page.getByRole('button', { name: 'Dates' }).click()
   await page.getByRole('menuitem', { name: 'Last 3 months' }).first().click()
   await expect(page.locator('pngx-document-list')).toHaveText(/one document/i)
-  await page.getByRole('button', { name: 'Dates Clear selected' }).click()
+  await page.getByRole('menuitem', { name: 'Last 3 months' }).first().click()
-  await page.getByRole('button', { name: 'Dates' }).click()
+  await page.getByLabel('Datesselected').getByRole('button').first().click()
-  await page
-    .getByRole('menuitem', { name: 'After mm/dd/yyyy' })
-    .getByRole('button')
-    .first()
-    .click()
   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()
@@ -139,11 +135,11 @@ 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 page.locator('.btn-group > label').first().click()
   await expect(page.locator('pngx-document-list table')).toBeVisible()
-  await page.locator('.btn-group label').nth(1).click()
+  await page.locator('label:nth-child(4)').first().click()
   await expect(page.locator('pngx-document-card-small').first()).toBeAttached()
-  await page.locator('.btn-group label').nth(2).click()
+  await page.locator('label:nth-child(6)').click()
   await expect(page.locator('pngx-document-card-large').first()).toBeAttached()
 })
 

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

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
+import path from 'node:path'
 
-const REQUESTS_HAR = 'e2e/permissions/requests/api-global-permissions.har'
+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' })

src-ui/extra-webpack.config.ts

@@ -0,0 +1,24 @@
+import {
+  CustomWebpackBrowserSchema,
+  TargetOptions,
+} from '@angular-builders/custom-webpack'
+import * as webpack from 'webpack'
+const { codecovWebpackPlugin } = require('@codecov/webpack-plugin')
+
+export default (
+  config: webpack.Configuration,
+  options: CustomWebpackBrowserSchema,
+  targetOptions: TargetOptions
+) => {
+  if (config.plugins) {
+    config.plugins.push(
+      codecovWebpackPlugin({
+        enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
+        bundleName: 'paperless-ngx',
+        uploadToken: process.env.CODECOV_TOKEN,
+      })
+    )
+  }
+
+  return config
+}

src-ui/package.json

@@ -11,60 +11,63 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^18.0.6",
+    "@angular/cdk": "^19.0.2",
-    "@angular/common": "~18.0.6",
+    "@angular/common": "~19.0.3",
-    "@angular/compiler": "~18.0.6",
+    "@angular/compiler": "~19.0.3",
-    "@angular/core": "~18.0.6",
+    "@angular/core": "~19.0.3",
-    "@angular/forms": "~18.0.6",
+    "@angular/forms": "~19.0.3",
-    "@angular/localize": "~18.0.6",
+    "@angular/localize": "~19.0.3",
-    "@angular/platform-browser": "~18.0.6",
+    "@angular/platform-browser": "~19.0.3",
-    "@angular/platform-browser-dynamic": "~18.0.6",
+    "@angular/platform-browser-dynamic": "~19.0.3",
-    "@angular/router": "~18.0.6",
+    "@angular/router": "~19.0.3",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^18.0.0",
-    "@ng-select/ng-select": "^13.4.1",
+    "@ng-select/ng-select": "^14.1.0",
     "@ngneat/dirty-check-forms": "^3.0.3",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
     "file-saver": "^2.0.5",
     "mime-names": "^1.0.0",
-    "ng2-pdf-viewer": "^10.2.2",
+    "ng2-pdf-viewer": "^10.4.0",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
-    "ngx-cookie-service": "^18.0.0",
+    "ngx-cookie-service": "^19.0.0",
     "ngx-file-drop": "^16.0.0",
-    "ngx-ui-tour-ng-bootstrap": "^15.0.0",
+    "ngx-ui-tour-ng-bootstrap": "^16.0.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.2",
+    "tslib": "^2.8.1",
-    "uuid": "^9.0.1",
+    "utif": "^3.1.0",
-    "zone.js": "^0.14.4"
+    "uuid": "^11.0.2",
+    "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular-builders/jest": "^18.0.0",
+    "@angular-builders/custom-webpack": "^19.0.0-beta.0",
-    "@angular-devkit/build-angular": "^18.0.7",
+    "@angular-builders/jest": "^19.0.0-beta.1",
-    "@angular-devkit/core": "^18.0.7",
+    "@angular-devkit/build-angular": "^19.0.4",
-    "@angular-devkit/schematics": "^18.0.7",
+    "@angular-devkit/core": "^19.0.4",
-    "@angular-eslint/builder": "18.1.0",
+    "@angular-devkit/schematics": "^19.0.4",
-    "@angular-eslint/eslint-plugin": "18.1.0",
+    "@angular-eslint/builder": "19.0.0",
-    "@angular-eslint/eslint-plugin-template": "18.1.0",
+    "@angular-eslint/eslint-plugin": "19.0.0",
-    "@angular-eslint/schematics": "18.1.0",
+    "@angular-eslint/eslint-plugin-template": "19.0.0",
-    "@angular-eslint/template-parser": "18.1.0",
+    "@angular-eslint/schematics": "19.0.0",
-    "@angular/cli": "~18.0.7",
+    "@angular-eslint/template-parser": "19.0.0",
-    "@angular/compiler-cli": "~18.0.3",
+    "@angular/cli": "~19.0.4",
-    "@playwright/test": "^1.42.1",
+    "@angular/compiler-cli": "~19.0.3",
-    "@types/jest": "^29.5.12",
+    "@codecov/webpack-plugin": "^1.2.1",
-    "@types/node": "^20.12.2",
+    "@playwright/test": "^1.48.2",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@types/jest": "^29.5.14",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@types/node": "^22.8.6",
-    "@typescript-eslint/utils": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "concurrently": "^8.2.2",
+    "@typescript-eslint/parser": "^8.12.2",
-    "eslint": "^8.57.0",
+    "@typescript-eslint/utils": "^8.0.0",
+    "eslint": "^9.14.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.0.0",
+    "jest-preset-angular": "^14.4.2",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4"
-    "wait-on": "^7.2.0"
+  },
-  }
+  "typings": "./src/typings.d.ts"
 }

src-ui/setup-jest.ts

@@ -1,9 +1,10 @@
-import { jest } from '@jest/globals'
-if (process.env.NODE_ENV === 'test') {
-  require('jest-preset-angular/setup-jest')
-}
 import '@angular/localize/init'
-import { TextEncoder, TextDecoder } from 'util'
+import { jest } from '@jest/globals'
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'
+import { TextDecoder, TextEncoder } from 'util'
+if (process.env.NODE_ENV === 'test') {
+  setupZoneTestEnv()
+}
 global.TextEncoder = TextEncoder
 global.TextDecoder = TextDecoder
 
@@ -24,6 +25,7 @@ import localeFr from '@angular/common/locales/fr'
 import localeHu from '@angular/common/locales/hu'
 import localeIt from '@angular/common/locales/it'
 import localeJa from '@angular/common/locales/ja'
+import localeKo from '@angular/common/locales/ko'
 import localeLb from '@angular/common/locales/lb'
 import localeNl from '@angular/common/locales/nl'
 import localeNo from '@angular/common/locales/no'
@@ -55,6 +57,7 @@ registerLocaleData(localeFr)
 registerLocaleData(localeHu)
 registerLocaleData(localeIt)
 registerLocaleData(localeJa)
+registerLocaleData(localeKo)
 registerLocaleData(localeLb)
 registerLocaleData(localeNl)
 registerLocaleData(localeNo)

src-ui/src/app/app-routing.module.ts

@@ -1,32 +1,33 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
+import { RouterModule, Routes } from '@angular/router'
+import { ConfigComponent } from './components/admin/config/config.component'
+import { LogsComponent } from './components/admin/logs/logs.component'
+import { SettingsComponent } from './components/admin/settings/settings.component'
+import { TasksComponent } from './components/admin/tasks/tasks.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
+import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 import { AppFrameComponent } from './components/app-frame/app-frame.component'
 import { DashboardComponent } from './components/dashboard/dashboard.component'
+import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
 import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
 import { DocumentListComponent } from './components/document-list/document-list.component'
 import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
+import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
 import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
-import { LogsComponent } from './components/admin/logs/logs.component'
+import { MailComponent } from './components/manage/mail/mail.component'
-import { SettingsComponent } from './components/admin/settings/settings.component'
+import { SavedViewsComponent } from './components/manage/saved-views/saved-views.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { NotFoundComponent } from './components/not-found/not-found.component'
-import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DirtyFormGuard } from './guards/dirty-form.guard'
 import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { TasksComponent } from './components/admin/tasks/tasks.component'
+import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { PermissionsGuard } from './guards/permissions.guard'
+import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
+import { NotFoundComponent } from './components/not-found/not-found.component'
 import { DirtyDocGuard } from './guards/dirty-doc.guard'
+import { DirtyFormGuard } from './guards/dirty-form.guard'
 import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
 import {
   PermissionAction,
   PermissionType,
 } from './services/permissions.service'
-import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
-import { MailComponent } from './components/manage/mail/mail.component'
-import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { ConfigComponent } from './components/admin/config/config.component'
-import { TrashComponent } from './components/admin/trash/trash.component'
 
 export const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -165,6 +166,10 @@ export const routes: Routes = [
         path: 'settings/usersgroups',
         redirectTo: '/usersgroups',
       },
+      {
+        path: 'settings/savedviews',
+        redirectTo: '/savedviews',
+      },
       {
         path: 'settings',
         component: SettingsComponent,
@@ -255,6 +260,17 @@ export const routes: Routes = [
           },
         },
       },
+      {
+        path: 'savedviews',
+        component: SavedViewsComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requiredPermission: {
+            action: PermissionAction.View,
+            type: PermissionType.SavedView,
+          },
+        },
+      },
     ],
   },
 

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

@@ -1,30 +1,31 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
-  TestBed,
   fakeAsync,
+  TestBed,
   tick,
 } from '@angular/core/testing'
 import { Router, RouterModule } from '@angular/router'
-import { TourService, TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
+import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { NgxFileDropModule } from 'ngx-file-drop'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { PermissionsGuard } from './guards/permissions.guard'
 import {
   ConsumerStatusService,
   FileStatus,
 } from './services/consumer-status.service'
-import { PermissionsService } from './services/permissions.service'
-import { ToastService, Toast } from './services/toast.service'
-import { SettingsService } from './services/settings.service'
-import { FileDropComponent } from './components/file-drop/file-drop.component'
-import { NgxFileDropModule } from 'ngx-file-drop'
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { HotKeyService } from './services/hot-key.service'
-import { PermissionsGuard } from './guards/permissions.guard'
+import { PermissionsService } from './services/permissions.service'
-import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
+import { SettingsService } from './services/settings.service'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { Toast, ToastService } from './services/toast.service'
 
 describe('AppComponent', () => {
   let component: AppComponent
@@ -39,12 +40,15 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent, ToastsComponent, FileDropComponent],
       imports: [
         TourNgBootstrapModule,
         RouterModule.forRoot(routes),
         NgxFileDropModule,
         NgbModalModule,
+        AppComponent,
+        ToastsComponent,
+        FileDropComponent,
+        NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
         PermissionsGuard,

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

@@ -1,23 +1,31 @@
-import { SettingsService } from './services/settings.service'
-import { SETTINGS_KEYS } from './data/ui-settings'
 import { Component, OnDestroy, OnInit, Renderer2 } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, RouterOutlet } from '@angular/router'
-import { Subscription, first } from 'rxjs'
+import { TourNgBootstrapModule, TourService } from 'ngx-ui-tour-ng-bootstrap'
+import { first, Subscription } from 'rxjs'
+import { ToastsComponent } from './components/common/toasts/toasts.component'
+import { FileDropComponent } from './components/file-drop/file-drop.component'
+import { SETTINGS_KEYS } from './data/ui-settings'
 import { ConsumerStatusService } from './services/consumer-status.service'
-import { ToastService } from './services/toast.service'
+import { HotKeyService } from './services/hot-key.service'
-import { TasksService } from './services/tasks.service'
-import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
   PermissionAction,
   PermissionsService,
   PermissionType,
 } from './services/permissions.service'
-import { HotKeyService } from './services/hot-key.service'
+import { SettingsService } from './services/settings.service'
+import { TasksService } from './services/tasks.service'
+import { ToastService } from './services/toast.service'
 
 @Component({
   selector: 'pngx-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  imports: [
+    FileDropComponent,
+    ToastsComponent,
+    TourNgBootstrapModule,
+    RouterOutlet,
+  ],
 })
 export class AppComponent implements OnInit, OnDestroy {
   newDocumentSubscription: Subscription
@@ -36,7 +44,7 @@ export class AppComponent implements OnInit, OnDestroy {
     private hotKeyService: HotKeyService
   ) {
     let anyWindow = window as any
-    anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.js'
+    anyWindow.pdfWorkerSrc = 'assets/js/pdf.worker.min.mjs'
     this.settings.updateAppearanceSettings()
   }
 
@@ -165,7 +173,7 @@ export class AppComponent implements OnInit, OnDestroy {
       [
         {
           anchorId: 'tour.dashboard',
-          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Those settings are found under Settings > Saved Views once you have created some.`,
+          content: $localize`The dashboard can be used to show saved views, such as an 'Inbox'. Views are found under Manage > Saved Views once you have created some.`,
           route: '/dashboard',
           delayAfterNavigation: 500,
           isOptional: false,
@@ -227,7 +235,7 @@ export class AppComponent implements OnInit, OnDestroy {
         },
         {
           anchorId: 'tour.settings',
-          content: $localize`Check out the settings for various tweaks to the web app and toggle settings for saved views.`,
+          content: $localize`Check out the settings for various tweaks to the web app.`,
           route: '/settings',
           backdropConfig: {
             offset: 0,

src-ui/src/app/app.module.ts

@@ -1,551 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser'
-import { APP_INITIALIZER, NgModule } from '@angular/core'
-import { AppRoutingModule } from './app-routing.module'
-import { AppComponent } from './app.component'
-import {
-  NgbDateAdapter,
-  NgbDateParserFormatter,
-  NgbModule,
-} from '@ng-bootstrap/ng-bootstrap'
-import {
-  HTTP_INTERCEPTORS,
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http'
-import { DocumentListComponent } from './components/document-list/document-list.component'
-import { DocumentDetailComponent } from './components/document-detail/document-detail.component'
-import { DashboardComponent } from './components/dashboard/dashboard.component'
-import { TagListComponent } from './components/manage/tag-list/tag-list.component'
-import { DocumentTypeListComponent } from './components/manage/document-type-list/document-type-list.component'
-import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'
-import { LogsComponent } from './components/admin/logs/logs.component'
-import { SettingsComponent } from './components/admin/settings/settings.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { DatePipe, registerLocaleData } from '@angular/common'
-import { NotFoundComponent } from './components/not-found/not-found.component'
-import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component'
-import { CorrespondentEditDialogComponent } from './components/common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
-import { TagEditDialogComponent } from './components/common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
-import { DocumentTypeEditDialogComponent } from './components/common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
-import { TagComponent } from './components/common/tag/tag.component'
-import { ClearableBadgeComponent } from './components/common/clearable-badge/clearable-badge.component'
-import { PageHeaderComponent } from './components/common/page-header/page-header.component'
-import { AppFrameComponent } from './components/app-frame/app-frame.component'
-import { ToastsComponent } from './components/common/toasts/toasts.component'
-import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component'
-import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component'
-import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'
-import { DatesDropdownComponent } from './components/common/dates-dropdown/dates-dropdown.component'
-import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component'
-import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component'
-import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component'
-import { NgxFileDropModule } from 'ngx-file-drop'
-import { TextComponent } from './components/common/input/text/text.component'
-import { SelectComponent } from './components/common/input/select/select.component'
-import { CheckComponent } from './components/common/input/check/check.component'
-import { UrlComponent } from './components/common/input/url/url.component'
-import { PasswordComponent } from './components/common/input/password/password.component'
-import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component'
-import { TagsComponent } from './components/common/input/tags/tags.component'
-import { IfPermissionsDirective } from './directives/if-permissions.directive'
-import { SortableDirective } from './directives/sortable.directive'
-import { CookieService } from 'ngx-cookie-service'
-import { CsrfInterceptor } from './interceptors/csrf.interceptor'
-import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-view-widget/saved-view-widget.component'
-import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component'
-import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component'
-import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component'
-import { WelcomeWidgetComponent } from './components/dashboard/widgets/welcome-widget/welcome-widget.component'
-import { YesNoPipe } from './pipes/yes-no.pipe'
-import { FileSizePipe } from './pipes/file-size.pipe'
-import { FilterPipe } from './pipes/filter.pipe'
-import { DocumentTitlePipe } from './pipes/document-title.pipe'
-import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'
-import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component'
-import { NgSelectModule } from '@ng-select/ng-select'
-import { NumberComponent } from './components/common/input/number/number.component'
-import { SafeUrlPipe } from './pipes/safeurl.pipe'
-import { SafeHtmlPipe } from './pipes/safehtml.pipe'
-import { CustomDatePipe } from './pipes/custom-date.pipe'
-import { DateComponent } from './components/common/input/date/date.component'
-import { ISODateAdapter } from './utils/ngb-iso-date-adapter'
-import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'
-import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'
-import { ColorSliderModule } from 'ngx-color/slider'
-import { ColorComponent } from './components/common/input/color/color.component'
-import { DocumentAsnComponent } from './components/document-asn/document-asn.component'
-import { DocumentNotesComponent } from './components/document-notes/document-notes.component'
-import { PermissionsGuard } from './guards/permissions.guard'
-import { DirtyDocGuard } from './guards/dirty-doc.guard'
-import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard'
-import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component'
-import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component'
-import { SettingsService } from './services/settings.service'
-import { TasksComponent } from './components/admin/tasks/tasks.component'
-import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
-import { UserEditDialogComponent } from './components/common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { GroupEditDialogComponent } from './components/common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { PermissionsSelectComponent } from './components/common/permissions-select/permissions-select.component'
-import { MailAccountEditDialogComponent } from './components/common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
-import { MailRuleEditDialogComponent } from './components/common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
-import { PermissionsUserComponent } from './components/common/input/permissions/permissions-user/permissions-user.component'
-import { PermissionsGroupComponent } from './components/common/input/permissions/permissions-group/permissions-group.component'
-import { IfOwnerDirective } from './directives/if-owner.directive'
-import { IfObjectPermissionsDirective } from './directives/if-object-permissions.directive'
-import { PermissionsDialogComponent } from './components/common/permissions-dialog/permissions-dialog.component'
-import { PermissionsFormComponent } from './components/common/input/permissions/permissions-form/permissions-form.component'
-import { PermissionsFilterDropdownComponent } from './components/common/permissions-filter-dropdown/permissions-filter-dropdown.component'
-import { UsernamePipe } from './pipes/username.pipe'
-import { LogoComponent } from './components/common/logo/logo.component'
-import { IsNumberPipe } from './pipes/is-number.pipe'
-import { ShareLinksDropdownComponent } from './components/common/share-links-dropdown/share-links-dropdown.component'
-import { WorkflowsComponent } from './components/manage/workflows/workflows.component'
-import { WorkflowEditDialogComponent } from './components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { MailComponent } from './components/manage/mail/mail.component'
-import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { FileDropComponent } from './components/file-drop/file-drop.component'
-import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
-import { CustomFieldEditDialogComponent } from './components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { CustomFieldsDropdownComponent } from './components/common/custom-fields-dropdown/custom-fields-dropdown.component'
-import { ProfileEditDialogComponent } from './components/common/profile-edit-dialog/profile-edit-dialog.component'
-import { PdfViewerModule } from 'ng2-pdf-viewer'
-import { DocumentLinkComponent } from './components/common/input/document-link/document-link.component'
-import { PreviewPopupComponent } from './components/common/preview-popup/preview-popup.component'
-import { SwitchComponent } from './components/common/input/switch/switch.component'
-import { ConfigComponent } from './components/admin/config/config.component'
-import { FileComponent } from './components/common/input/file/file.component'
-import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { ConfirmButtonComponent } from './components/common/confirm-button/confirm-button.component'
-import { MonetaryComponent } from './components/common/input/monetary/monetary.component'
-import { SystemStatusDialogComponent } from './components/common/system-status-dialog/system-status-dialog.component'
-import { RotateConfirmDialogComponent } from './components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
-import { MergeConfirmDialogComponent } from './components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
-import { SplitConfirmDialogComponent } from './components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
-import { DocumentHistoryComponent } from './components/document-history/document-history.component'
-import { DragDropSelectComponent } from './components/common/input/drag-drop-select/drag-drop-select.component'
-import { CustomFieldDisplayComponent } from './components/common/custom-field-display/custom-field-display.component'
-import { GlobalSearchComponent } from './components/app-frame/global-search/global-search.component'
-import { HotkeyDialogComponent } from './components/common/hotkey-dialog/hotkey-dialog.component'
-import { DeletePagesConfirmDialogComponent } from './components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
-import { TrashComponent } from './components/admin/trash/trash.component'
-import {
-  airplane,
-  archive,
-  arrowClockwise,
-  arrowCounterclockwise,
-  arrowDown,
-  arrowLeft,
-  arrowRepeat,
-  arrowRight,
-  arrowRightShort,
-  arrowUpRight,
-  asterisk,
-  bodyText,
-  boxArrowUp,
-  boxArrowUpRight,
-  boxes,
-  calendar,
-  calendarEvent,
-  calendarEventFill,
-  cardChecklist,
-  cardHeading,
-  caretDown,
-  caretUp,
-  chatLeftText,
-  check,
-  check2All,
-  checkAll,
-  checkCircleFill,
-  checkLg,
-  chevronDoubleLeft,
-  chevronDoubleRight,
-  clipboard,
-  clipboardCheck,
-  clipboardCheckFill,
-  clipboardFill,
-  dash,
-  dashCircle,
-  diagram3,
-  dice5,
-  doorOpen,
-  download,
-  envelope,
-  envelopeAt,
-  exclamationCircleFill,
-  exclamationTriangle,
-  exclamationTriangleFill,
-  eye,
-  fileEarmark,
-  fileEarmarkCheck,
-  fileEarmarkFill,
-  fileEarmarkLock,
-  fileEarmarkMinus,
-  files,
-  fileText,
-  filter,
-  folder,
-  folderFill,
-  funnel,
-  gear,
-  grid,
-  gripVertical,
-  hash,
-  hddStack,
-  house,
-  infoCircle,
-  journals,
-  link,
-  listTask,
-  listUl,
-  pencil,
-  people,
-  peopleFill,
-  person,
-  personCircle,
-  personFill,
-  personFillLock,
-  personLock,
-  personSquare,
-  plus,
-  plusCircle,
-  questionCircle,
-  scissors,
-  search,
-  slashCircle,
-  sliders2Vertical,
-  sortAlphaDown,
-  sortAlphaUpAlt,
-  tagFill,
-  tag,
-  tags,
-  textIndentLeft,
-  textLeft,
-  threeDots,
-  threeDotsVertical,
-  trash,
-  uiRadios,
-  upcScan,
-  x,
-  xLg,
-} from 'ngx-bootstrap-icons'
-
-const icons = {
-  airplane,
-  archive,
-  arrowClockwise,
-  arrowCounterclockwise,
-  arrowDown,
-  arrowLeft,
-  arrowRepeat,
-  arrowRight,
-  arrowRightShort,
-  arrowUpRight,
-  asterisk,
-  bodyText,
-  boxArrowUp,
-  boxArrowUpRight,
-  boxes,
-  calendar,
-  calendarEvent,
-  calendarEventFill,
-  cardChecklist,
-  cardHeading,
-  caretDown,
-  caretUp,
-  chatLeftText,
-  check,
-  check2All,
-  checkAll,
-  checkCircleFill,
-  checkLg,
-  chevronDoubleLeft,
-  chevronDoubleRight,
-  clipboard,
-  clipboardCheck,
-  clipboardCheckFill,
-  clipboardFill,
-  dash,
-  dashCircle,
-  diagram3,
-  dice5,
-  doorOpen,
-  download,
-  envelope,
-  envelopeAt,
-  exclamationCircleFill,
-  exclamationTriangle,
-  exclamationTriangleFill,
-  eye,
-  fileEarmark,
-  fileEarmarkCheck,
-  fileEarmarkFill,
-  fileEarmarkLock,
-  fileEarmarkMinus,
-  files,
-  fileText,
-  filter,
-  folder,
-  folderFill,
-  funnel,
-  gear,
-  grid,
-  gripVertical,
-  hash,
-  hddStack,
-  house,
-  infoCircle,
-  journals,
-  link,
-  listTask,
-  listUl,
-  pencil,
-  people,
-  peopleFill,
-  person,
-  personCircle,
-  personFill,
-  personFillLock,
-  personLock,
-  personSquare,
-  plus,
-  plusCircle,
-  questionCircle,
-  scissors,
-  search,
-  slashCircle,
-  sliders2Vertical,
-  sortAlphaDown,
-  sortAlphaUpAlt,
-  tagFill,
-  tag,
-  tags,
-  textIndentLeft,
-  textLeft,
-  threeDots,
-  threeDotsVertical,
-  trash,
-  uiRadios,
-  upcScan,
-  x,
-  xLg,
-}
-
-import localeAf from '@angular/common/locales/af'
-import localeAr from '@angular/common/locales/ar'
-import localeBe from '@angular/common/locales/be'
-import localeBg from '@angular/common/locales/bg'
-import localeCa from '@angular/common/locales/ca'
-import localeCs from '@angular/common/locales/cs'
-import localeDa from '@angular/common/locales/da'
-import localeDe from '@angular/common/locales/de'
-import localeEl from '@angular/common/locales/el'
-import localeEnGb from '@angular/common/locales/en-GB'
-import localeEs from '@angular/common/locales/es'
-import localeFi from '@angular/common/locales/fi'
-import localeFr from '@angular/common/locales/fr'
-import localeHu from '@angular/common/locales/hu'
-import localeIt from '@angular/common/locales/it'
-import localeJa from '@angular/common/locales/ja'
-import localeLb from '@angular/common/locales/lb'
-import localeNl from '@angular/common/locales/nl'
-import localeNo from '@angular/common/locales/no'
-import localePl from '@angular/common/locales/pl'
-import localePt from '@angular/common/locales/pt'
-import localeRo from '@angular/common/locales/ro'
-import localeRu from '@angular/common/locales/ru'
-import localeSk from '@angular/common/locales/sk'
-import localeSl from '@angular/common/locales/sl'
-import localeSr from '@angular/common/locales/sr'
-import localeSv from '@angular/common/locales/sv'
-import localeTr from '@angular/common/locales/tr'
-import localeUk from '@angular/common/locales/uk'
-import localeZh from '@angular/common/locales/zh'
-
-registerLocaleData(localeAf)
-registerLocaleData(localeAr)
-registerLocaleData(localeBe)
-registerLocaleData(localeBg)
-registerLocaleData(localeCa)
-registerLocaleData(localeCs)
-registerLocaleData(localeDa)
-registerLocaleData(localeDe)
-registerLocaleData(localeEl)
-registerLocaleData(localeEnGb)
-registerLocaleData(localeEs)
-registerLocaleData(localeFi)
-registerLocaleData(localeFr)
-registerLocaleData(localeHu)
-registerLocaleData(localeIt)
-registerLocaleData(localeJa)
-registerLocaleData(localeLb)
-registerLocaleData(localeNl)
-registerLocaleData(localeNo)
-registerLocaleData(localePl)
-registerLocaleData(localePt, 'pt-BR')
-registerLocaleData(localePt, 'pt-PT')
-registerLocaleData(localeRo)
-registerLocaleData(localeRu)
-registerLocaleData(localeSk)
-registerLocaleData(localeSl)
-registerLocaleData(localeSr)
-registerLocaleData(localeSv)
-registerLocaleData(localeTr)
-registerLocaleData(localeUk)
-registerLocaleData(localeZh)
-
-function initializeApp(settings: SettingsService) {
-  return () => {
-    return settings.initializeSettings()
-  }
-}
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    DocumentListComponent,
-    DocumentDetailComponent,
-    DashboardComponent,
-    TagListComponent,
-    DocumentTypeListComponent,
-    CorrespondentListComponent,
-    StoragePathListComponent,
-    LogsComponent,
-    SettingsComponent,
-    NotFoundComponent,
-    CorrespondentEditDialogComponent,
-    ConfirmDialogComponent,
-    TagEditDialogComponent,
-    DocumentTypeEditDialogComponent,
-    StoragePathEditDialogComponent,
-    TagComponent,
-    ClearableBadgeComponent,
-    PageHeaderComponent,
-    AppFrameComponent,
-    ToastsComponent,
-    FilterEditorComponent,
-    FilterableDropdownComponent,
-    ToggleableDropdownButtonComponent,
-    DatesDropdownComponent,
-    DocumentCardLargeComponent,
-    DocumentCardSmallComponent,
-    BulkEditorComponent,
-    TextComponent,
-    SelectComponent,
-    CheckComponent,
-    UrlComponent,
-    PasswordComponent,
-    SaveViewConfigDialogComponent,
-    TagsComponent,
-    IfPermissionsDirective,
-    SortableDirective,
-    SavedViewWidgetComponent,
-    StatisticsWidgetComponent,
-    UploadFileWidgetComponent,
-    WidgetFrameComponent,
-    WelcomeWidgetComponent,
-    YesNoPipe,
-    FileSizePipe,
-    FilterPipe,
-    DocumentTitlePipe,
-    MetadataCollapseComponent,
-    SelectDialogComponent,
-    NumberComponent,
-    SafeUrlPipe,
-    SafeHtmlPipe,
-    CustomDatePipe,
-    DateComponent,
-    ColorComponent,
-    DocumentAsnComponent,
-    DocumentNotesComponent,
-    TasksComponent,
-    UserEditDialogComponent,
-    GroupEditDialogComponent,
-    PermissionsSelectComponent,
-    MailAccountEditDialogComponent,
-    MailRuleEditDialogComponent,
-    PermissionsUserComponent,
-    PermissionsGroupComponent,
-    IfOwnerDirective,
-    IfObjectPermissionsDirective,
-    PermissionsDialogComponent,
-    PermissionsFormComponent,
-    PermissionsFilterDropdownComponent,
-    UsernamePipe,
-    LogoComponent,
-    IsNumberPipe,
-    ShareLinksDropdownComponent,
-    WorkflowsComponent,
-    WorkflowEditDialogComponent,
-    MailComponent,
-    UsersAndGroupsComponent,
-    FileDropComponent,
-    CustomFieldsComponent,
-    CustomFieldEditDialogComponent,
-    CustomFieldsDropdownComponent,
-    ProfileEditDialogComponent,
-    DocumentLinkComponent,
-    PreviewPopupComponent,
-    SwitchComponent,
-    ConfigComponent,
-    FileComponent,
-    ConfirmButtonComponent,
-    MonetaryComponent,
-    SystemStatusDialogComponent,
-    RotateConfirmDialogComponent,
-    MergeConfirmDialogComponent,
-    SplitConfirmDialogComponent,
-    DocumentHistoryComponent,
-    DragDropSelectComponent,
-    CustomFieldDisplayComponent,
-    GlobalSearchComponent,
-    HotkeyDialogComponent,
-    DeletePagesConfirmDialogComponent,
-    TrashComponent,
-  ],
-  bootstrap: [AppComponent],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    NgbModule,
-    FormsModule,
-    ReactiveFormsModule,
-    PdfViewerModule,
-    NgxFileDropModule,
-    NgSelectModule,
-    ColorSliderModule,
-    TourNgBootstrapModule,
-    DragDropModule,
-    NgxBootstrapIconsModule.pick(icons),
-  ],
-  providers: [
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initializeApp,
-      deps: [SettingsService],
-      multi: true,
-    },
-    DatePipe,
-    CookieService,
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: CsrfInterceptor,
-      multi: true,
-    },
-    {
-      provide: HTTP_INTERCEPTORS,
-      useClass: ApiVersionInterceptor,
-      multi: true,
-    },
-    FilterPipe,
-    DocumentTitlePipe,
-    { provide: NgbDateAdapter, useClass: ISODateAdapter },
-    { provide: NgbDateParserFormatter, useClass: LocalizedDateParserFormatter },
-    PermissionsGuard,
-    DirtyDocGuard,
-    DirtySavedViewGuard,
-    UsernamePipe,
-    provideHttpClient(withInterceptorsFromDi()),
-  ],
-})
-export class AppModule {}

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

@@ -1,24 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { ConfigComponent } from './config.component'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { ConfigService } from 'src/app/services/config.service'
-import { ToastService } from 'src/app/services/toast.service'
-import { of, throwError } from 'rxjs'
-import { OutputTypeConfig } from 'src/app/data/paperless-config'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { BrowserModule } from '@angular/platform-browser'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { TextComponent } from '../../common/input/text/text.component'
-import { NumberComponent } from '../../common/input/number/number.component'
-import { SwitchComponent } from '../../common/input/switch/switch.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SelectComponent } from '../../common/input/select/select.component'
-import { FileComponent } from '../../common/input/file/file.component'
-import { SettingsService } from 'src/app/services/settings.service'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { of, throwError } from 'rxjs'
+import { OutputTypeConfig } from 'src/app/data/paperless-config'
+import { ConfigService } from 'src/app/services/config.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { ConfigComponent } from './config.component'
 
 describe('ConfigComponent', () => {
   let component: ConfigComponent
@@ -29,15 +29,6 @@ describe('ConfigComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        ConfigComponent,
-        TextComponent,
-        SelectComponent,
-        NumberComponent,
-        SwitchComponent,
-        FileComponent,
-        PageHeaderComponent,
-      ],
       imports: [
         BrowserModule,
         NgbModule,
@@ -45,6 +36,13 @@ describe('ConfigComponent', () => {
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        ConfigComponent,
+        TextComponent,
+        SelectComponent,
+        NumberComponent,
+        SwitchComponent,
+        FileComponent,
+        PageHeaderComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,33 +1,60 @@
+import { AsyncPipe } from '@angular/common'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { AbstractControl, FormControl, FormGroup } from '@angular/forms'
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import {
   BehaviorSubject,
   Observable,
-  Subject,
   Subscription,
   first,
   takeUntil,
 } from 'rxjs'
 import {
-  PaperlessConfigOptions,
   ConfigCategory,
   ConfigOption,
   ConfigOptionType,
   PaperlessConfig,
+  PaperlessConfigOptions,
 } from 'src/app/data/paperless-config'
 import { ConfigService } from 'src/app/services/config.service'
-import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
 import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { FileComponent } from '../../common/input/file/file.component'
+import { NumberComponent } from '../../common/input/number/number.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { SwitchComponent } from '../../common/input/switch/switch.component'
+import { TextComponent } from '../../common/input/text/text.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-config',
   templateUrl: './config.component.html',
   styleUrl: './config.component.scss',
+  imports: [
+    PageHeaderComponent,
+    SelectComponent,
+    SwitchComponent,
+    TextComponent,
+    NumberComponent,
+    FileComponent,
+    AsyncPipe,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class ConfigComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy, DirtyComponent
 {
   public readonly ConfigOptionType = ConfigOptionType
@@ -45,15 +72,11 @@ export class ConfigComponent
     return PaperlessConfigOptions.filter((o) => o.category === category)
   }
 
-  public loading: boolean = false
-
   initialConfig: PaperlessConfig
   store: BehaviorSubject<any>
   storeSub: Subscription
   isDirty$: Observable<boolean>
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     private configService: ConfigService,
     private toastService: ToastService,
@@ -67,7 +90,6 @@ export class ConfigComponent
   }
 
   ngOnInit(): void {
-    this.loading = true
     this.configService
       .getConfig()
       .pipe(takeUntil(this.unsubscribeNotifier))

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

@@ -4,7 +4,7 @@
   info="Review the log files for the application and for email checking."
   i18n-info>
   <div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
+    <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
     <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
   </div>
 </pngx-page-header>
@@ -17,7 +17,7 @@
       </a>
     </li>
   }
-  @if (isLoading || !logFiles.length) {
+  @if (loading || !logFiles.length) {
     <div class="ps-2 d-flex align-items-center">
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       @if (!logFiles.length) {
@@ -30,15 +30,13 @@
 <div [ngbNavOutlet]="nav" class="mt-2"></div>
 
 <div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
-  @if (isLoading && logFiles.length) {
+  @if (loading && logFiles.length) {
     <div>
       <div class="spinner-border spinner-border-sm me-2" role="status"></div>
       <ng-container i18n>Loading...</ng-container>
     </div>
   }
-  @for (log of logs; track log) {
+  @for (log of logs; track $index) {
-    <p
+    <p class="m-0 p-0 log-entry-{{getLogLevel(log)}}">{{log}}</p>
-      class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
-    >{{log}}</p>
   }
 </div>

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

@@ -1,18 +1,13 @@
-import {
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-  ComponentFixture,
+import { provideHttpClientTesting } from '@angular/common/http/testing'
-  TestBed,
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-  fakeAsync,
+import { BrowserModule, By } from '@angular/platform-browser'
-  tick,
+import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
-} from '@angular/core/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { LogsComponent } from './logs.component'
-import { of, throwError } from 'rxjs'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { NgbModule, NgbNavLink } from '@ng-bootstrap/ng-bootstrap'
-import { BrowserModule, By } from '@angular/platform-browser'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const paperless_logs = [
   '[2023-05-29 03:05:01,224] [DEBUG] [paperless.tasks] Training data unchanged.',
@@ -37,11 +32,12 @@ describe('LogsComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [LogsComponent, PageHeaderComponent],
       imports: [
         BrowserModule,
         NgbModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        LogsComponent,
+        PageHeaderComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
@@ -90,8 +86,7 @@ describe('LogsComponent', () => {
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
 
-    component.toggleAutoRefresh()
+    component.autoRefreshEnabled = false
-    expect(component.autoRefreshInterval).toBeNull()
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })

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

@@ -1,24 +1,39 @@
 import {
+  ChangeDetectorRef,
   Component,
   ElementRef,
+  OnDestroy,
   OnInit,
   ViewChild,
-  OnDestroy,
-  ChangeDetectorRef,
 } from '@angular/core'
-import { Subject, takeUntil } from 'rxjs'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { filter, takeUntil, timer } from 'rxjs'
 import { LogService } from 'src/app/services/rest/log.service'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-logs',
   templateUrl: './logs.component.html',
   styleUrls: ['./logs.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    NgbNavModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
 })
-export class LogsComponent implements OnInit, OnDestroy {
+export class LogsComponent
+  extends LoadingComponentWithPermissions
+  implements OnInit, OnDestroy
+{
   constructor(
     private logService: LogService,
     private changedetectorRef: ChangeDetectorRef
-  ) {}
+  ) {
+    super()
+  }
 
   public logs: string[] = []
 
@@ -26,50 +41,50 @@ export class LogsComponent implements OnInit, OnDestroy {
 
   public activeLog: string
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
+  public autoRefreshEnabled: boolean = true
-
-  public isLoading: boolean = false
-
-  public autoRefreshInterval: any
 
   @ViewChild('logContainer') logContainer: ElementRef
 
   ngOnInit(): void {
-    this.isLoading = true
     this.logService
       .list()
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((result) => {
         this.logFiles = result
-        this.isLoading = false
+        this.loading = false
         if (this.logFiles.length > 0) {
           this.activeLog = this.logFiles[0]
           this.reloadLogs()
         }
-        this.toggleAutoRefresh()
+        timer(5000, 5000)
+          .pipe(
+            filter(() => this.autoRefreshEnabled),
+            takeUntil(this.unsubscribeNotifier)
+          )
+          .subscribe(() => {
+            this.reloadLogs()
+          })
       })
   }
 
   ngOnDestroy(): void {
-    this.unsubscribeNotifier.next(true)
+    super.ngOnDestroy()
-    this.unsubscribeNotifier.complete()
-    clearInterval(this.autoRefreshInterval)
   }
 
   reloadLogs() {
-    this.isLoading = true
+    this.loading = true
     this.logService
       .get(this.activeLog)
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe({
         next: (result) => {
           this.logs = result
-          this.isLoading = false
+          this.loading = false
           this.scrollToBottom()
         },
         error: () => {
           this.logs = []
-          this.isLoading = false
+          this.loading = false
         },
       })
   }
@@ -96,15 +111,4 @@ export class LogsComponent implements OnInit, OnDestroy {
       behavior: 'auto',
     })
   }
-
-  toggleAutoRefresh(): void {
-    if (this.autoRefreshInterval) {
-      clearInterval(this.autoRefreshInterval)
-      this.autoRefreshInterval = null
-    } else {
-      this.autoRefreshInterval = setInterval(() => {
-        this.reloadLogs()
-      }, 5000)
-    }
-  }
 }

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

@@ -1,7 +1,7 @@
 <pngx-page-header
   title="Settings"
   i18n-title
-  info="Options to customize appearance, notifications, saved views and more. Settings apply to the <strong>current user only</strong>."
+  info="Options to customize appearance, notifications and more. Settings apply to the <strong>current user only</strong>."
   i18n-info
   >
   <button class="btn btn-sm btn-outline-primary" (click)="tourService.start()">
@@ -39,9 +39,9 @@
     <li [ngbNavItem]="SettingsNavIDs.General">
       <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>
-
+        <div class="row">
+          <div class="col-xl-6 pe-xl-5">
             <h4 i18n>Appearance</h4>
-
             <div class="row mb-3">
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Display language</span>
@@ -118,17 +118,6 @@
               </div>
             </div>
 
-        <div class="row mb-3">
-          <div class="col-md-3 col-form-label pt-0">
-            <span i18n>Document editor</span>
-          </div>
-          <div class="col">
-
-            <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
-
-          </div>
-        </div>
-
             <div class="row mb-3">
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Sidebar</span>
@@ -155,7 +144,7 @@
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Theme Color</span>
               </div>
-          <div class="col col-md-3">
+              <div class="col col-md-4">
                 <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
               </div>
               <div class="col-2">
@@ -165,50 +154,64 @@
               </div>
             </div>
 
-        <h4 class="mt-4" id="update-checking" i18n>Update checking</h4>
-
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <p i18n>
-            Update checking works by pinging the public <a href="https://api.github.com/repos/paperless-ngx/paperless-ngx/releases/latest" target="_blank" rel="noopener noreferrer">GitHub API</a> for the latest release to determine whether a new version is available.<br/>
-            Actual updating of the app must still be performed manually.
-          </p>
-            <p i18n>
-            <em>No tracking data is collected by the app in any way.</em>
-          </p>
-            <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
-          </div>
-        </div>
-
             <h4 class="mt-4" i18n>Document editing</h4>
 
             <div class="row mb-3">
-          <div class="offset-md-3 col">
+              <div class="col">
+                <pngx-input-check i18n-title title="Use PDF viewer provided by the browser" i18n-hint hint="This is usually faster for displaying large PDF documents, but it might not work on some browsers." formControlName="useNativePdfViewer"></pngx-input-check>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <div class="col">
                 <pngx-input-check i18n-title title="Automatically remove inbox tag(s) on save" formControlName="documentEditingRemoveInboxTags"></pngx-input-check>
               </div>
             </div>
 
-        <h4 class="mt-4" i18n>Bulk editing</h4>
-
             <div class="row mb-3">
-          <div class="offset-md-3 col">
+              <div class="col">
+                <pngx-input-check i18n-title title="Show document thumbnail during loading" formControlName="documentEditingOverlayThumbnail"></pngx-input-check>
+              </div>
+            </div>
+          </div>
+          <div class="col-xl-6 ps-xl-5">
+            <h4 class="mt-4 mt-md-0" id="update-checking" i18n>Update checking</h4>
+            <div class="row mb-3">
+              <div class="col d-flex flex-row align-items-start">
+                <pngx-input-check i18n-title title="Enable update checking" formControlName="updateCheckingEnabled"></pngx-input-check>
+                <button class="btn btn-sm btn-link text-muted me-auto p-0 ms-2" title="What's this?" i18n-title type="button" triggers="mouseenter:mouseleave" [ngbPopover]="updatesPopover" [autoClose]="true">
+                  <i-bs name="question-circle"></i-bs>
+                </button>
+                <ng-template #updatesPopover>
+                  <p i18n>
+                    Update checking works by pinging the public GitHub API for the latest release to determine whether a new version is available. Actual updating of the app must still be performed manually.
+                  </p>
+                  <p>
+                    <em i18n>No tracking data is collected by the app in any way.</em>
+                  </p>
+                </ng-template>
+              </div>
+            </div>
+
+            <h4 class="mt-4" i18n>Bulk editing</h4>
+            <div class="row mb-3">
+              <div class="col">
                 <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs"></pngx-input-check>
                 <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
               </div>
             </div>
 
             <h4 class="mt-4" i18n>Global search</h4>
-
             <div class="row mb-3">
-          <div class="offset-md-3 col">
+              <div class="col">
                 <pngx-input-check i18n-title title="Do not include advanced search results" formControlName="searchDbOnly"></pngx-input-check>
               </div>
             </div>
 
             <div class="row mb-3">
-          <div class="offset-md-3 col">
+              <div class="col">
                 <div class="row">
-              <div class="col-md-2 col-form-label pt-0">
+                  <div class="col-md-3 col-form-label pt-0">
                     <span i18n>Full search links to</span>
                   </div>
                   <div class="col">
@@ -221,13 +224,21 @@
               </div>
             </div>
 
-        <h4 class="mt-4" i18n>Notes</h4>
+            <h4 class="mt-4" i18n>Saved Views</h4>
-
             <div class="row mb-3">
-          <div class="offset-md-3 col">
+              <div class="col">
+                <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
+              </div>
+            </div>
+
+            <h4 class="mt-4" i18n>Notes</h4>
+            <div class="row mb-3">
+              <div class="col">
                 <pngx-input-check i18n-title title="Enable notes" formControlName="notesEnabled"></pngx-input-check>
               </div>
             </div>
+          </div>
+        </div>
 
       </ng-template>
     </li>
@@ -239,7 +250,7 @@
         <h4 i18n>Default Permissions</h4>
 
         <div class="row mb-3">
-          <div class="offset-md-3 col">
+          <div class="col">
             <p i18n>
             Settings apply to this user account for objects (Tags, Mail Rules, etc.) created via the web UI
           </p>
@@ -321,7 +332,7 @@
         <h4 i18n>Document processing</h4>
 
         <div class="row mb-3">
-          <div class="offset-md-3 col">
+          <div class="col">
             <pngx-input-check i18n-title title="Show notifications when new documents are detected" formControlName="notificationsConsumerNewDocument"></pngx-input-check>
             <pngx-input-check i18n-title title="Show notifications when document processing completes successfully" formControlName="notificationsConsumerSuccess"></pngx-input-check>
             <pngx-input-check i18n-title title="Show notifications when document processing fails" formControlName="notificationsConsumerFailed"></pngx-input-check>
@@ -331,87 +342,6 @@
 
       </ng-template>
     </li>
-
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews">
-      <a ngbNavLink i18n>Saved views</a>
-      <ng-template ngbNavContent>
-
-        <h4 i18n>Settings</h4>
-        <div class="row mb-3">
-          <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show warning when closing saved views with unsaved changes" formControlName="savedViewsWarnOnUnsavedChange"></pngx-input-check>
-          </div>
-        </div>
-
-        <h4 i18n>Views</h4>
-        <ul class="list-group" formGroupName="savedViews">
-
-          @for (view of savedViews; track view) {
-            <li class="list-group-item py-3">
-            <div [formGroupName]="view.id">
-              <div class="row">
-                <div class="col">
-                  <pngx-input-text title="Name" formControlName="name"></pngx-input-text>
-                </div>
-                <div class="col">
-                  <div class="form-check form-switch mt-3">
-                    <input type="checkbox" class="form-check-input" id="show_on_dashboard_{{view.id}}" formControlName="show_on_dashboard">
-                    <label class="form-check-label" for="show_on_dashboard_{{view.id}}" i18n>Show on dashboard</label>
-                  </div>
-                  <div class="form-check form-switch">
-                    <input type="checkbox" class="form-check-input" id="show_in_sidebar_{{view.id}}" formControlName="show_in_sidebar">
-                    <label class="form-check-label" for="show_in_sidebar_{{view.id}}" i18n>Show in sidebar</label>
-                  </div>
-                </div>
-                <div class="col-auto">
-                  <label class="form-label" for="name_{{view.id}}" i18n>Actions</label>
-                  <pngx-confirm-button
-                    label="Delete"
-                    i18n-label
-                    (confirm)="deleteSavedView(view)"
-                    *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.SavedView }"
-                    buttonClasses="btn-sm btn-outline-danger form-control"
-                    iconName="trash">
-                  </pngx-confirm-button>
-                </div>
-              </div>
-              <div class="row">
-                <div class="col">
-                  <pngx-input-number i18n-title title="Documents page size" [showAdd]="false" formControlName="page_size"></pngx-input-number>
-                </div>
-                <div class="col">
-                  <label class="form-label" for="display_mode_{{view.id}}" i18n>Display as</label>
-                  <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>
-                  </select>
-                </div>
-                  @if (displayFields) {
-                    <pngx-input-drag-drop-select i18n-title title="Show" i18n-emptyText emptyText="Default" [items]="displayFields" formControlName="display_fields"></pngx-input-drag-drop-select>
-                  }
-                </div>
-            </div>
-            </li>
-          }
-
-          @if (savedViews && savedViews.length === 0) {
-            <li class="list-group-item">
-              <div i18n>No saved views defined.</div>
-            </li>
-          }
-
-          @if (!savedViews) {
-            <li class="list-group-item">
-              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-              <div class="visually-hidden" i18n>Loading...</div>
-            </li>
-          }
-
-        </ul>
-
-      </ng-template>
-    </li>
   </ul>
 
   <div [ngbNavOutlet]="nav" class="border-start border-end border-bottom p-3 mb-3 shadow-sm"></div>

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

@@ -1,35 +1,45 @@
-import { ViewportScroller, DatePipe } from '@angular/common'
+import { DragDropModule } from '@angular/cdk/drag-drop'
+import { DatePipe, ViewportScroller } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
-import { Router, ActivatedRoute, convertToParamMap } from '@angular/router'
+import { ActivatedRoute, Router, convertToParamMap } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
-  NgbModule,
   NgbAlertModule,
-  NgbNavLink,
   NgbModal,
   NgbModalModule,
+  NgbModule,
+  NgbNavLink,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
-import { SavedView } from 'src/app/data/saved-view'
+import {
+  InstallType,
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
-import { ToastService, Toast } from 'src/app/services/toast.service'
+import { SystemStatusService } from 'src/app/services/system-status.service'
+import { Toast, ToastService } from 'src/app/services/toast.service'
+import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { CheckComponent } from '../../common/input/check/check.component'
 import { ColorComponent } from '../../common/input/color/color.component'
+import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
 import { NumberComponent } from '../../common/input/number/number.component'
 import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
 import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
@@ -37,25 +47,9 @@ import { SelectComponent } from '../../common/input/select/select.component'
 import { TagsComponent } from '../../common/input/tags/tags.component'
 import { TextComponent } from '../../common/input/text/text.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SettingsComponent } from './settings.component'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
 import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
-import { SystemStatusService } from 'src/app/services/system-status.service'
+import { SettingsComponent } from './settings.component'
-import {
-  SystemStatus,
-  InstallType,
-  SystemStatusItemStatus,
-} from 'src/app/data/system-status'
-import { DragDropSelectComponent } from '../../common/input/drag-drop-select/drag-drop-select.component'
-import { DragDropModule } from '@angular/cdk/drag-drop'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
-const savedViews = [
-  { id: 1, name: 'view1', show_in_sidebar: true, show_on_dashboard: true },
-  { id: 2, name: 'view2', show_in_sidebar: false, show_on_dashboard: false },
-]
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
   { id: 2, username: 'user2', is_superuser: false },
@@ -70,7 +64,6 @@ describe('SettingsComponent', () => {
   let fixture: ComponentFixture<SettingsComponent>
   let router: Router
   let settingsService: SettingsService
-  let savedViewService: SavedViewService
   let activatedRoute: ActivatedRoute
   let viewportScroller: ViewportScroller
   let toastService: ToastService
@@ -82,7 +75,16 @@ describe('SettingsComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
+        NgbModule,
+        RouterTestingModule.withRoutes(routes),
+        FormsModule,
+        ReactiveFormsModule,
+        NgbAlertModule,
+        NgSelectModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        NgbModalModule,
+        DragDropModule,
         SettingsComponent,
         PageHeaderComponent,
         IfPermissionsDirective,
@@ -101,17 +103,6 @@ describe('SettingsComponent', () => {
         ConfirmButtonComponent,
         DragDropSelectComponent,
       ],
-      imports: [
-        NgbModule,
-        RouterTestingModule.withRoutes(routes),
-        FormsModule,
-        ReactiveFormsModule,
-        NgbAlertModule,
-        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-        NgbModalModule,
-        DragDropModule,
-      ],
       providers: [
         CustomDatePipe,
         DatePipe,
@@ -139,7 +130,6 @@ describe('SettingsComponent', () => {
       .spyOn(permissionsService, 'currentUserOwnsObject')
       .mockReturnValue(true)
     groupService = TestBed.inject(GroupService)
-    savedViewService = TestBed.inject(SavedViewService)
   })
 
   function completeSetup(excludeService = null) {
@@ -161,15 +151,6 @@ describe('SettingsComponent', () => {
         })
       )
     }
-    if (excludeService !== savedViewService) {
-      jest.spyOn(savedViewService, 'listAll').mockReturnValue(
-        of({
-          all: savedViews.map((v) => v.id),
-          count: savedViews.length,
-          results: (savedViews as SavedView[]).concat([]),
-        })
-      )
-    }
 
     fixture = TestBed.createComponent(SettingsComponent)
     component = fixture.componentInstance
@@ -184,8 +165,6 @@ describe('SettingsComponent', () => {
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'permissions'])
     tabButtons[2].nativeElement.dispatchEvent(new MouseEvent('click'))
     expect(navigateSpy).toHaveBeenCalledWith(['settings', 'notifications'])
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    expect(navigateSpy).toHaveBeenCalledWith(['settings', 'savedviews'])
 
     const initSpy = jest.spyOn(component, 'initialize')
     component.isDirty = true // mock dirty
@@ -213,90 +192,8 @@ describe('SettingsComponent', () => {
     expect(scrollSpy).toHaveBeenCalledWith('#notifications')
   })
 
-  it('should enable organizing of sidebar saved views even on direct navigation', () => {
-    completeSetup()
-    jest
-      .spyOn(activatedRoute, 'paramMap', 'get')
-      .mockReturnValue(of(convertToParamMap({ section: 'savedviews' })))
-    activatedRoute.snapshot.fragment = '#savedviews'
-    component.ngOnInit()
-    expect(component.activeNavID).toEqual(4) // Saved Views
-    component.ngAfterViewInit()
-    expect(settingsService.organizingSidebarSavedViews).toBeTruthy()
-  })
-
-  it('should support save saved views, show error', () => {
-    completeSetup()
-
-    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    fixture.detectChanges()
-
-    const toastErrorSpy = jest.spyOn(toastService, 'showError')
-    const toastSpy = jest.spyOn(toastService, 'show')
-    const savedViewPatchSpy = jest.spyOn(savedViewService, 'patchMany')
-
-    const toggle = fixture.debugElement.query(
-      By.css('.form-check.form-switch input')
-    )
-    toggle.nativeElement.checked = true
-    toggle.nativeElement.dispatchEvent(new Event('change'))
-
-    // saved views error first
-    savedViewPatchSpy.mockReturnValueOnce(
-      throwError(() => new Error('unable to save saved views'))
-    )
-    component.saveSettings()
-    expect(toastErrorSpy).toHaveBeenCalled()
-    expect(savedViewPatchSpy).toHaveBeenCalled()
-    toastSpy.mockClear()
-    toastErrorSpy.mockClear()
-    savedViewPatchSpy.mockClear()
-
-    // succeed saved views
-    savedViewPatchSpy.mockReturnValueOnce(of(savedViews as SavedView[]))
-    component.saveSettings()
-    expect(toastErrorSpy).not.toHaveBeenCalled()
-    expect(savedViewPatchSpy).toHaveBeenCalled()
-  })
-
-  it('should update only patch saved views that have changed', () => {
-    completeSetup()
-
-    const tabButtons = fixture.debugElement.queryAll(By.directive(NgbNavLink))
-    tabButtons[3].nativeElement.dispatchEvent(new MouseEvent('click'))
-    fixture.detectChanges()
-
-    const patchSpy = jest.spyOn(savedViewService, 'patchMany')
-    component.saveSettings()
-    expect(patchSpy).not.toHaveBeenCalled()
-
-    const view = savedViews[0]
-    const toggle = fixture.debugElement.query(
-      By.css('.form-check.form-switch input')
-    )
-    toggle.nativeElement.checked = true
-    toggle.nativeElement.dispatchEvent(new Event('change'))
-    // register change
-    component.savedViewGroup.get(view.id.toString()).value[
-      'show_on_dashboard'
-    ] = !view.show_on_dashboard
-    fixture.detectChanges()
-
-    component.saveSettings()
-    expect(patchSpy).toHaveBeenCalledWith([
-      {
-        id: view.id,
-        name: view.name,
-        show_in_sidebar: view.show_in_sidebar,
-        show_on_dashboard: !view.show_on_dashboard,
-      },
-    ])
-  })
-
   it('should support save local settings updating appearance settings and calling API, show error', () => {
     completeSetup()
-    jest.spyOn(savedViewService, 'patchMany').mockReturnValue(of([]))
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     const toastSpy = jest.spyOn(toastService, 'show')
     const storeSpy = jest.spyOn(settingsService, 'storeSettings')
@@ -315,7 +212,7 @@ describe('SettingsComponent', () => {
     expect(toastErrorSpy).toHaveBeenCalled()
     expect(storeSpy).toHaveBeenCalled()
     expect(appearanceSettingsSpy).not.toHaveBeenCalled()
-    expect(setSpy).toHaveBeenCalledTimes(27)
+    expect(setSpy).toHaveBeenCalledTimes(28)
 
     // succeed
     storeSpy.mockReturnValueOnce(of(true))
@@ -326,7 +223,6 @@ describe('SettingsComponent', () => {
 
   it('should offer reload if settings changes require', () => {
     completeSetup()
-    jest.spyOn(savedViewService, 'patchMany').mockReturnValue(of([]))
     let toast: Toast
     toastService.getToasts().subscribe((t) => (toast = t[0]))
     component.initialize(true) // reset
@@ -361,18 +257,6 @@ describe('SettingsComponent', () => {
     component.clearThemeColor()
   })
 
-  it('should support delete saved view', () => {
-    completeSetup()
-    const toastSpy = jest.spyOn(toastService, 'showInfo')
-    const deleteSpy = jest.spyOn(savedViewService, 'delete')
-    deleteSpy.mockReturnValue(of(true))
-    component.deleteSavedView(savedViews[0] as SavedView)
-    expect(deleteSpy).toHaveBeenCalled()
-    expect(toastSpy).toHaveBeenCalledWith(
-      `Saved view "${savedViews[0].name}" deleted.`
-    )
-  })
-
   it('should show errors on load if load users failure', () => {
     const toastErrorSpy = jest.spyOn(toastService, 'showError')
     jest

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

@@ -1,56 +1,69 @@
-import { ViewportScroller } from '@angular/common'
+import { AsyncPipe, ViewportScroller } from '@angular/common'
 import {
-  Component,
-  OnInit,
   AfterViewInit,
-  OnDestroy,
+  Component,
   Inject,
   LOCALE_ID,
+  OnDestroy,
+  OnInit,
 } from '@angular/core'
-import { FormGroup, FormControl } from '@angular/forms'
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import {
   NgbModal,
   NgbModalRef,
   NgbNavChangeEvent,
+  NgbNavModule,
+  NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { DirtyComponent, dirtyCheck } from '@ngneat/dirty-check-forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import {
   BehaviorSubject,
-  Subscription,
   Observable,
   Subject,
+  Subscription,
   first,
   takeUntil,
   tap,
 } from 'rxjs'
 import { Group } from 'src/app/data/group'
-import { SavedView } from 'src/app/data/saved-view'
+import {
+  SystemStatus,
+  SystemStatusItemStatus,
+} from 'src/app/data/system-status'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import {
-  PermissionsService,
   PermissionAction,
   PermissionType,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import {
-  SettingsService,
   LanguageOption,
+  SettingsService,
 } from 'src/app/services/settings.service'
-import { ToastService, Toast } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
 import { SystemStatusService } from 'src/app/services/system-status.service'
-import {
+import { Toast, ToastService } from 'src/app/services/toast.service'
-  SystemStatusItemStatus,
+import { CheckComponent } from '../../common/input/check/check.component'
-  SystemStatus,
+import { ColorComponent } from '../../common/input/color/color.component'
-} from 'src/app/data/system-status'
+import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
-import { DisplayMode } from 'src/app/data/document'
+import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
+import { SelectComponent } from '../../common/input/select/select.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { SystemStatusDialogComponent } from '../../common/system-status-dialog/system-status-dialog.component'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
 
 enum SettingsNavIDs {
   General = 1,
@@ -69,15 +82,28 @@ const systemDateFormat = {
   selector: 'pngx-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    CheckComponent,
+    ColorComponent,
+    SelectComponent,
+    PermissionsGroupComponent,
+    PermissionsUserComponent,
+    CustomDatePipe,
+    IfPermissionsDirective,
+    AsyncPipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbNavModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class SettingsComponent
   extends ComponentWithPermissions
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
   activeNavID: number
-  DisplayMode = DisplayMode
-
-  savedViewGroup = new FormGroup({})
 
   settingsForm = new FormGroup({
     bulkEditConfirmationDialogs: new FormControl(null),
@@ -88,7 +114,6 @@ export class SettingsComponent
     darkModeEnabled: new FormControl(null),
     darkModeInvertThumbs: new FormControl(null),
     themeColor: new FormControl(null),
-    useNativePdfViewer: new FormControl(null),
     displayLanguage: new FormControl(null),
     dateLocale: new FormControl(null),
     dateFormat: new FormControl(null),
@@ -99,7 +124,9 @@ export class SettingsComponent
     defaultPermsViewGroups: new FormControl(null),
     defaultPermsEditUsers: new FormControl(null),
     defaultPermsEditGroups: new FormControl(null),
+    useNativePdfViewer: new FormControl(null),
     documentEditingRemoveInboxTags: new FormControl(null),
+    documentEditingOverlayThumbnail: new FormControl(null),
     searchDbOnly: new FormControl(null),
     searchLink: new FormControl(null),
 
@@ -109,14 +136,9 @@ export class SettingsComponent
     notificationsConsumerSuppressOnDashboard: new FormControl(null),
 
     savedViewsWarnOnUnsavedChange: new FormControl(null),
-    savedViews: this.savedViewGroup,
   })
 
-  savedViews: SavedView[]
   SettingsNavIDs = SettingsNavIDs
-  get displayFields() {
-    return this.settings.allDisplayFields
-  }
 
   store: BehaviorSubject<any>
   storeSub: Subscription
@@ -151,7 +173,6 @@ export class SettingsComponent
   }
 
   constructor(
-    public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,
     private toastService: ToastService,
     private settings: SettingsService,
@@ -213,18 +234,6 @@ export class SettingsComponent
         })
     }
 
-    if (
-      this.permissionsService.currentUserCan(
-        PermissionAction.View,
-        PermissionType.SavedView
-      )
-    ) {
-      this.savedViewService.listAll().subscribe((r) => {
-        this.savedViews = r.results
-        this.initialize(false)
-      })
-    }
-
     this.activatedRoute.paramMap.subscribe((paramMap) => {
       const section = paramMap.get('section')
       if (section) {
@@ -234,9 +243,6 @@ export class SettingsComponent
         if (navIDKey) {
           this.activeNavID = SettingsNavIDs[navIDKey]
         }
-        if (this.activeNavID === SettingsNavIDs.SavedViews) {
-          this.settings.organizingSidebarSavedViews = true
-        }
       }
     })
   }
@@ -308,9 +314,11 @@ export class SettingsComponent
       documentEditingRemoveInboxTags: this.settings.get(
         SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS
       ),
+      documentEditingOverlayThumbnail: this.settings.get(
+        SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL
+      ),
       searchDbOnly: this.settings.get(SETTINGS_KEYS.SEARCH_DB_ONLY),
       searchLink: this.settings.get(SETTINGS_KEYS.SEARCH_FULL_TYPE),
-      savedViews: {},
     }
   }
 
@@ -323,15 +331,11 @@ export class SettingsComponent
       this.router
         .navigate(['settings', foundNavIDkey.toLowerCase()])
         .then((navigated) => {
-          this.settings.organizingSidebarSavedViews = false
           if (!navigated && this.isDirty) {
             this.activeNavID = navChangeEvent.activeId
           } else if (navigated && this.isDirty) {
             this.initialize()
           }
-          if (this.activeNavID === SettingsNavIDs.SavedViews) {
-            this.settings.organizingSidebarSavedViews = true
-          }
         })
   }
 
@@ -342,34 +346,6 @@ export class SettingsComponent
 
     let storeData = this.getCurrentSettings()
 
-    if (this.savedViews) {
-      this.emptyGroup(this.savedViewGroup)
-
-      for (let view of this.savedViews) {
-        storeData.savedViews[view.id.toString()] = {
-          id: view.id,
-          name: view.name,
-          show_on_dashboard: view.show_on_dashboard,
-          show_in_sidebar: view.show_in_sidebar,
-          page_size: view.page_size,
-          display_mode: view.display_mode,
-          display_fields: view.display_fields,
-        }
-        this.savedViewGroup.addControl(
-          view.id.toString(),
-          new FormGroup({
-            id: new FormControl(null),
-            name: new FormControl(null),
-            show_on_dashboard: new FormControl(null),
-            show_in_sidebar: new FormControl(null),
-            page_size: new FormControl(null),
-            display_mode: new FormControl(null),
-            display_fields: new FormControl([]),
-          })
-        )
-      }
-    }
-
     this.store = new BehaviorSubject(storeData)
 
     this.storeSub = this.store.asObservable().subscribe((state) => {
@@ -409,32 +385,12 @@ export class SettingsComponent
     }
   }
 
-  private emptyGroup(group: FormGroup) {
-    Object.keys(group.controls).forEach((key) => group.removeControl(key))
-  }
-
   ngOnDestroy() {
     if (this.isDirty) this.settings.updateAppearanceSettings() // in case user changed appearance but didn't save
     this.storeSub && this.storeSub.unsubscribe()
-    this.settings.organizingSidebarSavedViews = false
   }
 
-  deleteSavedView(savedView: SavedView) {
+  public saveSettings() {
-    this.savedViewService.delete(savedView).subscribe(() => {
-      this.savedViewGroup.removeControl(savedView.id.toString())
-      this.savedViews.splice(this.savedViews.indexOf(savedView), 1)
-      this.toastService.showInfo(
-        $localize`Saved view "${savedView.name}" deleted.`
-      )
-      this.savedViewService.clearCache()
-      this.savedViewService.listAll().subscribe((r) => {
-        this.savedViews = r.results
-        this.initialize(true)
-      })
-    })
-  }
-
-  private saveLocalSettings() {
     this.savePending = true
     const reloadRequired =
       this.settingsForm.value.displayLanguage !=
@@ -539,6 +495,10 @@ export class SettingsComponent
       SETTINGS_KEYS.DOCUMENT_EDITING_REMOVE_INBOX_TAGS,
       this.settingsForm.value.documentEditingRemoveInboxTags
     )
+    this.settings.set(
+      SETTINGS_KEYS.DOCUMENT_EDITING_OVERLAY_THUMBNAIL,
+      this.settingsForm.value.documentEditingOverlayThumbnail
+    )
     this.settings.set(
       SETTINGS_KEYS.SEARCH_DB_ONLY,
       this.settingsForm.value.searchDbOnly
@@ -592,31 +552,6 @@ export class SettingsComponent
     return new Date()
   }
 
-  saveSettings() {
-    // only patch views that have actually changed
-    const changed: SavedView[] = []
-    Object.values(this.savedViewGroup.controls)
-      .filter((g: FormGroup) => !g.pristine)
-      .forEach((group: FormGroup) => {
-        changed.push(group.value)
-      })
-    if (changed.length > 0) {
-      this.savedViewService.patchMany(changed).subscribe({
-        next: () => {
-          this.saveLocalSettings()
-        },
-        error: (error) => {
-          this.toastService.showError(
-            $localize`Error while storing settings on server.`,
-            error
-          )
-        },
-      })
-    } else {
-      this.saveLocalSettings()
-    }
-  }
-
   reset() {
     this.settingsForm.patchValue(this.store.getValue())
   }

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

@@ -4,15 +4,40 @@
   info="File Tasks shows you documents that have been consumed, are waiting to be, or may have failed during the process."
   i18n-info
   >
-  <div class="btn-toolbar col col-md-auto align-items-center">
+  <div class="btn-toolbar col col-md-auto align-items-center gap-2">
     <button class="btn btn-sm btn-outline-secondary me-2" (click)="clearSelection()" [hidden]="selectedTasks.size === 0">
       <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
     </button>
-    <button class="btn btn-sm btn-outline-primary me-4" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
+    <button class="btn btn-sm btn-outline-primary me-2" (click)="dismissTasks()" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.PaperlessTask }" [disabled]="tasksService.total === 0">
       <i-bs name="check2-all"></i-bs>&nbsp;{{dismissButtonText}}
     </button>
-    <div class="form-check form-switch mb-0">
+    <div class="form-inline d-flex align-items-center">
-      <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch" (click)="toggleAutoRefresh()" [attr.checked]="autoRefreshInterval">
+      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
+        <span class="input-group-text text-muted" i18n>Filter by</span>
+        @if (filterTargets.length > 1) {
+          <div ngbDropdown>
+            <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{filterTargetName}}</button>
+            <div class="dropdown-menu shadow" ngbDropdownMenu>
+              @for (t of filterTargets; track t.id) {
+                <button ngbDropdownItem [class.active]="filterTargetID === t.id" (click)="filterTargetID = t.id">{{t.name}}</button>
+              }
+            </div>
+          </div>
+        } @else {
+          <span class="input-group-text">{{filterTargetName}}</span>
+        }
+        @if (filterText?.length) {
+          <button class="btn btn-link btn-sm px-2 position-absolute top-0 end-0 z-10" (click)="resetFilter()">
+            <i-bs width="1em" height="1em" name="x"></i-bs>
+          </button>
+        }
+        <input #filterInput class="form-control form-control-sm" type="text"
+          (keyup)="filterInputKeyup($event)"
+          [(ngModel)]="filterText">
+      </div>
+    </div>
+    <div class="form-check form-switch mb-0 ms-2">
+      <input class="form-check-input" type="checkbox" role="switch" [(ngModel)]="autoRefreshEnabled">
       <label class="form-check-label" for="autoRefreshSwitch" i18n>Auto refresh</label>
     </div>
   </div>
@@ -43,7 +68,7 @@
       </tr>
     </thead>
     <tbody>
-      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task) {
+      @for (task of tasks | slice: (page-1) * pageSize : page * pageSize; track task.id) {
         <tr (click)="toggleSelected(task, $event); $event.stopPropagation();">
           <td>
             <div class="form-check">
@@ -118,13 +143,13 @@
   </div>
 </ng-template>
 
-<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange($event)">
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" (hidden)="duringTabChange()" (navChange)="beforeTabChange()">
   <li ngbNavItem="failed">
     <a ngbNavLink i18n>Failed@if (tasksService.failedFileTasks.length > 0) {
       <span class="badge bg-danger ms-2">{{tasksService.failedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.failedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="completed">
@@ -132,7 +157,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.completedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="started">
@@ -140,7 +165,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.startedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.startedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
   <li ngbNavItem="queued">
@@ -148,7 +173,7 @@
       <span class="badge bg-secondary ms-2">{{tasksService.queuedFileTasks.length}}</span>
     }</a>
     <ng-template ngbNavContent>
-      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.queuedFileTasks}"></ng-container>
+      <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:currentTasks}"></ng-container>
     </ng-template>
   </li>
 </ul>

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

@@ -26,3 +26,14 @@ pre {
         max-width: 150px;
     }
 }
+
+.input-group .dropdown .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.z-10 {
+    z-index: 10;
+}

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

@@ -1,36 +1,36 @@
 import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import { Router } from '@angular/router'
 import { RouterTestingModule } from '@angular/router/testing'
 import {
   NgbModal,
+  NgbModalRef,
   NgbModule,
   NgbNavItem,
-  NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
+import { allIcons, NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { routes } from 'src/app/app-routing.module'
 import {
   PaperlessTask,
-  PaperlessTaskType,
   PaperlessTaskStatus,
+  PaperlessTaskType,
 } from 'src/app/data/paperless-task'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { TasksService } from 'src/app/services/tasks.service'
 import { environment } from 'src/environments/environment'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { TasksComponent } from './tasks.component'
+import { TasksComponent, TaskTab } from './tasks.component'
-import { PermissionsGuard } from 'src/app/guards/permissions.guard'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { FormsModule } from '@angular/forms'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const tasks: PaperlessTask[] = [
   {
@@ -119,18 +119,16 @@ describe('TasksComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        TasksComponent,
-        PageHeaderComponent,
-        IfPermissionsDirective,
-        CustomDatePipe,
-        ConfirmDialogComponent,
-      ],
       imports: [
         NgbModule,
         RouterTestingModule.withRoutes(routes),
         NgxBootstrapIconsModule.pick(allIcons),
         FormsModule,
+        TasksComponent,
+        PageHeaderComponent,
+        IfPermissionsDirective,
+        CustomDatePipe,
+        ConfirmDialogComponent,
       ],
       providers: [
         {
@@ -167,7 +165,7 @@ describe('TasksComponent', () => {
     let currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Failed
     ).length
-    component.activeTab = 'failed'
+    component.activeTab = TaskTab.Failed
     fixture.detectChanges()
     expect(tabButtons[0].nativeElement.textContent).toEqual(
       `Failed${currentTasksLength}`
@@ -179,7 +177,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Complete
     ).length
-    component.activeTab = 'completed'
+    component.activeTab = TaskTab.Completed
     fixture.detectChanges()
     expect(tabButtons[1].nativeElement.textContent).toEqual(
       `Complete${currentTasksLength}`
@@ -188,7 +186,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Started
     ).length
-    component.activeTab = 'started'
+    component.activeTab = TaskTab.Started
     fixture.detectChanges()
     expect(tabButtons[2].nativeElement.textContent).toEqual(
       `Started${currentTasksLength}`
@@ -197,7 +195,7 @@ describe('TasksComponent', () => {
     currentTasksLength = tasks.filter(
       (t) => t.status === PaperlessTaskStatus.Pending
     ).length
-    component.activeTab = 'queued'
+    component.activeTab = TaskTab.Queued
     fixture.detectChanges()
     expect(tabButtons[3].nativeElement.textContent).toEqual(
       `Queued${currentTasksLength}`
@@ -206,7 +204,7 @@ describe('TasksComponent', () => {
 
   it('should to go page 1 between tab switch', () => {
     component.page = 10
-    component.duringTabChange(2)
+    component.duringTabChange()
     expect(component.page).toEqual(1)
   })
 
@@ -283,10 +281,63 @@ describe('TasksComponent', () => {
     expect(reloadSpy).toHaveBeenCalledTimes(1)
     jest.advanceTimersByTime(5000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
-
+    component.autoRefreshEnabled = false
-    component.toggleAutoRefresh()
-    expect(component.autoRefreshInterval).toBeNull()
     jest.advanceTimersByTime(6000)
     expect(reloadSpy).toHaveBeenCalledTimes(2)
   })
+
+  it('should filter tasks by file name', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('191092')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(2) // 1 task x 2 lines
+  })
+
+  it('should filter tasks by result', () => {
+    component.activeTab = TaskTab.Failed
+    fixture.detectChanges()
+    component.filterTargetID = 1
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = 'duplicate'
+    input.nativeElement.dispatchEvent(new Event('input'))
+    jest.advanceTimersByTime(150) // debounce time
+    fixture.detectChanges()
+    expect(component.filterText).toEqual('duplicate')
+    expect(
+      fixture.debugElement.queryAll(By.css('table tbody tr')).length
+    ).toEqual(4) // 2 tasks x 2 lines
+  })
+
+  it('should support keyboard events for filtering', () => {
+    const input = fixture.debugElement.query(
+      By.css('pngx-page-header input[type=text]')
+    )
+    input.nativeElement.value = '191092'
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Enter' })
+    )
+    expect(component.filterText).toEqual('191092') // no debounce needed
+    input.nativeElement.dispatchEvent(
+      new KeyboardEvent('keyup', { key: 'Escape' })
+    )
+    expect(component.filterText).toEqual('')
+  })
+
+  it('should reset filter and target on tab switch', () => {
+    component.filterText = '191092'
+    component.filterTargetID = 1
+    component.activeTab = TaskTab.Completed
+    component.beforeTabChange()
+    expect(component.filterText).toEqual('')
+    expect(component.filterTargetID).toEqual(0)
+  })
 })

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

@@ -1,22 +1,75 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { NgTemplateOutlet, SlicePipe } from '@angular/common'
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import {
-import { first } from 'rxjs'
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPaginationModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  first,
+  Subject,
+  takeUntil,
+  timer,
+} from 'rxjs'
 import { PaperlessTask } from 'src/app/data/paperless-task'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { TasksService } from 'src/app/services/tasks.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+export enum TaskTab {
+  Queued = 'queued',
+  Started = 'started',
+  Completed = 'completed',
+  Failed = 'failed',
+}
+
+enum TaskFilterTargetID {
+  Name,
+  Result,
+}
+
+const FILTER_TARGETS = [
+  { id: TaskFilterTargetID.Name, name: $localize`Name` },
+  { id: TaskFilterTargetID.Result, name: $localize`Result` },
+]
 
 @Component({
   selector: 'pngx-tasks',
   templateUrl: './tasks.component.html',
   styleUrls: ['./tasks.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    CustomDatePipe,
+    SlicePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    NgbNavModule,
+    NgbPaginationModule,
+    NgbPopoverModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class TasksComponent
-  extends ComponentWithPermissions
+  extends LoadingComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  public activeTab: string
+  public activeTab: TaskTab
   public selectedTasks: Set<number> = new Set()
   public togggleAll: boolean = false
   public expandedTask: number
@@ -24,7 +77,27 @@ export class TasksComponent
   public pageSize: number = 25
   public page: number = 1
 
-  public autoRefreshInterval: any
+  public autoRefreshEnabled: boolean = true
+
+  private _filterText: string = ''
+  get filterText() {
+    return this._filterText
+  }
+  set filterText(value: string) {
+    this.filterDebounce.next(value)
+  }
+
+  public filterTargetID: TaskFilterTargetID = TaskFilterTargetID.Name
+  public get filterTargetName(): string {
+    return this.filterTargets.find((t) => t.id == this.filterTargetID).name
+  }
+  private filterDebounce: Subject<string> = new Subject<string>()
+
+  public get filterTargets(): Array<{ id: number; name: string }> {
+    return [TaskTab.Failed, TaskTab.Completed].includes(this.activeTab)
+      ? FILTER_TARGETS
+      : FILTER_TARGETS.slice(0, 1)
+  }
 
   get dismissButtonText(): string {
     return this.selectedTasks.size > 0
@@ -42,12 +115,28 @@ export class TasksComponent
 
   ngOnInit() {
     this.tasksService.reload()
-    this.toggleAutoRefresh()
+    timer(5000, 5000)
+      .pipe(
+        filter(() => this.autoRefreshEnabled),
+        takeUntil(this.unsubscribeNotifier)
+      )
+      .subscribe(() => {
+        this.tasksService.reload()
+      })
+
+    this.filterDebounce
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        debounceTime(100),
+        distinctUntilChanged(),
+        filter((query) => !query.length || query.length > 2)
+      )
+      .subscribe((query) => (this._filterText = query))
   }
 
   ngOnDestroy() {
+    super.ngOnDestroy()
     this.tasksService.cancelPending()
-    clearInterval(this.autoRefreshInterval)
   }
 
   dismissTask(task: PaperlessTask) {
@@ -70,11 +159,11 @@ export class TasksComponent
         modal.componentInstance.buttonsEnabled = false
         modal.close()
         this.tasksService.dismissTasks(tasks)
-        this.selectedTasks.clear()
+        this.clearSelection()
       })
     } else {
       this.tasksService.dismissTasks(tasks)
-      this.selectedTasks.clear()
+      this.clearSelection()
     }
   }
 
@@ -96,19 +185,30 @@ export class TasksComponent
   get currentTasks(): PaperlessTask[] {
     let tasks: PaperlessTask[] = []
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         tasks = this.tasksService.queuedFileTasks
         break
-      case 'started':
+      case TaskTab.Started:
         tasks = this.tasksService.startedFileTasks
         break
-      case 'completed':
+      case TaskTab.Completed:
         tasks = this.tasksService.completedFileTasks
         break
-      case 'failed':
+      case TaskTab.Failed:
         tasks = this.tasksService.failedFileTasks
         break
     }
+    if (this._filterText.length) {
+      tasks = tasks.filter((t) => {
+        if (this.filterTargetID == TaskFilterTargetID.Name) {
+          return t.task_file_name
+            .toLowerCase()
+            .includes(this._filterText.toLowerCase())
+        } else if (this.filterTargetID == TaskFilterTargetID.Result) {
+          return t.result.toLowerCase().includes(this._filterText.toLowerCase())
+        }
+      })
+    }
     return tasks
   }
 
@@ -125,31 +225,37 @@ export class TasksComponent
     this.selectedTasks.clear()
   }
 
-  duringTabChange(navID: number) {
+  duringTabChange() {
     this.page = 1
   }
 
+  beforeTabChange() {
+    this.resetFilter()
+    this.filterTargetID = TaskFilterTargetID.Name
+  }
+
   get activeTabLocalized(): string {
     switch (this.activeTab) {
-      case 'queued':
+      case TaskTab.Queued:
         return $localize`queued`
-      case 'started':
+      case TaskTab.Started:
         return $localize`started`
-      case 'completed':
+      case TaskTab.Completed:
         return $localize`completed`
-      case 'failed':
+      case TaskTab.Failed:
         return $localize`failed`
     }
   }
 
-  toggleAutoRefresh(): void {
+  public resetFilter() {
-    if (this.autoRefreshInterval) {
+    this._filterText = ''
-      clearInterval(this.autoRefreshInterval)
+  }
-      this.autoRefreshInterval = null
+
-    } else {
+  filterInputKeyup(event: KeyboardEvent) {
-      this.autoRefreshInterval = setInterval(() => {
+    if (event.key == 'Enter') {
-        this.tasksService.reload()
+      this._filterText = (event.target as HTMLInputElement).value
-      }, 5000)
+    } else if (event.key === 'Escape') {
+      this.resetFilter()
     }
   }
 }

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

@@ -38,7 +38,7 @@
             </tr>
         </thead>
         <tbody>
-            @if (isLoading) {
+            @if (loading) {
                 <tr>
                     <td colspan="5">
                     <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -47,15 +47,20 @@
                 </tr>
             }
             @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" class="data-row fade" [class.show]="show">
                     <td>
                     <div class="form-check m-0 ms-2 me-n2">
                         <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
                         <label class="form-check-label" for="{{document.id}}"></label>
                     </div>
                     </td>
-                    <td scope="row">{{ document.title }}</td>
+                    <td scope="row">
-                    <td scope="row" i18n>{{ getDaysRemaining(document) }} days</td>
+                      {{ document.title }}
+                      <pngx-preview-popup [document]="document" linkClasses="btn btn-sm btn-link" #popupPreview>
+                        <i-bs name="eye"></i-bs>
+                      </pngx-preview-popup>
+                    </td>
+                    <td scope="row" class="d-none d-sm-table-cell" i18n>{{ getDaysRemaining(document) }} days</td>
                     <td scope="row">
                     <div class="btn-group d-block d-sm-none">
                         <div ngbDropdown container="body" class="d-inline-block">
@@ -83,7 +88,7 @@
     </table>
 </div>
 
-@if (!isLoading) {
+@if (!loading) {
     <div class="d-flex mb-2">
         <div>
             <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>

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

@@ -0,0 +1,4 @@
+// hide caret on mobile dropdown
+.d-block.d-sm-none .dropdown-toggle::after {
+  display: none;
+}

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

@@ -1,21 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { TrashComponent } from './trash.component'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { By } from '@angular/platform-browser'
+import { Router } from '@angular/router'
 import {
   NgbModal,
   NgbPaginationModule,
   NgbPopoverModule,
 } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { TrashService } from 'src/app/services/trash.service'
 import { of, throwError } from 'rxjs'
-import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { By } from '@angular/platform-browser'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import { TrashComponent } from './trash.component'
 
 const documentsInTrash = [
   {
@@ -38,15 +39,10 @@ describe('TrashComponent', () => {
   let trashService: TrashService
   let modalService: NgbModal
   let toastService: ToastService
+  let router: Router
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        TrashComponent,
-        PageHeaderComponent,
-        ConfirmDialogComponent,
-        SafeHtmlPipe,
-      ],
       imports: [
         HttpClientTestingModule,
         FormsModule,
@@ -54,6 +50,10 @@ describe('TrashComponent', () => {
         NgbPopoverModule,
         NgbPaginationModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        TrashComponent,
+        PageHeaderComponent,
+        ConfirmDialogComponent,
+        SafeHtmlPipe,
       ],
     }).compileComponents()
 
@@ -61,11 +61,13 @@ describe('TrashComponent', () => {
     trashService = TestBed.inject(TrashService)
     modalService = TestBed.inject(NgbModal)
     toastService = TestBed.inject(ToastService)
+    router = TestBed.inject(Router)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
 
   it('should call correct service method on reload', () => {
+    jest.useFakeTimers()
     const trashSpy = jest.spyOn(trashService, 'getTrash')
     trashSpy.mockReturnValue(
       of({
@@ -75,6 +77,7 @@ describe('TrashComponent', () => {
       })
     )
     component.reload()
+    jest.advanceTimersByTime(100)
     expect(trashSpy).toHaveBeenCalled()
     expect(component.documentsInTrash).toEqual(documentsInTrash)
   })
@@ -161,6 +164,22 @@ describe('TrashComponent', () => {
     expect(restoreSpy).toHaveBeenCalledWith([1, 2])
   })
 
+  it('should offer link to restored document', () => {
+    let toasts
+    const navigateSpy = jest.spyOn(router, 'navigate')
+    toastService.getToasts().subscribe((allToasts) => {
+      toasts = [...allToasts]
+    })
+    jest.spyOn(trashService, 'restoreDocuments').mockReturnValue(of('OK'))
+    component.restore(documentsInTrash[0])
+    expect(toasts.length).toEqual(1)
+    toasts[0].action()
+    expect(navigateSpy).toHaveBeenCalledWith([
+      'documents',
+      documentsInTrash[0].id,
+    ])
+  })
+
   it('should support toggle all items in view', () => {
     component.documentsInTrash = documentsInTrash
     expect(component.selectedDocuments.size).toEqual(0)

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

@@ -1,48 +1,73 @@
 import { Component, OnDestroy } from '@angular/core'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { Router } from '@angular/router'
+import {
+  NgbDropdownModule,
+  NgbModal,
+  NgbPaginationModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { delay, takeUntil, tap } from 'rxjs'
 import { Document } from 'src/app/data/document'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { Subject, takeUntil } from 'rxjs'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SettingsService } from 'src/app/services/settings.service'
+import { PreviewPopupComponent } from '../../common/preview-popup/preview-popup.component'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-trash',
   templateUrl: './trash.component.html',
   styleUrl: './trash.component.scss',
+  imports: [
+    PageHeaderComponent,
+    PreviewPopupComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    NgbDropdownModule,
+    NgbPaginationModule,
+    NgxBootstrapIconsModule,
+  ],
 })
-export class TrashComponent implements OnDestroy {
+export class TrashComponent
+  extends LoadingComponentWithPermissions
+  implements OnDestroy
+{
   public documentsInTrash: Document[] = []
   public selectedDocuments: Set<number> = new Set()
   public allToggled: boolean = false
   public page: number = 1
   public totalDocuments: number
-  public isLoading: boolean = false
-  unsubscribeNotifier: Subject<void> = new Subject()
 
   constructor(
     private trashService: TrashService,
     private toastService: ToastService,
     private modalService: NgbModal,
-    private settingsService: SettingsService
+    private settingsService: SettingsService,
+    private router: Router
   ) {
+    super()
     this.reload()
   }
 
-  ngOnDestroy() {
-    this.unsubscribeNotifier.next()
-    this.unsubscribeNotifier.complete()
-  }
-
   reload() {
-    this.isLoading = true
+    this.loading = true
-    this.trashService.getTrash(this.page).subscribe((r) => {
+    this.trashService
+      .getTrash(this.page)
+      .pipe(
+        tap((r) => {
           this.documentsInTrash = r.results
           this.totalDocuments = r.count
-      this.isLoading = false
           this.selectedDocuments.clear()
+          this.loading = false
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.show = true
       })
   }
 
@@ -110,7 +135,14 @@ export class TrashComponent implements OnDestroy {
   restore(document: Document) {
     this.trashService.restoreDocuments([document.id]).subscribe({
       next: () => {
-        this.toastService.showInfo($localize`Document restored`)
+        this.toastService.show({
+          content: $localize`Document restored`,
+          delay: 5000,
+          actionName: $localize`Open document`,
+          action: () => {
+            this.router.navigate(['documents', document.id])
+          },
+        })
         this.reload()
       },
       error: (err) => {

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

@@ -1,4 +1,5 @@
 import { DatePipe } from '@angular/common'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import {
   ComponentFixture,
@@ -6,22 +7,13 @@ import {
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { RouterTestingModule } from '@angular/router/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import {
+import { of, throwError } from 'rxjs'
-  NgbModule,
+import { Group } from 'src/app/data/group'
-  NgbAlertModule,
+import { User } from 'src/app/data/user'
-  NgbModal,
-  NgbModalRef,
-} from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectModule } from '@ng-select/ng-select'
-import { throwError, of } from 'rxjs'
-import { routes } from 'src/app/app-routing.module'
-import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
@@ -30,21 +22,7 @@ import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
-import { CheckComponent } from '../../common/input/check/check.component'
-import { NumberComponent } from '../../common/input/number/number.component'
-import { PasswordComponent } from '../../common/input/password/password.component'
-import { PermissionsGroupComponent } from '../../common/input/permissions/permissions-group/permissions-group.component'
-import { PermissionsUserComponent } from '../../common/input/permissions/permissions-user/permissions-user.component'
-import { SelectComponent } from '../../common/input/select/select.component'
-import { TagsComponent } from '../../common/input/tags/tags.component'
-import { TextComponent } from '../../common/input/text/text.component'
-import { PageHeaderComponent } from '../../common/page-header/page-header.component'
-import { SettingsComponent } from '../settings/settings.component'
 import { UsersAndGroupsComponent } from './users-groups.component'
-import { User } from 'src/app/data/user'
-import { Group } from 'src/app/data/group'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const users = [
   { id: 1, username: 'user1', is_superuser: false },
@@ -67,33 +45,7 @@ describe('UsersAndGroupsComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [NgxBootstrapIconsModule.pick(allIcons)],
-        UsersAndGroupsComponent,
-        SettingsComponent,
-        PageHeaderComponent,
-        IfPermissionsDirective,
-        CustomDatePipe,
-        ConfirmDialogComponent,
-        CheckComponent,
-        SafeHtmlPipe,
-        SelectComponent,
-        TextComponent,
-        PasswordComponent,
-        NumberComponent,
-        TagsComponent,
-        PermissionsUserComponent,
-        PermissionsGroupComponent,
-        IfOwnerDirective,
-      ],
-      imports: [
-        NgbModule,
-        RouterTestingModule.withRoutes(routes),
-        FormsModule,
-        ReactiveFormsModule,
-        NgbAlertModule,
-        NgSelectModule,
-        NgxBootstrapIconsModule.pick(allIcons),
-      ],
       providers: [
         CustomDatePipe,
         DatePipe,

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

@@ -1,23 +1,31 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { Subject, first, takeUntil } from 'rxjs'
 import { Group } from 'src/app/data/group'
 import { User } from 'src/app/data/user'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { GroupService } from 'src/app/services/rest/group.service'
 import { UserService } from 'src/app/services/rest/user.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
 import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component'
 import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
-import { SettingsService } from 'src/app/services/settings.service'
 
 @Component({
   selector: 'pngx-users-groups',
   templateUrl: './users-groups.component.html',
   styleUrls: ['./users-groups.component.scss'],
+  imports: [
+    PageHeaderComponent,
+    IfPermissionsDirective,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class UsersAndGroupsComponent
   extends ComponentWithPermissions

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

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow-sm">
+<nav class="navbar navbar-dark fixed-top bg-primary flex-md-nowrap p-0 shadow-sm">
   <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
     (click)="isMenuCollapsed = !isMenuCollapsed">
@@ -43,7 +43,7 @@
           <div class="dropdown-divider"></div>
         </div>
         <button ngbDropdownItem class="nav-link" (click)="editProfile()">
-          <i-bs class="me-2" name="person"></i-bs>&nbsp;<ng-container i18n>My Profile</ng-container>
+          <i-bs class="me-2" name="person"></i-bs><ng-container i18n>My Profile</ng-container>
         </button>
         <a ngbDropdownItem class="nav-link" routerLink="settings" (click)="closeMenu()"
           *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }">
@@ -93,14 +93,15 @@
         </ul>
 
         <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
-          @if (savedViewService.loading || savedViewService.sidebarViews?.length > 0) {
+          @if (savedViewService.loading) {
             <h6 class="sidebar-heading px-3 text-muted">
               <span i18n>Saved views</span>
-              @if (savedViewService.loading) {
               <div class="spinner-border spinner-border-sm fw-normal ms-2" role="status"></div>
-              }
             </h6>
-          }
+          } @else if (savedViewService.sidebarViews?.length > 0) {
+            <h6 class="sidebar-heading px-3 text-muted">
+              <span i18n>Saved views</span>
+            </h6>
             <ul class="nav flex-column mb-2" cdkDropList (cdkDropListDropped)="onDrop($event)">
               @for (view of savedViewService.sidebarViews; track view.id) {
                 <li class="nav-item w-100 app-link" cdkDrag [cdkDragDisabled]="!settingsService.organizingSidebarSavedViews"
@@ -120,6 +121,7 @@
                 </li>
               }
             </ul>
+          }
         </div>
 
         <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
@@ -197,6 +199,13 @@
                 <i-bs class="me-1" name="ui-radios"></i-bs><span>&nbsp;<ng-container i18n>Custom Fields</ng-container></span>
               </a>
             </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }">
+              <a class="nav-link" routerLink="savedviews" routerLinkActive="active" (click)="closeMenu()"
+                ngbPopover="Saved Views" i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end"
+                container="body" triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="window-stack"></i-bs><span>&nbsp;<ng-container i18n>Saved Views</ng-container></span>
+              </a>
+            </li>
             <li class="nav-item app-link"
               *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Workflow }"
               tourAnchor="tour.workflows">
@@ -214,6 +223,13 @@
                 <i-bs class="me-1" name="envelope"></i-bs><span>&nbsp;<ng-container i18n>Mail</ng-container></span>
               </a>
             </li>
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
+              </a>
+            </li>
           </ul>
         </div>
 
@@ -267,13 +283,6 @@
                 </a>
               </li>
             }
-            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
-              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
-                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
-                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
-                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
-              </a>
-            </li>
             <li class="nav-item mt-2" tourAnchor="tour.outro">
               <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
                 target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"
@@ -325,7 +334,7 @@
                         </a>
                       }
                     } @else {
-                      <a class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
+                      <a  *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.UISettings }" class="small text-decoration-none" routerLink="/settings" fragment="update-checking"
                         [ngbPopover]="updateCheckingNotEnabledPopContent" popoverClass="shadow" triggers="mouseenter"
                         container="body">
                         <i-bs width="1.2em" height="1.2em" name="info-circle"></i-bs>

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

@@ -1,6 +1,3 @@
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-
 /*
  * Sidebar
  */
@@ -12,6 +9,10 @@
   z-index: 995; /* Behind the navbar */
   padding: 50px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
+  overflow-y: auto;
+  --pngx-sidebar-width: 100%;
+  max-width: var(--pngx-sidebar-width);
+  transition: all .2s ease;
 
   .sidebar-heading .spinner-border {
     width: 0.8em;
@@ -24,18 +25,16 @@
 
   // These come from the col-* classes for non-slim sidebar, needed for animation
   @media (min-width: 768px) {
-    max-width: 25%;
+    --pngx-sidebar-width: 25%;
   }
 
   @media (min-width: 992px) {
-    max-width: 16.66666667%;
+    --pngx-sidebar-width: 16.66666667%;
   }
 
   @media (min-width: 2400px) {
-    max-width: 8.33333333%;
+    --pngx-sidebar-width: 8.33333333%;
   }
-
-  transition: all .2s ease;
 }
 @media (max-width: 767.98px) {
   .sidebar {
@@ -45,6 +44,13 @@
 
 main {
   transition: all .2s ease;
+  padding-top: 110px;
+}
+
+@media (min-width: 768px) {
+  main {
+    padding-top: 56px;
+  }
 }
 
 .sidebar-slim-toggler {
@@ -109,12 +115,17 @@ main {
 
   .sidebar-slim-toggler {
     display: block;
-    position: absolute;
+    position: fixed;
-    right: -12px;
+    left: calc(var(--pngx-sidebar-width) - 12px);
     top: 60px;
     z-index: 996;
     --bs-btn-padding-x: 0.35rem;
     --bs-btn-padding-y: 0.125rem;
+    transition: all .2s ease;
+  }
+
+  .sidebar.slim .sidebar-slim-toggler {
+    --pngx-sidebar-width: 50px !important;
   }
 }
 

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

@@ -1,43 +1,43 @@
+import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import {
   HttpTestingController,
   provideHttpClientTesting,
 } from '@angular/common/http/testing'
-import { AppFrameComponent } from './app-frame.component'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
-import { BrowserModule } from '@angular/platform-browser'
-import { RouterTestingModule } from '@angular/router/testing'
-import { SettingsService } from 'src/app/services/settings.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
-import { PermissionsService } from 'src/app/services/permissions.service'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
-import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { BrowserModule } from '@angular/platform-browser'
+import { ActivatedRoute, Router } from '@angular/router'
+import { RouterTestingModule } from '@angular/router/testing'
+import { NgbModal, NgbModalModule, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
-import { ToastService } from 'src/app/services/toast.service'
+import { routes } from 'src/app/app-routing.module'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
   DjangoMessageLevel,
   DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { environment } from 'src/environments/environment'
 import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { ActivatedRoute, Router } from '@angular/router'
+import { PermissionsService } from 'src/app/services/permissions.service'
-import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { RemoteVersionService } from 'src/app/services/rest/remote-version.service'
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
 import { SearchService } from 'src/app/services/rest/search.service'
-import { routes } from 'src/app/app-routing.module'
+import { SettingsService } from 'src/app/services/settings.service'
-import { PermissionsGuard } from 'src/app/guards/permissions.guard'
+import { ToastService } from 'src/app/services/toast.service'
-import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop'
+import { environment } from 'src/environments/environment'
-import { SavedView } from 'src/app/data/saved-view'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { AppFrameComponent } from './app-frame.component'
 import { GlobalSearchComponent } from './global-search/global-search.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 const saved_views = [
   {
@@ -95,11 +95,6 @@ describe('AppFrameComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppFrameComponent,
-        IfPermissionsDirective,
-        GlobalSearchComponent,
-      ],
       imports: [
         BrowserModule,
         RouterTestingModule.withRoutes(routes),
@@ -109,13 +104,16 @@ describe('AppFrameComponent', () => {
         DragDropModule,
         NgbModalModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        AppFrameComponent,
+        IfPermissionsDirective,
+        GlobalSearchComponent,
       ],
       providers: [
         SettingsService,
         {
           provide: SavedViewService,
           useValue: {
-            initialize: () => {},
+            reload: () => {},
             listAll: () =>
               of({
                 all: [saved_views.map((v) => v.id)],
@@ -170,7 +168,7 @@ describe('AppFrameComponent', () => {
       .mockReturnValue('Hello World')
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
 
-    savedViewSpy = jest.spyOn(savedViewService, 'initialize')
+    savedViewSpy = jest.spyOn(savedViewService, 'reload')
 
     fixture = TestBed.createComponent(AppFrameComponent)
     component = fixture.componentInstance
@@ -343,6 +341,7 @@ describe('AppFrameComponent', () => {
     component.editProfile()
     expect(modalSpy).toHaveBeenCalledWith(ProfileEditDialogComponent, {
       backdrop: 'static',
+      size: 'xl',
     })
   })
 

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

@@ -1,46 +1,72 @@
+import {
+  CdkDragDrop,
+  CdkDragEnd,
+  CdkDragStart,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { NgClass } from '@angular/common'
 import { Component, HostListener, OnInit } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
+import { ActivatedRoute, Router, RouterModule } from '@angular/router'
+import {
+  NgbCollapseModule,
+  NgbDropdownModule,
+  NgbModal,
+  NgbNavModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { TourNgBootstrapModule } from 'ngx-ui-tour-ng-bootstrap'
 import { Observable } from 'rxjs'
 import { first } from 'rxjs/operators'
 import { Document } from 'src/app/data/document'
-import { OpenDocumentsService } from 'src/app/services/open-documents.service'
+import { SavedView } from 'src/app/data/saved-view'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
+import { DocumentTitlePipe } from 'src/app/pipes/document-title.pipe'
 import {
   DjangoMessageLevel,
   DjangoMessagesService,
 } from 'src/app/services/django-messages.service'
-import { SavedViewService } from 'src/app/services/rest/saved-view.service'
+import { OpenDocumentsService } from 'src/app/services/open-documents.service'
-import { environment } from 'src/environments/environment'
-import { DocumentDetailComponent } from '../document-detail/document-detail.component'
-import {
-  RemoteVersionService,
-  AppRemoteVersion,
-} from 'src/app/services/rest/remote-version.service'
-import { SettingsService } from 'src/app/services/settings.service'
-import { TasksService } from 'src/app/services/tasks.service'
-import { ComponentCanDeactivate } from 'src/app/guards/dirty-doc.guard'
-import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { ToastService } from 'src/app/services/toast.service'
-import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
 import {
   PermissionAction,
   PermissionsService,
   PermissionType,
 } from 'src/app/services/permissions.service'
-import { SavedView } from 'src/app/data/saved-view'
 import {
-  CdkDragStart,
+  AppRemoteVersion,
-  CdkDragEnd,
+  RemoteVersionService,
-  CdkDragDrop,
+} from 'src/app/services/rest/remote-version.service'
-  moveItemInArray,
+import { SavedViewService } from 'src/app/services/rest/saved-view.service'
-} from '@angular/cdk/drag-drop'
+import { SettingsService } from 'src/app/services/settings.service'
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { TasksService } from 'src/app/services/tasks.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { environment } from 'src/environments/environment'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
-import { ObjectWithId } from 'src/app/data/object-with-id'
+import { DocumentDetailComponent } from '../document-detail/document-detail.component'
+import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
+import { GlobalSearchComponent } from './global-search/global-search.component'
 
 @Component({
   selector: 'pngx-app-frame',
   templateUrl: './app-frame.component.html',
   styleUrls: ['./app-frame.component.scss'],
+  imports: [
+    GlobalSearchComponent,
+    DocumentTitlePipe,
+    IfPermissionsDirective,
+    RouterModule,
+    NgClass,
+    NgbDropdownModule,
+    NgbPopoverModule,
+    NgbCollapseModule,
+    NgbNavModule,
+    NgxBootstrapIconsModule,
+    DragDropModule,
+    TourNgBootstrapModule,
+  ],
 })
 export class AppFrameComponent
   extends ComponentWithPermissions
@@ -74,7 +100,7 @@ export class AppFrameComponent
         PermissionType.SavedView
       )
     ) {
-      this.savedViewService.initialize()
+      this.savedViewService.reload()
     }
   }
 
@@ -82,7 +108,14 @@ export class AppFrameComponent
     if (this.settingsService.get(SETTINGS_KEYS.UPDATE_CHECKING_ENABLED)) {
       this.checkForUpdates()
     }
+    if (
+      this.permissionsService.currentUserCan(
+        PermissionAction.View,
+        PermissionType.PaperlessTask
+      )
+    ) {
       this.tasksService.reload()
+    }
 
     this.djangoMessagesService.get().forEach((message) => {
       switch (message.level) {
@@ -137,6 +170,7 @@ export class AppFrameComponent
   editProfile() {
     this.modalService.open(ProfileEditDialogComponent, {
       backdrop: 'static',
+      size: 'xl',
     })
     this.closeMenu()
   }

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

@@ -49,14 +49,14 @@
                 [disabled]="disablePrimaryButton(type, item)"
                 (mouseenter)="onButtonHover($event)">
                     @if (type === DataType.Document) {
-                        <i-bs width="1em" height="1em" name="pencil"></i-bs>
+                        <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
                         <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                     } @else if (type === DataType.SavedView) {
                         <i-bs width="1em" height="1em" name="eye"></i-bs>
                         <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                     } @else if (type === DataType.Workflow || type === DataType.CustomField || type === DataType.Group || type === DataType.User || type === DataType.MailAccount || type === DataType.MailRule) {
                         <i-bs width="1em" height="1em" name="pencil"></i-bs>
-                        <span>&nbsp;<ng-container i18n>Edit</ng-container></span>
+                        <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                     } @else {
                         <i-bs width="1em" height="1em" name="filter"></i-bs>
                         <span>&nbsp;<ng-container i18n>Filter documents</ng-container></span>
@@ -72,8 +72,8 @@
                             <i-bs width="1em" height="1em" name="download"></i-bs>
                             <span>&nbsp;<ng-container i18n>Download</ng-container></span>
                         } @else {
-                            <i-bs width="1em" height="1em" name="pencil"></i-bs>
+                            <i-bs width="1em" height="1em" name="file-earmark-richtext"></i-bs>
-                            <span>&nbsp;<ng-container i18n>Edit</ng-container></span>
+                            <span>&nbsp;<ng-container i18n>Open</ng-container></span>
                         }
                     </button>
                 }

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

@@ -65,10 +65,6 @@ form {
   --pngx-focus-alpha: 0;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .mh-75 {
   max-height: 75vh;
 }

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

@@ -1,12 +1,13 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ElementRef } from '@angular/core'
 import {
   ComponentFixture,
   TestBed,
   fakeAsync,
   tick,
 } from '@angular/core/testing'
-import { GlobalSearchComponent } from './global-search.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { of } from 'rxjs'
-import { SearchService } from 'src/app/services/rest/search.service'
 import { Router } from '@angular/router'
 import {
   NgbDropdownModule,
@@ -14,11 +15,9 @@ import {
   NgbModalModule,
   NgbModalRef,
 } from '@ng-bootstrap/ng-bootstrap'
-import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { of } from 'rxjs'
-import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { DataType } from 'src/app/data/datatype'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
   FILTER_FULLTEXT_QUERY,
   FILTER_HAS_CORRESPONDENT_ANY,
@@ -27,20 +26,21 @@ import {
   FILTER_HAS_TAGS_ALL,
   FILTER_TITLE_CONTENT,
 } from 'src/app/data/filter-rule-type'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
-import { DocumentService } from 'src/app/services/rest/document.service'
-import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
-import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
-import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
-import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
-import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { ElementRef } from '@angular/core'
-import { ToastService } from 'src/app/services/toast.service'
-import { DataType } from 'src/app/data/datatype'
-import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
-import { SettingsService } from 'src/app/services/settings.service'
 import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { SearchService } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
+import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
+import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
+import { GroupEditDialogComponent } from '../../common/edit-dialog/group-edit-dialog/group-edit-dialog.component'
+import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
+import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
+import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
+import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
+import { GlobalSearchComponent } from './global-search.component'
 
 const searchResults = {
   total: 11,
@@ -138,13 +138,13 @@ describe('GlobalSearchComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [GlobalSearchComponent],
       imports: [
         NgbModalModule,
         NgbDropdownModule,
         FormsModule,
         ReactiveFormsModule,
         NgxBootstrapIconsModule.pick(allIcons),
+        GlobalSearchComponent,
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -1,14 +1,23 @@
+import { NgTemplateOutlet } from '@angular/common'
 import {
   Component,
-  ViewChild,
   ElementRef,
-  ViewChildren,
-  QueryList,
   OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren,
 } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { NgbDropdown, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import {
-import { Subject, debounceTime, distinctUntilChanged, filter, map } from 'rxjs'
+  NgbDropdown,
+  NgbDropdownModule,
+  NgbModal,
+  NgbModalRef,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { Subject, debounceTime, distinctUntilChanged, filter } from 'rxjs'
+import { DataType } from 'src/app/data/datatype'
 import {
   FILTER_FULLTEXT_QUERY,
   FILTER_HAS_CORRESPONDENT_ANY,
@@ -17,19 +26,23 @@ import {
   FILTER_HAS_TAGS_ALL,
   FILTER_TITLE_CONTENT,
 } from 'src/app/data/filter-rule-type'
-import { DataType } from 'src/app/data/datatype'
 import { ObjectWithId } from 'src/app/data/object-with-id'
+import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
+import { HotKeyService } from 'src/app/services/hot-key.service'
 import {
-  PermissionsService,
   PermissionAction,
+  PermissionsService,
 } from 'src/app/services/permissions.service'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import {
   GlobalSearchResult,
   SearchService,
 } from 'src/app/services/rest/search.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { paramsFromViewState } from 'src/app/utils/query-params'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
 import { CustomFieldEditDialogComponent } from '../../common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component'
 import { DocumentTypeEditDialogComponent } from '../../common/edit-dialog/document-type-edit-dialog/document-type-edit-dialog.component'
@@ -41,15 +54,19 @@ import { StoragePathEditDialogComponent } from '../../common/edit-dialog/storage
 import { TagEditDialogComponent } from '../../common/edit-dialog/tag-edit-dialog/tag-edit-dialog.component'
 import { UserEditDialogComponent } from '../../common/edit-dialog/user-edit-dialog/user-edit-dialog.component'
 import { WorkflowEditDialogComponent } from '../../common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component'
-import { HotKeyService } from 'src/app/services/hot-key.service'
-import { paramsFromViewState } from 'src/app/utils/query-params'
-import { SettingsService } from 'src/app/services/settings.service'
-import { GlobalSearchType, SETTINGS_KEYS } from 'src/app/data/ui-settings'
 
 @Component({
   selector: 'pngx-global-search',
   templateUrl: './global-search.component.html',
   styleUrl: './global-search.component.scss',
+  imports: [
+    CustomDatePipe,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+    NgbDropdownModule,
+    NgTemplateOutlet,
+  ],
 })
 export class GlobalSearchComponent implements OnInit {
   public DataType = DataType
@@ -89,7 +106,6 @@ export class GlobalSearchComponent implements OnInit {
     this.queryDebounce
       .pipe(
         debounceTime(400),
-        map((query) => query?.trim()),
         filter((query) => !query?.length || query?.length > 2),
         distinctUntilChanged()
       )
@@ -109,7 +125,7 @@ export class GlobalSearchComponent implements OnInit {
 
   private search(query: string) {
     this.loading = true
-    this.searchService.globalSearch(query).subscribe((results) => {
+    this.searchService.globalSearch(query.trim()).subscribe((results) => {
       this.searchResults = results
       this.loading = false
       this.resultsDropdown.open()

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

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { ClearableBadgeComponent } from './clearable-badge.component'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ClearableBadgeComponent } from './clearable-badge.component'
 
 describe('ClearableBadgeComponent', () => {
   let component: ClearableBadgeComponent
@@ -8,8 +8,10 @@ describe('ClearableBadgeComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ClearableBadgeComponent],
+      imports: [
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+        NgxBootstrapIconsModule.pick(allIcons),
+        ClearableBadgeComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ClearableBadgeComponent)

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

@@ -1,9 +1,11 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
   selector: 'pngx-clearable-badge',
   templateUrl: './clearable-badge.component.html',
   styleUrls: ['./clearable-badge.component.scss'],
+  imports: [NgxBootstrapIconsModule],
 })
 export class ClearableBadgeComponent {
   constructor() {}

src-ui/src/app/components/common/confirm-button/confirm-button.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { ConfirmButtonComponent } from './confirm-button.component'
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { ConfirmButtonComponent } from './confirm-button.component'
 
 describe('ConfirmButtonComponent', () => {
   let component: ConfirmButtonComponent
@@ -10,8 +10,11 @@ describe('ConfirmButtonComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ConfirmButtonComponent],
+      imports: [
-      imports: [NgbPopoverModule, NgxBootstrapIconsModule.pick(allIcons)],
+        NgbPopoverModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        ConfirmButtonComponent,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(ConfirmButtonComponent)

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

@@ -5,12 +5,14 @@ import {
   Output,
   ViewChild,
 } from '@angular/core'
-import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 
 @Component({
   selector: 'pngx-confirm-button',
   templateUrl: './confirm-button.component.html',
   styleUrl: './confirm-button.component.scss',
+  imports: [NgbPopoverModule, NgxBootstrapIconsModule],
 })
 export class ConfirmButtonComponent {
   @Input()

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

@@ -1,14 +1,8 @@
-import {
+import { ComponentFixture, TestBed } from '@angular/core/testing'
-  ComponentFixture,
-  TestBed,
-  discardPeriodicTasks,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing'
-import { ConfirmDialogComponent } from './confirm-dialog.component'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { Subject } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { ConfirmDialogComponent } from './confirm-dialog.component'
 
 describe('ConfirmDialogComponent', () => {
   let component: ConfirmDialogComponent
@@ -17,9 +11,8 @@ describe('ConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ConfirmDialogComponent, SafeHtmlPipe],
       providers: [NgbActiveModal, SafeHtmlPipe],
-      imports: [],
+      imports: [ConfirmDialogComponent, SafeHtmlPipe],
     }).compileComponents()
 
     modal = TestBed.inject(NgbActiveModal)

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

@@ -1,14 +1,20 @@
+import { DecimalPipe } from '@angular/common'
 import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { interval, Subject, take } from 'rxjs'
+import { Subject } from 'rxjs'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
 
 @Component({
   selector: 'pngx-confirm-dialog',
   templateUrl: './confirm-dialog.component.html',
   styleUrls: ['./confirm-dialog.component.scss'],
+  imports: [DecimalPipe, SafeHtmlPipe],
 })
-export class ConfirmDialogComponent {
+export class ConfirmDialogComponent extends LoadingComponentWithPermissions {
-  constructor(public activeModal: NgbActiveModal) {}
+  constructor(public activeModal: NgbActiveModal) {
+    super()
+  }
 
   @Output()
   public confirmClicked = new EventEmitter()

src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss

@@ -1,6 +1,6 @@
 .pdf-viewer-container {
   background-color: gray;
-  height: 350px;
+  height: 550px;
 
   pdf-viewer {
     width: 100%;

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

@@ -1,12 +1,11 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
-import { PdfViewerComponent } from 'ng2-pdf-viewer'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('DeletePagesConfirmDialogComponent', () => {
   let component: DeletePagesConfirmDialogComponent
@@ -14,11 +13,12 @@ describe('DeletePagesConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent],
+      declarations: [],
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         FormsModule,
         ReactiveFormsModule,
+        DeletePagesConfirmDialogComponent,
       ],
       providers: [
         NgbActiveModal,

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

@@ -1,13 +1,20 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  PDFDocumentProxy,
+  PdfViewerComponent,
+  PdfViewerModule,
+} from 'ng2-pdf-viewer'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
 import { ConfirmDialogComponent } from '../confirm-dialog.component'
-import { PDFDocumentProxy, PdfViewerComponent } from 'ng2-pdf-viewer'
 
 @Component({
   selector: 'pngx-delete-pages-confirm-dialog',
   templateUrl: './delete-pages-confirm-dialog.component.html',
   styleUrl: './delete-pages-confirm-dialog.component.scss',
+  imports: [PdfViewerModule, FormsModule, ReactiveFormsModule, SafeHtmlPipe],
 })
 export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
   public documentID: number

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

@@ -1,12 +1,12 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of } from 'rxjs'
 import { DocumentService } from 'src/app/services/rest/document.service'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('MergeConfirmDialogComponent', () => {
   let component: MergeConfirmDialogComponent
@@ -15,11 +15,11 @@ describe('MergeConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MergeConfirmDialogComponent],
       imports: [
         NgxBootstrapIconsModule.pick(allIcons),
         ReactiveFormsModule,
         FormsModule,
+        MergeConfirmDialogComponent,
       ],
       providers: [
         NgbActiveModal,

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

@@ -1,16 +1,28 @@
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
 import { Component, OnInit } from '@angular/core'
-import { ConfirmDialogComponent } from '../confirm-dialog.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { DocumentService } from 'src/app/services/rest/document.service'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
-import { PermissionsService } from 'src/app/services/permissions.service'
+import { takeUntil } from 'rxjs'
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
-import { Subject, takeUntil } from 'rxjs'
 import { Document } from 'src/app/data/document'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
 @Component({
   selector: 'pngx-merge-confirm-dialog',
   templateUrl: './merge-confirm-dialog.component.html',
   styleUrl: './merge-confirm-dialog.component.scss',
+  imports: [
+    DragDropModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class MergeConfirmDialogComponent
   extends ConfirmDialogComponent
@@ -25,8 +37,6 @@ export class MergeConfirmDialogComponent
 
   public metadataDocumentID: number = -1
 
-  private unsubscribeNotifier: Subject<any> = new Subject()
-
   constructor(
     activeModal: NgbActiveModal,
     private documentService: DocumentService,

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

@@ -1,10 +1,10 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
 
 describe('RotateConfirmDialogComponent', () => {
   let component: RotateConfirmDialogComponent
@@ -12,8 +12,11 @@ describe('RotateConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [RotateConfirmDialogComponent, SafeHtmlPipe],
+      imports: [
-      imports: [NgxBootstrapIconsModule.pick(allIcons)],
+        NgxBootstrapIconsModule.pick(allIcons),
+        RotateConfirmDialogComponent,
+        SafeHtmlPipe,
+      ],
       providers: [
         NgbActiveModal,
         SafeHtmlPipe,

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

@@ -1,12 +1,16 @@
+import { NgStyle } from '@angular/common'
 import { Component } from '@angular/core'
-import { ConfirmDialogComponent } from '../confirm-dialog.component'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
 import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
 
 @Component({
   selector: 'pngx-rotate-confirm-dialog',
   templateUrl: './rotate-confirm-dialog.component.html',
   styleUrl: './rotate-confirm-dialog.component.scss',
+  imports: [NgStyle, NgxBootstrapIconsModule, SafeHtmlPipe],
 })
 export class RotateConfirmDialogComponent extends ConfirmDialogComponent {
   public documentID: number

src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.html

@@ -6,7 +6,7 @@
 <div class="modal-body">
     <p>{{message}}</p>
     <div class="row mb-2">
-        <div class="col-8">
+        <div class="col-7">
             <div class="input-group input-group-sm">
                 <div class="input-group-text" i18n>Page</div>
                 <input class="form-control" type="number" min="1" [(ngModel)]="page" />
@@ -21,7 +21,7 @@
                 </pdf-viewer>
             </div>
         </div>
-        <div class="col-4">
+        <div class="col-5">
             <div class="d-grid">
                 <button class="btn btn-sm btn-primary" (click)="addSplit()" [disabled]="!canSplit">
                     <i-bs name="plus-circle"></i-bs>&nbsp;
@@ -44,12 +44,12 @@
             </ul>
         </div>
     </div>
-    <div class="form-check form-switch mt-4">
+</div>
+<div class="modal-footer">
+    <div class="form-check form-switch me-auto">
        <input class="form-check-input" type="checkbox" role="switch" id="deleteOriginalSwitch" [(ngModel)]="deleteOriginal" [disabled]="!userOwnsDocument">
        <label class="form-check-label" for="deleteOriginalSwitch" i18n>Delete original document after successful split</label>
      </div>
-</div>
-<div class="modal-footer">
     <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
             <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
         </button>