New Crowdin translations by GitHub Action (#7728)

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.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
-        # allow as low as 50%
-        target: 75%
+        # For the changed lines only, target 100% covered, but
+        # allow as low as 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

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -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/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.0.3"
   # 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:
@@ -100,7 +100,7 @@ jobs:
       - pre-commit
     strategy:
       matrix:
-        python-version: ['3.9', '3.10', '3.11']
+        python-version: ['3.10', '3.11', '3.12']
       fail-fast: false
     steps:
       -
@@ -260,7 +260,7 @@ jobs:
           retention-days: 7
 
   tests-coverage-upload:
-    name: "Upload Coverage"
+    name: "Upload to Codecov"
     runs-on: ubuntu-22.04
     needs:
       - tests-backend
@@ -306,6 +306,30 @@ jobs:
           # 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 }}
@@ -462,7 +486,7 @@ jobs:
         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
+          patch -d $(pipenv --venv)/lib/python3.11/site-packages --verbose -p2 < 484.patch
           rm 484.patch
       -
         name: Install system dependencies

.github/workflows/cleanup-tags.yml

@@ -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.8.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"
@@ -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.8.0
         with:
           token: "${{ env.TOKEN }}"
           owner: "${{ github.repository_owner }}"

.pre-commit-config.yaml

@@ -36,8 +36,9 @@ repos:
         exclude_types:
           - pofile
           - json
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: 'v3.1.0'
+  # See https://github.com/prettier/prettier/issues/15742 for the fork reason
+  - repo: https://github.com/rbubley/mirrors-prettier
+    rev: 'v3.3.3'
     hooks:
       - id: prettier
         types_or:
@@ -47,7 +48,7 @@ repos:
         exclude: "(^Pipfile\\.lock$)"
   # Python hooks
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: 'v0.5.2'
+    rev: 'v0.6.8'
     hooks:
       - id: ruff
       - id: ruff-format
@@ -61,6 +62,8 @@ repos:
     rev: v6.2.1
     hooks:
       - id: beautysh
+        additional_dependencies:
+          - setuptools
         args:
           - "--tab"
   - repo: https://github.com/shellcheck-py/shellcheck-py

.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
 

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
 

Dockerfile

@@ -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.0.3 \
   && 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,20 @@ 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 \
-    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.1/psycopg_c-3.2.1-cp311-cp311-linux_x86_64.whl \
+    --output psycopg_c-3.2.2-cp312-cp312-linux_x86_64.whl \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.2/psycopg_c-3.2.2-cp312-cp312-linux_x86_64.whl \
     && curl --fail --silent --show-error --location \
-    --output psycopg_c-3.2.1-cp311-cp311-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 \
+    --output psycopg_c-3.2.2-cp312-cp312-linux_aarch64.whl  \
+    https://github.com/paperless-ngx/builder/releases/download/psycopg-3.2.2/psycopg_c-3.2.2-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 \
+    && patch -d /usr/local/lib/python3.12/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 +275,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,14 +7,14 @@ 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.1"
 django-allauth = {extras = ["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 = "*"
@@ -30,12 +30,14 @@ filelock = "*"
 flower = "*"
 gotenberg-client = "*"
 gunicorn = "*"
+httpx-oauth = "*"
 imap-tools = "*"
 inotifyrecursive = "~=0.3"
+jinja2 = "~=3.1"
 langdetect = "*"
 mysqlclient = "*"
 nltk = "*"
-ocrmypdf = "~=15.4"
+ocrmypdf = "~=16.5"
 pathvalidate = "*"
 pdf2image = "*"
 psycopg = {version = "*", extras = ["c"]}

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>

docker/docker-entrypoint.sh

@@ -122,27 +122,38 @@ 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
-		fi
-
-		if ! apt-cache show "$pkg" &>/dev/null; then
-			echo "Package $pkg not found! :("
-			continue
-		fi
-
-		echo "Installing package $pkg..."
-		if ! apt-get --assume-yes install "$pkg" &>/dev/null; then
-			echo "Could not install $pkg"
-			exit 1
+		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 "Skipped $pkg: Package not found! :("
+				continue
+			fi
+
+			echo "Installing package $pkg..."
+			if ! apt-get --assume-yes install "$pkg" &>/dev/null; then
+				echo "Could not install $pkg"
+				exit 1
+			fi
+		done
+	fi
 }
 
 echo "Paperless-ngx docker container starting..."

docs/administration.md

@@ -248,6 +248,7 @@ optional arguments:
 -z,  --zip
 -zn, --zip-name
 --data-only
+--no-progress-bar
 --passphrase
 ```
 
@@ -310,6 +311,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.
 
@@ -331,11 +336,12 @@ and the script does the rest of the work:
 document_importer source
 ```
 
-| Option         | Required | Default | Description                                                               |
-| -------------- | -------- | ------- | ------------------------------------------------------------------------- |
-| source         | Yes      | N/A     | The directory containing an export                                        |
-| `--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          |
+| 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          |
 
 When you use the provided docker compose script, put the export inside
 the `export` folder in your paperless source directory. Specify

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".
-- `{correspondent}`: The name of the correspondent, or "none".
-- `{document_type}`: The name of the document type, or "none".
-- `{tag_list}`: A comma separated list of all tags assigned to the
+- `{{ asn }}`: The archive serial number of the document, or "none".
+- `{{ correspondent }}`: The name of the correspondent, or "none".
+- `{{ document_type }}`: The name of the document type, or "none".
+- `{{ tag_list }}`: A comma separated list of all tags assigned to the
   document.
-- `{title}`: The title of the document.
-- `{created}`: The full date (ISO format) the document was created.
-- `{created_year}`: Year created only, formatted as the year with
+- `{{ title }}`: The title of the document.
+- `{{ created }}`: The full date (ISO format) the document was created.
+- `{{ 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_name}`: Month created name, as per locale
-- `{created_month_name_short}`: Month created abbreviated name, as per
+- `{{ created_month }}`: Month created only (number 01-12).
+- `{{ created_month_name }}`: Month created name, as per locale
+- `{{ created_month_name_short }}`: Month created abbreviated name, as per
   locale
-- `{created_day}`: Day created only (number 01-31).
-- `{added}`: The full date (ISO format) the document was added to
+- `{{ created_day }}`: Day created only (number 01-31).
+- `{{ added }}`: The full date (ISO format) the document was added to
   paperless.
-- `{added_year}`: Year added only.
-- `{added_year_short}`: Year added only, formatted as the year without
+- `{{ added_year }}`: Year added only.
+- `{{ added_year_short }}`: Year added only, formatted as the year without
   century, zero padded.
-- `{added_month}`: Month added only (number 01-12).
-- `{added_month_name}`: Month added name, as per locale
-- `{added_month_name_short}`: Month added abbreviated name, as per
+- `{{ added_month }}`: Month added only (number 01-12).
+- `{{ added_month_name }}`: Month added name, as per locale
+- `{{ added_month_name_short }}`: Month added abbreviated name, as per
   locale
-- `{added_day}`: Day added only (number 01-31).
-- `{owner_username}`: Username of document owner, 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.
+- `{{ added_day }}`: Day added only (number 01-31).
+- `{{ owner_username }}`: Username of document owner, 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.
 
 !!! 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}
-Insurances = Insurances/{correspondent}/{created_year}-{created_month}-{created_day} {title}
+By Year = {{ created_year }}/{{ correspondent }}/{{ 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.pdf`.
+
+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
@@ -690,3 +786,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.extra` socket by invoking
+
+```
+gpgconf --list-dir agent-extra-socket
+```
+
+on your host. A possible output is `~/.gnupg/S.gpg-agent.extra`.
+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.extra 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.

docs/changelog.md

@@ -1,5 +1,275 @@
 # Changelog
 
+## paperless-ngx 2.12.1
+
+### Bug Fixes
+
+- Fix: wait to apply tag changes until other changes saved with multiple workflow actions [@shamoon](https://github.com/shamoon) ([#7711](https://github.com/paperless-ngx/paperless-ngx/pull/7711))
+- Fix: delete_pages should require ownership (not just change perms) [@shamoon](https://github.com/shamoon) ([#7714](https://github.com/paperless-ngx/paperless-ngx/pull/7714))
+- Fix: filter out shown custom fields that have been deleted from saved… [@shamoon](https://github.com/shamoon) ([#7710](https://github.com/paperless-ngx/paperless-ngx/pull/7710))
+- Fix: only filter by string or number properties for filter pipe [@shamoon](https://github.com/shamoon) ([#7699](https://github.com/paperless-ngx/paperless-ngx/pull/7699))
+- Fix: saved view permissions fixes [@shamoon](https://github.com/shamoon) ([#7672](https://github.com/paperless-ngx/paperless-ngx/pull/7672))
+- Fix: add permissions for OPTIONS requests for notes [@shamoon](https://github.com/shamoon) ([#7661](https://github.com/paperless-ngx/paperless-ngx/pull/7661))
+
+### All App Changes
+
+<details>
+<summary>7 changes</summary>
+
+- Fix: wait to apply tag changes until other changes saved with multiple workflow actions [@shamoon](https://github.com/shamoon) ([#7711](https://github.com/paperless-ngx/paperless-ngx/pull/7711))
+- Fix: delete_pages should require ownership (not just change perms) [@shamoon](https://github.com/shamoon) ([#7714](https://github.com/paperless-ngx/paperless-ngx/pull/7714))
+- Enhancement: improve text contrast for selected documents in list view dark mode [@shamoon](https://github.com/shamoon) ([#7712](https://github.com/paperless-ngx/paperless-ngx/pull/7712))
+- Fix: filter out shown custom fields that have been deleted from saved… [@shamoon](https://github.com/shamoon) ([#7710](https://github.com/paperless-ngx/paperless-ngx/pull/7710))
+- Fix: only filter by string or number properties for filter pipe [@shamoon](https://github.com/shamoon) ([#7699](https://github.com/paperless-ngx/paperless-ngx/pull/7699))
+- Fix: saved view permissions fixes [@shamoon](https://github.com/shamoon) ([#7672](https://github.com/paperless-ngx/paperless-ngx/pull/7672))
+- Fix: add permissions for OPTIONS requests for notes [@shamoon](https://github.com/shamoon) ([#7661](https://github.com/paperless-ngx/paperless-ngx/pull/7661))
+</details>
+
+## paperless-ngx 2.12.0
+
+### Features / Enhancements
+
+- Enhancement: re-work mail rule dialog, support multiple include patterns [@shamoon](https://github.com/shamoon) ([#7635](https://github.com/paperless-ngx/paperless-ngx/pull/7635))
+- Enhancement: add Korean language [@shamoon](https://github.com/shamoon) ([#7573](https://github.com/paperless-ngx/paperless-ngx/pull/7573))
+- Enhancement: allow multiple filename attachment exclusion patterns for a mail rule [@MelleD](https://github.com/MelleD) ([#5524](https://github.com/paperless-ngx/paperless-ngx/pull/5524))
+- Refactor: Use django-filter logic for filtering full text search queries [@yichi-yang](https://github.com/yichi-yang) ([#7507](https://github.com/paperless-ngx/paperless-ngx/pull/7507))
+- Refactor: Reduce number of SQL queries when serializing List[Document] [@yichi-yang](https://github.com/yichi-yang) ([#7505](https://github.com/paperless-ngx/paperless-ngx/pull/7505))
+
+### Bug Fixes
+
+- Fix: use JSON for note audit log entries [@shamoon](https://github.com/shamoon) ([#7650](https://github.com/paperless-ngx/paperless-ngx/pull/7650))
+- Fix: Rework system check so it won't crash if tesseract is not found [@stumpylog](https://github.com/stumpylog) ([#7640](https://github.com/paperless-ngx/paperless-ngx/pull/7640))
+- Fix: correct broken pdfjs worker src after upgrade to pdfjs v4 [@shamoon](https://github.com/shamoon) ([#7626](https://github.com/paperless-ngx/paperless-ngx/pull/7626))
+- Chore: remove unused frontend dependencies [@shamoon](https://github.com/shamoon) ([#7607](https://github.com/paperless-ngx/paperless-ngx/pull/7607))
+- Fix: fix non-clickable scroll wheel in file uploads list [@shamoon](https://github.com/shamoon) ([#7591](https://github.com/paperless-ngx/paperless-ngx/pull/7591))
+- Fix: deselect file tasks select all button on dismiss [@shamoon](https://github.com/shamoon) ([#7592](https://github.com/paperless-ngx/paperless-ngx/pull/7592))
+- Fix: saved view sidebar heading not always visible [@shamoon](https://github.com/shamoon) ([#7584](https://github.com/paperless-ngx/paperless-ngx/pull/7584))
+- Fix: correct select field wrapping with long text [@shamoon](https://github.com/shamoon) ([#7572](https://github.com/paperless-ngx/paperless-ngx/pull/7572))
+- Fix: update ng-bootstrap to fix datepicker bug [@shamoon](https://github.com/shamoon) ([#7567](https://github.com/paperless-ngx/paperless-ngx/pull/7567))
+
+### Dependencies
+
+<details>
+<summary>11 changes</summary>
+
+- Chore(deps): Bump cryptography from 42.0.8 to 43.0.1 [@dependabot](https://github.com/dependabot) ([#7620](https://github.com/paperless-ngx/paperless-ngx/pull/7620))
+- Chore(deps-dev): Bump the development group with 3 updates [@dependabot](https://github.com/dependabot) ([#7608](https://github.com/paperless-ngx/paperless-ngx/pull/7608))
+- Chore(deps): Bump rapidfuzz from 3.9.6 to 3.9.7 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7611](https://github.com/paperless-ngx/paperless-ngx/pull/7611))
+- Chore(deps): Bump tslib from 2.6.3 to 2.7.0 in /src-ui [@dependabot](https://github.com/dependabot) ([#7606](https://github.com/paperless-ngx/paperless-ngx/pull/7606))
+- Chore(deps-dev): Bump [@<!---->playwright/test from 1.45.3 to 1.46.1 in /src-ui @dependabot](https://github.com/<!---->playwright/test from 1.45.3 to 1.46.1 in /src-ui @dependabot) ([#7603](https://github.com/paperless-ngx/paperless-ngx/pull/7603))
+- Chore(deps-dev): Bump typescript from 5.4.5 to 5.5.4 in /src-ui [@dependabot](https://github.com/dependabot) ([#7604](https://github.com/paperless-ngx/paperless-ngx/pull/7604))
+- Chore(deps-dev): Bump the frontend-eslint-dependencies group in /src-ui with 4 updates [@dependabot](https://github.com/dependabot) ([#7600](https://github.com/paperless-ngx/paperless-ngx/pull/7600))
+- Chore(deps): Bump the frontend-angular-dependencies group in /src-ui with 21 updates [@dependabot](https://github.com/dependabot) ([#7599](https://github.com/paperless-ngx/paperless-ngx/pull/7599))
+- Chore(deps): Bump pathvalidate from 3.2.0 to 3.2.1 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7548](https://github.com/paperless-ngx/paperless-ngx/pull/7548))
+- Chore(deps): Bump micromatch from 4.0.5 to 4.0.8 in /src-ui [@dependabot](https://github.com/dependabot) ([#7551](https://github.com/paperless-ngx/paperless-ngx/pull/7551))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7545](https://github.com/paperless-ngx/paperless-ngx/pull/7545))
+</details>
+
+### All App Changes
+
+<details>
+<summary>27 changes</summary>
+
+- Chore: Update backend dependencies in bulk [@stumpylog](https://github.com/stumpylog) ([#7656](https://github.com/paperless-ngx/paperless-ngx/pull/7656))
+- Fix: Rework system check so it won't crash if tesseract is not found [@stumpylog](https://github.com/stumpylog) ([#7640](https://github.com/paperless-ngx/paperless-ngx/pull/7640))
+- Refactor: performance and storage optimization of barcode scanning [@loewexy](https://github.com/loewexy) ([#7646](https://github.com/paperless-ngx/paperless-ngx/pull/7646))
+- Fix: use JSON for note audit log entries [@shamoon](https://github.com/shamoon) ([#7650](https://github.com/paperless-ngx/paperless-ngx/pull/7650))
+- Enhancement: re-work mail rule dialog, support multiple include patterns [@shamoon](https://github.com/shamoon) ([#7635](https://github.com/paperless-ngx/paperless-ngx/pull/7635))
+- Fix: correct broken pdfjs worker src after upgrade to pdfjs v4 [@shamoon](https://github.com/shamoon) ([#7626](https://github.com/paperless-ngx/paperless-ngx/pull/7626))
+- Chore(deps-dev): Bump the development group with 3 updates [@dependabot](https://github.com/dependabot) ([#7608](https://github.com/paperless-ngx/paperless-ngx/pull/7608))
+- Chore(deps): Bump rapidfuzz from 3.9.6 to 3.9.7 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7611](https://github.com/paperless-ngx/paperless-ngx/pull/7611))
+- Chore: remove unused frontend dependencies [@shamoon](https://github.com/shamoon) ([#7607](https://github.com/paperless-ngx/paperless-ngx/pull/7607))
+- Chore(deps): Bump tslib from 2.6.3 to 2.7.0 in /src-ui [@dependabot](https://github.com/dependabot) ([#7606](https://github.com/paperless-ngx/paperless-ngx/pull/7606))
+- Chore(deps-dev): Bump [@<!---->playwright/test from 1.45.3 to 1.46.1 in /src-ui @dependabot](https://github.com/<!---->playwright/test from 1.45.3 to 1.46.1 in /src-ui @dependabot) ([#7603](https://github.com/paperless-ngx/paperless-ngx/pull/7603))
+- Chore(deps-dev): Bump typescript from 5.4.5 to 5.5.4 in /src-ui [@dependabot](https://github.com/dependabot) ([#7604](https://github.com/paperless-ngx/paperless-ngx/pull/7604))
+- Chore(deps-dev): Bump the frontend-eslint-dependencies group in /src-ui with 4 updates [@dependabot](https://github.com/dependabot) ([#7600](https://github.com/paperless-ngx/paperless-ngx/pull/7600))
+- Chore(deps): Bump the frontend-angular-dependencies group in /src-ui with 21 updates [@dependabot](https://github.com/dependabot) ([#7599](https://github.com/paperless-ngx/paperless-ngx/pull/7599))
+- Fix: fix non-clickable scroll wheel in file uploads list [@shamoon](https://github.com/shamoon) ([#7591](https://github.com/paperless-ngx/paperless-ngx/pull/7591))
+- Fix: deselect file tasks select all button on dismiss [@shamoon](https://github.com/shamoon) ([#7592](https://github.com/paperless-ngx/paperless-ngx/pull/7592))
+- Fix: saved view sidebar heading not always visible [@shamoon](https://github.com/shamoon) ([#7584](https://github.com/paperless-ngx/paperless-ngx/pull/7584))
+- Enhancement: add Korean language [@shamoon](https://github.com/shamoon) ([#7573](https://github.com/paperless-ngx/paperless-ngx/pull/7573))
+- Enhancement: mail message preprocessor for gpg encrypted mails [@dbankmann](https://github.com/dbankmann) ([#7456](https://github.com/paperless-ngx/paperless-ngx/pull/7456))
+- Fix: correct select field wrapping with long text [@shamoon](https://github.com/shamoon) ([#7572](https://github.com/paperless-ngx/paperless-ngx/pull/7572))
+- Fix: update ng-bootstrap to fix datepicker bug [@shamoon](https://github.com/shamoon) ([#7567](https://github.com/paperless-ngx/paperless-ngx/pull/7567))
+- Enhancement: allow multiple filename attachment exclusion patterns for a mail rule [@MelleD](https://github.com/MelleD) ([#5524](https://github.com/paperless-ngx/paperless-ngx/pull/5524))
+- Chore(deps): Bump pathvalidate from 3.2.0 to 3.2.1 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7548](https://github.com/paperless-ngx/paperless-ngx/pull/7548))
+- Chore(deps): Bump micromatch from 4.0.5 to 4.0.8 in /src-ui [@dependabot](https://github.com/dependabot) ([#7551](https://github.com/paperless-ngx/paperless-ngx/pull/7551))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7545](https://github.com/paperless-ngx/paperless-ngx/pull/7545))
+- Refactor: Use django-filter logic for filtering full text search queries [@yichi-yang](https://github.com/yichi-yang) ([#7507](https://github.com/paperless-ngx/paperless-ngx/pull/7507))
+- Refactor: Reduce number of SQL queries when serializing List[Document] [@yichi-yang](https://github.com/yichi-yang) ([#7505](https://github.com/paperless-ngx/paperless-ngx/pull/7505))
+</details>
+
+## paperless-ngx 2.11.6
+
+### Bug Fixes
+
+- Fix: fix nltk tokenizer breaking change [@shamoon](https://github.com/shamoon) ([#7522](https://github.com/paperless-ngx/paperless-ngx/pull/7522))
+
+### All App Changes
+
+<details>
+<summary>1 change</summary>
+
+- Fix: fix nltk tokenizer breaking change [@shamoon](https://github.com/shamoon) ([#7522](https://github.com/paperless-ngx/paperless-ngx/pull/7522))
+</details>
+
+## paperless-ngx 2.11.5
+
+### Bug Fixes
+
+- Fix: use JSON for update archive file auditlog entries [@shamoon](https://github.com/shamoon) ([#7503](https://github.com/paperless-ngx/paperless-ngx/pull/7503))
+- Fix: respect deskew / rotate pages from AppConfig if set [@shamoon](https://github.com/shamoon) ([#7501](https://github.com/paperless-ngx/paperless-ngx/pull/7501))
+
+### Dependencies
+
+<details>
+<summary>5 changes</summary>
+
+- Chore(deps): Bump the small-changes group across 1 directory with 6 updates [@dependabot](https://github.com/dependabot) ([#7502](https://github.com/paperless-ngx/paperless-ngx/pull/7502))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7497](https://github.com/paperless-ngx/paperless-ngx/pull/7497))
+- Chore(deps-dev): Bump axios from 1.6.7 to 1.7.4 in /src-ui [@dependabot](https://github.com/dependabot) ([#7472](https://github.com/paperless-ngx/paperless-ngx/pull/7472))
+- Chore(deps-dev): Bump ruff from 0.5.6 to 0.5.7 in the development group [@dependabot](https://github.com/dependabot) ([#7457](https://github.com/paperless-ngx/paperless-ngx/pull/7457))
+- Chore(deps): Bump the small-changes group with 3 updates [@dependabot](https://github.com/dependabot) ([#7460](https://github.com/paperless-ngx/paperless-ngx/pull/7460))
+</details>
+
+### All App Changes
+
+<details>
+<summary>7 changes</summary>
+
+- Fix: use JSON for update archive file auditlog entries [@shamoon](https://github.com/shamoon) ([#7503](https://github.com/paperless-ngx/paperless-ngx/pull/7503))
+- Chore(deps): Bump the small-changes group across 1 directory with 6 updates [@dependabot](https://github.com/dependabot) ([#7502](https://github.com/paperless-ngx/paperless-ngx/pull/7502))
+- Fix: respect deskew / rotate pages from AppConfig if set [@shamoon](https://github.com/shamoon) ([#7501](https://github.com/paperless-ngx/paperless-ngx/pull/7501))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7497](https://github.com/paperless-ngx/paperless-ngx/pull/7497))
+- Chore(deps-dev): Bump axios from 1.6.7 to 1.7.4 in /src-ui [@dependabot](https://github.com/dependabot) ([#7472](https://github.com/paperless-ngx/paperless-ngx/pull/7472))
+- Chore(deps-dev): Bump ruff from 0.5.6 to 0.5.7 in the development group [@dependabot](https://github.com/dependabot) ([#7457](https://github.com/paperless-ngx/paperless-ngx/pull/7457))
+- Chore(deps): Bump the small-changes group with 3 updates [@dependabot](https://github.com/dependabot) ([#7460](https://github.com/paperless-ngx/paperless-ngx/pull/7460))
+</details>
+
+## paperless-ngx 2.11.4
+
+### Bug Fixes
+
+- Fix: initial upload message not being dismissed [@shamoon](https://github.com/shamoon) ([#7438](https://github.com/paperless-ngx/paperless-ngx/pull/7438))
+
+### All App Changes
+
+- Fix: initial upload message not being dismissed [@shamoon](https://github.com/shamoon) ([#7438](https://github.com/paperless-ngx/paperless-ngx/pull/7438))
+
+## paperless-ngx 2.11.3
+
+### Features
+
+- Enhancement: optimize tasks / stats reload [@shamoon](https://github.com/shamoon) ([#7402](https://github.com/paperless-ngx/paperless-ngx/pull/7402))
+- Enhancement: allow specifying default currency for Monetary custom field [@shamoon](https://github.com/shamoon) ([#7381](https://github.com/paperless-ngx/paperless-ngx/pull/7381))
+- Enhancement: specify when pre-check fails for documents in trash [@shamoon](https://github.com/shamoon) ([#7355](https://github.com/paperless-ngx/paperless-ngx/pull/7355))
+
+### Bug Fixes
+
+- Fix: clear selection after reload for management lists [@shamoon](https://github.com/shamoon) ([#7421](https://github.com/paperless-ngx/paperless-ngx/pull/7421))
+- Fix: disable inline create buttons if insufficient permissions [@shamoon](https://github.com/shamoon) ([#7401](https://github.com/paperless-ngx/paperless-ngx/pull/7401))
+- Fix: use entire document for dropzone [@shamoon](https://github.com/shamoon) ([#7342](https://github.com/paperless-ngx/paperless-ngx/pull/7342))
+
+### Maintenance
+
+- Chore(deps): Bump stumpylog/image-cleaner-action from 0.7.0 to 0.8.0 in the actions group [@dependabot](https://github.com/dependabot) ([#7371](https://github.com/paperless-ngx/paperless-ngx/pull/7371))
+
+### Dependencies
+
+<details>
+<summary>11 changes</summary>
+
+- Chore(deps): Bump django from 4.2.14 to 4.2.15 [@dependabot](https://github.com/dependabot) ([#7412](https://github.com/paperless-ngx/paperless-ngx/pull/7412))
+- Chore(deps-dev): Bump the development group with 3 updates [@dependabot](https://github.com/dependabot) ([#7394](https://github.com/paperless-ngx/paperless-ngx/pull/7394))
+- Chore(deps): Bump the small-changes group with 5 updates [@dependabot](https://github.com/dependabot) ([#7397](https://github.com/paperless-ngx/paperless-ngx/pull/7397))
+- Chore(deps-dev): Bump [@<!---->playwright/test from 1.42.1 to 1.45.3 in /src-ui @dependabot](https://github.com/<!---->playwright/test from 1.42.1 to 1.45.3 in /src-ui @dependabot) ([#7367](https://github.com/paperless-ngx/paperless-ngx/pull/7367))
+- Chore(deps-dev): Bump [@<!---->types/node from 20.12.2 to 22.0.2 in /src-ui @dependabot](https://github.com/<!---->types/node from 20.12.2 to 22.0.2 in /src-ui @dependabot) ([#7366](https://github.com/paperless-ngx/paperless-ngx/pull/7366))
+- Chore(deps-dev): Bump the frontend-eslint-dependencies group in /src-ui with 4 updates [@dependabot](https://github.com/dependabot) ([#7365](https://github.com/paperless-ngx/paperless-ngx/pull/7365))
+- Chore(deps): Bump uuid from 9.0.1 to 10.0.0 in /src-ui [@dependabot](https://github.com/dependabot) ([#7370](https://github.com/paperless-ngx/paperless-ngx/pull/7370))
+- Chore(deps): Bump stumpylog/image-cleaner-action from 0.7.0 to 0.8.0 in the actions group [@dependabot](https://github.com/dependabot) ([#7371](https://github.com/paperless-ngx/paperless-ngx/pull/7371))
+- Chore(deps): Bump zone.js from 0.14.4 to 0.14.8 in /src-ui [@dependabot](https://github.com/dependabot) ([#7368](https://github.com/paperless-ngx/paperless-ngx/pull/7368))
+- Chore(deps-dev): Bump jest-preset-angular from 14.1.1 to 14.2.2 in /src-ui in the frontend-jest-dependencies group [@dependabot](https://github.com/dependabot) ([#7364](https://github.com/paperless-ngx/paperless-ngx/pull/7364))
+- Chore(deps): Bump the frontend-angular-dependencies group in /src-ui with 20 updates [@dependabot](https://github.com/dependabot) ([#7363](https://github.com/paperless-ngx/paperless-ngx/pull/7363))
+</details>
+
+### All App Changes
+
+<details>
+<summary>15 changes</summary>
+
+- Fix: clear selection after reload for management lists [@shamoon](https://github.com/shamoon) ([#7421](https://github.com/paperless-ngx/paperless-ngx/pull/7421))
+- Enhancement: optimize tasks / stats reload [@shamoon](https://github.com/shamoon) ([#7402](https://github.com/paperless-ngx/paperless-ngx/pull/7402))
+- Enhancement: allow specifying default currency for Monetary custom field [@shamoon](https://github.com/shamoon) ([#7381](https://github.com/paperless-ngx/paperless-ngx/pull/7381))
+- Enhancement: specify when pre-check fails for documents in trash [@shamoon](https://github.com/shamoon) ([#7355](https://github.com/paperless-ngx/paperless-ngx/pull/7355))
+- Chore(deps-dev): Bump the development group with 3 updates [@dependabot](https://github.com/dependabot) ([#7394](https://github.com/paperless-ngx/paperless-ngx/pull/7394))
+- Fix: disable inline create buttons if insufficient permissions [@shamoon](https://github.com/shamoon) ([#7401](https://github.com/paperless-ngx/paperless-ngx/pull/7401))
+- Chore(deps): Bump the small-changes group with 5 updates [@dependabot](https://github.com/dependabot) ([#7397](https://github.com/paperless-ngx/paperless-ngx/pull/7397))
+- Chore(deps-dev): Bump [@<!---->playwright/test from 1.42.1 to 1.45.3 in /src-ui @dependabot](https://github.com/<!---->playwright/test from 1.42.1 to 1.45.3 in /src-ui @dependabot) ([#7367](https://github.com/paperless-ngx/paperless-ngx/pull/7367))
+- Chore(deps-dev): Bump [@<!---->types/node from 20.12.2 to 22.0.2 in /src-ui @dependabot](https://github.com/<!---->types/node from 20.12.2 to 22.0.2 in /src-ui @dependabot) ([#7366](https://github.com/paperless-ngx/paperless-ngx/pull/7366))
+- Chore(deps-dev): Bump the frontend-eslint-dependencies group in /src-ui with 4 updates [@dependabot](https://github.com/dependabot) ([#7365](https://github.com/paperless-ngx/paperless-ngx/pull/7365))
+- Chore(deps): Bump uuid from 9.0.1 to 10.0.0 in /src-ui [@dependabot](https://github.com/dependabot) ([#7370](https://github.com/paperless-ngx/paperless-ngx/pull/7370))
+- Chore(deps): Bump zone.js from 0.14.4 to 0.14.8 in /src-ui [@dependabot](https://github.com/dependabot) ([#7368](https://github.com/paperless-ngx/paperless-ngx/pull/7368))
+- Chore(deps-dev): Bump jest-preset-angular from 14.1.1 to 14.2.2 in /src-ui in the frontend-jest-dependencies group [@dependabot](https://github.com/dependabot) ([#7364](https://github.com/paperless-ngx/paperless-ngx/pull/7364))
+- Chore(deps): Bump the frontend-angular-dependencies group in /src-ui with 20 updates [@dependabot](https://github.com/dependabot) ([#7363](https://github.com/paperless-ngx/paperless-ngx/pull/7363))
+- Fix: use entire document for dropzone [@shamoon](https://github.com/shamoon) ([#7342](https://github.com/paperless-ngx/paperless-ngx/pull/7342))
+</details>
+
+## paperless-ngx 2.11.2
+
+### Changes
+
+- Change: more clearly handle init permissions error [@shamoon](https://github.com/shamoon) ([#7334](https://github.com/paperless-ngx/paperless-ngx/pull/7334))
+- Chore: add permissions info link from webUI [@shamoon](https://github.com/shamoon) ([#7310](https://github.com/paperless-ngx/paperless-ngx/pull/7310))
+- Fix: increase search input text contrast with light custom theme colors [@JayBkr](https://github.com/JayBkr) ([#7303](https://github.com/paperless-ngx/paperless-ngx/pull/7303))
+
+### Dependencies
+
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7296](https://github.com/paperless-ngx/paperless-ngx/pull/7296))
+- Chore(deps): Bump tika-client from 0.5.0 to 0.6.0 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7297](https://github.com/paperless-ngx/paperless-ngx/pull/7297))
+
+### All App Changes
+
+<details>
+<summary>5 changes</summary>
+
+- Change: more clearly handle init permissions error [@shamoon](https://github.com/shamoon) ([#7334](https://github.com/paperless-ngx/paperless-ngx/pull/7334))
+- Chore: add permissions info link from webUI [@shamoon](https://github.com/shamoon) ([#7310](https://github.com/paperless-ngx/paperless-ngx/pull/7310))
+- Fix: increase search input text contrast with light custom theme colors [@JayBkr](https://github.com/JayBkr) ([#7303](https://github.com/paperless-ngx/paperless-ngx/pull/7303))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7296](https://github.com/paperless-ngx/paperless-ngx/pull/7296))
+- Chore(deps): Bump tika-client from 0.5.0 to 0.6.0 in the small-changes group [@dependabot](https://github.com/dependabot) ([#7297](https://github.com/paperless-ngx/paperless-ngx/pull/7297))
+</details>
+
+## paperless-ngx 2.11.1
+
+### Features
+
+- Enhancement: include owner username in post-consumption variables [@Freddy-0](https://github.com/Freddy-0) ([#7270](https://github.com/paperless-ngx/paperless-ngx/pull/7270))
+
+### Bug Fixes
+
+- Fix: support multiple inbox tags from stats widget [@shamoon](https://github.com/shamoon) ([#7281](https://github.com/paperless-ngx/paperless-ngx/pull/7281))
+- Fix: Removes Turkish from the NLTK languages [@stumpylog](https://github.com/stumpylog) ([#7246](https://github.com/paperless-ngx/paperless-ngx/pull/7246))
+- Fix: include trashed docs in existing doc check [@shamoon](https://github.com/shamoon) ([#7229](https://github.com/paperless-ngx/paperless-ngx/pull/7229))
+
+### Dependencies
+
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7261](https://github.com/paperless-ngx/paperless-ngx/pull/7261))
+- Chore(deps): Bump the small-changes group across 1 directory with 2 updates [@dependabot](https://github.com/dependabot) ([#7266](https://github.com/paperless-ngx/paperless-ngx/pull/7266))
+
+### All App Changes
+
+<details>
+<summary>7 changes</summary>
+
+- Fix: support multiple inbox tags from stats widget [@shamoon](https://github.com/shamoon) ([#7281](https://github.com/paperless-ngx/paperless-ngx/pull/7281))
+- Chore(deps-dev): Bump the development group with 2 updates [@dependabot](https://github.com/dependabot) ([#7261](https://github.com/paperless-ngx/paperless-ngx/pull/7261))
+- Chore(deps): Bump the small-changes group across 1 directory with 2 updates [@dependabot](https://github.com/dependabot) ([#7266](https://github.com/paperless-ngx/paperless-ngx/pull/7266))
+- Enhancement: include owner username in post-consumption variables [@Freddy-0](https://github.com/Freddy-0) ([#7270](https://github.com/paperless-ngx/paperless-ngx/pull/7270))
+- Chore: Squash older automatic migrations [@stumpylog](https://github.com/stumpylog) ([#7267](https://github.com/paperless-ngx/paperless-ngx/pull/7267))
+- Fix: Removes Turkish from the NLTK languages [@stumpylog](https://github.com/stumpylog) ([#7246](https://github.com/paperless-ngx/paperless-ngx/pull/7246))
+- Fix: include trashed docs in existing doc check [@shamoon](https://github.com/shamoon) ([#7229](https://github.com/paperless-ngx/paperless-ngx/pull/7229))
+</details>
+
 ## paperless-ngx 2.11.0
 
 ### Breaking Changes

docs/configuration.md

@@ -600,7 +600,7 @@ You can optionally also automatically redirect users to the SSO login with [PAPE
 
     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,48 @@ 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)).
+
+#### [`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}
@@ -1277,6 +1334,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

docs/development.md

@@ -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

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

@@ -250,7 +250,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 +269,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 +303,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 +540,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
-    `PAPERLESS_DATA_DIR/nltk`. Refer to the [NLTK
+    Stemmer, Stopwords and Punkt tokenizer to `/usr/share/nltk_data`. Refer to the [NLTK
     instructions](https://www.nltk.org/data.html) for details on how to
     download the data.
 

docs/usage.md

@@ -112,7 +112,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 +136,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 +200,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 +246,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.
 
 #### Admin Status
 
@@ -248,29 +261,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.                                                                                                                              |
-| CustomField   | Grants global permissions to add, edit, delete or view Custom Fields.                                                                                                                               |
-| Document      | Grants global permissions to add, edit, delete or view Documents.                                                                                                                                   |
-| DocumentType  | Grants global permissions to add, edit, delete or view Document Types.                                                                                                                              |
-| Group         | Grants global permissions to add, edit, delete or view Groups.                                                                                                                                      |
-| MailAccount   | Grants global permissions to add, edit, delete or view Mail Accounts.                                                                                                                               |
-| MailRule      | Grants global permissions to add, edit, delete or view Mail Rules.                                                                                                                                  |
-| Note          | Grants global permissions to add, edit, delete or view Notes.                                                                                                                                       |
-| PaperlessTask | Grants global permissions to view or dismiss (_Change_) File Tasks.                                                                                                                                 |
-| SavedView     | Grants global permissions to add, edit, delete or view Saved Views.                                                                                                                                 |
-| ShareLink     | Grants global permissions to add, delete or view Share Links.                                                                                                                                       |
-| StoragePath   | Grants global permissions to add, edit, delete or view Storage Paths.                                                                                                                               |
-| Tag           | Grants global permissions to 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. |
-| User          | Grants global permissions to 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.        |
+| Type          | Details                                                                                                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| AppConfig     | _Change_ or higher permissions grants access to the "Application Configuration" area.                                                                                    |
+| Correspondent | Add, edit, delete or view Correspondents.                                                                                                                                |
+| CustomField   | Add, edit, delete or view Custom Fields.                                                                                                                                 |
+| Document      | Add, edit, delete or view Documents.                                                                                                                                     |
+| DocumentType  | Add, edit, delete or view Document Types.                                                                                                                                |
+| Group         | Add, edit, delete or view Groups.                                                                                                                                        |
+| MailAccount   | Add, edit, delete or view Mail Accounts.                                                                                                                                 |
+| MailRule      | Add, edit, delete or view Mail Rules.                                                                                                                                    |
+| Note          | Add, edit, delete or view Notes.                                                                                                                                         |
+| PaperlessTask | View or dismiss (_Change_) File Tasks.                                                                                                                                   |
+| SavedView     | Add, edit, delete or view Saved Views.                                                                                                                                   |
+| ShareLink     | Add, delete or view Share Links.                                                                                                                                         |
+| StoragePath   | Add, edit, delete or view Storage Paths.                                                                                                                                 |
+| Tag           | Add, edit, delete or view Tags.                                                                                                                                          |
+| 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          | Add, edit, delete or view Users.                                                                                                                                         |
+| 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}
 

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/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}",
-                "input": "node_modules/pdfjs-dist/build/",
+                "glob": "{pdf.worker.min.mjs,pdf.min.mjs}",
+                "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/document-list/document-list.spec.ts

@@ -84,13 +84,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('button', { name: 'Dates' }).click()
-  await page
-    .getByRole('menuitem', { name: 'After mm/dd/yyyy' })
-    .getByRole('button')
-    .first()
-    .click()
+  await page.getByRole('menuitem', { name: 'Last 3 months' }).first().click()
+  await page.getByLabel('Datesselected').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()

src-ui/extra-webpack.config.ts

@@ -0,0 +1,24 @@
+import * as webpack from 'webpack'
+import {
+  CustomWebpackBrowserSchema,
+  TargetOptions,
+} from '@angular-builders/custom-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,60 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^18.0.6",
-    "@angular/common": "~18.0.6",
-    "@angular/compiler": "~18.0.6",
-    "@angular/core": "~18.0.6",
-    "@angular/forms": "~18.0.6",
-    "@angular/localize": "~18.0.6",
-    "@angular/platform-browser": "~18.0.6",
-    "@angular/platform-browser-dynamic": "~18.0.6",
-    "@angular/router": "~18.0.6",
-    "@ng-bootstrap/ng-bootstrap": "^17.0.0",
-    "@ng-select/ng-select": "^13.4.1",
+    "@angular/cdk": "^18.2.6",
+    "@angular/common": "~18.2.6",
+    "@angular/compiler": "~18.2.6",
+    "@angular/core": "~18.2.6",
+    "@angular/forms": "~18.2.6",
+    "@angular/localize": "~18.2.6",
+    "@angular/platform-browser": "~18.2.6",
+    "@angular/platform-browser-dynamic": "~18.2.6",
+    "@angular/router": "~18.2.6",
+    "@ng-bootstrap/ng-bootstrap": "^17.0.1",
+    "@ng-select/ng-select": "^13.9.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.3.1",
     "ngx-bootstrap-icons": "^1.9.3",
     "ngx-color": "^9.0.0",
     "ngx-cookie-service": "^18.0.0",
     "ngx-file-drop": "^16.0.0",
     "ngx-ui-tour-ng-bootstrap": "^15.0.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.2",
-    "uuid": "^9.0.1",
-    "zone.js": "^0.14.4"
+    "tslib": "^2.7.0",
+    "uuid": "^10.0.0",
+    "zone.js": "^0.14.8"
   },
   "devDependencies": {
+    "@angular-builders/custom-webpack": "^18.0.0",
     "@angular-builders/jest": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular-devkit/core": "^18.0.7",
-    "@angular-devkit/schematics": "^18.0.7",
-    "@angular-eslint/builder": "18.1.0",
-    "@angular-eslint/eslint-plugin": "18.1.0",
-    "@angular-eslint/eslint-plugin-template": "18.1.0",
-    "@angular-eslint/schematics": "18.1.0",
-    "@angular-eslint/template-parser": "18.1.0",
-    "@angular/cli": "~18.0.7",
-    "@angular/compiler-cli": "~18.0.3",
-    "@playwright/test": "^1.42.1",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.12.2",
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
-    "@typescript-eslint/utils": "^7.13.0",
-    "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
+    "@angular-devkit/build-angular": "^18.2.2",
+    "@angular-devkit/core": "^18.2.6",
+    "@angular-devkit/schematics": "^18.2.6",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/cli": "~18.2.6",
+    "@angular/compiler-cli": "~18.2.2",
+    "@codecov/webpack-plugin": "^1.2.0",
+    "@playwright/test": "^1.47.2",
+    "@types/jest": "^29.5.13",
+    "@types/node": "^22.7.4",
+    "@typescript-eslint/eslint-plugin": "^8.8.0",
+    "@typescript-eslint/parser": "^8.8.0",
+    "@typescript-eslint/utils": "^8.0.0",
+    "eslint": "^9.11.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.0.0",
+    "jest-preset-angular": "^14.2.4",
     "jest-websocket-mock": "^2.5.0",
     "patch-package": "^8.0.0",
     "ts-node": "~10.9.1",
-    "typescript": "^5.3.3",
-    "wait-on": "^7.2.0"
+    "typescript": "^5.5.4"
   }
 }

src-ui/setup-jest.ts

@@ -24,6 +24,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 +56,7 @@ registerLocaleData(localeFr)
 registerLocaleData(localeHu)
 registerLocaleData(localeIt)
 registerLocaleData(localeJa)
+registerLocaleData(localeKo)
 registerLocaleData(localeLb)
 registerLocaleData(localeNl)
 registerLocaleData(localeNo)

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

@@ -36,7 +36,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()
   }
 

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

@@ -41,6 +41,7 @@ import { DocumentCardSmallComponent } from './components/document-list/document-
 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 { TextAreaComponent } from './components/common/input/textarea/textarea.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'
@@ -108,6 +109,7 @@ 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 { CustomFieldsQueryDropdownComponent } from './components/common/custom-fields-query-dropdown/custom-fields-query-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'
@@ -141,6 +143,7 @@ import {
   arrowRightShort,
   arrowUpRight,
   asterisk,
+  braces,
   bodyText,
   boxArrowUp,
   boxArrowUpRight,
@@ -172,6 +175,7 @@ import {
   download,
   envelope,
   envelopeAt,
+  envelopeAtFill,
   exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,
@@ -188,6 +192,7 @@ import {
   folderFill,
   funnel,
   gear,
+  google,
   grid,
   gripVertical,
   hash,
@@ -198,6 +203,8 @@ import {
   link,
   listTask,
   listUl,
+  microsoft,
+  nodePlus,
   pencil,
   people,
   peopleFill,
@@ -227,6 +234,7 @@ import {
   uiRadios,
   upcScan,
   x,
+  xCircle,
   xLg,
 } from 'ngx-bootstrap-icons'
 
@@ -242,6 +250,7 @@ const icons = {
   arrowRightShort,
   arrowUpRight,
   asterisk,
+  braces,
   bodyText,
   boxArrowUp,
   boxArrowUpRight,
@@ -273,6 +282,7 @@ const icons = {
   download,
   envelope,
   envelopeAt,
+  envelopeAtFill,
   exclamationCircleFill,
   exclamationTriangle,
   exclamationTriangleFill,
@@ -289,6 +299,7 @@ const icons = {
   folderFill,
   funnel,
   gear,
+  google,
   grid,
   gripVertical,
   hash,
@@ -299,6 +310,8 @@ const icons = {
   link,
   listTask,
   listUl,
+  microsoft,
+  nodePlus,
   pencil,
   people,
   peopleFill,
@@ -328,6 +341,7 @@ const icons = {
   uiRadios,
   upcScan,
   x,
+  xCircle,
   xLg,
 }
 
@@ -347,6 +361,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'
@@ -378,6 +393,7 @@ registerLocaleData(localeFr)
 registerLocaleData(localeHu)
 registerLocaleData(localeIt)
 registerLocaleData(localeJa)
+registerLocaleData(localeKo)
 registerLocaleData(localeLb)
 registerLocaleData(localeNl)
 registerLocaleData(localeNo)
@@ -431,6 +447,7 @@ function initializeApp(settings: SettingsService) {
     DocumentCardSmallComponent,
     BulkEditorComponent,
     TextComponent,
+    TextAreaComponent,
     SelectComponent,
     CheckComponent,
     UrlComponent,
@@ -483,6 +500,7 @@ function initializeApp(settings: SettingsService) {
     CustomFieldsComponent,
     CustomFieldEditDialogComponent,
     CustomFieldsDropdownComponent,
+    CustomFieldsQueryDropdownComponent,
     ProfileEditDialogComponent,
     DocumentLinkComponent,
     PreviewPopupComponent,

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

@@ -332,7 +332,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="SettingsNavIDs.SavedViews">
+    <li [ngbNavItem]="SettingsNavIDs.SavedViews" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.SavedView }">
       <a ngbNavLink i18n>Saved views</a>
       <ng-template ngbNavContent>
 

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

@@ -70,11 +70,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()
     }
   }
 

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

@@ -93,33 +93,35 @@
         </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>
-              }
+              <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"
+                  cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
+                  (cdkDragEnded)="onDragEnd($event)">
+                  <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
+                    routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
+                    [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
+                    popoverClass="popover-slim">
+                    <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
+                  </a>
+                  @if (settingsService.organizingSidebarSavedViews) {
+                    <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
+                      <i-bs name="grip-vertical"></i-bs>
+                    </div>
+                  }
+                </li>
+              }
+            </ul>
           }
-          <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"
-                cdkDragPreviewContainer="parent" cdkDragPreviewClass="navItemDrag" (cdkDragStarted)="onDragStart($event)"
-                (cdkDragEnded)="onDragEnd($event)">
-                <a class="nav-link" [class.text-truncate]="!slimSidebarEnabled" routerLink="view/{{view.id}}"
-                  routerLinkActive="active" (click)="closeMenu()" [ngbPopover]="view.name"
-                  [disablePopover]="!slimSidebarEnabled" placement="end" container="body" triggers="mouseenter:mouseleave"
-                  popoverClass="popover-slim">
-                  <i-bs class="me-1" name="funnel"></i-bs><span>&nbsp;{{view.name}}</span>
-                </a>
-                @if (settingsService.organizingSidebarSavedViews) {
-                  <div class="position-absolute end-0 top-0 px-3 py-2" [class.me-n3]="slimSidebarEnabled" cdkDragHandle>
-                    <i-bs name="grip-vertical"></i-bs>
-                  </div>
-                }
-              </li>
-            }
-          </ul>
         </div>
 
         <div class="nav-group mt-3 mb-1" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
@@ -214,6 +216,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 +276,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"

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

@@ -12,6 +12,9 @@
   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);
 
   .sidebar-heading .spinner-border {
     width: 0.8em;
@@ -24,15 +27,15 @@
 
   // 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;
@@ -109,12 +112,17 @@ main {
 
   .sidebar-slim-toggler {
     display: block;
-    position: absolute;
-    right: -12px;
+    position: fixed;
+    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

@@ -115,7 +115,7 @@ describe('AppFrameComponent', () => {
         {
           provide: SavedViewService,
           useValue: {
-            initialize: () => {},
+            reload: () => {},
             listAll: () =>
               of({
                 all: [saved_views.map((v) => v.id)],
@@ -170,7 +170,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

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

@@ -35,7 +35,6 @@ import {
 } from '@angular/cdk/drag-drop'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { ProfileEditDialogComponent } from '../common/profile-edit-dialog/profile-edit-dialog.component'
-import { ObjectWithId } from 'src/app/data/object-with-id'
 
 @Component({
   selector: 'pngx-app-frame',
@@ -74,7 +73,7 @@ export class AppFrameComponent
         PermissionType.SavedView
       )
     ) {
-      this.savedViewService.initialize()
+      this.savedViewService.reload()
     }
   }
 

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/common/custom-field-display/custom-field-display.component.spec.ts

@@ -20,6 +20,12 @@ const customFields: CustomField[] = [
       select_options: ['Option 1', 'Option 2', 'Option 3'],
     },
   },
+  {
+    id: 5,
+    name: 'Field 5',
+    data_type: CustomFieldDataType.Monetary,
+    extra_data: { default_currency: 'JPY' },
+  },
 ]
 const document: Document = {
   id: 1,
@@ -112,6 +118,18 @@ describe('CustomFieldDisplayComponent', () => {
     expect(component.value).toEqual(100)
   })
 
+  it('should respect explicit default currency', () => {
+    component['defaultCurrencyCode'] = 'EUR' // mock default locale injection
+    component.fieldId = 5
+    component.document = {
+      id: 1,
+      title: 'Doc 1',
+      custom_fields: [{ field: 5, document: 1, created: null, value: '100' }],
+    }
+    expect(component.currency).toEqual('JPY')
+    expect(component.value).toEqual(100)
+  })
+
   it('should show select value', () => {
     expect(component.getSelectValue(customFields[3], 2)).toEqual('Option 3')
   })

src-ui/src/app/components/common/custom-field-display/custom-field-display.component.ts

@@ -90,7 +90,9 @@ export class CustomFieldDisplayComponent implements OnInit, OnDestroy {
     )?.value
     if (this.value && this.field.data_type === CustomFieldDataType.Monetary) {
       this.currency =
-        this.value.match(/([A-Z]{3})/)?.[0] ?? this.defaultCurrencyCode
+        this.value.match(/([A-Z]{3})/)?.[0] ??
+        this.field.extra_data?.default_currency ??
+        this.defaultCurrencyCode
       this.value = parseFloat(this.value.replace(this.currency, ''))
     } else if (
       this.value?.length &&

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

@@ -0,0 +1,163 @@
+<div class="btn-group w-100" role="group" ngbDropdown #dropdown="ngbDropdown" (openChange)="onOpenChange($event)" [popperOptions]="popperOptions">
+  <button class="btn btn-sm btn-outline-primary" id="dropdown_toggle" ngbDropdownToggle [disabled]="disabled">
+    <i-bs name="{{icon}}"></i-bs>
+    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
+    @if (isActive) {
+      <pngx-clearable-badge [selected]="isActive" (cleared)="reset()"></pngx-clearable-badge>
+    }
+  </button>
+  <div class="px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
+    <div class="list-group list-group-flush">
+      @for (element of selectionModel.queries; track element.id; let i = $index) {
+        <div class="list-group-item px-0 d-flex flex-nowrap">
+          @switch (element.type) {
+            @case (CustomFieldQueryComponentType.Atom) {
+              <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
+            }
+            @case (CustomFieldQueryComponentType.Expression) {
+              <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
+            }
+          }
+        </div>
+      }
+    </div>
+  </div>
+</div>
+
+<ng-template #comparisonValueTemplate let-atom="atom">
+  @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
+    <input class="form-control" placeholder="yyyy-mm-dd"
+      [(ngModel)]="atom.value"
+      ngbDatepicker
+      #d="ngbDatepicker" />
+    <button class="btn btn-sm btn-outline-secondary rounded-end" (click)="d.toggle()" type="button">
+      <i-bs name="calendar-event"></i-bs>
+    </button>
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Float || getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Integer) {
+    <input class="w-25 form-control rounded-end" type="number" [(ngModel)]="atom.value" [disabled]="disabled">
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Boolean) {
+    <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+      <option value="true" i18n>True</option>
+      <option value="false" i18n>False</option>
+    </select>
+  } @else if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Select) {
+    <ng-select
+      class="paperless-input-select rounded-end"
+      [items]="getSelectOptionsForField(atom.field)"
+      [(ngModel)]="atom.value"
+      [disabled]="disabled"
+      (mousedown)="$event.stopImmediatePropagation()"
+    ></ng-select>
+  } @else {
+    <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
+  }
+</ng-template>
+
+<ng-template #queryAtom let-atom="atom">
+  <div class="input-group input-group-sm">
+    <ng-select
+      class="paperless-input-select"
+      [items]="customFields"
+      [(ngModel)]="atom.field"
+      [disabled]="disabled"
+      bindLabel="name"
+      bindValue="id"
+      (mousedown)="$event.stopImmediatePropagation()"
+    ></ng-select>
+    <select class="w-25 form-select" [(ngModel)]="atom.operator" [disabled]="disabled">
+      <option *ngFor="let operator of getOperatorsForField(atom.field)" [ngValue]="operator.value">{{operator.label}}</option>
+    </select>
+    @switch (atom.operator) {
+      @case (CustomFieldQueryOperator.Exists) {
+        <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+          <option value="true" i18n>True</option>
+          <option value="false" i18n>False</option>
+        </select>
+      }
+      @case (CustomFieldQueryOperator.IsNull) {
+        <select class="w-25 form-select rounded-end" [(ngModel)]="atom.value" [disabled]="disabled">
+          <option value="true" i18n>True</option>
+          <option value="false" i18n>False</option>
+        </select>
+      }
+      @case (CustomFieldQueryOperator.GreaterThanOrEqual) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.LessThanOrEqual) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.GreaterThan) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.LessThan) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @case (CustomFieldQueryOperator.Contains) {
+        <pngx-input-document-link [(ngModel)]="atom.value" class="w-25 form-select doc-link-select p-0" placeholder="Search docs..." i18n-placeholder [minimal]="true"></pngx-input-document-link>
+      }
+      @case (CustomFieldQueryOperator.In) {
+        <ng-select
+          class="paperless-input-select rounded-end"
+          [items]="getSelectOptionsForField(atom.field)"
+          [(ngModel)]="atom.value"
+          [disabled]="disabled"
+          [multiple]="true"
+          (mousedown)="$event.stopImmediatePropagation()"
+        ></ng-select>
+      }
+      @case (CustomFieldQueryOperator.Exact) {
+        <ng-container *ngTemplateOutlet="comparisonValueTemplate; context: { atom: atom }"></ng-container>
+      }
+      @default {
+        <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="atom.value" [disabled]="disabled">
+      }
+    }
+    <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeElement(atom)" [disabled]="disabled">
+      <i-bs name="x-circle"></i-bs>
+    </button>
+  </div>
+</ng-template>
+
+<ng-template #queryExpression let-expression="expression">
+  <div class="d-flex w-100">
+    <div class="d-flex flex-grow-1 flex-column">
+      <div class="btn-group btn-group-xs" role="group">
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorOr_{{expression.id}}" name="logicalOperatorOr_{{expression.id}}" value="OR" [disabled]="expression.depth > 0 && expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorOr_{{expression.id}}" i18n>Any</label>
+        <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{expression.id}}" name="logicalOperatorAnd_{{expression.id}}" value="AND" [disabled]="expression.depth > 0 && expression.value.length < 2">
+        <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{expression.id}}" i18n>All</label>
+        @if (expression.negatable)  {
+          <input [(ngModel)]="expression.operator" type="radio" class="btn-check" id="logicalOperatorNot_{{expression.id}}" name="logicalOperatorNot_{{expression.id}}" value="NOT">
+          <label class="btn btn-outline-secondary" for="logicalOperatorNot_{{expression.id}}" i18n>Not</label>
+        }
+      </div>
+      <div class="list-group list-group-flush mb-n2">
+        @for (element of expression.value; track element.id; let i = $index) {
+          <div class="list-group-item px-0 d-flex flex-nowrap">
+            @switch (element.type) {
+              @case (CustomFieldQueryComponentType.Atom) {
+                <ng-container *ngTemplateOutlet="queryAtom; context: { atom: element }"></ng-container>
+              }
+              @case (CustomFieldQueryComponentType.Expression) {
+                <ng-container *ngTemplateOutlet="queryExpression; context: { expression: element }"></ng-container>
+              }
+            }
+          </div>
+        }
+      </div>
+    </div>
+    <div class="btn-group-vertical ms-2 ps-2 border-start" role="group" aria-label="Vertical button group">
+      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add query" i18n-title (click)="addAtom(expression)" [disabled]="disabled || expression.value.length === CUSTOM_FIELD_QUERY_MAX_ATOMS">
+        <i-bs name="node-plus"></i-bs>
+      </button>
+      <button type="button" class="btn btn-sm btn-outline-secondary text-primary" title="Add expression" i18n-title (click)="addExpression(expression)" [disabled]="disabled || expression.depth === CUSTOM_FIELD_QUERY_MAX_DEPTH">
+        <i-bs name="braces"></i-bs>
+      </button>
+      @if (expression.depth > 0) {
+        <button type="button" class="btn btn-sm btn-outline-secondary text-danger" (click)="removeElement(expression)" [disabled]="disabled">
+          <i-bs name="x-circle"></i-bs>
+        </button>
+      }
+    </div>
+  </div>
+</ng-template>

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

@@ -0,0 +1,43 @@
+.dropdown-menu {
+  width: 370px;
+  @media(min-width: 768px) {
+    width: 600px;
+  }
+}
+
+::ng-deep .ng-select-container {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  height: 100% !important;
+}
+
+::ng-deep .rounded-end .ng-select-container {
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+::ng-deep .ng-select {
+  max-width: 100px;
+  min-width: 35%;
+  font-size: 14px;
+}
+
+::ng-deep .doc-link-select {
+  padding-top: 0 !important;
+  border-top-right-radius: var(--bs-border-radius) !important;
+  border-bottom-right-radius: var(--bs-border-radius) !important;
+  background-image: none !important;
+
+  .ng-select-container,
+  .ng-select.ng-select-opened > .ng-select-container {
+    border: none !important;
+    min-height: 34px !important;
+    background: none !important;
+  }
+  .ng-select {
+    max-width: 200px;
+    min-width: 140px;
+  }
+}

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

@@ -0,0 +1,320 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  CustomFieldQueriesModel,
+  CustomFieldsQueryDropdownComponent,
+} from './custom-fields-query-dropdown.component'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import { of } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import {
+  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
+  CustomFieldQueryLogicalOperator,
+  CustomFieldQueryOperatorGroups,
+} from 'src/app/data/custom-field-query'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import {
+  CustomFieldQueryExpression,
+  CustomFieldQueryAtom,
+  CustomFieldQueryElement,
+} from 'src/app/utils/custom-field-query-element'
+
+const customFields = [
+  {
+    id: 1,
+    name: 'Test Field',
+    data_type: CustomFieldDataType.String,
+    extra_data: {},
+  },
+  {
+    id: 2,
+    name: 'Test Select Field',
+    data_type: CustomFieldDataType.Select,
+    extra_data: { select_options: ['Option 1', 'Option 2'] },
+  },
+]
+
+describe('CustomFieldsQueryDropdownComponent', () => {
+  let component: CustomFieldsQueryDropdownComponent
+  let fixture: ComponentFixture<CustomFieldsQueryDropdownComponent>
+  let customFieldsService: CustomFieldsService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CustomFieldsQueryDropdownComponent],
+      imports: [NgbDropdownModule, NgxBootstrapIconsModule.pick(allIcons)],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    customFieldsService = TestBed.inject(CustomFieldsService)
+    jest.spyOn(customFieldsService, 'listAll').mockReturnValue(
+      of({
+        count: customFields.length,
+        all: customFields.map((f) => f.id),
+        results: customFields,
+      })
+    )
+    fixture = TestBed.createComponent(CustomFieldsQueryDropdownComponent)
+    component = fixture.componentInstance
+    component.icon = 'ui-radios'
+    fixture.detectChanges()
+  })
+
+  it('should initialize custom fields on creation', () => {
+    expect(component.customFields).toEqual(customFields)
+  })
+
+  it('should add an expression when opened if queries are empty', () => {
+    component.selectionModel.clear()
+    component.onOpenChange(true)
+    expect(component.selectionModel.queries.length).toBe(1)
+  })
+
+  it('should support reset the selection model', () => {
+    component.selectionModel.addExpression()
+    component.reset()
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+  })
+
+  it('should get operators for a field', () => {
+    const field: CustomField = {
+      id: 1,
+      name: 'Test Field',
+      data_type: CustomFieldDataType.String,
+      extra_data: {},
+    }
+    component.customFields = [field]
+    const operators = component.getOperatorsForField(1)
+    expect(operators.length).toEqual(
+      [
+        ...CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+          CustomFieldQueryOperatorGroups.Basic
+        ],
+        ...CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+          CustomFieldQueryOperatorGroups.String
+        ],
+      ].length
+    )
+
+    // Fallback to basic operators if field is not found
+    const operators2 = component.getOperatorsForField(2)
+    expect(operators2.length).toEqual(
+      CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[
+        CustomFieldQueryOperatorGroups.Basic
+      ].length
+    )
+  })
+
+  it('should get select options for a field', () => {
+    const field: CustomField = {
+      id: 1,
+      name: 'Test Field',
+      data_type: CustomFieldDataType.Select,
+      extra_data: { select_options: ['Option 1', 'Option 2'] },
+    }
+    component.customFields = [field]
+    const options = component.getSelectOptionsForField(1)
+    expect(options).toEqual(['Option 1', 'Option 2'])
+
+    // Fallback to empty array if field is not found
+    const options2 = component.getSelectOptionsForField(2)
+    expect(options2).toEqual([])
+  })
+
+  it('should remove an element from the selection model', () => {
+    const expression = new CustomFieldQueryExpression()
+    const atom = new CustomFieldQueryAtom()
+    ;(expression.value as CustomFieldQueryElement[]).push(atom)
+    component.selectionModel.addExpression(expression)
+    component.removeElement(atom)
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+    const expression2 = new CustomFieldQueryExpression([
+      CustomFieldQueryLogicalOperator.And,
+      [
+        [1, 'icontains', 'test'],
+        [2, 'icontains', 'test'],
+      ],
+    ])
+    component.selectionModel.addExpression(expression2)
+    component.removeElement(expression2)
+    expect(component.selectionModel.isEmpty()).toBeTruthy()
+  })
+
+  it('should emit selectionModelChange when model changes', () => {
+    const nextSpy = jest.spyOn(component.selectionModelChange, 'next')
+    const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+    component.selectionModel.addAtom(atom)
+    atom.changed.next(atom)
+    expect(nextSpy).toHaveBeenCalled()
+  })
+
+  it('should complete selection model subscription when new selection model is set', () => {
+    const completeSpy = jest.spyOn(component.selectionModel.changed, 'complete')
+    const selectionModel = new CustomFieldQueriesModel()
+    component.selectionModel = selectionModel
+    expect(completeSpy).toHaveBeenCalled()
+  })
+
+  it('should support adding an atom', () => {
+    const expression = new CustomFieldQueryExpression()
+    component.addAtom(expression)
+    expect(expression.value.length).toBe(1)
+  })
+
+  it('should support adding an expression', () => {
+    const expression = new CustomFieldQueryExpression()
+    component.addExpression(expression)
+    expect(expression.value.length).toBe(1)
+  })
+
+  it('should support getting a custom field by ID', () => {
+    expect(component.getCustomFieldByID(1)).toEqual(customFields[0])
+  })
+
+  it('should sanitize name from title', () => {
+    component.title = 'Test Title'
+    expect(component.name).toBe('test_title')
+  })
+
+  describe('CustomFieldQueriesModel', () => {
+    let model: CustomFieldQueriesModel
+
+    beforeEach(() => {
+      model = new CustomFieldQueriesModel()
+    })
+
+    it('should initialize with empty queries', () => {
+      expect(model.queries).toEqual([])
+    })
+
+    it('should clear queries and fire event', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.addExpression()
+      model.clear()
+      expect(model.queries).toEqual([])
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
+
+    it('should clear queries without firing event', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      model.addExpression()
+      model.clear(false)
+      expect(model.queries).toEqual([])
+      expect(nextSpy).not.toHaveBeenCalled()
+    })
+
+    it('should validate an empty model as invalid', () => {
+      expect(model.isValid()).toBeFalsy()
+    })
+
+    it('should validate a model with valid expression as valid', () => {
+      const expression = new CustomFieldQueryExpression()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      const atom2 = new CustomFieldQueryAtom([2, 'icontains', 'test'])
+      const expression2 = new CustomFieldQueryExpression()
+      expression2.addAtom(atom)
+      expression2.addAtom(atom2)
+      expression.addExpression(expression2)
+      model.addExpression(expression)
+      expect(model.isValid()).toBeTruthy()
+    })
+
+    it('should validate a model with invalid expression as invalid', () => {
+      const expression = new CustomFieldQueryExpression()
+      model.addExpression(expression)
+      expect(model.isValid()).toBeFalsy()
+    })
+
+    it('should validate an atom with in or contains operator', () => {
+      const atom = new CustomFieldQueryAtom([1, 'in', '[1,2,3]'])
+      expect(model['validateAtom'].apply(null, [atom])).toBeTruthy()
+      atom.operator = 'contains'
+      atom.value = [1, 2, 3]
+      expect(model['validateAtom'].apply(null, [atom])).toBeTruthy()
+      atom.value = null
+      expect(model['validateAtom'].apply(null, [atom])).toBeFalsy()
+    })
+
+    it('should check if model is empty', () => {
+      expect(model.isEmpty()).toBeTruthy()
+      model.addExpression()
+      expect(model.isEmpty()).toBeTruthy()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      expect(model.isEmpty()).toBeFalsy()
+    })
+
+    it('should add an atom to the model', () => {
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      expect(model.queries.length).toBe(1)
+      expect(
+        (model.queries[0] as CustomFieldQueryExpression).value.length
+      ).toBe(1)
+    })
+
+    it('should add an expression to the model, propagate changes', () => {
+      const expression = new CustomFieldQueryExpression()
+      model.addExpression(expression)
+      expect(model.queries.length).toBe(1)
+      const expression2 = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [1, 'icontains', 'test'],
+          [2, 'icontains', 'test'],
+        ],
+      ])
+      model.addExpression(expression2)
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      expression2.changed.next(expression2)
+      expect(nextSpy).toHaveBeenCalled()
+    })
+
+    it('should remove an element from the model', () => {
+      const expression = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [1, 'icontains', 'test'],
+          [2, 'icontains', 'test'],
+        ],
+      ])
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      const expression2 = new CustomFieldQueryExpression([
+        CustomFieldQueryLogicalOperator.And,
+        [
+          [3, 'icontains', 'test'],
+          [4, 'icontains', 'test'],
+        ],
+      ])
+      expression.addAtom(atom)
+      expression2.addExpression(expression)
+      model.addExpression(expression2)
+      model.removeElement(atom)
+      expect(model.queries.length).toBe(1)
+      model.removeElement(expression2)
+    })
+
+    it('should fire changed event when an atom changes', () => {
+      const nextSpy = jest.spyOn(model.changed, 'next')
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      model.addAtom(atom)
+      atom.changed.next(atom)
+      expect(nextSpy).toHaveBeenCalledWith(model)
+    })
+
+    it('should complete changed subject when element is removed', () => {
+      const expression = new CustomFieldQueryExpression()
+      const atom = new CustomFieldQueryAtom([1, 'icontains', 'test'])
+      ;(expression.value as CustomFieldQueryElement[]).push(atom)
+      model.addExpression(expression)
+      const completeSpy = jest.spyOn(atom.changed, 'complete')
+      model.removeElement(atom)
+      expect(completeSpy).toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,295 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { Subject, first, takeUntil } from 'rxjs'
+import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
+import {
+  CustomFieldQueryElementType,
+  CustomFieldQueryOperator,
+  CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE,
+  CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP,
+  CustomFieldQueryOperatorGroups,
+  CUSTOM_FIELD_QUERY_OPERATOR_LABELS,
+  CUSTOM_FIELD_QUERY_MAX_DEPTH,
+  CUSTOM_FIELD_QUERY_MAX_ATOMS,
+} from 'src/app/data/custom-field-query'
+import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
+import {
+  CustomFieldQueryElement,
+  CustomFieldQueryExpression,
+  CustomFieldQueryAtom,
+} from 'src/app/utils/custom-field-query-element'
+import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
+
+export class CustomFieldQueriesModel {
+  public queries: CustomFieldQueryElement[] = []
+
+  public readonly changed = new Subject<CustomFieldQueriesModel>()
+
+  public clear(fireEvent = true) {
+    this.queries = []
+    if (fireEvent) {
+      this.changed.next(this)
+    }
+  }
+
+  public isValid(): boolean {
+    return (
+      this.queries.length > 0 &&
+      this.validateExpression(this.queries[0] as CustomFieldQueryExpression)
+    )
+  }
+
+  public isEmpty(): boolean {
+    return (
+      this.queries.length === 0 ||
+      (this.queries.length === 1 && this.queries[0].value.length === 0)
+    )
+  }
+
+  private validateAtom(atom: CustomFieldQueryAtom) {
+    let valid = !!(atom.field && atom.operator && atom.value !== null)
+    if (
+      [
+        CustomFieldQueryOperator.In.valueOf(),
+        CustomFieldQueryOperator.Contains.valueOf(),
+      ].includes(atom.operator) &&
+      atom.value
+    ) {
+      valid = valid && atom.value.length > 0
+    }
+    return valid
+  }
+
+  private validateExpression(expression: CustomFieldQueryExpression) {
+    return (
+      expression.operator &&
+      expression.value.length > 0 &&
+      (expression.value as CustomFieldQueryElement[]).every((e) =>
+        e.type === CustomFieldQueryElementType.Atom
+          ? this.validateAtom(e as CustomFieldQueryAtom)
+          : this.validateExpression(e as CustomFieldQueryExpression)
+      )
+    )
+  }
+
+  public addAtom(atom: CustomFieldQueryAtom) {
+    if (this.queries.length === 0) {
+      this.addExpression()
+    }
+    ;(this.queries[0].value as CustomFieldQueryElement[]).push(atom)
+    atom.changed.subscribe(() => {
+      if (atom.field && atom.operator && atom.value) {
+        this.changed.next(this)
+      }
+    })
+  }
+
+  public addExpression(
+    expression: CustomFieldQueryExpression = new CustomFieldQueryExpression()
+  ) {
+    if (this.queries.length > 0) {
+      ;(
+        (this.queries[0] as CustomFieldQueryExpression)
+          .value as CustomFieldQueryElement[]
+      ).push(expression)
+    } else {
+      this.queries.push(expression)
+    }
+    expression.changed.subscribe(() => {
+      this.changed.next(this)
+    })
+  }
+
+  private findElement(
+    queryElement: CustomFieldQueryElement,
+    elements: any[]
+  ): CustomFieldQueryElement {
+    for (let i = 0; i < elements.length; i++) {
+      if (elements[i] === queryElement) {
+        return elements.splice(i, 1)[0]
+      } else if (elements[i].type === CustomFieldQueryElementType.Expression) {
+        return this.findElement(
+          queryElement,
+          elements[i].value as CustomFieldQueryElement[]
+        )
+      }
+    }
+  }
+
+  public removeElement(queryElement: CustomFieldQueryElement) {
+    let foundComponent
+    for (let i = 0; i < this.queries.length; i++) {
+      let query = this.queries[i]
+      if (query === queryElement) {
+        foundComponent = this.queries.splice(i, 1)[0]
+        break
+      } else if (query.type === CustomFieldQueryElementType.Expression) {
+        foundComponent = this.findElement(queryElement, query.value as any[])
+      }
+    }
+    if (foundComponent) {
+      foundComponent.changed.complete()
+      if (this.isEmpty()) {
+        this.clear()
+      }
+      this.changed.next(this)
+    }
+  }
+}
+
+@Component({
+  selector: 'pngx-custom-fields-query-dropdown',
+  templateUrl: './custom-fields-query-dropdown.component.html',
+  styleUrls: ['./custom-fields-query-dropdown.component.scss'],
+})
+export class CustomFieldsQueryDropdownComponent implements OnDestroy {
+  public CustomFieldQueryComponentType = CustomFieldQueryElementType
+  public CustomFieldQueryOperator = CustomFieldQueryOperator
+  public CustomFieldDataType = CustomFieldDataType
+  public CUSTOM_FIELD_QUERY_MAX_DEPTH = CUSTOM_FIELD_QUERY_MAX_DEPTH
+  public CUSTOM_FIELD_QUERY_MAX_ATOMS = CUSTOM_FIELD_QUERY_MAX_ATOMS
+  public popperOptions = popperOptionsReenablePreventOverflow
+
+  @Input()
+  title: string
+
+  @Input()
+  filterPlaceholder: string = ''
+
+  @Input()
+  icon: string
+
+  @Input()
+  allowSelectNone: boolean = false
+
+  @Input()
+  editing = false
+
+  @Input()
+  applyOnClose = false
+
+  get name(): string {
+    return this.title ? this.title.replace(/\s/g, '_').toLowerCase() : null
+  }
+
+  @Input()
+  disabled: boolean = false
+
+  @ViewChild('dropdown') dropdown: NgbDropdown
+
+  private _selectionModel: CustomFieldQueriesModel
+
+  @Input()
+  set selectionModel(model: CustomFieldQueriesModel) {
+    if (this._selectionModel) {
+      this._selectionModel.changed.complete()
+    }
+    model.changed.subscribe(() => {
+      this.onModelChange()
+    })
+    this._selectionModel = model
+  }
+
+  get selectionModel(): CustomFieldQueriesModel {
+    return this._selectionModel
+  }
+
+  private onModelChange() {
+    if (this.selectionModel.isEmpty() || this.selectionModel.isValid()) {
+      this.selectionModelChange.next(this.selectionModel)
+      this.selectionModel.isEmpty() && this.dropdown?.close()
+    }
+  }
+
+  @Output()
+  selectionModelChange = new EventEmitter<CustomFieldQueriesModel>()
+
+  customFields: CustomField[] = []
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
+  constructor(protected customFieldsService: CustomFieldsService) {
+    this.selectionModel = new CustomFieldQueriesModel()
+    this.getFields()
+    this.reset()
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
+  }
+
+  public onOpenChange(open: boolean) {
+    if (open && this.selectionModel.queries.length === 0) {
+      this.selectionModel.addExpression()
+    }
+  }
+
+  public get isActive(): boolean {
+    return (
+      (this.selectionModel.queries[0] as CustomFieldQueryExpression)?.value
+        ?.length > 0
+    )
+  }
+
+  private getFields() {
+    this.customFieldsService
+      .listAll()
+      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .subscribe((result) => {
+        this.customFields = result.results
+      })
+  }
+
+  public getCustomFieldByID(id: number): CustomField {
+    return this.customFields.find((field) => field.id === id)
+  }
+
+  public addAtom(expression: CustomFieldQueryExpression) {
+    expression.addAtom()
+  }
+
+  public addExpression(expression: CustomFieldQueryExpression) {
+    expression.addExpression()
+  }
+
+  public removeElement(element: CustomFieldQueryElement) {
+    this.selectionModel.removeElement(element)
+  }
+
+  public reset() {
+    this.selectionModel.clear(false)
+    this.selectionModel.changed.next(this.selectionModel)
+  }
+
+  getOperatorsForField(
+    fieldID: number
+  ): Array<{ value: string; label: string }> {
+    const field = this.customFields.find((field) => field.id === fieldID)
+    const groups: CustomFieldQueryOperatorGroups[] = field
+      ? CUSTOM_FIELD_QUERY_OPERATOR_GROUPS_BY_TYPE[field.data_type]
+      : [CustomFieldQueryOperatorGroups.Basic]
+    const operators = groups.flatMap(
+      (group) => CUSTOM_FIELD_QUERY_OPERATORS_BY_GROUP[group]
+    )
+    return operators.map((operator) => ({
+      value: operator,
+      label: CUSTOM_FIELD_QUERY_OPERATOR_LABELS[operator],
+    }))
+  }
+
+  getSelectOptionsForField(fieldID: number): string[] {
+    const field = this.customFields.find((field) => field.id === fieldID)
+    if (field) {
+      return field.extra_data['select_options']
+    }
+    return []
+  }
+}

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

@@ -1,4 +1,4 @@
-<div class="btn-group w-100" ngbDropdown role="group">
+<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions">
   <button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateBefore || createdDateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     <i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
@@ -17,7 +17,7 @@
                 }
               </div>
               <div class="d-flex justify-content-between w-100 align-items-center ps-2">
-                <div class="pe-2 pe-lg-4">
+                <div class="pe-4">
                   {{rd.name}}
                 </div>
                 <div class="text-muted small pe-2">
@@ -28,20 +28,19 @@
               </div>
             </button>
           }
-          <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div class="list-group-item d-flex p-2" role="menuitem">
 
-            <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-              <div i18n>After</div>
+            <div class="selected-icon">
               @if (createdDateAfter) {
-                <a class="btn btn-link p-0 m-0" (click)="clearCreatedAfter()">
-                  <i-bs width="1em" height="1em" name="x"></i-bs>
-                  <small i18n>Clear</small>
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedAfter()">
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
                 </a>
               }
             </div>
-
-            <div class="input-group input-group-sm">
-              <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            <div class="input-group input-group-sm small ps-1 pe-2">
+              <span class="input-group-text w-25 small text-muted" i18n>After</span>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                 maxlength="10" [(ngModel)]="createdDateAfter" ngbDatepicker #createdDateAfterPicker="ngbDatepicker">
               <button class="btn btn-outline-secondary" (click)="createdDateAfterPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
@@ -49,20 +48,19 @@
             </div>
 
           </div>
-          <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div class="list-group-item d-flex p-2" role="menuitem">
 
-            <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-              <div i18n>Before</div>
+            <div class="selected-icon">
               @if (createdDateBefore) {
-                <a class="btn btn-link p-0 m-0" (click)="clearCreatedBefore()">
-                  <i-bs width="1em" height="1em" name="x"></i-bs>
-                  <small i18n>Clear</small>
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedBefore()">
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
                 </a>
               }
             </div>
-
-            <div class="input-group input-group-sm">
-              <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            <div class="input-group input-group-sm small ps-1 pe-2">
+              <span class="input-group-text w-25 small text-muted" i18n>Before</span>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                 maxlength="10" [(ngModel)]="createdDateBefore" ngbDatepicker #createdDateBeforePicker="ngbDatepicker">
               <button class="btn btn-outline-secondary" (click)="createdDateBeforePicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
@@ -83,7 +81,7 @@
                 }
               </div>
               <div class="d-flex justify-content-between w-100 align-items-center ps-2">
-                <div class="pe-2 pe-lg-4">
+                <div class="pe-4">
                   {{rd.name}}
                 </div>
                 <div class="text-muted small pe-2">
@@ -94,20 +92,19 @@
               </div>
             </button>
           }
-          <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div class="list-group-item d-flex p-2" role="menuitem">
 
-            <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-              <div i18n>After</div>
+            <div class="selected-icon">
               @if (addedDateAfter) {
-                <a class="btn btn-link p-0 m-0" (click)="clearAddedAfter()">
-                  <i-bs width="1em" height="1em" name="x"></i-bs>
-                  <small i18n>Clear</small>
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedAfter()">
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
                 </a>
               }
             </div>
-
-            <div class="input-group input-group-sm">
-              <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            <div class="input-group input-group-sm small ps-1 pe-2">
+              <span class="input-group-text w-25 small text-muted" i18n>After</span>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                 maxlength="10" [(ngModel)]="addedDateAfter" ngbDatepicker #addedDateAfterPicker="ngbDatepicker">
               <button class="btn btn-outline-secondary" (click)="addedDateAfterPicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>
@@ -115,20 +112,19 @@
             </div>
 
           </div>
-          <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
+          <div class="list-group-item d-flex p-2" role="menuitem">
 
-            <div class="mb-2 d-flex flex-row w-100 justify-content-between small">
-              <div i18n>Before</div>
+            <div class="selected-icon">
               @if (addedDateBefore) {
-                <a class="btn btn-link p-0 m-0" (click)="clearAddedBefore()">
-                  <i-bs width="1em" height="1em" name="x"></i-bs>
-                  <small i18n>Clear</small>
+                <a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedBefore()">
+                  <i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
+                  <i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
                 </a>
               }
             </div>
-
-            <div class="input-group input-group-sm">
-              <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
+            <div class="input-group input-group-sm small ps-1 pe-2">
+              <span class="input-group-text w-25 small text-muted" i18n>Before</span>
+              <input class="form-control small" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                 maxlength="10" [(ngModel)]="addedDateBefore" ngbDatepicker #addedDateBeforePicker="ngbDatepicker">
               <button class="btn btn-outline-secondary" (click)="addedDateBeforePicker.toggle()" type="button">
                 <i-bs width="1em" height="1em" name="calendar"></i-bs>

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

@@ -5,6 +5,12 @@
     --bs-dropdown-min-width: 40rem;
   }
 
+  @media screen and (max-width: 767px) {
+    .border-end {
+      border: none !important;
+    }
+  }
+
   .btn-link {
     line-height: 1;
   }
@@ -14,3 +20,24 @@
   min-width: 1em;
   min-height: 1em;
 }
+
+.input-group-sm {
+  .form-control {
+    font-size: 0.875rem;
+  }
+}
+
+.focus-variants {
+  .variant-focused {
+    display: none;
+  }
+
+  &:hover, &:focus {
+    .variant-unfocused {
+      display: none;
+    }
+    .variant-focused {
+      display: block;
+    }
+  }
+}

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

@@ -11,6 +11,7 @@ import { Subject, Subscription } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 import { SettingsService } from 'src/app/services/settings.service'
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
+import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
 
 export interface DateSelection {
   createdBefore?: string
@@ -35,6 +36,8 @@ export enum RelativeDate {
   providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],
 })
 export class DatesDropdownComponent implements OnInit, OnDestroy {
+  public popperOptions = popperOptionsReenablePreventOverflow
+
   constructor(settings: SettingsService) {
     this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }

src-ui/src/app/components/common/edit-dialog/custom-field-edit-dialog/custom-field-edit-dialog.component.html

@@ -28,6 +28,11 @@
             }
           </div>
         }
+        @case (CustomFieldDataType.Monetary) {
+          <div class="my-3">
+            <pngx-input-text i18n-title title="Default Currency" hint="3-character currency code" i18n-hint formControlName="default_currency" placeholder="Use locale" i18n-placeholder autocomplete="off"></pngx-input-text>
+          </div>
+        }
       }
     </div>
   </div>

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

@@ -90,6 +90,7 @@ export class CustomFieldEditDialogComponent
       data_type: new FormControl(null),
       extra_data: new FormGroup({
         select_options: new FormArray([new FormControl(null)]),
+        default_currency: new FormControl(null),
       }),
     })
   }

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

@@ -13,6 +13,7 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
 import { EditDialogMode } from '../edit-dialog.component'
 import { GroupEditDialogComponent } from './group-edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('GroupEditDialogComponent', () => {
   let component: GroupEditDialogComponent
@@ -30,7 +31,13 @@ describe('GroupEditDialogComponent', () => {
         PermissionsFormComponent,
         PermissionsSelectComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),

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

@@ -11,7 +11,7 @@ import {
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { IMAPSecurity } from 'src/app/data/mail-account'
+import { IMAPSecurity, MailAccountType } from 'src/app/data/mail-account'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -82,6 +82,7 @@ describe('MailAccountEditDialogComponent', () => {
       imap_port: 443,
       imap_security: IMAPSecurity.SSL,
       is_token: false,
+      account_type: MailAccountType.IMAP,
     }
 
     // success

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

@@ -10,36 +10,60 @@
   <div class="modal-body">
     <div class="row">
       <div class="col-md-4">
-        <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
-        <pngx-input-select i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
-        <pngx-input-text i18n-title title="Folder" formControlName="folder" i18n-hint hint="Subfolders must be separated by a delimiter, often a dot ('.') or slash ('/'), but it varies by mail server." [error]="error?.folder"></pngx-input-text>
-        <pngx-input-number i18n-title title="Maximum age (days)" formControlName="maximum_age" [showAdd]="false" [error]="error?.maximum_age"></pngx-input-number>
-        <pngx-input-select i18n-title title="Attachment type" [items]="attachmentTypeOptions" formControlName="attachment_type"></pngx-input-select>
-        <pngx-input-select i18n-title title="Consumption scope" [items]="consumptionScopeOptions" formControlName="consumption_scope" i18n-hint hint="See docs for .eml processing requirements"></pngx-input-select>
-        <pngx-input-number i18n-title title="Rule order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+        <pngx-input-text [horizontal]="true" i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
       </div>
-      <div class="col-md-4">
-        <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the filters specified below.</p>
-        <pngx-input-text i18n-title title="Filter from" formControlName="filter_from" [error]="error?.filter_from"></pngx-input-text>
-        <pngx-input-text i18n-title title="Filter to" formControlName="filter_to" [error]="error?.filter_to"></pngx-input-text>
-        <pngx-input-text i18n-title title="Filter subject" formControlName="filter_subject" [error]="error?.filter_subject"></pngx-input-text>
-        <pngx-input-text i18n-title title="Filter body" formControlName="filter_body" [error]="error?.filter_body"></pngx-input-text>
-        <pngx-input-text i18n-title title="Filter attachment filename includes" formControlName="filter_attachment_filename_include" i18n-hint hint="Only consume documents which entirely match this filename if specified. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_attachment_filename_include"></pngx-input-text>
-        <pngx-input-text i18n-title title="Filter attachment filename excluding" formControlName="filter_attachment_filename_exclude" i18n-hint hint="Do not consume documents which entirely match this filename if specified. Wildcards such as *.pdf or *invoice* are allowed. Case insensitive." [error]="error?.filter_attachment_filename_exclude"></pngx-input-text>
+      <div class="col-md-3">
+        <pngx-input-select [horizontal]="true" i18n-title title="Account" [items]="accounts" formControlName="account"></pngx-input-select>
       </div>
-      <div class="col-md-4">
-        <pngx-input-select i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Action is only performed when documents are consumed from the mail. Mails without attachments remain entirely untouched."></pngx-input-select>
+      <div class="col-md-3">
+        <pngx-input-number [horizontal]="true" i18n-title title="Order" formControlName="order" [showAdd]="false" [error]="error?.order"></pngx-input-number>
+      </div>
+      <div class="col-md-2 pt-2">
+        <pngx-input-switch [horizontal]="true" i18n-title title="Enabled" formControlName="enabled"></pngx-input-switch>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <p class="small" i18n>Paperless will only process mails that match <em>all</em> of the criteria specified below.</p>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Folder" formControlName="folder" i18n-hint hint="Subfolders must be separated by a delimiter, often a dot ('.') or slash ('/'), but it varies by mail server." [error]="error?.folder"></pngx-input-text>
+        <pngx-input-number [horizontal]="true" i18n-title title="Maximum age (days)" formControlName="maximum_age" [showAdd]="false" [error]="error?.maximum_age"></pngx-input-number>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter from" formControlName="filter_from" [error]="error?.filter_from"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter to" formControlName="filter_to" [error]="error?.filter_to"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter subject" formControlName="filter_subject" [error]="error?.filter_subject"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Filter body" formControlName="filter_body" [error]="error?.filter_body"></pngx-input-text>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-select [horizontal]="true" i18n-title title="Consumption scope" [items]="consumptionScopeOptions" formControlName="consumption_scope" i18n-hint hint="See docs for .eml processing requirements"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Attachment type" [items]="attachmentTypeOptions" formControlName="attachment_type"></pngx-input-select>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-text [horizontal]="true" i18n-title title="Include only files matching" formControlName="filter_attachment_filename_include" i18n-hint hint="Optional. Wildcards e.g. *.pdf or *invoice* allowed. Can be comma-separated list. Case insensitive." [error]="error?.filter_attachment_filename_include"></pngx-input-text>
+        <pngx-input-text [horizontal]="true" i18n-title title="Exclude files matching" formControlName="filter_attachment_filename_exclude" i18n-hint hint="Optional. Wildcards e.g. *.pdf or *invoice* allowed. Can be comma-separated list. Case insensitive." [error]="error?.filter_attachment_filename_exclude"></pngx-input-text>
+      </div>
+    </div>
+    <hr class="mt-0"/>
+    <div class="row">
+      <div class="col-md-6">
+        <pngx-input-select [horizontal]="true" i18n-title title="Action" [items]="actionOptions" formControlName="action" i18n-hint hint="Only performed if the mail is processed."></pngx-input-select>
         @if (showActionParamField) {
-          <pngx-input-text i18n-title title="Action parameter" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
+          <pngx-input-text [horizontal]="true" i18n-title title="Action parameter" formControlName="action_parameter" [error]="error?.action_parameter"></pngx-input-text>
         }
-        <pngx-input-select i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
-        <pngx-input-tags [allowCreate]="false" formControlName="assign_tags"></pngx-input-tags>
-        <pngx-input-select i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
-        <pngx-input-select i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign title from" [items]="metadataTitleOptions" formControlName="assign_title_from"></pngx-input-select>
+        <pngx-input-check [horizontal]="true" i18n-title title="Assign owner from rule" formControlName="assign_owner_from_rule"></pngx-input-check>
+      </div>
+      <div class="col-md-6">
+        <pngx-input-tags [horizontal]="true" [allowCreate]="false" formControlName="assign_tags"></pngx-input-tags>
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign document type" [items]="documentTypes" [allowNull]="true" formControlName="assign_document_type"></pngx-input-select>
+        <pngx-input-select [horizontal]="true" i18n-title title="Assign correspondent from" [items]="metadataCorrespondentOptions" formControlName="assign_correspondent_from"></pngx-input-select>
         @if (showCorrespondentField) {
-          <pngx-input-select i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
+          <pngx-input-select [horizontal]="true" i18n-title title="Assign correspondent" [items]="correspondents" [allowNull]="true" formControlName="assign_correspondent"></pngx-input-select>
         }
-        <pngx-input-check i18n-title title="Assign owner from rule" formControlName="assign_owner_from_rule"></pngx-input-check>
       </div>
     </div>
   </div>

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

@@ -24,6 +24,7 @@ import { TextComponent } from '../../input/text/text.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { MailRuleEditDialogComponent } from './mail-rule-edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { SwitchComponent } from '../../input/switch/switch.component'
 
 describe('MailRuleEditDialogComponent', () => {
   let component: MailRuleEditDialogComponent
@@ -43,6 +44,7 @@ describe('MailRuleEditDialogComponent', () => {
         TagsComponent,
         SafeHtmlPipe,
         CheckComponent,
+        SwitchComponent,
       ],
       imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
       providers: [

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

@@ -153,6 +153,7 @@ export class MailRuleEditDialogComponent extends EditDialogComponent<MailRule> {
     return new FormGroup({
       name: new FormControl(null),
       account: new FormControl(null),
+      enabled: new FormControl(true),
       folder: new FormControl('INBOX'),
       filter_from: new FormControl(null),
       filter_to: new FormControl(null),

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

@@ -10,7 +10,57 @@
   <div class="modal-body">
 
     <pngx-input-text i18n-title title="Name" formControlName="name" [error]="error?.name" autocomplete="off"></pngx-input-text>
-    <pngx-input-text i18n-title title="Path" formControlName="path" [error]="error?.path" [hint]="pathHint"></pngx-input-text>
+    <pngx-input-textarea i18n-title title="Path" formControlName="path" [error]="error?.path" hint="See <a target='_blank' href='https://docs.paperless-ngx.com/advanced_usage/#file-name-handling'>the documentation</a>." i18n-hint [monospace]="true"></pngx-input-textarea>
+
+    <div ngbAccordion>
+      <div ngbAccordionItem>
+        <h2 ngbAccordionHeader>
+          <button ngbAccordionButton i18n>Preview</button>
+        </h2>
+        <div ngbAccordionCollapse>
+          <div ngbAccordionBody>
+            <ng-template>
+              <div class="card mb-2">
+                <div class="card-body p-2">
+                  @if (testLoading) {
+                    <ng-container [ngTemplateOutlet]="loadingTemplate"></ng-container>
+                  } @else if (testResult) {
+                    <code>{{testResult}}</code>
+                  } @else if (testFailed) {
+                    <div class="text-danger" i18n>Path test failed</div>
+                  } @else {
+                    <div class="text-muted small" i18n>No document selected</div>
+                  }
+                </div>
+              </div>
+              <ng-select name="testDocument"
+                [items]="foundDocuments$ | async"
+                placeholder="Search for a document" i18n-placeholder
+                notFoundText="No documents found" i18n-notFoundText
+                bindValue="id"
+                bindLabel="title"
+                [compareWith]="compareDocuments"
+                [trackByFn]="trackByFn"
+                [minTermLength]="2"
+                [loading]="loading"
+                [typeahead]="documentsInput$"
+                (change)="testPath($event)">
+                <ng-template #loadingTemplate ng-loadingspinner-tmp>
+                  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                  <div class="visually-hidden" i18n>Loading...</div>
+                </ng-template>
+                <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+                  <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+                </ng-template>
+              </ng-select>
+            </ng-template>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr/>
+
     <pngx-input-select i18n-title title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></pngx-input-select>
     @if (patternRequired) {
       <pngx-input-text i18n-title title="Matching pattern" formControlName="match" [error]="error?.match"></pngx-input-text>

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

@@ -0,0 +1,4 @@
+.accordion {
+    --bs-accordion-btn-padding-x: 0.75rem;
+    --bs-accordion-btn-padding-y: 0.375rem;
+  }

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

@@ -1,7 +1,11 @@
 import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbActiveModal, NgbModule } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbAccordionButton,
+  NgbActiveModal,
+  NgbModule,
+} from '@ng-bootstrap/ng-bootstrap'
 import { NgSelectModule } from '@ng-select/ng-select'
 import { IfOwnerDirective } from 'src/app/directives/if-owner.directive'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
@@ -10,13 +14,20 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { PermissionsFormComponent } from '../../input/permissions/permissions-form/permissions-form.component'
 import { SelectComponent } from '../../input/select/select.component'
 import { TextComponent } from '../../input/text/text.component'
+import { TextAreaComponent } from '../../input/textarea/textarea.component'
 import { EditDialogMode } from '../edit-dialog.component'
 import { StoragePathEditDialogComponent } from './storage-path-edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { StoragePathService } from 'src/app/services/rest/storage-path.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { of, throwError } from 'rxjs'
+import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
+import { By } from '@angular/platform-browser'
 
 describe('StoragePathEditDialogComponent', () => {
   let component: StoragePathEditDialogComponent
   let settingsService: SettingsService
+  let documentService: DocumentService
   let fixture: ComponentFixture<StoragePathEditDialogComponent>
 
   beforeEach(async () => {
@@ -27,6 +38,7 @@ describe('StoragePathEditDialogComponent', () => {
         IfOwnerDirective,
         SelectComponent,
         TextComponent,
+        TextAreaComponent,
         PermissionsFormComponent,
         SafeHtmlPipe,
       ],
@@ -38,6 +50,7 @@ describe('StoragePathEditDialogComponent', () => {
       ],
     }).compileComponents()
 
+    documentService = TestBed.inject(DocumentService)
     fixture = TestBed.createComponent(StoragePathEditDialogComponent)
     settingsService = TestBed.inject(SettingsService)
     settingsService.currentUser = { id: 99, username: 'user99' }
@@ -57,4 +70,87 @@ describe('StoragePathEditDialogComponent', () => {
     fixture.detectChanges()
     expect(editTitleSpy).toHaveBeenCalled()
   })
+
+  it('should support test path', () => {
+    const testSpy = jest.spyOn(
+      component['service'] as StoragePathService,
+      'testPath'
+    )
+    testSpy.mockReturnValueOnce(of('test/abc123'))
+    component.objectForm.patchValue({ path: 'test/{{title}}' })
+    fixture.detectChanges()
+    component.testPath({ id: 1 })
+    expect(testSpy).toHaveBeenCalledWith('test/{{title}}', 1)
+    expect(component.testResult).toBe('test/abc123')
+    expect(component.testFailed).toBeFalsy()
+
+    // test failed
+    testSpy.mockReturnValueOnce(of(''))
+    component.testPath({ id: 1 })
+    expect(component.testResult).toBeNull()
+    expect(component.testFailed).toBeTruthy()
+
+    component.testPath(null)
+    expect(component.testResult).toBeNull()
+  })
+
+  it('should compare two documents by id', () => {
+    const doc1 = { id: 1 }
+    const doc2 = { id: 2 }
+    expect(component.compareDocuments(doc1, doc1)).toBeTruthy()
+    expect(component.compareDocuments(doc1, doc2)).toBeFalsy()
+  })
+
+  it('should use id as trackBy', () => {
+    expect(component.trackByFn({ id: 1 })).toBe(1)
+  })
+
+  it('should search on select text input', () => {
+    fixture.debugElement
+      .query(By.directive(NgbAccordionButton))
+      .triggerEventHandler('click', null)
+    fixture.detectChanges()
+    const documents = [
+      { id: 1, title: 'foo' },
+      { id: 2, title: 'bar' },
+    ]
+    const listSpy = jest.spyOn(documentService, 'listFiltered')
+    listSpy.mockReturnValueOnce(
+      of({
+        count: 1,
+        results: documents[0],
+        all: [1],
+      } as any)
+    )
+    component.documentsInput$.next('bar')
+    expect(listSpy).toHaveBeenCalledWith(
+      1,
+      null,
+      'created',
+      true,
+      [{ rule_type: FILTER_TITLE, value: 'bar' }],
+      { truncate_content: true }
+    )
+    listSpy.mockReturnValueOnce(
+      of({
+        count: 2,
+        results: [...documents],
+        all: [1, 2],
+      } as any)
+    )
+    component.documentsInput$.next('ba')
+    listSpy.mockReturnValueOnce(throwError(() => new Error()))
+    component.documentsInput$.next('foo')
+  })
+
+  it('should run path test on path change', () => {
+    const testSpy = jest.spyOn(component, 'testPath')
+    component['testDocument'] = { id: 1 } as any
+    component.objectForm.patchValue(
+      { path: 'test/{{title}}' },
+      { emitEvent: true }
+    )
+    fixture.detectChanges()
+    expect(testSpy).toHaveBeenCalled()
+  })
 })

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

@@ -1,9 +1,25 @@
-import { Component } from '@angular/core'
+import { Component, OnDestroy } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  Subject,
+  Observable,
+  concat,
+  of,
+  distinctUntilChanged,
+  takeUntil,
+  tap,
+  switchMap,
+  map,
+  catchError,
+  filter,
+} from 'rxjs'
 import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'
+import { Document } from 'src/app/data/document'
+import { FILTER_TITLE } from 'src/app/data/filter-rule-type'
 import { DEFAULT_MATCHING_ALGORITHM } from 'src/app/data/matching-model'
 import { StoragePath } from 'src/app/data/storage-path'
+import { DocumentService } from 'src/app/services/rest/document.service'
 import { StoragePathService } from 'src/app/services/rest/storage-path.service'
 import { UserService } from 'src/app/services/rest/user.service'
 import { SettingsService } from 'src/app/services/settings.service'
@@ -13,24 +29,34 @@ import { SettingsService } from 'src/app/services/settings.service'
   templateUrl: './storage-path-edit-dialog.component.html',
   styleUrls: ['./storage-path-edit-dialog.component.scss'],
 })
-export class StoragePathEditDialogComponent extends EditDialogComponent<StoragePath> {
+export class StoragePathEditDialogComponent
+  extends EditDialogComponent<StoragePath>
+  implements OnDestroy
+{
+  public documentsInput$ = new Subject<string>()
+  public foundDocuments$: Observable<Document[]>
+  private testDocument: Document
+  public testResult: string
+  public testFailed: boolean = false
+  public loading = false
+  public testLoading = false
+
+  private unsubscribeNotifier: Subject<any> = new Subject()
+
   constructor(
     service: StoragePathService,
     activeModal: NgbActiveModal,
     userService: UserService,
-    settingsService: SettingsService
+    settingsService: SettingsService,
+    private documentsService: DocumentService
   ) {
     super(service, activeModal, userService, settingsService)
+    this.initPathObservables()
   }
 
-  get pathHint() {
-    return (
-      $localize`e.g.` +
-      ' <code>{created_year}-{title}</code> ' +
-      $localize`or use slashes to add directories e.g.` +
-      ' <code>{created_year}/{correspondent}/{title}</code>. ' +
-      $localize`See <a target="_blank" href="https://docs.paperless-ngx.com/advanced_usage/#file-name-handling">documentation</a> for full list.`
-    )
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(this)
+    this.unsubscribeNotifier.complete()
   }
 
   getCreateTitle() {
@@ -51,4 +77,70 @@ export class StoragePathEditDialogComponent extends EditDialogComponent<StorageP
       permissions_form: new FormControl(null),
     })
   }
+
+  public testPath(document: Document) {
+    if (!document) {
+      this.testResult = null
+      return
+    }
+    this.testDocument = document
+    this.testLoading = true
+    ;(this.service as StoragePathService)
+      .testPath(this.objectForm.get('path').value, document.id)
+      .subscribe((result) => {
+        if (result?.length) {
+          this.testResult = result
+          this.testFailed = false
+        } else {
+          this.testResult = null
+          this.testFailed = true
+        }
+        this.testLoading = false
+      })
+  }
+
+  compareDocuments(document: Document, selectedDocument: Document) {
+    return document.id === selectedDocument.id
+  }
+
+  private initPathObservables() {
+    this.objectForm
+      .get('path')
+      .valueChanges.pipe(
+        takeUntil(this.unsubscribeNotifier),
+        filter((path) => path && !!this.testDocument)
+      )
+      .subscribe(() => {
+        this.testPath(this.testDocument)
+      })
+
+    this.foundDocuments$ = concat(
+      of([]), // default items
+      this.documentsInput$.pipe(
+        distinctUntilChanged(),
+        takeUntil(this.unsubscribeNotifier),
+        tap(() => (this.loading = true)),
+        switchMap((title) =>
+          this.documentsService
+            .listFiltered(
+              1,
+              null,
+              'created',
+              true,
+              [{ rule_type: FILTER_TITLE, value: title }],
+              { truncate_content: true }
+            )
+            .pipe(
+              map((result) => result.results),
+              catchError(() => of([])), // empty on error
+              tap(() => (this.loading = false))
+            )
+        )
+      )
+    )
+  }
+
+  trackByFn(item: Document) {
+    return item.id
+  }
 }

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

@@ -20,6 +20,7 @@ import { PermissionsSelectComponent } from '../../permissions-select/permissions
 import { EditDialogMode } from '../edit-dialog.component'
 import { UserEditDialogComponent } from './user-edit-dialog.component'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 
 describe('UserEditDialogComponent', () => {
   let component: UserEditDialogComponent
@@ -38,7 +39,13 @@ describe('UserEditDialogComponent', () => {
         PermissionsFormComponent,
         PermissionsSelectComponent,
       ],
-      imports: [FormsModule, ReactiveFormsModule, NgSelectModule, NgbModule],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule,
+        NgSelectModule,
+        NgbModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
       providers: [
         NgbActiveModal,
         {

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

@@ -3,3 +3,7 @@
         color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
     }
 }
+
+.accordion-button {
+    font-size: 1rem;
+}

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

@@ -1,4 +1,4 @@
-<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
+<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
   <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
     <i-bs name="{{icon}}"></i-bs>
     <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
@@ -35,7 +35,7 @@
       </div>
       @if (selectionModel.items) {
         <div class="items" #buttonItems>
-          @for (item of selectionModel.itemsSorted | filter: filterText; track item; let i = $index) {
+          @for (item of selectionModel.itemsSorted | filter: filterText:'name'; track item; let i = $index) {
             @if (allowSelectNone || item.id) {
               <pngx-toggleable-dropdown-button
                 [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
@@ -45,13 +45,13 @@
         </div>
       }
       @if (editing) {
-        @if ((selectionModel.itemsSorted | filter: filterText).length === 0 && createRef !== undefined) {
+        @if ((selectionModel.itemsSorted | filter: filterText:'name').length === 0 && createRef !== undefined) {
           <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
             <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
             <i-bs width="1.5em" height="1em" name="plus"></i-bs>
           </button>
         }
-        @if ((selectionModel.itemsSorted | filter: filterText).length > 0) {
+        @if ((selectionModel.itemsSorted | filter: filterText:'name').length > 0) {
           <button class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
             <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
             <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>

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

@@ -539,15 +539,10 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     fixture.nativeElement
       .querySelector('button')
       .dispatchEvent(new MouseEvent('click')) // open
-    fixture.detectChanges()
     tick(100)
     component.filterText = 'FooBar'
-    fixture.detectChanges()
-    component.listFilterTextInput.nativeElement.dispatchEvent(
-      new KeyboardEvent('keyup', { key: 'Enter' })
-    )
+    component.listFilterEnter()
     expect(component.selectionModel.getSelectedItems()).toEqual([])
-    tick(300)
     expect(createSpy).toHaveBeenCalled()
   }))
 

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

@@ -16,6 +16,7 @@ import { Subject, filter, take, takeUntil } from 'rxjs'
 import { SelectionDataItem } from 'src/app/services/rest/document.service'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
 import { HotKeyService } from 'src/app/services/hot-key.service'
+import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
 
 export interface ChangedItems {
   itemsToAdd: MatchingModel[]
@@ -330,6 +331,8 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
   @ViewChild('dropdown') dropdown: NgbDropdown
   @ViewChild('buttonItems') buttonItems: ElementRef
 
+  public popperOptions = popperOptionsReenablePreventOverflow
+
   filterText: string
 
   @Input()
@@ -483,7 +486,7 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
   dropdownOpenChange(open: boolean): void {
     if (open) {
       setTimeout(() => {
-        this.listFilterTextInput.nativeElement.focus()
+        this.listFilterTextInput?.nativeElement.focus()
       }, 0)
       if (this.editing) {
         this.selectionModel.reset()
@@ -492,7 +495,7 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
       this.opened.next(this)
     } else {
       if (this.creating) {
-        this.dropdown.open()
+        this.dropdown?.open()
         this.creating = false
       } else {
         this.filterText = ''

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

@@ -1,50 +1,57 @@
-<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
-  <div class="row">
-    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
-      @if (title) {
-        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
-      }
-      @if (removable) {
-        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
-          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
-        </button>
-      }
-    </div>
-    <div [class.col-md-9]="horizontal">
-      <div>
-        <ng-select name="inputId" [(ngModel)]="selectedDocuments"
-          [disabled]="disabled"
-          [items]="foundDocuments$ | async"
-          placeholder="Search for documents"
-          [notFoundText]="notFoundText"
-          [multiple]="true"
-          bindValue="id"
-          [compareWith]="compareDocuments"
-          [trackByFn]="trackByFn"
-          [minTermLength]="2"
-          [loading]="loading"
-          [typeahead]="documentsInput$"
-          (change)="onChange(selectedDocuments)">
-          <ng-template ng-label-tmp let-document="item">
-            <div class="d-flex align-items-center">
-              <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
-              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
-                <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
-              </a>
-            </div>
-          </ng-template>
-          <ng-template ng-loadingspinner-tmp>
-            <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
-            <div class="visually-hidden" i18n>Loading...</div>
-          </ng-template>
-          <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
-            <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
-          </ng-template>
-        </ng-select>
+@if (minimal) {
+  <ng-container *ngTemplateOutlet="select"></ng-container>
+} @else {
+  <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
+    <div class="row">
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        @if (title) {
+          <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+        }
+        @if (removable) {
+          <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+            <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
+      </div>
+      <div [class.col-md-9]="horizontal">
+        <ng-container *ngTemplateOutlet="select"></ng-container>
+        @if (hint) {
+          <small class="form-text text-muted">{{hint}}</small>
+        }
       </div>
-      @if (hint) {
-        <small class="form-text text-muted">{{hint}}</small>
-      }
     </div>
   </div>
-</div>
+}
+
+<ng-template #select>
+  <ng-select name="inputId" [(ngModel)]="selectedDocuments"
+    [disabled]="disabled"
+    [items]="foundDocuments$ | async"
+    [placeholder]="placeholder"
+    [notFoundText]="notFoundText"
+    [multiple]="true"
+    bindValue="id"
+    [compareWith]="compareDocuments"
+    [trackByFn]="trackByFn"
+    [minTermLength]="2"
+    [loading]="loading"
+    [typeahead]="documentsInput$"
+    (mousedown)="$event.stopImmediatePropagation()"
+    (change)="onChange(selectedDocuments)">
+    <ng-template ng-label-tmp let-document="item">
+      <div class="d-flex align-items-center">
+        <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+        <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
+          <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
+        </a>
+      </div>
+    </ng-template>
+    <ng-template ng-loadingspinner-tmp>
+      <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+      <div class="visually-hidden" i18n>Loading...</div>
+    </ng-template>
+    <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+      <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+    </ng-template>
+  </ng-select>
+</ng-template>

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

@@ -46,6 +46,12 @@ export class DocumentLinkComponent
   @Input()
   parentDocumentID: number
 
+  @Input()
+  minimal: boolean = false
+
+  @Input()
+  placeholder: string = $localize`Search for documents`
+
   constructor(private documentsService: DocumentService) {
     super()
   }

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

@@ -38,7 +38,9 @@ export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
   writeValue(newValue: string[]): void {
     super.writeValue(newValue)
     this.selectedItems =
-      newValue?.map((id) => this.items.find((i) => i.id === id)) ?? []
+      newValue
+        ?.map((id) => this.items.find((i) => i.id === id))
+        .filter((item) => item) ?? []
   }
 
   public drop(event: CdkDragDrop<string[]>) {

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

@@ -52,6 +52,11 @@ describe('MonetaryComponent', () => {
     expect(component.defaultCurrencyCode).toEqual('BRL')
   })
 
+  it('should support setting a default currency code', () => {
+    component.defaultCurrency = 'EUR'
+    expect(component.defaultCurrencyCode).toEqual('EUR')
+  })
+
   it('should parse monetary value correctly', () => {
     expect(component['parseMonetaryValue']('123.4')).toEqual('123.4')
     expect(component['parseMonetaryValue']('123.4', true)).toEqual('123.40')

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

@@ -1,4 +1,4 @@
-import { Component, forwardRef, Inject, LOCALE_ID } from '@angular/core'
+import { Component, forwardRef, Inject, Input, LOCALE_ID } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
 import { AbstractInputComponent } from '../abstract-input'
 import { getLocaleCurrencyCode } from '@angular/common'
@@ -29,11 +29,16 @@ export class MonetaryComponent extends AbstractInputComponent<string> {
 
   defaultCurrencyCode: string
 
+  @Input()
+  set defaultCurrency(currency: string) {
+    if (currency) this.defaultCurrencyCode = currency
+  }
+
   constructor(@Inject(LOCALE_ID) currentLocale: string) {
     super()
 
     this.currency = this.defaultCurrencyCode =
-      getLocaleCurrencyCode(currentLocale)
+      this.defaultCurrency ?? getLocaleCurrencyCode(currentLocale)
   }
 
   writeValue(newValue: any): void {

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

@@ -27,3 +27,11 @@
     background-position: right calc(0.375em + 0.1875rem) center !important;
     background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
 }
+
+.input-group .ng-select-taggable:first-child:nth-last-child(2) {
+    max-width: calc(100% - 45px); // fudge factor for (1x) ng-select button width
+}
+
+.input-group .ng-select-taggable:first-child:nth-last-child(3) {
+    max-width: calc(100% - 90px); // fudge factor for (2x) ng-select button width
+}

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

@@ -32,7 +32,7 @@
             </div>
           </ng-template>
         </ng-select>
-        @if (allowCreate) {
+        @if (allowCreate && !hideAddButton) {
           <button class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
             <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
           </button>

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

@@ -74,6 +74,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   @Input()
   allowCreate: boolean = true
 
+  @Input()
+  hideAddButton: boolean = false
+
   @Input()
   showFilter: boolean = false
 

src-ui/src/app/components/common/input/text/text.component.html

@@ -11,7 +11,7 @@
         }
       </div>
       <div class="position-relative" [class.col-md-9]="horizontal">
-        <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete">
+        <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled" [autocomplete]="autocomplete" [placeholder]="placeholder">
         @if (hint) {
           <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
         }

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

@@ -18,6 +18,9 @@ export class TextComponent extends AbstractInputComponent<string> {
   @Input()
   autocomplete: string
 
+  @Input()
+  placeholder: string = ''
+
   constructor() {
     super()
   }

src-ui/src/app/components/common/input/textarea/textarea.component.html

@@ -0,0 +1,33 @@
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      @if (title) {
+        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
+      }
+      @if (removable) {
+        <button type="button" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
+          <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Remove</ng-container>
+          </button>
+        }
+      </div>
+      <div class="position-relative" [class.col-md-9]="horizontal">
+        <textarea #inputField
+          [id]="inputId"
+          class="form-control"
+          [class.is-invalid]="error"
+          [class.font-monospace]="monospace"
+          [(ngModel)]="value"
+          (change)="onChange(value)"
+          [disabled]="disabled"
+          [placeholder]="placeholder"
+          rows="4">
+        </textarea>
+        @if (hint) {
+          <small class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+        }
+        <div class="invalid-feedback position-absolute top-100">
+          {{error}}
+        </div>
+      </div>
+    </div>
+  </div>

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

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms'
+import { TextAreaComponent } from './textarea.component'
+
+describe('TextComponent', () => {
+  let component: TextAreaComponent
+  let fixture: ComponentFixture<TextAreaComponent>
+  let input: HTMLTextAreaElement
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [TextAreaComponent],
+      providers: [],
+      imports: [FormsModule, ReactiveFormsModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(TextAreaComponent)
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    input = component.inputField.nativeElement
+  })
+
+  it('should support use of input field', () => {
+    expect(component.value).toBeUndefined()
+  })
+})

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

@@ -0,0 +1,27 @@
+import { Component, Input, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextAreaComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-textarea',
+  templateUrl: './textarea.component.html',
+  styleUrls: ['./textarea.component.scss'],
+})
+export class TextAreaComponent extends AbstractInputComponent<string> {
+  @Input()
+  placeholder: string = ''
+
+  @Input()
+  monospace: boolean = false
+
+  constructor() {
+    super()
+  }
+}

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

@@ -56,30 +56,28 @@
           <small i18n>Unowned</small>
         </div>
       </button>
-      <button *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
+      <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
         <div class="selected-icon me-1">
           @if (selectionModel.ownerFilter === OwnerFilterType.OTHERS) {
             <i-bs width="1em" height="1em" name="check"></i-bs>
           }
         </div>
-        @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.User)) {
-          <div class="me-1 w-100">
-            <ng-select
-              name="user"
-              class="user-select small"
-              [(ngModel)]="selectionModel.includeUsers"
-              [disabled]="disabled"
-              [clearable]="false"
-              [items]="users"
-              bindLabel="username"
-              multiple="true"
-              bindValue="id"
-              placeholder="Users"
-              i18n-placeholder
-              (change)="onUserSelect()">
-            </ng-select>
-          </div>
-        }
+        <div class="me-1 w-100">
+          <ng-select
+            name="user"
+            class="user-select small"
+            [(ngModel)]="selectionModel.includeUsers"
+            [disabled]="disabled"
+            [clearable]="false"
+            [items]="users"
+            bindLabel="username"
+            multiple="true"
+            bindValue="id"
+            placeholder="Users"
+            i18n-placeholder
+            (change)="onUserSelect()">
+          </ng-select>
+        </div>
       </button>
       @if (selectionModel.ownerFilter === OwnerFilterType.NONE || selectionModel.ownerFilter === OwnerFilterType.NOT_SELF) {
         <div class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">

src-ui/src/app/components/common/permissions-select/permissions-select.component.html

@@ -1,5 +1,15 @@
 <form [formGroup]="form" [class.opacity-50]="disabled">
-  <label class="form-label">{{title}}</label>
+  <label class="form-label">
+    {{title}}
+    <button class="btn btn-sm btn-link text-muted me-auto p-0 p-md-2" title="What's this?" i18n-title type="button" [ngbPopover]="infoPopover" [autoClose]="true" container="body">
+      <i-bs name="question-circle"></i-bs>
+    </button>
+    <ng-template #infoPopover>
+      <p i18n>Global permissions define what areas of the app and API endpoints users can access.</p>
+      <a href="https://docs.paperless-ngx.com/usage/#global-permissions" target="_blank" referrerpolicy="noopener noreferrer" i18n>Read more</a>
+      <i-bs class="ms-1" width=".8em" height=".8em" name="box-arrow-up-right"></i-bs>
+    </ng-template>
+  </label>
   <ul class="list-group">
     <li class="list-group-item d-flex">
       <div class="col-3" i18n>Type</div>

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

@@ -36,10 +36,10 @@
       </ng-container>
     </div>
   </div>
-  <div class="col-auto col-lg-4 col-xl-3 col-sidebar">
+  <div class="col-12 col-lg-4 col-xl-3 col-sidebar">
     <div class="row row-cols-1 g-4 mb-4 sticky-lg-top z-0">
       <div class="col">
-        <pngx-statistics-widget></pngx-statistics-widget>
+        <pngx-statistics-widget *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.UISettings }"></pngx-statistics-widget>
       </div>
       <div class="col">
         <pngx-upload-file-widget></pngx-upload-file-widget>

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

@@ -65,6 +65,7 @@ const savedView: SavedView = {
     DisplayField.CORRESPONDENT,
     DisplayField.DOCUMENT_TYPE,
     DisplayField.STORAGE_PATH,
+    DisplayField.PAGE_COUNT,
     `${DisplayField.CUSTOM_FIELD}11` as any,
     `${DisplayField.CUSTOM_FIELD}15` as any,
   ],
@@ -344,6 +345,7 @@ describe('SavedViewWidgetComponent', () => {
     expect(component.getColumnTitle(DisplayField.STORAGE_PATH)).toEqual(
       'Storage path'
     )
+    expect(component.getColumnTitle(DisplayField.PAGE_COUNT)).toEqual('Pages')
   })
 
   it('should get correct column title for custom field', () => {

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

@@ -71,6 +71,13 @@ describe('StatisticsWidgetComponent', () => {
     expect(reloadSpy).toHaveBeenCalled()
   })
 
+  it('should not call statistics endpoint on reload if already loading', () => {
+    httpTestingController.expectOne(`${environment.apiBaseUrl}statistics/`)
+    component.loading = true
+    component.reload()
+    httpTestingController.expectNone(`${environment.apiBaseUrl}statistics/`)
+  })
+
   it('should display inbox link with count', () => {
     const mockStats = {
       documents_total: 200,

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

@@ -1,6 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { Observable, Subscription } from 'rxjs'
+import { first, Observable, Subject, Subscription, takeUntil } from 'rxjs'
 import { FILTER_HAS_TAGS_ANY } from 'src/app/data/filter-rule-type'
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
@@ -35,7 +35,7 @@ export class StatisticsWidgetComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  loading: boolean = true
+  loading: boolean = false
 
   constructor(
     private http: HttpClient,
@@ -48,31 +48,32 @@ export class StatisticsWidgetComponent
   statistics: Statistics = {}
 
   subscription: Subscription
-
-  private getStatistics(): Observable<Statistics> {
-    return this.http.get(`${environment.apiBaseUrl}statistics/`)
-  }
+  private unsubscribeNotifer: Subject<any> = new Subject()
 
   reload() {
+    if (this.loading) return
     this.loading = true
-    this.getStatistics().subscribe((statistics) => {
-      this.loading = false
-      const fileTypeMax = 5
-      if (statistics.document_file_type_counts?.length > fileTypeMax) {
-        const others = statistics.document_file_type_counts.slice(fileTypeMax)
-        statistics.document_file_type_counts =
-          statistics.document_file_type_counts.slice(0, fileTypeMax)
-        statistics.document_file_type_counts.push({
-          mime_type: $localize`Other`,
-          mime_type_count: others.reduce(
-            (currentValue, documentFileType) =>
-              documentFileType.mime_type_count + currentValue,
-            0
-          ),
-        })
-      }
-      this.statistics = statistics
-    })
+    this.http
+      .get<Statistics>(`${environment.apiBaseUrl}statistics/`)
+      .pipe(takeUntil(this.unsubscribeNotifer), first())
+      .subscribe((statistics) => {
+        this.loading = false
+        const fileTypeMax = 5
+        if (statistics.document_file_type_counts?.length > fileTypeMax) {
+          const others = statistics.document_file_type_counts.slice(fileTypeMax)
+          statistics.document_file_type_counts =
+            statistics.document_file_type_counts.slice(0, fileTypeMax)
+          statistics.document_file_type_counts.push({
+            mime_type: $localize`Other`,
+            mime_type_count: others.reduce(
+              (currentValue, documentFileType) =>
+                documentFileType.mime_type_count + currentValue,
+              0
+            ),
+          })
+        }
+        this.statistics = statistics
+      })
   }
 
   getFileTypeExtension(filetype: DocumentFileType): string {
@@ -105,6 +106,8 @@ export class StatisticsWidgetComponent
 
   ngOnDestroy(): void {
     this.subscription.unsubscribe()
+    this.unsubscribeNotifer.next(true)
+    this.unsubscribeNotifer.complete()
   }
 
   goToInbox() {

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

@@ -6,8 +6,8 @@
       <input type="file" class="visually-hidden" (change)="onFileSelected($event)" multiple #fileUpload>
     </form>
     @if (getStatus().length > 0) {
-    <div class="fixed-bottom p-2 p-md-4 d-flex justify-content-end pe-none max-vh100-40 overflow-y-scroll" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'offset-md-3 offset-lg-2'">
-      <div class="col col-lg-4 col-xl-3 ps-0 pe-0 ps-lg-3 pe-lg-0 pe-auto">
+    <div class="fixed-bottom p-2 p-md-4 d-flex justify-content-end pe-none max-vh100-40" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'offset-md-3 offset-lg-2'">
+      <div class="col col-lg-4 col-xl-3 ps-0 pe-0 ps-lg-3 pe-lg-0 pe-auto overflow-y-scroll">
         <div class="card shadow-sm consumer-status-card">
           <div class="card-body">
             <div class="row">

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

@@ -12,7 +12,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'
       <button
         *pngxIfObjectPermissions="{
           object: { id: 2, owner: user1 },
-          action: 'view'
+          action: 'view',
         }"
       >
         Some Text

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

@@ -110,12 +110,12 @@
               <pngx-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
               [error]="error?.created_date"></pngx-input-date>
               <pngx-input-select [items]="correspondents" i18n-title title="Correspondent" formControlName="correspondent" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Correspondent)"
-              (createNew)="createCorrespondent($event)" [suggestions]="suggestions?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
+              (createNew)="createCorrespondent($event)" [hideAddButton]="createDisabled(DataType.Correspondent)" [suggestions]="suggestions?.correspondents" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Correspondent }"></pngx-input-select>
               <pngx-input-select [items]="documentTypes" i18n-title title="Document type" formControlName="document_type" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.DocumentType)"
-              (createNew)="createDocumentType($event)" [suggestions]="suggestions?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
+              (createNew)="createDocumentType($event)" [hideAddButton]="createDisabled(DataType.DocumentType)" [suggestions]="suggestions?.document_types" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.DocumentType }"></pngx-input-select>
               <pngx-input-select [items]="storagePaths" i18n-title title="Storage path" formControlName="storage_path" [allowNull]="true" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.StoragePath)"
-              (createNew)="createStoragePath($event)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
-              <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Tag)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
+              (createNew)="createStoragePath($event)" [hideAddButton]="createDisabled(DataType.StoragePath)" [suggestions]="suggestions?.storage_paths" i18n-placeholder placeholder="Default" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.StoragePath }"></pngx-input-select>
+              <pngx-input-tags formControlName="tags" [suggestions]="suggestions?.tags" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event, DataType.Tag)" [hideAddButton]="createDisabled(DataType.Tag)" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Tag }"></pngx-input-tags>
               @for (fieldInstance of document?.custom_fields; track fieldInstance.field; let i = $index) {
                 <div [formGroup]="customFieldFormFields.controls[i]">
                   @switch (getCustomFieldFromInstance(fieldInstance)?.data_type) {
@@ -157,6 +157,7 @@
                     @case (CustomFieldDataType.Monetary) {
                       <pngx-input-monetary formControlName="value"
                       [title]="getCustomFieldFromInstance(fieldInstance)?.name"
+                      [defaultCurrency]="getCustomFieldFromInstance(fieldInstance)?.extra_data?.default_currency"
                       [removable]="userIsOwner"
                       (removed)="removeField(fieldInstance)"
                       [horizontal]="true"

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

@@ -19,10 +19,6 @@
   --page-border: 0;
 }
 
-::ng-deep form .ng-select-taggable {
-  max-width: calc(100% - 90px); // fudge factor for (2x) ng-select button width
-}
-
 .btn-group .dropdown-toggle-split {
   border-top-right-radius: inherit;
   border-bottom-right-radius: inherit;

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

@@ -85,6 +85,7 @@ import { PdfViewerModule } from 'ng2-pdf-viewer'
 import { DataType } from 'src/app/data/datatype'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { TagService } from 'src/app/services/rest/tag.service'
+import { TextAreaComponent } from '../common/input/textarea/textarea.component'
 
 const doc: Document = {
   id: 3,
@@ -183,6 +184,7 @@ describe('DocumentDetailComponent', () => {
         SplitConfirmDialogComponent,
         RotateConfirmDialogComponent,
         DeletePagesConfirmDialogComponent,
+        TextAreaComponent,
       ],
       imports: [
         RouterModule.forRoot(routes),
@@ -1244,4 +1246,20 @@ describe('DocumentDetailComponent', () => {
     )
     fixture.detectChanges()
   }
+
+  it('createDisabled should return true if the user does not have permission to add the specified data type', () => {
+    currentUserCan = false
+    expect(component.createDisabled(DataType.Correspondent)).toBeTruthy()
+    expect(component.createDisabled(DataType.DocumentType)).toBeTruthy()
+    expect(component.createDisabled(DataType.StoragePath)).toBeTruthy()
+    expect(component.createDisabled(DataType.Tag)).toBeTruthy()
+  })
+
+  it('createDisabled should return false if the user has permission to add the specified data type', () => {
+    currentUserCan = true
+    expect(component.createDisabled(DataType.Correspondent)).toBeFalsy()
+    expect(component.createDisabled(DataType.DocumentType)).toBeFalsy()
+    expect(component.createDisabled(DataType.StoragePath)).toBeFalsy()
+    expect(component.createDisabled(DataType.Tag)).toBeFalsy()
+  })
 })

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

@@ -327,13 +327,8 @@ export class DocumentDetailComponent
         switchMap((paramMap) => {
           const documentId = +paramMap.get('id')
           this.docChangeNotifier.next(documentId)
-          return this.documentsService.get(documentId)
-        })
-      )
-      .pipe(
-        switchMap((doc) => {
-          this.documentId = doc.id
-          this.previewUrl = this.documentsService.getPreviewUrl(this.documentId)
+          // Dont wait to get the preview
+          this.previewUrl = this.documentsService.getPreviewUrl(documentId)
           this.http.get(this.previewUrl, { responseType: 'text' }).subscribe({
             next: (res) => {
               this.previewText = res.toString()
@@ -344,6 +339,12 @@ export class DocumentDetailComponent
               }`
             },
           })
+          return this.documentsService.get(documentId)
+        })
+      )
+      .pipe(
+        switchMap((doc) => {
+          this.documentId = doc.id
           this.downloadUrl = this.documentsService.getDownloadUrl(
             this.documentId
           )
@@ -651,6 +652,31 @@ export class DocumentDetailComponent
       })
   }
 
+  createDisabled(dataType: DataType) {
+    switch (dataType) {
+      case DataType.Correspondent:
+        return !this.permissionsService.currentUserCan(
+          PermissionAction.Add,
+          PermissionType.Correspondent
+        )
+      case DataType.DocumentType:
+        return !this.permissionsService.currentUserCan(
+          PermissionAction.Add,
+          PermissionType.DocumentType
+        )
+      case DataType.StoragePath:
+        return !this.permissionsService.currentUserCan(
+          PermissionAction.Add,
+          PermissionType.StoragePath
+        )
+      case DataType.Tag:
+        return !this.permissionsService.currentUserCan(
+          PermissionAction.Add,
+          PermissionType.Tag
+        )
+    }
+  }
+
   discard() {
     this.documentsService
       .get(this.documentId)

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

@@ -21,7 +21,7 @@
               } @else {
                 {{(document.correspondent$ | async)?.name}}
               }
-              :
+              @if (displayFields.includes(DisplayField.TITLE)) {:}
             }
             @if (displayFields.includes(DisplayField.TITLE)) {
               {{document.title | documentTitle}}
@@ -111,6 +111,12 @@
                   </div>
                 }
               }
+              @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) {
+                <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
+                  <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="files"></i-bs>
+                  <small i18n>{document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}}</small>
+                </div>
+              }
               @if (displayFields.includes(DisplayField.OWNER) && document.owner && document.owner !== settingsService.currentUser.id) {
                 <div class="list-group-item bg-light text-dark p-1 border-0 d-flex align-items-center">
                   <i-bs width=".9em" height=".9em" class="me-2 text-muted" name="person-fill-lock"></i-bs><small>{{document.owner | username}}</small>

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

@@ -31,6 +31,7 @@ const doc = {
   correspondent: 8,
   document_type: 10,
   storage_path: null,
+  page_count: 8,
   notes: [
     {
       id: 11,
@@ -80,6 +81,7 @@ describe('DocumentCardLargeComponent', () => {
   it('should display a document', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(fixture.nativeElement.textContent).toContain('Cupcake ipsum')
+    expect(fixture.nativeElement.textContent).toContain('8 pages')
   })
 
   it('should show preview on mouseover after delay to preload content', fakeAsync(() => {

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

@@ -35,7 +35,8 @@
     <div class="card-body bg-light p-2">
       <p class="card-text">
         @if (displayFields.includes(DisplayField.CORRESPONDENT) && document.correspondent) {
-          <a title="Toggle correspondent filter" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name ?? privateName}}</a>:
+          <a title="Toggle correspondent filter" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="fw-bold btn-link">{{(document.correspondent$ | async)?.name ?? privateName}}</a>
+          @if (displayFields.includes(DisplayField.TITLE)) {:}
         }
         @if (displayFields.includes(DisplayField.TITLE)) {
           {{document.title | documentTitle}}
@@ -88,6 +89,14 @@
             </div>
           </div>
         }
+        @if (displayFields.includes(DisplayField.PAGE_COUNT) && document.page_count) {
+          <div class="list-group-item bg-transparent p-0 border-0 d-flex flex-wrap-reverse justify-content-between">
+            <div class="ps-0 p-1" placement="top">
+              <i-bs width="1em" height="1em" class="me-2 text-muted" name="files"></i-bs>
+              <small i18n>{document.page_count, plural, =1 {1 page} other {{{document.page_count}} pages}}</small>
+            </div>
+          </div>
+        }
         @if (displayFields.includes(DisplayField.ASN) && document.archive_serial_number | isNumber) {
           <div class="ps-0 p-1">
             <i-bs width="1em" height="1em" class="me-2 text-muted" name="upc-scan"></i-bs>

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

@@ -34,6 +34,7 @@ const doc = {
   correspondent: 8,
   document_type: 10,
   storage_path: null,
+  page_count: 12,
   notes: [
     {
       id: 11,
@@ -91,6 +92,10 @@ describe('DocumentCardSmallComponent', () => {
     fixture.detectChanges()
   })
 
+  it('should display page count', () => {
+    expect(fixture.nativeElement.textContent).toContain('12 pages')
+  })
+
   it('should display a document, limit tags to 5', () => {
     expect(fixture.nativeElement.textContent).toContain('Document 10')
     expect(

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

@@ -140,7 +140,7 @@
   } @else {
     @if (list.displayMode === DisplayMode.LARGE_CARDS) {
       <div>
-        @for (d of list.documents; track trackByDocumentId($index, d)) {
+        @for (d of list.documents; track d.id) {
           <pngx-document-card-large
             [selected]="list.isSelected(d)"
             (toggleSelected)="toggleSelected(d, $event)"
@@ -160,105 +160,116 @@
       <div class="table-responsive">
         <table class="table table-sm align-middle border shadow-sm">
           <thead>
-            <th></th>
-            @if (activeDisplayFields.includes(DisplayField.ASN)) {
-              <th class="cursor-pointer"
-                pngxSortable="archive_serial_number"
-                title="Sort by ASN" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>ASN</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
-              <th class="cursor-pointer"
-                pngxSortable="correspondent__name"
-                title="Sort by correspondent" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Correspondent</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.TITLE)) {
-              <th class="cursor-pointer"
-                pngxSortable="title"
-                title="Sort by title" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                style="min-width: 150px;"
-                i18n>Title</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
-              <th i18n>Tags</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
-              <th class="cursor-pointer"
-                pngxSortable="owner"
-                title="Sort by owner" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Owner</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
-              <th class="cursor-pointer"
-                pngxSortable="num_notes"
-                title="Sort by notes" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Notes</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
-              <th class="cursor-pointer"
-                pngxSortable="document_type__name"
-                title="Sort by document type" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Document type</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
-              <th class="cursor-pointer"
-                pngxSortable="storage_path__name"
-                title="Sort by storage path" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Storage path</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.CREATED)) {
-              <th class="cursor-pointer"
-                pngxSortable="created"
-                title="Sort by created date" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Created</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.ADDED)) {
-              <th class="cursor-pointer"
-                pngxSortable="added"
-                title="Sort by added date" i18n-title
-                [currentSortField]="list.sortField"
-                [currentSortReverse]="list.sortReverse"
-                (sort)="onSort($event)"
-                i18n>Added</th>
-            }
-            @if (activeDisplayFields.includes(DisplayField.SHARED)) {
-              <th i18n>
-                Shared
-              </th>
-            }
-            @for (field of activeDisplayCustomFields; track field) {
-              <th>
-                {{getDisplayCustomFieldTitle(field)}}
-              </th>
-            }
+            <tr>
+              <th></th>
+              @if (activeDisplayFields.includes(DisplayField.ASN)) {
+                <th class="cursor-pointer"
+                  pngxSortable="archive_serial_number"
+                  title="Sort by ASN" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>ASN</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.CORRESPONDENT) && permissionService.currentUserCan(PermissionAction.View, PermissionType.Correspondent)) {
+                <th class="cursor-pointer"
+                  pngxSortable="correspondent__name"
+                  title="Sort by correspondent" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Correspondent</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.TITLE)) {
+                <th class="cursor-pointer"
+                  pngxSortable="title"
+                  title="Sort by title" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  style="min-width: 150px;"
+                  i18n>Title</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.TAGS) && !activeDisplayFields.includes(DisplayField.TITLE)) {
+                <th i18n>Tags</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.OWNER) && permissionService.currentUserCan(PermissionAction.View, PermissionType.User)) {
+                <th class="cursor-pointer"
+                  pngxSortable="owner"
+                  title="Sort by owner" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Owner</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.NOTES) && notesEnabled) {
+                <th class="cursor-pointer"
+                  pngxSortable="num_notes"
+                  title="Sort by notes" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Notes</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.DOCUMENT_TYPE) && permissionService.currentUserCan(PermissionAction.View, PermissionType.DocumentType)) {
+                <th class="cursor-pointer"
+                  pngxSortable="document_type__name"
+                  title="Sort by document type" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Document type</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.STORAGE_PATH) && permissionService.currentUserCan(PermissionAction.View, PermissionType.StoragePath)) {
+                <th class="cursor-pointer"
+                  pngxSortable="storage_path__name"
+                  title="Sort by storage path" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Storage path</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.CREATED)) {
+                <th class="cursor-pointer"
+                  pngxSortable="created"
+                  title="Sort by created date" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Created</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.ADDED)) {
+                <th class="cursor-pointer"
+                  pngxSortable="added"
+                  title="Sort by added date" i18n-title
+                  [currentSortField]="list.sortField"
+                  [currentSortReverse]="list.sortReverse"
+                  (sort)="onSort($event)"
+                  i18n>Added</th>
+              }
+              @if (activeDisplayFields.includes(DisplayField.PAGE_COUNT)) {
+                  <th class="cursor-pointer"
+                    pngxSortable="page_count"
+                    title="Sort by number of pages" i18n-title
+                    [currentSortField]="list.sortField"
+                    [currentSortReverse]="list.sortReverse"
+                    (sort)="onSort($event)"
+                    i18n>Pages</th>
+                }
+              @if (activeDisplayFields.includes(DisplayField.SHARED)) {
+                <th i18n>
+                  Shared
+                </th>
+              }
+              @for (field of activeDisplayCustomFields; track field) {
+                <th>
+                  {{getDisplayCustomFieldTitle(field)}}
+                </th>
+              }
+            </tr>
           </thead>
           <tbody>
-            @for (d of list.documents; track trackByDocumentId($index, d)) {
+            @for (d of list.documents; track d.id) {
               <tr (click)="toggleSelected(d, $event); $event.stopPropagation();" (dblclick)="openDocumentDetail(d)" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
                 <td>
                   <div class="form-check">
@@ -330,6 +341,11 @@
                     {{d.added | customDate}}
                   </td>
                 }
+                @if (activeDisplayFields.includes(DisplayField.PAGE_COUNT)) {
+                    <td>
+                        {{ d.page_count }}
+                    </td>
+                  }
                 @if (activeDisplayFields.includes(DisplayField.SHARED)) {
                   <td>
                     @if (d.is_shared_by_requester) { <ng-container i18n>Yes</ng-container> } @else { <ng-container i18n>No</ng-container> }
@@ -348,7 +364,7 @@
     }
     @if (list.displayMode === DisplayMode.SMALL_CARDS) {
       <div class="row row-cols-paperless-cards">
-        @for (d of list.documents; track trackByDocumentId($index, d)) {
+        @for (d of list.documents; track d.id) {
           <pngx-document-card-small class="p-0"
             [selected]="list.isSelected(d)"
             (toggleSelected)="toggleSelected(d, $event)"

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

@@ -6,10 +6,6 @@ tr {
   user-select: none;
 }
 
-.cursor-pointer {
-  cursor: pointer;
-}
-
 .table-row-selected {
   background-color: var(--pngx-primary-faded);
 }

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

@@ -302,7 +302,7 @@ describe('DocumentListComponent', () => {
     displayModeButtons[0].triggerEventHandler('change')
     fixture.detectChanges()
     expect(component.list.displayMode).toEqual('table')
-    expect(fixture.debugElement.queryAll(By.css('tr'))).toHaveLength(3)
+    expect(fixture.debugElement.queryAll(By.css('tr'))).toHaveLength(4)
 
     displayModeButtons[1].nativeElement.checked = true
     displayModeButtons[1].triggerEventHandler('change')
@@ -602,7 +602,7 @@ describe('DocumentListComponent', () => {
 
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(9)
+    ).toHaveLength(10)
 
     expect(component.notesEnabled).toBeTruthy()
     settingsService.set(SETTINGS_KEYS.NOTES_ENABLED, false)
@@ -610,14 +610,14 @@ describe('DocumentListComponent', () => {
     expect(component.notesEnabled).toBeFalsy()
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(8)
+    ).toHaveLength(9)
 
     // insufficient perms
     jest.spyOn(permissionService, 'currentUserCan').mockReturnValue(false)
     fixture.detectChanges()
     expect(
       fixture.debugElement.queryAll(By.directive(SortableDirective))
-    ).toHaveLength(4)
+    ).toHaveLength(5)
   })
 
   it('should support toggle on document objects', () => {

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

@@ -15,7 +15,12 @@ import {
   isFullTextFilterRule,
 } from 'src/app/utils/filter-rules'
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
-import { DisplayField, DisplayMode, Document } from 'src/app/data/document'
+import {
+  DEFAULT_DISPLAY_FIELDS,
+  DisplayField,
+  DisplayMode,
+  Document,
+} from 'src/app/data/document'
 import { SavedView } from 'src/app/data/saved-view'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import {
@@ -108,6 +113,11 @@ export class DocumentListComponent
         (this.unmodifiedSavedView.display_fields &&
           this.unmodifiedSavedView.display_fields.join(',') !==
             this.activeDisplayFields.join(',')) ||
+        (!this.unmodifiedSavedView.display_fields &&
+          this.activeDisplayFields.join(',') !==
+            DEFAULT_DISPLAY_FIELDS.filter((f) => f.id !== DisplayField.ADDED)
+              .map((f) => f.id)
+              .join(',')) ||
         filterRulesDiffer(
           this.unmodifiedSavedView.filter_rules,
           this.list.filterRules
@@ -383,10 +393,6 @@ export class DocumentListComponent
     ])
   }
 
-  trackByDocumentId(index, item: Document) {
-    return item.id
-  }
-
   get notesEnabled(): boolean {
     return this.settingsService.get(SETTINGS_KEYS.NOTES_ENABLED)
   }

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

@@ -86,15 +86,10 @@
         }
 
         @if (permissionsService.currentUserCan(PermissionAction.View, PermissionType.CustomField) && customFields.length > 0) {
-          <pngx-filterable-dropdown class="flex-fill" title="Custom fields" icon="ui-radios" i18n-title
-          filterPlaceholder="Filter custom fields" i18n-filterPlaceholder
-          [items]="customFields"
-          [manyToOne]="true"
-          [(selectionModel)]="customFieldSelectionModel"
+          <pngx-custom-fields-query-dropdown class="flex-fill" title="Custom fields" icon="ui-radios" i18n-title
+          [(selectionModel)]="customFieldQueriesModel"
           (selectionModelChange)="updateRules()"
-          (opened)="onCustomFieldsDropdownOpen()"
-          [documentCounts]="customFieldDocumentCounts"
-          [allowSelectNone]="true"></pngx-filterable-dropdown>
+          ></pngx-custom-fields-query-dropdown>
         }
         <pngx-dates-dropdown
           title="Dates" i18n-title

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

@@ -17,7 +17,7 @@ import {
   NgbDropdownItem,
   NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap'
-import { NgSelectComponent } from '@ng-select/ng-select'
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select'
 import { of, throwError } from 'rxjs'
 import {
   FILTER_TITLE,
@@ -55,6 +55,7 @@ import {
   FILTER_HAS_ANY_CUSTOM_FIELDS,
   FILTER_DOES_NOT_HAVE_CUSTOM_FIELDS,
   FILTER_HAS_CUSTOM_FIELDS_ALL,
+  FILTER_CUSTOM_FIELDS_QUERY,
 } from 'src/app/data/filter-rule-type'
 import { Correspondent } from 'src/app/data/correspondent'
 import { DocumentType } from 'src/app/data/document-type'
@@ -95,6 +96,12 @@ import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service
 import { RouterModule } from '@angular/router'
 import { SearchService } from 'src/app/services/rest/search.service'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { CustomFieldsQueryDropdownComponent } from '../../common/custom-fields-query-dropdown/custom-fields-query-dropdown.component'
+import {
+  CustomFieldQueryLogicalOperator,
+  CustomFieldQueryOperator,
+} from 'src/app/data/custom-field-query'
+import { CustomFieldQueryAtom } from 'src/app/utils/custom-field-query-element'
 
 const tags: Tag[] = [
   {
@@ -181,6 +188,7 @@ describe('FilterEditorComponent', () => {
         ToggleableDropdownButtonComponent,
         DatesDropdownComponent,
         CustomDatePipe,
+        CustomFieldsQueryDropdownComponent,
       ],
       imports: [
         RouterModule,
@@ -190,6 +198,7 @@ describe('FilterEditorComponent', () => {
         NgbDatepickerModule,
         NgxBootstrapIconsModule.pick(allIcons),
         NgbTypeaheadModule,
+        NgSelectModule,
       ],
       providers: [
         FilterPipe,
@@ -838,108 +847,79 @@ describe('FilterEditorComponent', () => {
     ]
   }))
 
-  it('should ingest filter rules for has all custom fields', fakeAsync(() => {
-    expect(component.customFieldSelectionModel.getSelectedItems()).toHaveLength(
-      0
-    )
+  it('should ingest filter rules for custom fields all', fakeAsync(() => {
+    expect(component.customFieldQueriesModel.isEmpty()).toBeTruthy()
     component.filterRules = [
       {
         rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: '42',
-      },
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: '43',
+        value: '42,43',
       },
     ]
-    expect(component.customFieldSelectionModel.logicalOperator).toEqual(
-      LogicalOperator.And
+    expect(component.customFieldQueriesModel.queries[0].operator).toEqual(
+      CustomFieldQueryLogicalOperator.And
     )
-    expect(component.customFieldSelectionModel.getSelectedItems()).toEqual(
-      custom_fields
-    )
-    // coverage
-    component.filterRules = [
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: null,
-      },
-    ]
-    component.toggleTag(2) // coverage
+    expect(component.customFieldQueriesModel.queries[0].value.length).toEqual(2)
+    expect(
+      (
+        component.customFieldQueriesModel.queries[0]
+          .value[0] as CustomFieldQueryAtom
+      ).serialize()
+    ).toEqual(['42', CustomFieldQueryOperator.Exists, 'true'])
   }))
 
   it('should ingest filter rules for has any custom fields', fakeAsync(() => {
-    expect(component.customFieldSelectionModel.getSelectedItems()).toHaveLength(
-      0
-    )
+    expect(component.customFieldQueriesModel.isEmpty()).toBeTruthy()
     component.filterRules = [
       {
         rule_type: FILTER_HAS_CUSTOM_FIELDS_ANY,
-        value: '42',
-      },
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ANY,
-        value: '43',
+        value: '42,43',
       },
     ]
-    expect(component.customFieldSelectionModel.logicalOperator).toEqual(
-      LogicalOperator.Or
+    expect(component.customFieldQueriesModel.queries[0].operator).toEqual(
+      CustomFieldQueryLogicalOperator.Or
     )
-    expect(component.customFieldSelectionModel.getSelectedItems()).toEqual(
-      custom_fields
-    )
-    // coverage
-    component.filterRules = [
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ANY,
-        value: null,
-      },
-    ]
+    expect(component.customFieldQueriesModel.queries[0].value.length).toEqual(2)
+    expect(
+      (
+        component.customFieldQueriesModel.queries[0]
+          .value[0] as CustomFieldQueryAtom
+      ).serialize()
+    ).toEqual(['42', CustomFieldQueryOperator.Exists, 'true'])
   }))
 
-  it('should ingest filter rules for has any custom field', fakeAsync(() => {
-    expect(component.customFieldSelectionModel.getSelectedItems()).toHaveLength(
-      0
-    )
+  it('should ingest filter rules for custom field queries', fakeAsync(() => {
+    expect(component.customFieldQueriesModel.isEmpty()).toBeTruthy()
     component.filterRules = [
       {
-        rule_type: FILTER_HAS_ANY_CUSTOM_FIELDS,
-        value: '1',
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: '["AND", [[42, "exists", "true"],[43, "exists", "true"]]]',
       },
     ]
-    expect(component.customFieldSelectionModel.getSelectedItems()).toHaveLength(
-      1
+    expect(component.customFieldQueriesModel.queries[0].operator).toEqual(
+      CustomFieldQueryLogicalOperator.And
     )
-    expect(component.customFieldSelectionModel.get(null)).toBeTruthy()
-  }))
+    expect(component.customFieldQueriesModel.queries[0].value.length).toEqual(2)
+    expect(
+      (
+        component.customFieldQueriesModel.queries[0]
+          .value[0] as CustomFieldQueryAtom
+      ).serialize()
+    ).toEqual([42, CustomFieldQueryOperator.Exists, 'true'])
 
-  it('should ingest filter rules for exclude tag(s)', fakeAsync(() => {
-    expect(component.customFieldSelectionModel.getExcludedItems()).toHaveLength(
-      0
-    )
+    // atom
     component.filterRules = [
       {
-        rule_type: FILTER_DOES_NOT_HAVE_CUSTOM_FIELDS,
-        value: '42',
-      },
-      {
-        rule_type: FILTER_DOES_NOT_HAVE_CUSTOM_FIELDS,
-        value: '43',
-      },
-    ]
-    expect(component.customFieldSelectionModel.logicalOperator).toEqual(
-      LogicalOperator.And
-    )
-    expect(component.customFieldSelectionModel.getExcludedItems()).toEqual(
-      custom_fields
-    )
-    // coverage
-    component.filterRules = [
-      {
-        rule_type: FILTER_DOES_NOT_HAVE_CUSTOM_FIELDS,
-        value: null,
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: '[42, "exists", "true"]',
       },
     ]
+    expect(component.customFieldQueriesModel.queries[0].value.length).toEqual(1)
+    expect(
+      (
+        component.customFieldQueriesModel.queries[0]
+          .value[0] as CustomFieldQueryAtom
+      ).serialize()
+    ).toEqual([42, CustomFieldQueryOperator.Exists, 'true'])
   }))
 
   it('should ingest filter rules for owner', fakeAsync(() => {
@@ -1453,71 +1433,37 @@ describe('FilterEditorComponent', () => {
     ])
   }))
 
-  it('should convert user input to correct filter rules on custom field select not assigned', fakeAsync(() => {
-    const customFieldsFilterableDropdown = fixture.debugElement.queryAll(
-      By.directive(FilterableDropdownComponent)
-    )[4]
-    customFieldsFilterableDropdown.triggerEventHandler('opened')
-    const customFieldButton = customFieldsFilterableDropdown.queryAll(
-      By.directive(ToggleableDropdownButtonComponent)
-    )[0]
-    customFieldButton.triggerEventHandler('toggle')
-    fixture.detectChanges()
-    expect(component.filterRules).toEqual([
-      {
-        rule_type: FILTER_HAS_ANY_CUSTOM_FIELDS,
-        value: 'false',
-      },
-    ])
-  }))
-
   it('should convert user input to correct filter rules on custom field selections', fakeAsync(() => {
-    const customFieldsFilterableDropdown = fixture.debugElement.queryAll(
-      By.directive(FilterableDropdownComponent)
-    )[4] // CF dropdown
-    customFieldsFilterableDropdown.triggerEventHandler('opened')
-    const customFieldButtons = customFieldsFilterableDropdown.queryAll(
-      By.directive(ToggleableDropdownButtonComponent)
+    const customFieldsQueryDropdown = fixture.debugElement.queryAll(
+      By.directive(CustomFieldsQueryDropdownComponent)
+    )[0]
+    const customFieldToggleButton = customFieldsQueryDropdown.query(
+      By.css('button')
     )
-    customFieldButtons[1].triggerEventHandler('toggle')
-    customFieldButtons[2].triggerEventHandler('toggle')
+    customFieldToggleButton.triggerEventHandler('click')
     fixture.detectChanges()
-    expect(component.filterRules).toEqual([
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: custom_fields[0].id.toString(),
-      },
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: custom_fields[1].id.toString(),
-      },
-    ])
-    const toggleOperatorButtons = customFieldsFilterableDropdown.queryAll(
-      By.css('input[type=radio]')
+    const customFieldButtons = customFieldsQueryDropdown.queryAll(
+      By.css('button')
     )
-    toggleOperatorButtons[1].nativeElement.checked = true
-    toggleOperatorButtons[1].triggerEventHandler('change')
+    customFieldButtons[1].triggerEventHandler('click')
     fixture.detectChanges()
+    const query = component.customFieldQueriesModel
+      .queries[0] as CustomFieldQueryAtom
+    query.field = custom_fields[0].id
+    const fieldSelect: NgSelectComponent = customFieldsQueryDropdown.queryAll(
+      By.directive(NgSelectComponent)
+    )[0].componentInstance
+    fieldSelect.open()
+    const options = customFieldsQueryDropdown.queryAll(By.css('.ng-option'))
+    options[0].nativeElement.click()
+    expect(component.customFieldQueriesModel.queries[0].value.length).toEqual(1)
     expect(component.filterRules).toEqual([
       {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ANY,
-        value: custom_fields[0].id.toString(),
-      },
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ANY,
-        value: custom_fields[1].id.toString(),
-      },
-    ])
-    customFieldButtons[2].triggerEventHandler('exclude')
-    fixture.detectChanges()
-    expect(component.filterRules).toEqual([
-      {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: custom_fields[0].id.toString(),
-      },
-      {
-        rule_type: FILTER_DOES_NOT_HAVE_CUSTOM_FIELDS,
-        value: custom_fields[1].id.toString(),
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: JSON.stringify([
+          CustomFieldQueryLogicalOperator.Or,
+          [[custom_fields[0].id, 'exists', 'true']],
+        ]),
       },
     ])
   }))
@@ -1930,21 +1876,11 @@ describe('FilterEditorComponent', () => {
 
     component.filterRules = [
       {
-        rule_type: FILTER_HAS_CUSTOM_FIELDS_ALL,
-        value: '42',
+        rule_type: FILTER_CUSTOM_FIELDS_QUERY,
+        value: '["AND",[["42","exists","true"],["43","exists","true"]]]',
       },
     ]
-    expect(component.generateFilterName()).toEqual(
-      `Custom fields: ${custom_fields[0].name}`
-    )
-
-    component.filterRules = [
-      {
-        rule_type: FILTER_HAS_ANY_CUSTOM_FIELDS,
-        value: 'false',
-      },
-    ]
-    expect(component.generateFilterName()).toEqual('Without any custom field')
+    expect(component.generateFilterName()).toEqual(`Custom fields query`)
 
     component.filterRules = [
       {