@conduction/nextcloud-vue 2.148.0 → 2.149.0

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -165,13 +165,28 @@
 				</NcButton>
 			</div>
 		</div>
-		<ul v-else class="cn-field-list-widget__rows">
+		<ul v-else class="cn-field-list-widget__rows" :class="{ 'cn-field-list-widget__rows--options': isOptions }">
 			<li
 				v-for="row in rows"
 				:key="row.key"
 				class="cn-field-list-widget__row"
-				:data-testid="`cn-field-list-row-${row.key}`">
+				:draggable="canReorder ? 'true' : undefined"
+				:data-testid="`cn-field-list-row-${row.key}`"
+				@dragstart="dragFrom = row.index"
+				@dragover.prevent
+				@drop.prevent="dropOn(row.index)">
 				<div class="cn-field-list-widget__line">
+					<!-- `variant: "options"`: a grip that moves the option, by drag or with the arrow keys. -->
+					<button
+						v-if="canReorder"
+						type="button"
+						class="cn-field-list-widget__grip"
+						:aria-label="moveLabel(row)"
+						:data-testid="`cn-field-list-grip-${row.key}`"
+						@keydown.up.prevent="move(row.index, -1)"
+						@keydown.down.prevent="move(row.index, 1)">
+						<DragVertical :size="16" />
+					</button>
 					<span v-if="row.initials" class="cn-field-list-widget__avatar" aria-hidden="true">{{ row.initials }}</span>
 					<span class="cn-field-list-widget__main">
 						<a
@@ -187,6 +202,7 @@
 						:label="row.pill.label"
 						:variant="row.pill.variant"
 						size="small" />
+					<span v-if="row.code" class="cn-field-list-widget__code" :data-testid="`cn-field-list-code-${row.key}`">{{ row.code }}</span>
 					<span v-if="row.aside" class="cn-field-list-widget__aside">{{ row.aside }}</span>
 					<NcButton
 						v-for="action in row.actions"
@@ -307,7 +323,9 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField } from '@nextcloud/vue'
+import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { formatBoardDate } from '../../utils/boardDate.js'
@@ -368,7 +386,7 @@ function rowHref(entry, spec) {
 export default {
 	name: 'CnFieldListWidget',
 
-	components: { CnStatusBadge, NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField },
+	components: { CnStatusBadge, DragVertical, NcActionButton, NcActions, NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect, NcTextField },
 
 	inject: {
 		cnTranslate: { default: () => (key) => key },
@@ -388,6 +406,7 @@ export default {
 		 * - `rowActions` — `[{ id, label, ariaLabel?, when?, placement?: 'band'|'inline', request: { method?, url, payload? } }]`, or `{ id, label, dialog, props }` to open a modal registered in the app registry with filled props (shown in `readOnly` too, since it writes nothing, and only when every token in `props` fills); tokens `@object.<field>`, `@objectId`, `@row.<field>`, `@index`. In the table variant `placement: 'inline'` draws the action as a button in the row instead of in the "..." menu; `ariaLabel` is a template filled from the row.
 		 * - `when` (row actions, `detail`) — `{ field: value }`, every field equal; or per field `{ eq?, neq?, set? }`, where a value `@row.<field>` (or `@<field>`) is another field of the same row: `{ deliveredRef: { set: true, neq: '@originalRef' } }`.
 		 * - `rowSource` — `{ url, path?, key }`: live per-row state merged by key.
+		 * - `variant: 'options'` — the rows as framed options (a field's choice list): a grip that moves the option by drag or with the arrow keys and saves the order, and a code chip from `code` (`{ path }` on an object option, or `{ field }`, a map on the record from a plain option to its code).
 		 * - `variant: 'table'` + `columns` — `[{ header, path, map?, format?, strong?, pill?, variantMap?, labelsFrom? }]` (a list value reads as its items joined; `labelsFrom` names an add field whose option labels word the values): rows as a table; a per-row "..." menu holds the row actions and remove; `detail` lines become a warning band under the table, with the row actions that have `placement: 'band'`.
 		 * - `add.trigger: 'button'`, `add.placement: 'header' | 'title' | 'footer'` — the add form opens from a button; `title` reports the button for the card's title row on the `header` event.
 		 * - `readOnly`, `hint`, `emptyText`.
@@ -436,6 +455,8 @@ export default {
 		return {
 			/** The list as last saved by this widget; null = read it off objectData. */
 			saved: null,
+			/** The place of the option being dragged, -1 while none is. */
+			dragFrom: -1,
 			/** Live per-row state from `rowSource`, by key. */
 			live: {},
 			draft: {},
@@ -500,10 +521,21 @@ export default {
 					copies: spec.detail && this.matches(entry, spec.detail.when) ? this.copiesOf(entry, spec.detail.copy) : [],
 					actions: this.actionsFor(entry, index),
 					cells: this.isTable ? this.cellsOf(entry) : [],
+					code: this.isOptions ? this.codeOf(item, entry) : '',
 				}
 			})
 		},
 
+		/** Whether the rows are drawn as framed options (`variant: 'options'`): a grip, the name, a code chip. */
+		isOptions() {
+			return this.content.variant === 'options'
+		},
+
+		/** Whether the options can be moved: the options look on a list that saves. */
+		canReorder() {
+			return this.isOptions && !this.readOnly && Boolean(this.content.field)
+		},
+
 		/** Whether the list is read-only. */
 		readOnly() {
 			return this.content.readOnly === true
@@ -1300,6 +1332,73 @@ export default {
 		 * @param {object} row The row.
 		 * @return {Promise<void>}
 		 */
+		/**
+		 * An option's code chip: `content.code.path` on an object option, or the
+		 * value's entry in the record's map at `content.code.field` for a plain
+		 * one ("Woning" -> "WON"); '' for none.
+		 *
+		 * @param {unknown} item The stored option.
+		 * @param {object} entry The option as a row reads it.
+		 * @return {string}
+		 */
+		codeOf(item, entry) {
+			const spec = this.content.code
+			if (!spec || typeof spec !== 'object') {
+				return ''
+			}
+			if (item && typeof item === 'object' && typeof spec.path === 'string') {
+				return String(readPath(item, spec.path) ?? '')
+			}
+			const map = typeof spec.field === 'string' ? readPath(this.objectData || {}, spec.field) : null
+			const code = map && typeof map === 'object' ? map[String(entry.value ?? item)] : ''
+			return typeof code === 'string' ? code : ''
+		},
+
+		/**
+		 * The grip's accessible name.
+		 *
+		 * @param {object} row The row.
+		 * @return {string}
+		 */
+		moveLabel(row) {
+			return t('nextcloud-vue', 'Move {item}, use the arrow keys', { item: row.title })
+		},
+
+		/**
+		 * Drop the dragged option on this one's place.
+		 *
+		 * @param {number} to The place it lands on.
+		 * @return {Promise<void>}
+		 */
+		async dropOn(to) {
+			const from = this.dragFrom
+			this.dragFrom = -1
+			if (from < 0 || from === to) {
+				return
+			}
+			await this.move(from, to - from)
+		},
+
+		/**
+		 * Move an option by a number of places and save the list.
+		 *
+		 * @param {number} from Its place.
+		 * @param {number} by How far, negative is up.
+		 * @return {Promise<void>}
+		 */
+		async move(from, by) {
+			const to = from + by
+			if (!this.canReorder || to < 0 || to >= this.items.length) {
+				return
+			}
+			await this.save((stored) => {
+				const list = [...stored]
+				const [moved] = list.splice(from, 1)
+				list.splice(to, 0, moved)
+				return list
+			}, this.keyOf(this.items[from], from))
+		},
+
 		async remove(row) {
 			await this.save((stored) => stored.filter((item, index) => this.keyOf(item, index) !== row.key), row.key)
 		},
@@ -1409,6 +1508,35 @@ export default {
 	padding-top: 0;
 }
 
+/* `variant: "options"` (DqZaaktypeVelden Keuzelijst): each option a framed
+   row, 6px apart, with a grip before its name and its code in a chip. */
+.cn-field-list-widget__rows--options {
+	gap: 6px;
+}
+
+.cn-field-list-widget__rows--options .cn-field-list-widget__row,
+.cn-field-list-widget__rows--options .cn-field-list-widget__row:first-child {
+	padding: 6px 12px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-element, 8px);
+}
+
+.cn-field-list-widget__grip {
+	flex: none;
+	display: inline-flex;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-text-maxcontrast);
+	cursor: grab;
+}
+
+.cn-field-list-widget__code {
+	flex: none;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-field-list-widget__line {
 	display: flex;
 	align-items: center;

package/src/components/CnFlowRunsWidget/CnFlowRunsWidget.vue

@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-flow-runs-widget">
+	<div class="cn-flow-runs-widget" :class="{ 'cn-flow-runs-widget--pills': pills }">
 		<!-- One quiet line on failure, never a leaked axios status string
 		     (ADR-062). The real error goes to the console. -->
 		<p v-if="error" class="cn-flow-runs-widget__error">
@@ -26,7 +26,7 @@
 			{{ emptyLabel }}
 		</p>
 		<template v-else>
-			<p v-if="rows.length === 0" class="cn-flow-runs-widget__empty">
+			<p v-if="rows.length === 0 && content.quietLineWithHistory !== false" class="cn-flow-runs-widget__empty">
 				{{ emptyLabel }}
 			</p>
 			<ul v-else class="cn-flow-runs-widget__list">
@@ -42,6 +42,7 @@
 						:href="runHref(run) || undefined"
 						@click="onRowClick($event, run)">
 						<span
+							v-if="!pills"
 							class="cn-flow-runs-widget__dot"
 							:class="`cn-flow-runs-widget__dot--${run.status}`"
 							:title="statusLabel(run.status)" />
@@ -49,6 +50,12 @@
 							<span class="cn-flow-runs-widget__name">{{ run.flowName }}</span>
 							<span class="cn-flow-runs-widget__meta">{{ metaLine(run) }}</span>
 						</span>
+						<CnStatusBadge
+							v-if="pills"
+							class="cn-flow-runs-widget__pill"
+							:label="statusLabel(run.status)"
+							:variant="statusVariant(run.status)"
+							size="small" />
 						<span class="cn-flow-runs-widget__age">{{ ageLabel(run) }}</span>
 					</component>
 				</li>
@@ -62,7 +69,7 @@
 			     labelled section with a hollow dot and a muted name, so live
 			     and finished never rely on colour alone to tell apart. -->
 			<template v-if="showHistory">
-				<p class="cn-flow-runs-widget__history-title">
+				<p v-if="content.historyTitle !== false" class="cn-flow-runs-widget__history-title">
 					{{ tr('Earlier runs') }}
 				</p>
 				<p v-if="completedError" class="cn-flow-runs-widget__error">
@@ -81,6 +88,7 @@
 							:href="runHref(run) || undefined"
 							@click="onRowClick($event, run)">
 							<span
+								v-if="!pills"
 								class="cn-flow-runs-widget__dot cn-flow-runs-widget__dot--terminal"
 								:class="`cn-flow-runs-widget__dot--${run.status}`"
 								:title="statusLabel(run.status)" />
@@ -88,6 +96,12 @@
 								<span class="cn-flow-runs-widget__name">{{ run.flowName }}</span>
 								<span class="cn-flow-runs-widget__meta">{{ metaLine(run) }}</span>
 							</span>
+							<CnStatusBadge
+								v-if="pills"
+								class="cn-flow-runs-widget__pill"
+								:label="statusLabel(run.status)"
+								:variant="statusVariant(run.status)"
+								size="small" />
 							<span class="cn-flow-runs-widget__age">{{ ageLabel(run) }}</span>
 						</component>
 					</li>
@@ -106,9 +120,11 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import { computed, inject, ref } from 'vue'
 import { useEndpointSource } from '../../composables/useEndpointSource.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
+import { formatBoardDate } from '../../utils/boardDate.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
+import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
 /**
  * The OpenRegister endpoint that lists the caller's live flow runs.
@@ -197,6 +213,7 @@ export default {
 	name: 'CnFlowRunsWidget',
 
 	components: {
+		CnStatusBadge,
 		NcLoadingIcon,
 	},
 
@@ -231,6 +248,17 @@ export default {
 		 *   subject's finished runs render below it. Absent = today's org-wide
 		 *   widget, unchanged.
 		 * - `emptyText` — override for the "nothing running" line.
+		 * - `quietLineWithHistory` — `false` leaves out the "nothing running"
+		 *   line while the subject has finished runs to list.
+		 * - `historyTitle` — `false` leaves out the "Earlier runs" heading.
+		 * - `statusPill` — `true` shows the status as a pill on each row
+		 *   (no dot, and the meta line leaves the status out), rows ruled.
+		 * - `statusLabels` — words per status (`{ completed: 'Succeeded' }`),
+		 *   translated, over the built-in ones.
+		 * - `triggerLabels` — the meta line per trigger in words
+		 *   (`{ 'object.created': 'Started when the case was created' }`), translated.
+		 * - `age` — `'datetime'` shows when the run started ("3 okt, 14:32")
+		 *   instead of how long ago ("13d").
 		 * - `headerAction` — an action descriptor drawn in the card header
 		 *   (`{ label, icon?, ...action }`, "Flow uitvoeren"), reported through
 		 *   the `header` event and dispatched with the page's dispatcher; its
@@ -421,6 +449,11 @@ export default {
 			return this.tr('+{count} more').replace('{count}', String(this.hiddenCount))
 		},
 
+		/** Whether each row shows its status as a pill (`content.statusPill`). */
+		pills() {
+			return this.content.statusPill === true
+		},
+
 		/** The nothing-running line. */
 		emptyLabel() {
 			const override = this.content.emptyText
@@ -678,10 +711,29 @@ export default {
 		 * @return {string} The label.
 		 */
 		statusLabel(status) {
-			const key = STATUS_LABELS[status]
+			const own = this.content.statusLabels && this.content.statusLabels[status]
+			const key = (typeof own === 'string' && own !== '') ? own : STATUS_LABELS[status]
 			return key ? this.tr(key) : String(status || '')
 		},
 
+		/**
+		 * The pill tone of a status: finished well is success, failed is error,
+		 * anything still going is info.
+		 *
+		 * @param {string} status The run status.
+		 * @return {string} A CnStatusBadge variant.
+		 * @spec openspec/changes/flow-runs-ruled-with-pills/specs/cn-flow-runs-widget/spec.md
+		 */
+		statusVariant(status) {
+			if (status === 'completed') {
+				return 'success'
+			}
+			if (status === 'failed' || status === 'dead_letter') {
+				return 'error'
+			}
+			return status === 'stopped' ? 'default' : 'info'
+		},
+
 		/**
 		 * The secondary line: status, the step the run sits on, and what
 		 * triggered it — whichever of those the run actually carries.
@@ -690,7 +742,11 @@ export default {
 		 * @return {string} The meta line.
 		 */
 		metaLine(run) {
-			const parts = [this.statusLabel(run.status)]
+			const words = this.content.triggerLabels && this.content.triggerLabels[run.trigger]
+			if (typeof words === 'string' && words !== '') {
+				return this.tr(words)
+			}
+			const parts = this.pills ? [] : [this.statusLabel(run.status)]
 			if (run.step) {
 				parts.push(String(run.step))
 			}
@@ -714,6 +770,11 @@ export default {
 			if (Number.isFinite(started) === false) {
 				return ''
 			}
+			if (this.content.age === 'datetime') {
+				const at = new Date(started)
+				const pad = (value) => String(value).padStart(2, '0')
+				return `${formatBoardDate(at)}, ${pad(at.getHours())}:${pad(at.getMinutes())}`
+			}
 			const seconds = Math.max(0, Math.round((Date.now() - started) / 1000))
 			if (seconds < 60) {
 				return this.tr('now')
@@ -965,6 +1026,43 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name {
 	letter-spacing: 0.04em;
 }
 
+/* Status pills: each row ruled on top, the name over its meta line, the pill
+   and the start moment at the end, as the Dq case boards draw the Flows card. */
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row {
+	border-top: 1px solid var(--color-border);
+	border-bottom: none;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row-content {
+	flex-wrap: wrap;
+	gap: 6px 16px;
+	padding: 11px 0;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__body {
+	flex: 1 1 260px;
+	gap: 2px;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__name,
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__row--terminal .cn-flow-runs-widget__name {
+	font-size: 15px;
+	font-weight: 500;
+	color: var(--color-main-text);
+	white-space: normal;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__meta {
+	font-size: 13px;
+	white-space: normal;
+}
+
+.cn-flow-runs-widget--pills .cn-flow-runs-widget__age {
+	flex: 0 0 104px;
+	font-size: 13px;
+	text-align: end;
+}
+
 @keyframes cn-flow-runs-pulse {
 	0%, 100% { opacity: 1; }
 	50% { opacity: 0.35; }

package/src/components/CnFollowingWidgetHost/CnFollowingWidgetHost.vue

@@ -42,6 +42,8 @@ export default {
 		cnWidgetSelection: { from: WIDGET_SELECTION, default: null },
 		/** The host's translate (CnAppRoot provides `cnTranslate`), applied to the title before it is filled. */
 		cnTranslate: { default: () => (key) => key },
+		/** The app's named formatters (CnAppRoot provides `cnFormatters`), for a `{field|formatter}` token in the title. */
+		cnFormatters: { default: () => ({}) },
 	},
 
 	inheritAttrs: false,
@@ -93,7 +95,7 @@ export default {
 				return this.widget
 			}
 			const translated = this.cnTranslate(title)
-			return { ...this.widget, title: fillTemplate(translated, this.row) || translated.replace(/\s*\{[^}]*\}/g, '') }
+			return { ...this.widget, title: fillTemplate(translated, this.row, new Date(), { formatters: this.cnFormatters }) || translated.replace(/\s*\{[^}]*\}/g, '') }
 		},
 	},
 }

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -176,6 +176,8 @@ import CnNoteComposer from '../CnNoteComposer/CnNoteComposer.vue'
 import CnUserActionMenu from '../CnUserActionMenu/CnUserActionMenu.vue'
 import CnVisibilityChip from '../CnVisibilityChip/CnVisibilityChip.vue'
 import { useFileComments } from '../../composables/useFileComments.js'
+import { normalizeLook } from '../../composables/useLook.js'
+import { formatBoardDateTime } from '../../utils/fillTemplate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { initialsOf } from '../../utils/initials.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
@@ -248,6 +250,10 @@ export default {
 		Delete,
 	},
 
+	inject: {
+		cnLook: { default: 'nextcloud' },
+	},
+
 	props: {
 		/** OpenRegister register ID */
 		registerId: {
@@ -795,6 +801,10 @@ export default {
 			if (!dateStr) {
 				return ''
 			}
+			// The board look writes a note's moment as the boards do: "6 okt 11:10", the year only outside this year.
+			if (normalizeLook(this.cnLook) === 'board') {
+				return formatBoardDateTime(dateStr) || dateStr
+			}
 			try {
 				return new Date(dateStr).toLocaleString(userLocale(), {
 					year: 'numeric',

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -112,6 +112,11 @@
 						:row="object" />
 					<template v-else>{{ recordFootCell.text }}</template>
 				</span>
+				<!-- An empty footerCell keeps its place as a dash, as an empty table cell. -->
+				<span
+					v-else-if="recordFootCellDeclared"
+					class="cn-object-card__record-foot-cell cn-object-card__record-foot-cell--empty"
+					data-testid="cn-object-card-foot-cell-empty">—</span>
 				<span
 					v-if="recordDate"
 					class="cn-object-card__record-date"
@@ -589,6 +594,17 @@ export default {
 			return { text: part.text, tone }
 		},
 
+		/**
+		 * Whether the record layout names a `footerCell`, so an empty one
+		 * keeps its place.
+		 *
+		 * @spec openspec/changes/card-empty-footer-cell-dash/specs/card-empty-footer-cell-dash/spec.md#requirement-an-empty-footer-cell-reads-as-a-dash
+		 * @return {boolean}
+		 */
+		recordFootCellDeclared() {
+			return Boolean(this.recordLayout && this.recordLayout.footerCell)
+		},
+
 		/**
 		 * The footer's `footerCell` part, read as a meta part is (through the
 		 * page column it names), or null while it is empty.

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -860,7 +860,7 @@ export default {
 				// `secondary` (a second, muted line under the cell) rides
 				// along too: the table draws it, and dropping it here took the
 				// list rows' second line away (zuiddrecht-pixel-gaps-3).
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow', 'cellClass']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow', 'cellClass', 'emptyValue']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -61,7 +61,8 @@
 								:data-testid="`cn-record-list-sort-${col.key}`"
 								@click="toggleTableSort(col.key)">
 								{{ col.label }}
-								<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
+								<ChevronUp v-if="sortStateOf(col.key) === 'ascending'" class="cn-record-list__sort-mark" :size="14" />
+								<ChevronDown v-else class="cn-record-list__sort-mark" :size="14" />
 							</button>
 							<template v-else>
 								{{ col.label }}
@@ -575,7 +576,9 @@ import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import Check from 'vue-material-design-icons/Check.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
@@ -672,7 +675,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
+	components: { Check, ChevronDown, ChevronRight, ChevronUp, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -2269,20 +2272,6 @@ export default {
 			return this.tableSort.key === key && this.tableSort.dir ? this.tableSort.dir : 'none'
 		},
 
-		/**
-		 * The arrow after a sortable column's label.
-		 *
-		 * @param {string} key The column key.
-		 * @return {string} An up or down arrow, or '' while the column is not the sort.
-		 */
-		sortMarkOf(key) {
-			const state = this.sortStateOf(key)
-			if (state === 'ascending') {
-				return '▲'
-			}
-			return state === 'descending' ? '▼' : ''
-		},
-
 		/**
 		 * Sort the `table` by a column: ascending first, then descending.
 		 *
@@ -3312,7 +3301,7 @@ export default {
 }
 
 .cn-record-list__sort-mark {
-	font-size: 10px;
+	color: var(--color-text-maxcontrast);
 }
 
 .cn-record-list__head {
@@ -3321,8 +3310,14 @@ export default {
 	align-items: center;
 }
 
-.cn-record-list__head-filter {
+/* The funnel is a 22px control, as the boards draw it beside a head, not
+   NcActions' 34px trigger that made the head row 54px. */
+.cn-record-list__head-filter :deep(.button-vue) {
 	--button-size: 22px;
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	min-height: 22px;
 }
 
 .cn-record-list__table .cn-record-list__cell--end {
@@ -3413,11 +3408,16 @@ export default {
 	font-weight: 600;
 	height: 34px;
 	justify-content: center;
-	margin: 0;
 	padding: 0 14px;
 	text-decoration: none;
 }
 
+/* server.css gives every button `margin: 3px 3px 3px 0` at (0,2,1); the
+   doubled class outranks it. */
+.cn-record-list__action.cn-record-list__action {
+	margin: 0;
+}
+
 .cn-record-list__action:hover,
 .cn-record-list__action:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));

package/src/components/CnRegisterMapping/CnRegisterMapping.vue

@@ -1094,6 +1094,10 @@ export default {
 				const results = data.results || data
 				this.registers = Array.isArray(results) ? results : []
 				this.registersLoaded = true
+				// A configuration that arrived while the registers were loading
+				// skipped its schema read (the watcher waits for the registers),
+				// so read the mapped registers' schemas now.
+				this.mappedRegisterIds().forEach((id) => this.loadSchemasForRegister(id))
 			} catch (error) {
 				this.registersError = error.message || t('nextcloud-vue', 'The registers could not be loaded: {reason}', { reason: t('nextcloud-vue', 'no connection') })
 			} finally {

package/src/css/dialog.css

@@ -595,3 +595,20 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 		max-height: calc(100% - var(--cn-dialog-top, 88px) - 24px);
 	}
 }
+
+/* The chosen option's fields start 12px under its description, the label on
+   the normal line, as DqVolgendeStap draws "Opschorten": the row's 12px
+   bottom padding plus the cell's 8px gap and a 21px label line put them
+   11.6px lower (r31).
+   @spec openspec/changes/board-choice-card-fields-under-the-text/specs/dialog/spec.md */
+.cn-dialog-board .cn-choice-cards .cn-choice-cards__cell--with-details {
+	gap: 12px;
+}
+
+.cn-dialog-board .cn-choice-cards .cn-choice-cards__cell--with-details .cn-choice-cards__row {
+	padding-bottom: 0;
+}
+
+.cn-dialog-board .cn-transition-input-fields .cn-transition-input-fields__label {
+	line-height: normal;
+}