@conduction/nextcloud-vue 2.82.0 → 2.84.0

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1253,6 +1253,7 @@ import {
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
+import { detailWidgetVisible, fetchVisibilityRows, visibilityContextRefs, widgetConditionData } from '../../utils/detailWidgetVisibility.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
@@ -1260,6 +1261,7 @@ import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
 import { setReadState } from '../../utils/recordInteractions.js'
 import { slotRenders } from '../../utils/slotContent.js'
+import { evaluateVisibleWhen, isLocallyDecidableVisibleWhen } from '../../utils/visibleWhen.js'
 import {
 	isCardWidgetDef,
 	isContentOnlyWidgetDef,
@@ -1512,8 +1514,8 @@ export default {
 
 	/**
 	 * Offer the board look's tab list name to the tabs widget below this page
-	 * (`config.tabsLabel`, default "<type> parts"). A getter object, so the
-	 * widget reads it live.
+	 * (`config.tabsLabel`, default "<type> parts"), and the records
+	 * `visibilityContext` names. Getter objects, so the widget reads them live.
 	 *
 	 * @return {object} The provided values.
 	 * @spec openspec/changes/screens-detail-page-parity/specs/detail-page-board-look/spec.md#requirement-folder-tabs-take-the-board-strip
@@ -1521,6 +1523,7 @@ export default {
 	provide() {
 		const isBoard = computed(() => this.isBoard)
 		const tabsLabel = computed(() => this.resolvedTabsLabel)
+		const visibilityRows = computed(() => (this.visibilityRowsPending ? null : this.visibilityRows))
 		return {
 			// The page's own look reaches the tabs, the cards and the activity
 			// below it, also when it came from the `look` prop and not the app.
@@ -1530,6 +1533,15 @@ export default {
 					return tabsLabel.value
 				},
 			},
+
+			// The records `visibilityContext` names, keyed `@context.<name>`, so a tab's
+			// `visibleWhen` reads the case type as a grid widget's does. Null
+			// while they are on their way.
+			cnDetailVisibilityRows: {
+				get value() {
+					return visibilityRows.value
+				},
+			},
 		}
 	},
 
@@ -2572,6 +2584,25 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Records the page reads beside the loaded one, so a `visibleWhen`
+		 * can ask about them (manifest `config.visibilityContext`). Each entry
+		 * is `{ <name>: { field, register, schema } }`: `field` is the
+		 * property of the loaded record holding the other record's id, and a
+		 * condition reads that record as `@context.<name>.<path>`. A case page that
+		 * declares `{ caseType: { field: "caseType", register: "dossiq",
+		 * schema: "caseType" } }` can show a widget for some case types only
+		 * with `{ field: "@context.caseType.category", op: "in", value: [...] }`.
+		 * A record that cannot be read is absent, so its condition fails safe.
+		 * Empty (the default) reads nothing extra.
+		 *
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityContext: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Whether the current user administers this instance. Shows the
 		 * `adminOnly` header actions. `null` (the default) reads it from
@@ -2799,6 +2830,19 @@ export default {
 
 	data() {
 		return {
+			/**
+			 * The records `visibilityContext` names, keyed `@context.<name>`: the row,
+			 * `null` when it could not be read, absent while it is on its way.
+			 */
+			visibilityRows: {},
+			/** The `visibilityRefsKey` the rows in `visibilityRows` were read for. */
+			visibilityRowsFor: '',
+			/** Sequence of the last `visibilityContext` read, so a late answer for another record is dropped. */
+			visibilityRowsSeq: 0,
+			/** The answers of endpoint and source `visibleWhen` conditions on grid widgets, by widget id. */
+			widgetConditionAnswers: {},
+			/** Sequence of the last remote condition round. */
+			widgetConditionSeq: 0,
 			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
 			pillCounts: {},
 			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
@@ -3058,11 +3102,17 @@ export default {
 		 * because a keyboard user who cannot see the page needs to know what
 		 * they are being offered before they take it.
 		 *
+		 * One library string with a placeholder, not "Skip to" from the host's
+		 * catalogue glued to the label: no app carried that fragment, so every
+		 * Dutch reader got "Skip to In behandeling nemen" (Zuiddrecht live
+		 * round 3), and a fragment cannot be put in Dutch word order anyway.
+		 *
 		 * @return {string} The link text.
 		 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
+		 * @spec openspec/changes/detail-page-strings-dutch/specs/detail-page-strings-dutch/spec.md#requirement-the-detail-page-speaks-the-readers-language
 		 */
 		skipLinkLabel() {
-			return `${this.effectiveTranslate('Skip to')} ${this.effectivePrimaryLabel}`
+			return t('nextcloud-vue', 'Skip to {action}', { action: this.effectivePrimaryLabel })
 		},
 
 		// ── The action model (detail-action-model-and-case-surfaces) ────
@@ -3904,6 +3954,68 @@ export default {
 			return store.objects?.[this.objectType]?.[this.objectId] ?? null
 		},
 
+		/**
+		 * The records `visibilityContext` names for the loaded record.
+		 *
+		 * @return {Array<{key: string, register: string, schema: string, id: string}>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefs() {
+			return visibilityContextRefs(this.visibilityContext, this.resolvedObject)
+		},
+
+		/**
+		 * Whether a record `visibilityContext` names is still on its way.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRowsPending() {
+			return this.visibilityRefs.length > 0 && this.visibilityRowsFor !== this.visibilityRefsKey
+		},
+
+		/**
+		 * The named references as one key, so another record (or another case
+		 * type on the same record) reads them again.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		visibilityRefsKey() {
+			return JSON.stringify(this.visibilityRefs)
+		},
+
+		/**
+		 * What a grid widget's `visibleWhen` reads: the record, with the
+		 * `visibilityContext` records under `@context.<name>`. Null until the record loads.
+		 *
+		 * @return {object|null}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		widgetVisibilityData() {
+			return widgetConditionData(this.resolvedObject, this.visibilityRows)
+		},
+
+		/**
+		 * The grid widgets whose `visibleWhen` needs a request (endpoint or
+		 * source), with what they ask, as one key: a change re-asks them.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		remoteWidgetConditionsKey() {
+			if (!this.widgetVisibilityData || this.visibilityRowsPending) {
+				return ''
+			}
+			const defs = [...(this.bodyGridWidgets || []), ...((this.activeView && this.activeView.widgets) || [])]
+			const remote = defs.filter((def) => def && def.visibleWhen && typeof def.visibleWhen === 'object'
+				&& !isLocallyDecidableVisibleWhen(def.visibleWhen))
+			if (remote.length === 0) {
+				return ''
+			}
+			return JSON.stringify([String(this.objectId || ''), remote.map((def) => [def.id, def.visibleWhen])])
+		},
+
 		/**
 		 * The `@self` block of the resolved object (interaction markers live here).
 		 *
@@ -4436,6 +4548,22 @@ export default {
 	},
 
 	watch: {
+		// The records a condition names are read again for another record.
+		visibilityRefsKey: {
+			immediate: true,
+			handler() {
+				this.refreshVisibilityRows()
+			},
+		},
+
+		// Endpoint and source conditions on grid widgets are asked once per record.
+		remoteWidgetConditionsKey: {
+			immediate: true,
+			handler() {
+				this.refreshWidgetConditions()
+			},
+		},
+
 		// The header's count pills count again for another record or other lists.
 		pillCountKey: {
 			immediate: true,
@@ -5674,6 +5802,62 @@ export default {
 				|| undefined
 		},
 
+		/**
+		 * Read the records `visibilityContext` names for the loaded record. A
+		 * late answer for a record the page has left is dropped.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-page-can-load-records-a-condition-names
+		 */
+		async refreshVisibilityRows() {
+			const key = this.visibilityRefsKey
+			const refs = this.visibilityRefs
+			const seq = ++this.visibilityRowsSeq
+			if (refs.length === 0) {
+				// Write only on a change, so a page without `visibilityContext`
+				// never touches the state its layout could read.
+				if (Object.keys(this.visibilityRows).length > 0) {
+					this.visibilityRows = {}
+				}
+				if (this.visibilityRowsFor !== key) {
+					this.visibilityRowsFor = key
+				}
+				return
+			}
+			if (!this._visibilityRowCache) {
+				this._visibilityRowCache = new Map()
+			}
+			const rows = await fetchVisibilityRows(refs, this._visibilityRowCache)
+			if (seq !== this.visibilityRowsSeq) {
+				return
+			}
+			this.visibilityRows = rows
+			this.visibilityRowsFor = key
+		},
+
+		/**
+		 * Ask the endpoint and source `visibleWhen` conditions of the grid
+		 * widgets, once per record. Each is fail-safe: an error hides the widget.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/detail-widgets-visible-when/specs/detail-widgets-visible-when/spec.md#requirement-a-detail-grid-widget-shows-only-while-its-visiblewhen-holds-for-the-record
+		 */
+		async refreshWidgetConditions() {
+			const seq = ++this.widgetConditionSeq
+			if (this.remoteWidgetConditionsKey === '') {
+				return
+			}
+			const [, entries] = JSON.parse(this.remoteWidgetConditionsKey)
+			const ctx = { objectId: this.objectId, object: this.widgetVisibilityData || undefined }
+			const answers = {}
+			await Promise.all(entries.map(async ([id, cond]) => {
+				answers[id] = await evaluateVisibleWhen(cond, ctx)
+			}))
+			if (seq === this.widgetConditionSeq) {
+				this.widgetConditionAnswers = answers
+			}
+		},
+
 		/**
 		 * Drop the items that draw nothing, then close the rows they freed —
 		 * `float: true` leaves the item below pinned under a gap nobody owns.
@@ -5696,7 +5880,10 @@ export default {
 		 * Whether a layout item has anything to draw, so a grid cell is worth
 		 * spending on it.
 		 *
-		 * TWO widget types are judged, and no others.
+		 * A widget whose definition carries `visibleWhen` draws only while the
+		 * condition holds for the record (see `detailWidgetVisible`).
+		 *
+		 * Beyond that, TWO widget types are judged, and no others.
 		 *
 		 * `integration`, in the case where nothing can ever appear: a leaf from
 		 * another app that is not registered, with no `requiredApp` to fall back
@@ -5743,6 +5930,18 @@ export default {
 			if (!widget) {
 				return true
 			}
+			// The widget's own `visibleWhen`, read against the record and the
+			// records `visibilityContext` names (a case's case type). Without
+			// one the widget shows, as it always did, and the layout takes no
+			// dependency on the record: a page without conditions re-lays out
+			// exactly as often as before.
+			if (widget.visibleWhen !== undefined && widget.visibleWhen !== null
+				&& !detailWidgetVisible(widget, this.widgetVisibilityData, {
+					pending: this.visibilityRowsPending,
+					answers: this.widgetConditionAnswers,
+				})) {
+				return false
+			}
 			// The board look shows the activity as the History tab. When a tabs
 			// widget already holds it, it is not also a body section.
 			if (this.isBoard && isActivityWidget(widget) && this.tabbedWidgetIds.has(widget.id)) {

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -111,6 +111,14 @@
 				role="note"
 				:data-testid="`cn-field-list-band-${row.key}`">
 				<span class="cn-field-list-widget__band-text">{{ row.detail }}</span>
+				<NcButton
+					v-for="copy in row.copies"
+					:key="`copy-${copy.path}`"
+					variant="tertiary"
+					:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+					@click="copyValue(copy)">
+					{{ copy.label }}
+				</NcButton>
 				<NcButton
 					v-for="action in row.bandActions"
 					:key="action.id"
@@ -162,6 +170,16 @@
 				<p v-if="row.detail" class="cn-field-list-widget__detail">
 					{{ row.detail }}
 				</p>
+				<div v-if="row.detail && row.copies.length > 0" class="cn-field-list-widget__copies">
+					<NcButton
+						v-for="copy in row.copies"
+						:key="`copy-${copy.path}`"
+						variant="tertiary"
+						:data-testid="`cn-field-list-copy-${copy.path}-${row.key}`"
+						@click="copyValue(copy)">
+						{{ copy.label }}
+					</NcButton>
+				</div>
 			</li>
 		</ul>
 
@@ -211,6 +229,7 @@
 			</NcButton>
 		</form>
 
+		<span class="cn-field-list-widget__sr" aria-live="polite" data-testid="cn-field-list-copied">{{ copied }}</span>
 		<NcNoteCard v-if="notice" :type="noticeType" data-testid="cn-field-list-notice">
 			{{ notice }}
 		</NcNoteCard>
@@ -260,7 +279,7 @@ export default {
 		 *
 		 * - `field` (required) — the object field holding the array.
 		 * - `key` — the item field that identifies an entry (default: the item itself for strings).
-		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when? } }`.
+		 * - `row` — `{ title, titleFallback?, avatar?, meta?: [paths|{ path, map?, format? }], pill?: { path, map?, variantMap? }, aside?: { path, format?, prefix?, fallback? }, detail?: { template, when?, copy?: [{ path, label }] } }`. `detail.copy` puts a copy button beside the detail line for each named value of the row (an empty value gets none), such as a DNS record's name and value.
 		 * - `add` — `{ label?, fields: [{ key, label, type?: 'text'|'select', options?, required?, pattern?, patternMessage? }], unique?, defaults? }`.
 		 * - `remove` — `{ label? }`; omitted = no remove.
 		 * - `rowActions` — `[{ id, label, when?, placement?: 'band', request: { method?, url, payload? } }]`; tokens `@object.<field>`, `@objectId`, `@row.<field>`.
@@ -316,6 +335,8 @@ export default {
 			busy: '',
 			notice: '',
 			noticeType: 'error',
+			// What the last copy button put on the clipboard, said to a screen reader.
+			copied: '',
 		}
 	},
 
@@ -358,6 +379,7 @@ export default {
 					pill: this.pillOf(entry, spec.pill),
 					aside: spec.aside ? this.asideOf(entry, spec.aside) : '',
 					detail: spec.detail && this.matches(entry, spec.detail.when) ? this.fill(spec.detail.template, entry) : '',
+					copies: spec.detail && this.matches(entry, spec.detail.when) ? this.copiesOf(entry, spec.detail.copy) : [],
 					actions: this.actionsFor(entry),
 					cells: this.isTable ? this.cellsOf(entry) : [],
 				}
@@ -818,6 +840,40 @@ export default {
 		 * @return {Promise<void>}
 		 * @spec openspec/changes/abstract-field-list/specs/field-list/spec.md#requirement-a-field-list-row-can-run-a-configured-request
 		 */
+		/**
+		 * The copy buttons of a row's detail line: one per named value that is not empty.
+		 *
+		 * @param {object} entry The entry.
+		 * @param {Array<{path: string, label?: string}>|undefined} declared The `detail.copy` list.
+		 * @return {Array<{path: string, label: string, value: string}>}
+		 */
+		copiesOf(entry, declared) {
+			return (Array.isArray(declared) ? declared : [])
+				.filter((copy) => copy && typeof copy.path === 'string' && copy.path !== '')
+				.map((copy) => ({
+					path: copy.path,
+					label: this.tr(copy.label || 'Copy'),
+					value: String(readPath(entry, copy.path) ?? ''),
+				}))
+				.filter((copy) => copy.value !== '')
+		},
+
+		/**
+		 * Put one value on the clipboard and say so; a browser that refuses says that instead.
+		 *
+		 * @param {{label: string, value: string}} copy The copy button.
+		 * @return {Promise<void>}
+		 */
+		async copyValue(copy) {
+			this.copied = ''
+			try {
+				await navigator.clipboard.writeText(copy.value)
+				this.copied = `${this.tr('Copied')}: ${copy.label}`
+			} catch {
+				this.notify(this.tr('Copying did not work. Select the text and copy it yourself.'))
+			}
+		},
+
 		async runAction(action, row) {
 			this.busy = row.key
 			this.notice = ''
@@ -912,6 +968,12 @@ export default {
 
 .cn-field-list-widget__meta,
 .cn-field-list-widget__aside,
+.cn-field-list-widget__copies {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+}
+
 .cn-field-list-widget__detail {
 	font-size: 13px;
 }

package/src/components/CnGaugeWidget/CnGaugeWidget.vue

@@ -280,7 +280,7 @@ export default {
 		 * @return {string} The formatted string.
 		 */
 		formatNumber(value) {
-			return formatMetricValue(value, this.resolvedFormat, this.configCtx)
+			return formatMetricValue(value, this.resolvedFormat, this.configCtx, null, this.effectiveTranslate)
 		},
 
 		/**

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -47,8 +47,19 @@
 								     actions when it names none): a header action, a built-in by
 								     name, or a link (an entry with `href`, the documentation). -->
 								<template v-for="entry in headerMenuEntries(button)" :key="entry.key">
+									<!-- A group heading and a separator (`{ heading }` and
+									     `separator` in items), as the board's "Ga naar" and
+									     "Selectie" groups. -->
+									<NcActionCaption
+										v-if="entry.kind === 'heading'"
+										class="cn-index-header-menu__heading"
+										:name="entry.label"
+										:data-testid="`cn-index-header-menu-${entry.key}`" />
+									<NcActionSeparator
+										v-else-if="entry.kind === 'separator'"
+										:data-testid="`cn-index-header-menu-${entry.key}`" />
 									<NcActionLink
-										v-if="entry.href"
+										v-else-if="entry.href"
 										:href="entry.href"
 										target="_blank"
 										rel="noopener noreferrer"
@@ -58,6 +69,17 @@
 										</template>
 										{{ entry.label }}
 									</NcActionLink>
+									<NcActionLink
+										v-else-if="entry.link"
+										:href="entry.link.href"
+										:closeAfterClick="true"
+										:data-testid="`cn-index-header-menu-${entry.key}`"
+										@click="onHeaderMenuLinkClick(entry, $event)">
+										<template v-if="entry.icon" #icon>
+											<CnIcon :name="entry.icon" :size="20" />
+										</template>
+										{{ entry.label }}
+									</NcActionLink>
 									<NcActionButton
 										v-else
 										:disabled="entry.disabled"
@@ -65,8 +87,12 @@
 										:closeAfterClick="true"
 										:data-testid="`cn-index-header-menu-${entry.key}`"
 										@click="entry.run()">
-										<template v-if="entry.icon" #icon>
-											<CnIcon :name="entry.icon" :size="20" />
+										<!-- A built-in ships its own icon (`iconComponent`), so it
+										     never falls back to the "?" when the app has not
+										     registered that icon name. -->
+										<template v-if="entry.iconComponent || entry.icon" #icon>
+											<component :is="entry.iconComponent" v-if="entry.iconComponent" :size="20" />
+											<CnIcon v-else :name="entry.icon" :size="20" />
 										</template>
 										{{ entry.label }}
 									</NcActionButton>
@@ -1028,7 +1054,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
+import { NcActionButton, NcActionCaption, NcActionCheckbox, NcActionLink, NcActions, NcActionSeparator, NcButton, NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import { getCurrentInstance, inject, markRaw, ref } from 'vue'
 import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -1038,6 +1064,8 @@ import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import Export from 'vue-material-design-icons/Export.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import ImportIcon from 'vue-material-design-icons/Import.vue'
+import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
 import Tune from 'vue-material-design-icons/Tune.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
@@ -1053,13 +1081,13 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { routeHref } from '../../utils/actionLink.js'
+import { followItemActionLink, resolveItemActionLink, routeHref } from '../../utils/actionLink.js'
 import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchFilterCounts } from '../../utils/fetchFilterCounts.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
-import { openRowTarget } from '../../utils/linkNavigation.js'
+import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
@@ -1352,6 +1380,7 @@ export default {
 		NcActionLink,
 		NcActionButton,
 		NcActionCaption,
+		NcActionSeparator,
 		NcActionCheckbox,
 		NcButton,
 		AlertCircleOutline,
@@ -1631,9 +1660,11 @@ export default {
 		 * actions, or what its `items` name (`header-actions`, a header action
 		 * id, `import`, `export`, `refresh`, `copy-selected`, `delete-selected`,
 		 * `documentation`), so the entries the bar's menu loses have a place.
+		 * `items` can group them: `{ heading }` draws a group heading (an i18n
+		 * key) and `separator` a rule, each only when an entry follows.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
-		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: string[]}>}
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string, items?: Array<(string|{heading: string})>}>}
 		 */
 		headerButtons: {
 			type: Array,
@@ -5560,7 +5591,10 @@ export default {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
-						items: Array.isArray(button.items) ? button.items.filter((item) => typeof item === 'string' && item !== '') : null,
+						items: Array.isArray(button.items)
+							? button.items.filter((item) => (typeof item === 'string' && item !== '')
+								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
+							: null,
 					}
 				})
 				.filter((button) => button.label !== '')
@@ -6855,11 +6889,14 @@ export default {
 		 * `import`, `export`, `refresh`, `copy-selected`, `delete-selected`
 		 * (disabled until a row is selected) and `documentation` (a link to
 		 * `documentationUrl`, left out when the page has none). An unknown name
-		 * is left out.
+		 * is left out. `{ heading }` and `separator` group the entries: an
+		 * entry of `kind` `heading` or `separator`, drawn only when an entry
+		 * follows it.
 		 *
 		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
-		 * @param {{items?: string[]|null, format?: string}} button The resolved header button.
-		 * @return {Array<{key: string, label: string, icon: string, href?: string, disabled?: boolean, title?: string, run?: Function}>}
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {{items?: Array<(string|{heading: string})>|null, format?: string}} button The resolved header button.
+		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: Function}>}
 		 */
 		headerMenuEntries(button) {
 			const fromAction = (entry) => ({
@@ -6867,14 +6904,18 @@ export default {
 				label: entry.label ? this.cnTranslate(entry.label) : '',
 				icon: entry.icon && typeof entry.icon === 'string' && !entry.icon.startsWith('icon-') ? entry.icon : '',
 				href: typeof entry.href === 'string' && entry.href !== '' ? entry.href : '',
+				// A `handler: "navigate"` entry whose route resolves carries `to`
+				// (resolveHeaderHandler drops its handler): the menu draws it as
+				// an in-app link, as the actions bar does, so it navigates.
+				link: !entry.href && entry.to && !entry.disabled ? resolveItemActionLink({ to: entry.to }, null, this.$router) : null,
 				disabled: Boolean(entry.disabled),
 				run: () => this.onHeaderAction({ action: entry.id, id: entry.id }),
 			})
 			const names = button && Array.isArray(button.items) ? button.items : ['header-actions']
 			const noSelection = this.internalSelectedIds.length < 1
 			const builtIns = {
-				import: () => ({ key: 'import', label: t('nextcloud-vue', 'Import'), icon: 'Import', run: () => { this.showImportDialog = true } }),
-				export: () => ({ key: 'export', label: t('nextcloud-vue', 'Export'), icon: 'Export', run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
+				import: () => ({ key: 'import', label: t('nextcloud-vue', 'Import'), icon: 'Import', iconComponent: ImportIcon, run: () => { this.showImportDialog = true } }),
+				export: () => ({ key: 'export', label: t('nextcloud-vue', 'Export'), icon: 'Export', iconComponent: Export, run: () => this.onHeaderButton({ action: 'export', format: button.format }) }),
 				refresh: () => ({ key: 'refresh', label: t('nextcloud-vue', 'Refresh'), icon: 'Refresh', run: () => this.onRefreshEvent() }),
 				'copy-selected': () => ({
 					key: 'copy-selected',
@@ -6889,6 +6930,7 @@ export default {
 					key: 'delete-selected',
 					label: t('nextcloud-vue', 'Delete selected'),
 					icon: 'TrashCanOutline',
+					iconComponent: TrashCanOutline,
 					disabled: noSelection,
 					title: noSelection ? t('nextcloud-vue', 'Select 1 or more items to delete') : '',
 					run: () => { this.showMassDeleteDialog = true },
@@ -6906,8 +6948,17 @@ export default {
 					entries.push(entry)
 				}
 			}
+			// A group heading (`{ heading }`) or a `separator` is kept as a mark
+			// and only drawn when an entry follows it (see groupMenuEntries).
+			let mark = 0
 			for (const name of names) {
-				if (name === 'header-actions') {
+				if (name && typeof name === 'object') {
+					mark += 1
+					entries.push({ key: `__heading-${mark}`, kind: 'heading', label: this.cnTranslate(name.heading) })
+				} else if (name === 'separator') {
+					mark += 1
+					entries.push({ key: `__separator-${mark}`, kind: 'separator', label: '' })
+				} else if (name === 'header-actions') {
 					this.mergedHeaderActions.forEach((entry) => push(fromAction(entry)))
 				} else if (Object.hasOwn(builtIns, name)) {
 					push(builtIns[name]())
@@ -6918,7 +6969,66 @@ export default {
 					}
 				}
 			}
-			return entries
+			return this.groupMenuEntries(entries)
+		},
+
+		/**
+		 * Tidy the marks of the header's Actions menu: a heading or separator
+		 * with no entry after it (before the next mark or the end) is dropped,
+		 * a separator never opens the menu, two separators in a row are one,
+		 * and a heading followed by a separator before any entry is dropped. So a group whose entries are all left out (no documentation
+		 * URL, an unknown id) leaves no empty heading or double rule behind,
+		 * and a menu of marks only has no entries and is not drawn.
+		 *
+		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @param {Array<{key: string, kind?: string}>} entries The entries with their marks, in order.
+		 * @return {Array<{key: string, kind?: string}>} The entries to draw.
+		 */
+		groupMenuEntries(entries) {
+			const out = []
+			let separator = null
+			let heading = null
+			for (const entry of entries) {
+				if (entry.kind === 'separator') {
+					// A rule ends the group before it: a heading not yet followed
+					// by an entry is dropped with it.
+					separator = entry
+					heading = null
+					continue
+				}
+				if (entry.kind === 'heading') {
+					heading = entry
+					continue
+				}
+				if (separator && out.length > 0) {
+					out.push(separator)
+				}
+				if (heading) {
+					out.push(heading)
+				}
+				separator = null
+				heading = null
+				out.push(entry)
+			}
+			return out
+		},
+
+		/**
+		 * An in-app link of the header's Actions menu was clicked: a plain click
+		 * goes through the router (a modified click is left to the browser),
+		 * and the entry is reported as a header action, as the actions bar does.
+		 *
+		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
+		 * @param {{key: string, link: object}} entry The menu entry.
+		 * @param {MouseEvent} event The click.
+		 * @return {void}
+		 */
+		onHeaderMenuLinkClick(entry, event) {
+			if (isModifiedClick(event)) {
+				return
+			}
+			followItemActionLink(event, entry.link, this.$router)
+			this.$emit('header-action', { action: entry.key, id: entry.key })
 		},
 
 		/**