@conduction/nextcloud-vue 2.147.0 → 2.149.0

package/l10n/en.json

@@ -2397,7 +2397,9 @@
     "From {date}": "From {date}",
     "Until {date}": "Until {date}",
     "More actions for {name}": "More actions for {name}",
-    "Unlink contact": "Unlink contact"
+    "Unlink contact": "Unlink contact",
+    "{term}, extendable by {extension}": "{term}, extendable by {extension}",
+    "Move {item}, use the arrow keys": "Move {item}, use the arrow keys"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2652,7 +2652,9 @@
     "From {date}": "Vanaf {date}",
     "Until {date}": "Tot {date}",
     "More actions for {name}": "Meer acties voor {name}",
-    "Unlink contact": "Contact ontkoppelen"
+    "Unlink contact": "Contact ontkoppelen",
+    "{term}, extendable by {extension}": "{term}, te verdagen met {extension}",
+    "Move {item}, use the arrow keys": "{item} verplaatsen, gebruik de pijltjestoetsen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.147.0",
+  "version": "2.149.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -184,6 +184,14 @@ export default {
 		 * @spec openspec/changes/audit-trail-exclude-actions/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-events-by-action
 		 */
 		excludeActions: { type: Array, default: () => [] },
+		/**
+		 * Actors the card leaves out by user id (case-insensitive), such as
+		 * `['System']` for a history of what people did: the bookkeeping a
+		 * background job writes is not shown.
+		 *
+		 * @spec openspec/changes/audit-card-exclude-actors/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-entries-by-actor
+		 */
+		excludeActors: { type: Array, default: () => [] },
 		/** Whether the card collapses. */
 		collapsible: { type: Boolean, default: false },
 		/** Override the card title (defaults to the translated label). */
@@ -199,7 +207,8 @@ export default {
 		/**
 		 * What happened, in words, by action (`claim`) or by action and the
 		 * state it led to (`complete:completed`, tried first). `{actor}`,
-		 * `{state}` and `{changed.<key>}` (a value the entry recorded, in the
+		 * `{state}` and `{changed.<key>}` (a value the entry recorded, a dotted key
+		 * reading into it such as `{changed.data.fileName}`, in the
 		 * words of `valueLabels`) are filled in; a label that names the actor leaves it off
 		 * the line under it. An action without a label shows as written.
 		 *
@@ -262,10 +271,17 @@ export default {
 		/** @return {Array<object>} The entries without the excluded actions. */
 		shownEntries() {
 			const excluded = this.excludeActions.map((action) => String(action).toLowerCase())
-			if (excluded.length === 0) {
+			const actors = this.excludeActors.map((actor) => String(actor).toLowerCase())
+			if (excluded.length === 0 && actors.length === 0) {
 				return this.entries
 			}
-			return this.entries.filter((entry) => !excluded.includes(String(entry.action || entry.event || '').toLowerCase()))
+			return this.entries.filter((entry) => !excluded.includes(String(entry.action || entry.event || '').toLowerCase())
+				&& !actors.includes(String(entry.user || '').toLowerCase()))
+		},
+
+		/** @return {boolean} Whether the card leaves entries out, and so reads more than it shows. */
+		filtersEntries() {
+			return this.excludeActions.length > 0 || this.excludeActors.length > 0
 		},
 
 		displayedEntries() {
@@ -301,7 +317,7 @@ export default {
 			if (this.sourceUrl !== null) {
 				return this.sourceUrl
 			}
-			const limit = this.excludeActions.length > 0 ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
+			const limit = this.filtersEntries ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
 			const params = new URLSearchParams({ limit: String(limit) })
 			if (this.scope === 'app') {
 				if (this.register) {
@@ -381,7 +397,7 @@ export default {
 			if (this.scope !== 'object' || this.sourceUrl !== null || !this.objectId || !Array.isArray(this.relatedSources)) {
 				return []
 			}
-			const limit = this.excludeActions.length > 0 ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
+			const limit = this.filtersEntries ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
 			const read = async (url) => {
 				const response = await fetch(prefixUrl(url), { headers: buildHeaders() })
 				if (!response.ok) {
@@ -423,7 +439,7 @@ export default {
 				return label
 					.replace('{actor}', this.actorName(entry))
 					.replace('{state}', entry.stateAfter || '')
-					.replace(/\{changed\.([\w-]+)\}/g, (match, key) => this.changedValue(entry, key))
+					.replace(/\{changed\.([\w.-]+)\}/g, (match, key) => this.changedValue(entry, key))
 					.replace(/\{object\.([\w.-]+)\}/g, (match, path) => {
 						const value = this.object ? readPath(this.object, path) : undefined
 						return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
@@ -444,7 +460,8 @@ export default {
 		 */
 		changedValue(entry, key) {
 			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
-			const value = newValueOf(changed[key])
+			// A dotted key reads into what the entry recorded (`data.fileName` on a file action).
+			const value = String(key).split('.').reduce((at, part) => newValueOf(at !== null && typeof at === 'object' ? at[part] : undefined), changed)
 			if (value === null || value === undefined || typeof value === 'object') {
 				return ''
 			}

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -18,6 +18,7 @@
 			:maxDisplay="resolvedMaxDisplay"
 			:layout="content && typeof content.layout === 'string' ? content.layout : ''"
 			:excludeActions="resolvedExcludeActions"
+			:excludeActors="resolvedExcludeActors"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
 			:changeLabels="changeLabels"
@@ -105,7 +106,7 @@ export default {
 		excludeActions: { type: Array, default: () => [] },
 		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, footnote? }`. */
 		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels? }`. */
-		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels?, relatedSources? }`. */
+		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels?, relatedSources?, excludeActors? }`. */
 		content: { type: Object, default: () => ({}) },
 	},
 
@@ -279,6 +280,17 @@ export default {
 			return Array.isArray(fromContent) ? fromContent.filter((action) => typeof action === 'string' && action !== '') : []
 		},
 
+		/**
+		 * The actors to leave out, from `content.excludeActors`.
+		 *
+		 * @spec openspec/changes/audit-card-exclude-actors/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-entries-by-actor
+		 * @return {Array<string>}
+		 */
+		resolvedExcludeActors() {
+			const fromContent = this.content.excludeActors
+			return Array.isArray(fromContent) ? fromContent.filter((actor) => typeof actor === 'string' && actor !== '') : []
+		},
+
 		resolvedTitle() {
 			return this.title || this.content.title || ''
 		},

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -94,7 +94,7 @@
 					:required="question.required"
 					data-testid="cn-checklist-run-text"
 					@input="markDirty(question.id)" />
-				<label v-if="allowNote" class="cn-checklist-run__note-label">
+				<label v-if="allowNote && noteShown(question)" class="cn-checklist-run__note-label">
 					{{ noteLabel }}
 					<textarea
 						v-model="draft[question.id].note"
@@ -288,6 +288,11 @@ function idOf(object) {
  * with no bound record, `record: { register, schema, filter, sort }` picks
  * the open record: the first match, under the reader's rights.
  *
+ * `noteWhen: { answers: [...] }` shows a question's note field only once its
+ * answer is one of those stored values (the board shows a note under "Nee"),
+ * or when the question already holds a note; without it every question shows
+ * one (`allowNote: false` hides them all).
+ *
  * `startAt: "firstOpen"` opens a run that was started earlier at the page of
  * its first unanswered question (the last page when all are answered), once
  * per record; without it the run opens at the first page.
@@ -321,7 +326,7 @@ export default {
 		 * The widget config: `{ questions | questionsPath, itemsKey?,
 		 * groupLabelField?, orderField?, fields?, typeMap?, choiceValues?,
 		 * answers | answersPath, answerKey?, answerFields?, recordPhotosField?,
-		 * record?, saveAction?, finishAction?, pageSize?, allowNote?,
+		 * record?, saveAction?, finishAction?, pageSize?, allowNote?, noteWhen?,
 		 * allowPhotos?, caption?, emptyText? }`, as in the component
 		 * description and docs/components/cn-checklist-run-widget.md.
 		 *
@@ -612,6 +617,23 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a question shows its note field: always, unless `noteWhen`
+		 * names the answers that ask for one and this question has none of
+		 * them and no note yet.
+		 *
+		 * @param {object} question The question.
+		 * @return {boolean}
+		 */
+		noteShown(question) {
+			const answers = this.content?.noteWhen?.answers
+			if (!Array.isArray(answers)) {
+				return true
+			}
+			const draft = this.draft[question.id] || {}
+			return (draft.note || '') !== '' || answers.map(String).includes(String(draft.value ?? ''))
+		},
+
 		/**
 		 * The host's translate, or the text unchanged.
 		 *
@@ -1194,6 +1216,11 @@ export default {
 	padding: 12px 14px;
 }
 
+.cn-checklist-run__photos-title {
+	font-size: 15px;
+	line-height: 1.2;
+}
+
 .cn-checklist-run__legend {
 	font-size: 15px;
 	font-weight: 600;

package/src/components/CnDataTable/CnDataTable.vue

@@ -639,6 +639,8 @@ export default {
 		 * `link: true` makes that column the one that names the row: it carries
 		 * the row link and the title look. Without it the first column does.
 		 *
+		 * `emptyValueBy` (`{ field, values }`) names what an empty cell holds by
+		 * another field of the row, translated; it goes before `emptyValue`.
 		 * `emptyValue` is what a row without a value holds in that column, so a
 		 * `badge` column draws a pill on every row.
 		 *
@@ -2238,13 +2240,44 @@ export default {
 				return v
 			}
 			const value = this.getCellValue(row, this.columnValueField(col))
+			const empty = value === null || value === undefined || value === ''
+			// `emptyValueBy`: what an empty cell means depends on another field
+			// of the row (a retention period left empty on a result that is
+			// kept reads "Permanent", on one that is destroyed it stays empty).
+			if (empty && col && col.emptyValueBy && typeof col.emptyValueBy === 'object') {
+				const words = this.emptyValueFor(row, col.emptyValueBy)
+				if (words !== '') {
+					return words
+				}
+			}
 			// `emptyValue`: what a row without a value holds, so a badge column draws one for every row.
-			if ((value === null || value === undefined || value === '') && col && Object.hasOwn(col, 'emptyValue')) {
+			if (empty && col && Object.hasOwn(col, 'emptyValue')) {
 				return col.emptyValue
 			}
 			return value
 		},
 
+		/**
+		 * The words an empty cell shows, picked by another field of the row:
+		 * `{ field, values: { <that field's value>: <words> } }`, translated.
+		 *
+		 * @param {object} row The row data.
+		 * @param {{field: string, values: object}} spec The column's `emptyValueBy`.
+		 * @return {string} The words, '' when the row's value has none.
+		 */
+		emptyValueFor(row, spec) {
+			const key = this.getCellValue(row, spec.field)
+			const values = spec.values && typeof spec.values === 'object' ? spec.values : {}
+			if (key === null || key === undefined || !Object.hasOwn(values, String(key))) {
+				return ''
+			}
+			const words = values[String(key)]
+			if (typeof words !== 'string' || words === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(words) : words
+		},
+
 		/**
 		 * Whether an aggregate cell shows its `zeroLabel` as muted text instead
 		 * of through the column's widget (`aggregate.zeroAs: "text"`): a count

package/src/components/CnDetailPage/CnDetailPage.md

@@ -438,7 +438,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
 | `tabsFrom` | String | `''` | A field path, read like a `visibleWhen` field, whose list of tab ids picks the tabs of the page's `tabs` widgets and their order for this record: `@context.caseType.tabs` reads the list a case type keeps (DqAanbesteding: Inschrijvingen, Publicaties, Bestanden, Historie). A tab's id is its `id`, else its `widgetId`, or the string entry. An empty or missing list keeps the declared tabs; edit mode shows them all. |
 | `verbEndpoints` | Object | `null` | App routes that replace a record source's own route for a verb, by verb id (manifest `config.verbEndpoints`), such as `{ "complete": "/apps/dossiq/api/case-tasks/{id}/complete" }` for an app that checks something of its own before the engine completes the task. `{id}` is the record id. Only read with `entitySource`. |
-| `accessPurpose` | Object | `null` | Ask for a purpose before the record opens (manifest `config.accessPurpose`): `{ when, options, url, title?, description? }`. `when` is a `visibleWhen` condition on the record and its `visibilityContext` records; `options` are the purposes offered (`{ value, label }`; "Other" with a written purpose is always added); `url` is the app endpoint that records the purpose (POST `{ purpose, note }`, `{objectId}` filled in). Nothing of the record shows until the endpoint accepts, and the same record is not asked again in the same browser session. A refusal keeps the record closed. `null` asks nothing. |
+| `accessPurpose` | Object | `null` | Ask for a purpose before the record opens (manifest `config.accessPurpose`): `{ when, options, url, checkUrl?, title?, description? }`. `when` is a `visibleWhen` condition on the record and its `visibilityContext` records; `options` are the purposes offered (`{ value, label, hint? }`, a `hint` being a line under the option that says what choosing it does; "Other" with a written purpose is always added); `checkUrl` is asked first (GET), and an answer `{ required: false }` opens the record without the dialog, because the app recorded the purpose itself; `url` is the app endpoint that records the purpose (POST `{ purpose, note }`, `{objectId}` filled in). Nothing of the record shows until the endpoint accepts, and the same record is not asked again in the same browser session. A refusal keeps the record closed. `null` asks nothing. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## A body widget's own cards in the side column

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -772,7 +772,7 @@
 		     the reader has stated why they open it and the purpose is recorded. -->
 		<div v-else-if="contentWithheld" class="cn-detail-page__access-purpose" data-testid="cn-detail-page-access-purpose">
 			<CnAccessPurposeDialog
-				v-if="accessPurposeAsking"
+				v-if="accessPurposeAsking && !accessPurposeChecking"
 				:title="accessPurposeText('title')"
 				:description="accessPurposeText('description')"
 				:options="accessPurposeOptions"
@@ -781,7 +781,7 @@
 				@submit="recordAccessPurpose"
 				@cancel="accessPurposeAsking = false" />
 			<NcEmptyContent
-				v-else-if="accessPurposeRequired"
+				v-else-if="accessPurposeRequired && !accessPurposeChecking"
 				:name="t('nextcloud-vue', 'State a purpose to open this')"
 				:description="t('nextcloud-vue', 'This record holds special categories of personal data. It opens once your purpose is recorded.')"
 				data-testid="cn-detail-page-access-purpose-refused">
@@ -3095,6 +3095,12 @@ export default {
 		 * browser session. A refusal keeps the record closed. `null` (the
 		 * default) asks nothing.
 		 *
+		 * `checkUrl` (GET, `{objectId}` filled in) is asked first: an answer
+		 * `{ required: false }` opens the record without the dialog (the app
+		 * recorded the purpose itself, as for the case's own handler); any
+		 * other answer, or a failure, shows the dialog. An option's `hint`
+		 * is a line under it saying what choosing it does besides recording it.
+		 *
 		 * @spec openspec/changes/detail-access-purpose/specs/detail-access-purpose/spec.md#requirement-a-detail-page-can-ask-for-a-purpose-before-it-opens
 		 * @type {object|null}
 		 */
@@ -3413,6 +3419,10 @@ export default {
 			accessPurposeGranted: readGrantedPurposes(),
 			/** Whether the purpose dialog is open; closing it without a purpose keeps the record closed. */
 			accessPurposeAsking: true,
+			/** Whether `accessPurpose.checkUrl` is being asked for the record in view. */
+			accessPurposeChecking: false,
+			/** The record the check last answered for, so it is asked once per record. */
+			accessPurposeCheckedKey: '',
 			/** Whether a purpose is being recorded. */
 			accessPurposeBusy: false,
 			/** Why the last purpose was refused. */
@@ -4129,7 +4139,11 @@ export default {
 			const options = Array.isArray(this.accessPurpose?.options) ? this.accessPurpose.options : []
 			return options
 				.filter((option) => option && typeof option.value === 'string' && option.value !== '')
-				.map((option) => ({ value: option.value, label: this.cnTranslate(option.label || option.value) }))
+				.map((option) => ({
+					value: option.value,
+					label: this.cnTranslate(option.label || option.value),
+					...(typeof option.hint === 'string' && option.hint !== '' ? { hint: this.cnTranslate(option.hint) } : {}),
+				}))
 		},
 
 		/**
@@ -5832,6 +5846,17 @@ export default {
 			this.accessPurposeError = ''
 		},
 
+		/** Once the page knows the record asks a purpose, the app is asked first whether it must (`checkUrl`). */
+		accessPurposeRequired: {
+			handler(required) {
+				if (required && this.contentWithheld) {
+					this.checkAccessPurpose()
+				}
+			},
+
+			immediate: true,
+		},
+
 		// Deep, like `sidebarTabs` / `sidebarProps` below: the manifest editors
 		// mutate `page.config.sidebar` IN PLACE, so the reference CnPageRenderer
 		// forwards never changes. A shallow watcher missed every such edit —
@@ -6089,6 +6114,50 @@ export default {
 		 * @param {{purpose: string, note: string}} answer The chosen purpose.
 		 * @return {Promise<void>}
 		 */
+		/**
+		 * Ask the app whether the reader must state a purpose for this record
+		 * (`accessPurpose.checkUrl`); `{ required: false }` opens it at once.
+		 *
+		 * @spec openspec/changes/detail-access-purpose/specs/detail-access-purpose/spec.md#requirement-a-detail-page-can-ask-for-a-purpose-before-it-opens
+		 * @return {Promise<void>}
+		 */
+		async checkAccessPurpose() {
+			const key = this.accessPurposeKey
+			const url = String(this.accessPurpose?.checkUrl || '').replace(/\{objectId\}/g, encodeURIComponent(String(this.objectId || '')))
+			if (url === '' || this.accessPurposeCheckedKey === key) {
+				return
+			}
+			this.accessPurposeCheckedKey = key
+			this.accessPurposeChecking = true
+			try {
+				const { default: axios } = await import('@nextcloud/axios')
+				const { data } = await axios.get(prefixUrl(url))
+				if (data && data.required === false && this.accessPurposeKey === key) {
+					this.grantAccessPurpose(key)
+				}
+			} catch {
+				// The check is a shortcut: without an answer the reader is asked as before.
+			} finally {
+				this.accessPurposeChecking = false
+			}
+		},
+
+		/**
+		 * Open the record and remember for this browser session that its
+		 * purpose is recorded.
+		 *
+		 * @param {string} key The record's session key.
+		 * @return {void}
+		 */
+		grantAccessPurpose(key) {
+			this.accessPurposeGranted = [...new Set([...this.accessPurposeGranted, key])]
+			try {
+				window.sessionStorage.setItem(ACCESS_PURPOSE_SESSION_KEY, JSON.stringify(this.accessPurposeGranted))
+			} catch {
+				// Without session storage the purpose is asked again on the next visit.
+			}
+		},
+
 		async recordAccessPurpose(answer) {
 			const url = String(this.accessPurpose?.url || '').replace(/\{objectId\}/g, encodeURIComponent(String(this.objectId || '')))
 			if (url === '') {
@@ -6100,13 +6169,7 @@ export default {
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
 				await axios.post(prefixUrl(url), { purpose: answer.purpose, note: answer.note })
-				const key = this.accessPurposeKey
-				this.accessPurposeGranted = [...new Set([...this.accessPurposeGranted, key])]
-				try {
-					window.sessionStorage.setItem(ACCESS_PURPOSE_SESSION_KEY, JSON.stringify(this.accessPurposeGranted))
-				} catch {
-					// Without session storage the purpose is asked again on the next visit.
-				}
+				this.grantAccessPurpose(this.accessPurposeKey)
 			} catch (error) {
 				const data = error?.response?.data
 				this.accessPurposeError = (data && (data.message || data.error)) || t('nextcloud-vue', 'Your purpose could not be recorded, so the record stays closed.')

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -86,9 +86,14 @@ export default {
 	font-size: 13px;
 	font-weight: 700;
 	gap: 6px;
-	margin: 0;
 	min-height: 32px;
 	padding: 0 14px;
 	white-space: nowrap;
 }
+
+/* server.css gives every button `margin: 3px 3px 3px 0` at (0,2,1); the
+   doubled class outranks it. */
+.cn-detail-page__catalog-action.cn-detail-page__catalog-action {
+	margin: 0;
+}
 </style>

package/src/components/CnDeviceFramesWidget/CnDeviceFramesWidget.vue

@@ -339,6 +339,7 @@ export default {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
+	line-height: 1.2;
 }
 
 .cn-device-frames-widget__body {

package/src/components/CnDuplicateWarning/CnDuplicateWarning.vue

@@ -5,11 +5,12 @@
 <template>
 	<CnDialog
 		:name="text(title) || t('nextcloud-vue', 'This may already exist')"
+		:eyebrow="text(eyebrow)"
 		width="form"
 		data-testid="cn-duplicate-warning"
 		@closing="close">
 		<div class="cn-duplicate-warning">
-			<NcNoteCard :type="affordances.blocked ? 'error' : 'warning'" data-testid="cn-duplicate-warning-note">
+			<NcNoteCard :type="affordances.blocked && !affordances.mayContinue ? 'error' : 'warning'" data-testid="cn-duplicate-warning-note">
 				{{ headlineText }}
 			</NcNoteCard>
 
@@ -21,13 +22,14 @@
 					<a v-if="row.href" :href="row.href" class="cn-duplicate-warning__title">{{ row.title }}</a>
 					<span v-else class="cn-duplicate-warning__title">{{ row.title }}</span>
 					<span v-if="row.meta" class="cn-duplicate-warning__meta">{{ row.meta }}</span>
-					<span class="cn-duplicate-warning__meta">{{ row.matchedOn }} ({{ row.percentage }}%)</span>
+					<span class="cn-duplicate-warning__meta">{{ row.matched }}</span>
 				</li>
 			</ul>
 
 			<NcTextField v-if="affordances.needsReason"
 				:label="text(reasonLabel) || t('nextcloud-vue', 'Why file it anyway')"
 				:modelValue="reason"
+				:helperText="text(reasonHint)"
 				data-testid="cn-duplicate-warning-reason"
 				@update:modelValue="reason = $event" />
 
@@ -36,6 +38,12 @@
 				data-testid="cn-duplicate-warning-blocked">
 				{{ text(blockedText) || t('nextcloud-vue', 'This cannot be filed twice. Open the one it matches, or ask a coordinator.') }}
 			</p>
+
+			<p v-if="footnote"
+				class="cn-duplicate-warning__hint"
+				data-testid="cn-duplicate-warning-footnote">
+				{{ text(footnote) }}
+			</p>
 		</div>
 
 		<template #actions>
@@ -58,7 +66,7 @@ import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcNoteCard, NcTextField } from '@nextcloud/vue'
 import { duplicateAffordances } from '../../utils/duplicateWarning.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'
 import { CnDialog } from '../CnDialog/index.js'
 
 /**
@@ -134,12 +142,46 @@ export default {
 			default: '{title}',
 		},
 
-		/** A record's meta line, a template filled from it. */
+		/**
+		 * A record's meta line, a template filled from it, or several: the
+		 * first that fills is shown ("{identifier} · {caseType.title}", then
+		 * "{identifier}" for a record that lacks the type).
+		 *
+		 * @type {string|Array<string>}
+		 */
 		rowMeta: {
-			type: String,
+			type: [String, Array],
 			default: '{identifier}',
 		},
 
+		/**
+		 * What a match was found on, `{fields}` (joined as a list: "Aanvrager
+		 * en Onderwerp") and `{percentage}` filled, through the host
+		 * translate. Empty: "Aanvrager, Onderwerp (82%)".
+		 */
+		matchedText: {
+			type: String,
+			default: '',
+		},
+
+		/** A line above the title, as the board dialogs draw one. */
+		eyebrow: {
+			type: String,
+			default: '',
+		},
+
+		/** The help line under the reason field. */
+		reasonHint: {
+			type: String,
+			default: '',
+		},
+
+		/** A muted note under the matches and the reason, for what Cancel and a block mean. */
+		footnote: {
+			type: String,
+			default: '',
+		},
+
 		/** A record's page, a template with `{uuid}`; empty draws no link. */
 		recordUrl: {
 			type: String,
@@ -233,15 +275,14 @@ export default {
 				const record = this.records.find((row) => String((row && (row.id || row.uuid || (row['@self'] && row['@self'].id))) || '') === uuid)
 				const fields = Array.isArray(match && match.matchedOn) ? match.matchedOn : []
 				const score = Number(match && match.score)
+				const words = fields.map((field) => (this.fieldLabels[field] ? this.cnTranslate(this.fieldLabels[field]) : field))
+				const percentage = Number.isFinite(score) ? Math.max(0, Math.min(100, Math.round(score * 100))) : 0
 				return {
 					uuid,
 					title: record ? (fillTemplate(this.rowTitle, record).trim() || uuid) : t('nextcloud-vue', 'A record you may not open'),
-					meta: record ? fillTemplate(this.rowMeta, record).trim() : '',
+					meta: record ? firstFilled(this.rowMeta, record, (key) => key).trim() : '',
 					href: record && this.recordUrl ? generateUrl(fillTemplate(this.recordUrl, { uuid: encodeURIComponent(uuid) })) : '',
-					matchedOn: fields.length
-						? fields.map((field) => (this.fieldLabels[field] ? this.cnTranslate(this.fieldLabels[field]) : field)).join(', ')
-						: t('nextcloud-vue', 'Matched on the score, not on a single field'),
-					percentage: Number.isFinite(score) ? Math.max(0, Math.min(100, Math.round(score * 100))) : 0,
+					matched: this.matchedLine(words, percentage),
 				}
 			})
 		},
@@ -260,6 +301,29 @@ export default {
 			return value ? this.cnTranslate(value) : ''
 		},
 
+		/**
+		 * What a match was found on, and how strongly.
+		 *
+		 * @param {Array<string>} words The matched fields, in the host's words.
+		 * @param {number} percentage The score as a percentage.
+		 * @return {string}
+		 */
+		matchedLine(words, percentage) {
+			if (words.length === 0) {
+				return `${t('nextcloud-vue', 'Matched on the score, not on a single field')} (${percentage}%)`
+			}
+			if (!this.matchedText) {
+				return `${words.join(', ')} (${percentage}%)`
+			}
+			let fields = words.join(', ')
+			try {
+				fields = new Intl.ListFormat(document.documentElement.lang || undefined, { type: 'conjunction' }).format(words)
+			} catch {
+				// An engine without Intl.ListFormat keeps the comma list.
+			}
+			return fillTemplate(this.cnTranslate(this.matchedText), { fields, percentage: String(percentage) })
+		},
+
 		/** File it over the warning, carrying the reason and what it was filed over. */
 		fileAnyway() {
 			if (!this.canFile) {