@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -452,6 +452,7 @@
 			:layout="section.layout"
 			:editable="section.editable"
 			:columns="columns"
+			:columnOpts="gridColumnOpts"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
 			:float="gridFloat"
@@ -933,7 +934,8 @@ import { normalizeLook } from '../../composables/useLook.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
-import { compareVisibleWhen, readVisibleWhenValue } from '../../utils/visibleWhen.js'
+import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
+import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
@@ -2082,6 +2084,22 @@ export default {
 			return this.compactDisplayLayout(visible)
 		},
 
+		/**
+		 * The responsive columns of the grid. Under the board look a phone gets
+		 * one column: below 640px the widgets stack in reading order (top to
+		 * bottom, then left to right) instead of squeezing six columns into
+		 * 150px. Without the board look the grid keeps its fixed columns.
+		 *
+		 * @return {object|null} GridStack `columnOpts`, or null.
+		 * @spec openspec/changes/screens-dashboard-phone/specs/dashboard-phone/spec.md#requirement-a-board-dashboard-stacks-on-a-phone
+		 */
+		gridColumnOpts() {
+			if (!this.isBoardLook) {
+				return null
+			}
+			return { columnMax: this.columns, breakpoints: [{ w: 640, c: 1 }], layout: 'list', breakpointForWindow: true }
+		},
+
 		/**
 		 * The layout this page renders: the user's arrangement when they have
 		 * one, the manifest otherwise.
@@ -2256,6 +2274,10 @@ export default {
 			const items = []
 			for (const id of ids) {
 				if (this.getWidgetDef(id) || this.hasWidgetSlot(id)) {
+					// A tile a page control hides surrenders its cell.
+					if (!this.gridEditable && this.isHiddenByWorkspace(id)) {
+						continue
+					}
 					items.push({ widgetId: id })
 				} else if (process.env.NODE_ENV !== 'production') {
 					// eslint-disable-next-line no-console
@@ -3401,7 +3423,8 @@ export default {
 			const layout = content.layout || props.layout || ''
 			const title = layout === 'attention' ? (content.title || props.title || '') : ''
 			return {
-				text: content.text || props.text || title || '',
+				// A banner with only a bold `lead` has words to show too.
+				text: content.text || props.text || content.lead || props.lead || title || '',
 				visibleWhen: (def && def.visibleWhen) || content.visibleWhen || props.visibleWhen || null,
 				layout,
 			}
@@ -3435,6 +3458,11 @@ export default {
 			if (!visibleWhen) {
 				return false
 			}
+			// A workspace condition (a page control's choice) is answered at
+			// once from the reactive bag; nothing is fetched for it.
+			if (isWorkspaceCondition(visibleWhen)) {
+				return !evaluateWorkspaceCondition(visibleWhen, this.workspaceContext)
+			}
 			const outcome = this.widgetConditionOutcome[item.widgetId]
 			if (outcome && outcome.failed === true && layout === 'attention' && this.isBannerDef(def)) {
 				return false
@@ -3442,6 +3470,23 @@ export default {
 			return !outcome || outcome.met !== true
 		},
 
+		/**
+		 * Whether a page control (a workspace condition on `visibleWhen`)
+		 * hides this widget right now. Other conditions are not looked at.
+		 *
+		 * @param {string} widgetId The widget id.
+		 * @return {boolean} True when the widget must not draw.
+		 * @spec openspec/changes/screens-page-lenses/specs/page-lenses/spec.md#requirement-a-widget-can-be-shown-by-a-workspace-value
+		 */
+		isHiddenByWorkspace(widgetId) {
+			const def = this.getWidgetDef(widgetId)
+			if (!def || !def.type) {
+				return false
+			}
+			const { visibleWhen } = this.widgetDisplayConfig(def)
+			return isWorkspaceCondition(visibleWhen) && !evaluateWorkspaceCondition(visibleWhen, this.workspaceContext)
+		},
+
 		/**
 		 * Evaluate every conditional widget's `visibleWhen` into
 		 * `widgetConditionOutcome` — the verdict AND the raw field value,
@@ -3464,7 +3509,8 @@ export default {
 		async evaluateWidgetConditions() {
 			const defs = [...(this.widgets || []), ...this.normalizedViews.flatMap((view) => view.widgets)]
 			const conditional = defs.filter((def) => def && def.id && def.type
-				&& this.widgetDisplayConfig(def).visibleWhen)
+				&& this.widgetDisplayConfig(def).visibleWhen
+				&& !isWorkspaceCondition(this.widgetDisplayConfig(def).visibleWhen))
 			// Skip when the CONDITIONAL SET is unchanged: the deep `widgets`
 			// watch fires on any def edit, but only an added/removed/edited
 			// predicate warrants refetching every conditional endpoint.
@@ -3484,8 +3530,13 @@ export default {
 				const cond = this.widgetDisplayConfig(def).visibleWhen
 				let outcome
 				try {
-					const value = await readVisibleWhenValue(cond)
+					// `sink` keeps the first row of a source query, for a banner that names it.
+					const sink = {}
+					const value = await readVisibleWhenValue(cond, undefined, sink)
 					outcome = { met: compareVisibleWhen(value, cond.op || 'eq', cond.value), value }
+					if (sink.row) {
+						outcome.row = sink.row
+					}
 				} catch (error) {
 					// Fail-safe: not met. But the failure is kept, and said
 					// out loud: a failed count and "nothing to report" look
@@ -3985,6 +4036,11 @@ export default {
 			const def = this.getWidgetDef(item.widgetId)
 			const value = item.showTitle !== undefined ? item.showTitle : def?.showTitle
 			if (value === undefined || value === null) {
+				// A banner that names no title draws no title row: it used to show
+				// its widget id ("attention-first") as the card title.
+				if (this.isBannerDef(def) && !item.customTitle && !def?.customTitle && !def?.title) {
+					return false
+				}
 				return !this.isCardWidget(item)
 			}
 			return value !== false
@@ -4093,7 +4149,12 @@ export default {
 				return item.headerLink
 			}
 			const def = this.getWidgetDef(item.widgetId)
-			return (def?.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null
+			if (def?.headerLink && typeof def.headerLink === 'object') {
+				return def.headerLink
+			}
+			// Last, what the widget's own content asks for (`headerLink`, or the
+			// `viewAllRoute` / `viewAllLabel` of the tasks widget).
+			return contentHeaderLink(item?.content) || contentHeaderLink(def?.content)
 		},
 
 		/**
@@ -4842,6 +4903,18 @@ export default {
 .cn-dashboard-page__content-item {
 	width: 100%;
 }
+/* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
+   are 44px: the widget Actions menu and the KPI tiles. */
+@media (max-width: 640px) {
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .action-item__menutoggle),
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .button-vue) {
+		min-height: 44px;
+	}
+
+	.cn-dashboard-page--board .cn-dashboard-page__kpi-cell {
+		min-height: 44px;
+	}
+}
 </style>
 
 <!-- Unscoped, anchored on the stable `data-testid` NcActions renders on both

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,6 +130,7 @@
 								col.class || '',
 								pinClass(leadingCount + colIndex),
 								isGrowColumn(col) ? 'cn-table-col--grow' : '',
+								colIndex === 0 ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -320,6 +321,7 @@
 									:formatterOptions="col.formatterOptions || null"
 									:widget="col.widget || null"
 									:widgetProps="col.widgetProps || undefined"
+									:secondary="col.widget === 'avatar' ? secondaryValue(row, col) : ''"
 									:format="columnFormat(col)"
 									:row="row"
 									:rowKey="rowKey" />
@@ -329,7 +331,7 @@
 							     of the row. Lets one column read "title" over "number ·
 							     requester" without a custom cell. -->
 							<span
-								v-if="secondaryValue(row, col)"
+								v-if="col.widget !== 'avatar' && secondaryValue(row, col)"
 								class="cn-table-cell__secondary"
 								data-testid="cn-cell-secondary">{{ secondaryValue(row, col) }}</span>
 							<!-- A row that entered a file-content search through an attached
@@ -1764,17 +1766,6 @@ export default {
 			return (col && typeof col.format === 'object') ? col.format : null
 		},
 
-		/**
-		 * Value to render in a cell. For a column that declares `aggregate`
-		 * (a count of related objects), returns the cached count once
-		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
-		 * if it failed / there's nothing to count). Otherwise the row's
-		 * property value via `getCellValue`.
-		 *
-		 * @param {object} row The row data.
-		 * @param {object} col The column definition.
-		 * @return {unknown} The value handed to the slot / CnCellRenderer.
-		 */
 		/**
 		 * The secondary line of a cell, from `col.secondary`: a function is
 		 * called with the row; a string with `{field}` placeholders is a
@@ -1805,6 +1796,21 @@ export default {
 			return asText(this.getCellValue(row, spec))
 		},
 
+		/**
+		 * Value to render in a cell. For a column that declares `aggregate`
+		 * (a count of related objects), returns the cached count once
+		 * `loadAggregates()` has resolved it (or `'…'` while pending, `'—'`
+		 * if it failed / there's nothing to count). A count of zero reads as
+		 * `aggregate.zeroLabel` when the column sets one ("None", which the
+		 * app's `cnTranslate` turns into "Geen" as the boards draw it); without
+		 * it the cell shows `0` as before. Otherwise the row's property value
+		 * via `getCellValue`.
+		 *
+		 * @spec openspec/changes/aggregate-zero-label/specs/aggregate-zero-label/spec.md#requirement-a-count-column-can-name-zero
+		 * @param {object} row The row data.
+		 * @param {object} col The column definition.
+		 * @return {unknown} The value handed to the slot / CnCellRenderer.
+		 */
 		cellValue(row, col) {
 			if (col && col.aggregate) {
 				const cached = this.aggregateValues[String(row[this.rowKey])]
@@ -1812,6 +1818,10 @@ export default {
 				if (v === undefined) {
 					return this.aggregateLoading ? '…' : '—'
 				}
+				const zeroLabel = col.aggregate.zeroLabel
+				if ((v === 0 || v === '0') && typeof zeroLabel === 'string' && zeroLabel !== '') {
+					return typeof this.cnTranslate === 'function' ? this.cnTranslate(zeroLabel) : zeroLabel
+				}
 				return v
 			}
 			return this.getCellValue(row, col.key)

package/src/components/CnDetailPage/CnDetailPage.md

@@ -422,7 +422,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `quickActions` | Array | `[]` | At most three always visible header buttons. |
 | `actionsMenu` | Object \| null | `null` | `{ showRefresh?, showHelpLinks?, label? }` for the overflow menu. |
 | `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. |
-| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. |
+| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. Instead of `field`: `text` (a constant) or `countFrom` + `countLabel` (a count of a related list). |
 | `statusPill` | Object \| null | `null` | A second pill, same shape. |
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
 | `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -379,7 +379,7 @@
 					:showDocumentation="showDocumentation && menuShowsHelpLinks"
 					:actionsMenuLabel="boardMenuLabel"
 					:variant="isBoard ? 'secondary' : undefined"
-					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread"
+					:hasPrimaryItems="headerMenuGroups.length > 0 || showMarkUnread || showOpenSidebar"
 					:documentationUrl="documentationUrl"
 					:docsAnchor="resolvedPageId"
 					:documentationLabel="documentationLabel || undefined"
@@ -390,7 +390,7 @@
 					testidBase="cn-detail-page"
 					@refresh="onHeaderRefresh"
 					@requestFeature="onHeaderRequestFeature">
-					<template v-if="headerMenuGroups.length || showMarkUnread" #primary-items>
+					<template v-if="headerMenuGroups.length || showMarkUnread || showOpenSidebar" #primary-items>
 						<!-- One block per group. A page that groups nothing has
 						     a single captionless group, and renders exactly the
 						     flat list it always did. -->
@@ -449,6 +449,20 @@
 							</template>
 							{{ markUnreadLabel }}
 						</NcActionButton>
+						<!-- Board look: the sidebar's own open toggle is hidden (it sat
+						     over the header's last button, where the board draws none), so
+						     the menu opens it. -->
+						<NcActionButton
+							v-if="showOpenSidebar"
+							key="open-sidebar"
+							data-testid="cn-detail-page-open-sidebar"
+							:closeAfterClick="true"
+							@click="openSidebar">
+							<template #icon>
+								<DockRight :size="20" />
+							</template>
+							{{ openSidebarLabel }}
+						</NcActionButton>
 						<!-- Divides the page's own actions from the help links
 						     below. With the help links switched off there is
 						     nothing below to divide from. -->
@@ -745,7 +759,7 @@
 				:layout="section.layout"
 				:editable="section.editable"
 				:columns="12"
-				:columnOpts="columnOpts"
+				:columnOpts="bodyColumnOpts"
 				class="cn-detail-page__grid"
 				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
@@ -1191,6 +1205,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
+import DockRight from 'vue-material-design-icons/DockRight.vue'
 import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import FileQuestionOutline from 'vue-material-design-icons/FileQuestionOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
@@ -1231,12 +1246,15 @@ import {
 	groupMenuEntries,
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
+	pillCountSource,
+	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
 import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
@@ -1292,6 +1310,35 @@ const DEFAULT_DETAIL_COLUMN_OPTS = Object.freeze({
 	breakpointForWindow: false,
 })
 
+/**
+ * Where the default table stacks when a side column sits beside the body grid.
+ *
+ * The side column takes about 320px, so the grid it leaves is far narrower than
+ * the page: 790px at a 1100px window. Stacking that at 1000px made a row of
+ * small tiles (a KPI row of 5 or 6 stat tiles) impossible beside a side column.
+ * 1000px exists to keep a `gridWidth: 3` side PANEL inside the grid readable; a
+ * page with a real side column has no such panel, and 12 columns at 600px is
+ * still 50px a column, enough for a tile. Below 600px it stacks as before.
+ */
+const SIDE_COLUMN_STACK_WIDTH = 600
+
+/**
+ * Whether `opts` is the untouched default table, so a page that passed its own
+ * `columnOpts` keeps exactly what it asked for.
+ *
+ * @param {object|null} opts The `columnOpts` value.
+ * @return {boolean}
+ */
+function isDefaultColumnOpts(opts) {
+	const breakpoints = opts && opts.breakpoints
+	return !!opts
+		&& opts.columnMax === DEFAULT_DETAIL_COLUMN_OPTS.columnMax
+		&& Array.isArray(breakpoints)
+		&& breakpoints.length === 1
+		&& breakpoints[0].w === DEFAULT_DETAIL_COLUMN_OPTS.breakpoints[0].w
+		&& breakpoints[0].c === 1
+}
+
 /**
  * Event-bus channel a page-level refresh is announced on. The page's own
  * Actions menu emits it, the manifest `refresh` / `api-call` actions bump it,
@@ -1408,6 +1455,7 @@ export default {
 		CnSummaryAggregates,
 		CnDetailHeaderChips,
 		CnFollowToggle,
+		DockRight,
 		EyeOffOutline,
 		CnRelatedCollections,
 		CnBodySections,
@@ -2393,9 +2441,13 @@ export default {
 		 * A pill above the title saying what kind of record this is
 		 * (manifest `config.typePill`): `{ field, colorMap?, labels?, variant? }`.
 		 * Rendered through `CnStatusBadge`; `colorMap` is keyed on the field's
-		 * raw value, `labels` maps a raw value to the text to show.
+		 * raw value, `labels` maps a raw value to the text to show. Instead of
+		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
+		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
+		 * with `{count}`), a count of a related list ("1 lopende zaak") that
+		 * shows nothing at 0.
 		 *
-		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -2747,6 +2799,10 @@ export default {
 
 	data() {
 		return {
+			/** 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. */
+			pillCountSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
 			readStateSentFor: '',
 			/** Whether the user is arranging the chosen view (`userLayout`). */
@@ -3259,12 +3315,25 @@ export default {
 		headerPills() {
 			return [['type', this.typePill], ['status', this.statusPill]]
 				.map(([key, config]) => {
-					const pill = resolvePill(config, this.resolvedObject)
+					const pill = pillCountSource(config)
+						? resolveCountPill(config, this.pillCounts[key], (text) => this.effectiveTranslate(text))
+						: resolvePill(config, this.resolvedObject)
 					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
 				})
 				.filter(Boolean)
 		},
 
+		/**
+		 * What the count pills depend on: the record id and the lists they
+		 * count. A change counts again.
+		 *
+		 * @return {string} The key.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		pillCountKey() {
+			return JSON.stringify([this.objectId, pillCountSource(this.typePill), pillCountSource(this.statusPill)])
+		},
+
 		/**
 		 * The widget the header holds (`headerWidget`): the definition in
 		 * `widgets` with that id, or null without the key or a match.
@@ -3311,6 +3380,20 @@ export default {
 				.map(({ widget }) => widget)
 		},
 
+		/**
+		 * The `columnOpts` the body grid gets: the default table stacks at 1000px
+		 * of grid width, or at 600px when a side column narrows the grid. An
+		 * explicit `columnOpts` prop is passed through untouched.
+		 *
+		 * @return {object|null} The column options.
+		 */
+		bodyColumnOpts() {
+			if (!this.showsSideColumn || !isDefaultColumnOpts(this.columnOpts)) {
+				return this.columnOpts
+			}
+			return { ...this.columnOpts, breakpoints: [{ w: SIDE_COLUMN_STACK_WIDTH, c: 1 }] }
+		},
+
 		/**
 		 * Whether the side column renders.
 		 *
@@ -3842,6 +3925,22 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * Whether the header menu offers "Open sidebar": the board look, where the
+		 * sidebar's own toggle is hidden, on a page whose sidebar is active and
+		 * closed.
+		 *
+		 * @return {boolean}
+		 */
+		showOpenSidebar() {
+			return this.isBoard && this.hasExternalSidebar && this.sidebarActive && this.objectSidebarState.open !== true
+		},
+
+		/** @return {string} Label of the Open sidebar entry. */
+		openSidebarLabel() {
+			return t('nextcloud-vue', 'Open sidebar')
+		},
+
 		/** @return {string} Label of the Mark as unread entry. */
 		markUnreadLabel() {
 			return t('nextcloud-vue', 'Mark as unread')
@@ -4337,6 +4436,14 @@ export default {
 	},
 
 	watch: {
+		// The header's count pills count again for another record or other lists.
+		pillCountKey: {
+			immediate: true,
+			handler() {
+				this.refreshPillCounts()
+			},
+		},
+
 		// Opening a record marks it read, once, after its data has rendered.
 		readStateDue: {
 			immediate: true,
@@ -4544,6 +4651,17 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Open the object sidebar through the shared channel.
+		 *
+		 * @return {void}
+		 */
+		openSidebar() {
+			if (this.objectSidebarState) {
+				this.objectSidebarState.open = true
+			}
+		},
+
 		/**
 		 * Start or finish arranging the chosen view. Finishing stores the
 		 * arrangement of every view the user moved, once.
@@ -4754,6 +4872,33 @@ export default {
 			}
 		},
 
+		/**
+		 * Count the lists behind the header's count pills (`countFrom`): one
+		 * list request each (`_limit=1`, the `total`). A failed count, or a
+		 * record without an id yet, shows no pill.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		async refreshPillCounts() {
+			const pills = [['type', this.typePill], ['status', this.statusPill]]
+				.map(([key, config]) => [key, pillCountSource(config)])
+				.filter(([, source]) => source)
+			const seq = ++this.pillCountSeq
+			if (pills.length === 0 || this.objectId === null || this.objectId === undefined || this.objectId === '') {
+				this.pillCounts = {}
+				return
+			}
+			const ctx = { objectId: this.objectId, object: this.resolvedObject || undefined }
+			const counts = {}
+			await Promise.all(pills.map(async ([key, source]) => {
+				counts[key] = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null)
+			}))
+			if (seq === this.pillCountSeq) {
+				this.pillCounts = counts
+			}
+		},
+
 		/**
 		 * A `cn:page:refresh` reached the page — re-read the object so every
 		 * object-bound widget re-renders from what the backend now holds.
@@ -4768,6 +4913,7 @@ export default {
 		 * @return {void}
 		 */
 		onPageRefreshBus(payload) {
+			this.refreshPillCounts()
 			if (!this.hasSchemaDrivenFetch) {
 				return
 			}

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -169,10 +169,28 @@
 			:showActions="actionsShown || catalogAddEnabled"
 			:showRefresh="false"
 			:showRequestFeature="false"
+			:headerLink="rendererHeader.link"
 			class="cn-detail-page__catalog-card">
 			<template v-if="widget.icon" #title-icon>
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
+			<!-- A renderer that reports its own header (`header` event:
+			     `{ link, note }`, e.g. record-list's "3 in totaal"). -->
+			<template v-if="rendererHeader.note || rendererHeader.action" #actions>
+				<span
+					v-if="rendererHeader.note"
+					class="cn-detail-page__catalog-note"
+					data-testid="cn-detail-widget-header-note">{{ rendererHeader.note }}</span>
+				<button
+					v-if="rendererHeader.action"
+					type="button"
+					class="cn-detail-page__catalog-action"
+					data-testid="cn-detail-widget-header-action"
+					@click="rendererHeader.action.run()">
+					<CnIcon v-if="rendererHeader.action.icon" :name="rendererHeader.action.icon" :size="16" />
+					{{ rendererHeader.action.label }}
+				</button>
+			</template>
 			<template v-if="catalogAddEnabled" #action-items>
 				<NcActionButton @click="invokeCatalogAdd">
 					<template #icon>
@@ -185,6 +203,7 @@
 				:is="renderer"
 				ref="renderer"
 				v-bind="rendererProps"
+				@header="onRendererHeader"
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
@@ -534,6 +553,17 @@ export default {
 		}
 	},
 
+	data() {
+		return {
+			/**
+			 * The card header a content-only renderer reports through its
+			 * `header` event (screens-relation-pages): a link and a note,
+			 * with the list's total already filled in.
+			 */
+			rendererHeader: { link: null, note: '', action: null },
+		}
+	},
+
 	computed: {
 		/**
 		 * Whether the caller owns the title and card.
@@ -992,6 +1022,19 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Take the header a content-only renderer reports.
+		 *
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null}} header The header parts.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
+		 */
+		onRendererHeader(header) {
+			const link = header && header.link && typeof header.link === 'object' ? header.link : null
+			const note = header && typeof header.note === 'string' ? header.note : ''
+			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
+			this.rendererHeader = { link, note, action }
+		},
+
 		/**
 		 * A manifest label through the host's translate; '' stays ''.
 		 *
@@ -1110,6 +1153,29 @@ export default {
 </script>
 
 <style scoped>
+.cn-detail-page__catalog-action {
+	align-items: center;
+	background: var(--color-primary-element-light);
+	border: 0;
+	border-radius: 16px;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	cursor: pointer;
+	display: inline-flex;
+	font: inherit;
+	font-size: 13px;
+	font-weight: 700;
+	gap: 6px;
+	min-height: 32px;
+	padding: 0 14px;
+	white-space: nowrap;
+}
+
+.cn-detail-page__catalog-note {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
+
 .cn-detail-widget-host,
 .cn-detail-widget-host > * {
 	height: 100%;

package/src/components/CnDocumentReviewList/CnDocumentReviewWidget.vue

@@ -31,7 +31,7 @@ import { readPath } from '../../utils/readPath.js'
  * Renders CnDocumentReviewList from a list on the bound record:
  * `content: { field, title?, statusField?, statuses?, rowAction?: { label, route } }`.
  * A row action with a `route` opens that route with the row's key as `id`.
- * Resolved by its registry key, not exported.
+ * Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnDocumentReviewWidget',

package/src/components/CnFacetSidebar/CnFacetSidebar.vue

@@ -62,7 +62,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextField } from '@nextcloud/vue'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { filtersFromSchema } from '../../utils/schema.js'
 
 /**
@@ -175,12 +175,12 @@ export default {
 
 		getFilterOptions(filter) {
 			// Use facet data if available (live values with counts)
-			const facet = this.facetData[filter.key]
-			if (facet?.values?.length > 0) {
-				return facet.values.map((v) => ({
-					id: v.value,
-					label: facetOptionLabel(v),
-				}))
+			const live = facetOptions(
+				this.facetData[filter.key],
+				(count) => t('nextcloud-vue', 'No value ({count})', { count }),
+			)
+			if (live !== null) {
+				return live
 			}
 			// Fall back to static enum options from schema
 			return filter.options || []