@conduction/nextcloud-vue 2.79.0 → 2.81.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="cn-index-page"
-		:class="lookClass"
+		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel }]"
 		data-testid="cn-index-page"
 		@keydown="onListKeydown">
 		<!-- Header — overridable via #header slot. CnPageHeader ALWAYS renders:
@@ -76,6 +76,20 @@
 			<slot name="below-header" />
 		</div>
 
+		<!-- KPI tiles above the list (`statRow`) and cards beside it
+		     (`sidePanel`), as DqTeamwachtrij and PqContracten
+		     (screens-index-stat-row). -->
+		<CnIndexPageWidgets
+			v-if="statRow && statRow.length > 0"
+			class="cn-index-page__stat-row"
+			variant="stat-row"
+			:widgets="statRow" />
+		<CnIndexPageWidgets
+			v-if="hasSidePanel"
+			class="cn-index-page__side-panel"
+			variant="side-panel"
+			:widgets="sidePanel" />
+
 		<!-- Actions bar -->
 		<CnActionsBar
 			:layout="isBoardLook ? 'board' : 'nextcloud'"
@@ -97,6 +111,7 @@
 			:viewMode="currentViewMode"
 			:showViewToggle="showViewToggle"
 			:availableViewModes="effectiveToggleModes"
+			:disabledViewModes="viewSwitchDisabledModes"
 			:cardsLabel="cardsLabel"
 			:tableLabel="tableLabel"
 			:listLabel="listLabel"
@@ -248,6 +263,31 @@
 					@update:activeIndex="onQuickFilterChange"
 					@update:selectedIndices="onQuickFilterMultiChange" />
 			</template>
+			<!-- Board look, `filterMenu` on a page with no filter sidebar: the
+			     board's Filter button, a menu of each enum column's values as
+			     toggleable filters. -->
+			<template v-if="boardFilterMenu" #filter-menu>
+				<NcActions
+					class="cn-actions-bar__filter-menu"
+					variant="secondary"
+					:forceMenu="true"
+					:menuName="t('nextcloud-vue', 'Filter')"
+					data-testid="cn-index-filter-menu">
+					<template #icon>
+						<Tune :size="16" />
+					</template>
+					<template v-for="field in filterableFields" :key="field.key">
+						<NcActionCaption :name="field.label" />
+						<NcActionCheckbox
+							v-for="val in field.values"
+							:key="`${field.key}-${val}`"
+							:modelValue="isFilterActive(field.key, val)"
+							@update:modelValue="toggleFilter(field.key, val)">
+							{{ val }}
+						</NcActionCheckbox>
+					</template>
+				</NcActions>
+			</template>
 		</CnActionsBar>
 
 		<!-- Quick edit: a few fields of one row, over the list, with the list
@@ -610,10 +650,10 @@
 					     the column menu lists every governed column as a visibility
 					     checkbox — compact, in-table alternatives to the sidebar. -->
 					<template
-						v-if="(filterMenu && filterableFields.length) || (columnMenu && governedColumns.length)"
+						v-if="(showHeaderFilterMenu) || (columnMenu && governedColumns.length)"
 						#actions-header>
 						<NcActions
-							v-if="filterMenu && filterableFields.length"
+							v-if="showHeaderFilterMenu"
 							:forceMenu="true"
 							:aria-label="t('nextcloud-vue', 'Filter')">
 							<template #icon>
@@ -953,12 +993,14 @@ 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 Tune from 'vue-material-design-icons/Tune.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import CnConfirmDialog from '../../dialogs/CnConfirmDialog.vue'
 import CnQuickEditDialog from '../../dialogs/CnQuickEditDialog.vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnFollowToggle from '../CnFollowToggle/CnFollowToggle.vue'
+import CnIndexPageWidgets from './CnIndexPageWidgets.vue'
 import { useContextMenu } from '../../composables/index.js'
 import { useLook } from '../../composables/useLook.js'
 import { copyKindsOf } from '../../composables/useObjectCopy.js'
@@ -1243,6 +1285,7 @@ export default {
 	name: 'CnIndexPage',
 
 	components: {
+		CnIndexPageWidgets,
 		CnBuildiqEditButton,
 		CnFollowToggle,
 		NcLoadingIcon,
@@ -1258,6 +1301,7 @@ export default {
 		DatabaseSearch,
 		Export,
 		FilterOutline,
+		Tune,
 		ViewColumnOutline,
 		NcCheckboxRadioSwitch,
 		CnPageHeader,
@@ -1439,7 +1483,6 @@ export default {
 			default: true,
 		},
 
-		// eslint-disable-next-line vue/no-unused-properties
 		/**
 		 * Draw this page in the `board` look (or `nextcloud`) whatever the app
 		 * does. Empty follows the `cnLook` CnAppRoot provides. Manifest key
@@ -1587,7 +1630,13 @@ export default {
 		 * `$route.params` just like the `filter` prop. The first tab with
 		 * `default:true` (else index 0) is active on mount; changing tabs
 		 * re-fetches at page 1. Omit (or `null`) → no tab strip, behaviour
-		 * unchanged.
+		 * unchanged. Under the board look a tab with `activeLabel` ("Pipeline:
+		 * Sales") adds a removable chip with that text to the Active line and
+		 * counts on the Filter badge while it is selected; removing the chip
+		 * goes back to the default tab. A tab can say `empty: "field"` (or a
+		 * list of fields) for the rows where the field has no value, and
+		 * `notEmpty` for the rows where it has one: it reads as the filter
+		 * `{ field: { isnull: true } }`.
 		 */
 		quickFilters: {
 			type: Array,
@@ -1958,6 +2007,22 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Board look: the segments the view switch draws, e.g. `['table',
+		 * 'cards', 'board', 'map']` as the boards do. A listed mode the page
+		 * can open is an ordinary segment; one it cannot (no board columns, no
+		 * map configured) is drawn disabled, named "<mode>: not available on
+		 * this list". Fed from `pages[].config.viewSwitch`. Ignored without the
+		 * board look, and absent the switch is as before.
+		 *
+		 * @type {Array<'table' | 'cards' | 'board' | 'map'>}
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitch: {
+			type: Array,
+			default: null,
+		},
+
 		/**
 		 * The board's configuration, mirroring the manifest `config.board`
 		 * block: `{ statusField, cardFields, swimlaneField }`. The board is
@@ -2644,6 +2709,35 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * KPI tiles above the list (manifest `config.statRow`): dashboard
+		 * widget definitions `{ id, type, title?, content }`, usually `stat`,
+		 * drawn in an auto-fit row (each at least 200px) in the listed order.
+		 * Types resolve like dashboard widgets: the app registry, then the
+		 * dashboard catalog. Empty by default.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-stat-row-above-the-list
+		 * @type {Array<object>}
+		 */
+		statRow: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Cards beside the list (manifest `config.sidePanel`): dashboard
+		 * widget definitions `{ id, type, title?, content, headerLink? }`
+		 * drawn in a 300px column right of the toolbar and the list. Empty
+		 * by default; below 1024px the column moves above the list.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @type {Array<object>}
+		 */
+		sidePanel: {
+			type: Array,
+			default: () => [],
+		},
+
 		/**
 		 * Where a row carries the actions the server says this caller may run
 		 * on it: a dotted path, read off the rows the list already fetched, so
@@ -2827,6 +2921,8 @@ export default {
 		 * Show a filter menu (funnel button) in the table header, above the
 		 * row-actions column. Its menu lists every enum/badge column's values as
 		 * toggleable facet filters — a compact alternative to the facet sidebar.
+		 * Under the board look, on a page with no filter sidebar, it is the
+		 * toolbar's labelled Filter button instead (row 1, before the view switch).
 		 * Fed from the manifest as `pages[].config.filterMenu`.
 		 */
 		filterMenu: {
@@ -3323,6 +3419,16 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the page draws cards beside its list (`sidePanel`).
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-side-panel-beside-the-list
+		 * @return {boolean}
+		 */
+		hasSidePanel() {
+			return Array.isArray(this.sidePanel) && this.sidePanel.length > 0
+		},
+
 		/**
 		 * The empty-state copy run through the host translate function
 		 * (the injected `cnTranslate`, identity by default). Only this
@@ -3695,6 +3801,21 @@ export default {
 			return Object.keys(this.mapConfig || {}).length > 0
 		},
 
+		/**
+		 * Board look: the modes `viewSwitch` lists that this page cannot open,
+		 * drawn as disabled segments.
+		 *
+		 * @return {Array<string>} The disabled modes.
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		viewSwitchDisabledModes() {
+			if (!this.isBoardLook || !Array.isArray(this.viewSwitch)) {
+				return []
+			}
+			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
+			return this.viewSwitch.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
+		},
+
 		/**
 		 * The base view-toggle segments (cards/table/list) passed to CnActionsBar.
 		 * Beta's explicit `viewModes` whitelist wins when set; otherwise the
@@ -5264,11 +5385,11 @@ export default {
 				return []
 			}
 			const props = this.effectiveSchema?.properties || {}
-			const chips = []
+			const chips = [...this.quickFilterActiveChips]
 			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
 				const values = (Array.isArray(raw) ? raw : [raw])
 					.filter((value) => value !== null && value !== undefined && value !== '')
-					.map((value) => String(value))
+					.map((value) => this.activeFilterValueLabel(key, value))
 				if (values.length === 0) {
 					continue
 				}
@@ -5278,6 +5399,87 @@ export default {
 			return chips
 		},
 
+		/**
+		 * The Active line's chips for the selected quick filters: one per
+		 * selected tab that declares an `activeLabel` ("Pipeline: Sales"), run
+		 * through the app's translate. A tab without one (an "All" tab) adds no
+		 * chip. The chip carries the tab's index so removing it can deselect it.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 * @return {Array<{key: string, label: string, quickFilterIndex: number}>}
+		 */
+		quickFilterActiveChips() {
+			const tabs = this.tabStripEntries || []
+			if (tabs.length === 0) {
+				return []
+			}
+			const indices = this.quickFilterMultiple
+				? (this.selectedQuickFilterIndices || [])
+				: [this.activeQuickFilterIndex]
+			return indices
+				.filter((index) => typeof index === 'number' && tabs[index] && typeof tabs[index].activeLabel === 'string' && tabs[index].activeLabel !== '')
+				.map((index) => ({ key: `quick-filter:${index}`, label: this.cnTranslate(tabs[index].activeLabel), quickFilterIndex: index }))
+		},
+
+		/**
+		 * Filter keys over a reference property that the Active line must name,
+		 * and that no reference column resolves already: one spec each, with the
+		 * referenced register and schema off the page schema's `$ref`.
+		 *
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 * @return {Array<{key: string, labelField: string, register: string, schema: string}>}
+		 */
+		activeFilterRefSpecs() {
+			if (!this.isBoardLook || !this.effectiveSchema) {
+				return []
+			}
+			const keys = Object.keys(this.effectiveActiveFilters || {})
+			if (keys.length === 0) {
+				return []
+			}
+			const covered = new Set(this.refLabelSpecs.map((spec) => spec.key))
+			const fields = fieldsFromSchema(this.effectiveSchema, { includeReadOnly: true })
+			const specs = []
+			for (const key of keys) {
+				if (covered.has(key)) {
+					continue
+				}
+				const field = fields.find((f) => f.key === key)
+				const ref = field && field.reference
+				if (!ref || ref.schema === undefined || ref.schema === null) {
+					continue
+				}
+				specs.push({
+					key,
+					labelField: '',
+					register: ref.register || (typeof this.register === 'string' ? this.register : ''),
+					schema: String(ref.schema),
+				})
+			}
+			return specs
+		},
+
+		/**
+		 * The ids each active reference filter holds, per filter key, for the
+		 * label lookup of the Active line.
+		 *
+		 * @return {{[key: string]: string[]}} Distinct ids per filter key.
+		 */
+		activeFilterRefIds() {
+			const out = {}
+			const keys = new Set([...this.refLabelSpecs, ...this.activeFilterRefSpecs].map((spec) => spec.key))
+			for (const [key, raw] of Object.entries(this.effectiveActiveFilters || {})) {
+				if (!keys.has(key)) {
+					continue
+				}
+				out[key] = (Array.isArray(raw) ? raw : [raw])
+					.filter((id) => id !== null && id !== undefined && id !== '' && typeof id !== 'object')
+					.map((id) => String(id))
+					.sort()
+			}
+			return out
+		},
+
 		/**
 		 * The plural the board bulk band names: "With the selected cases".
 		 * The schema's `titlePlural` (or `plural`), else the lower-cased
@@ -5435,6 +5637,27 @@ export default {
 			return !!this.resolvedSidebar.enabled && this.resolvedSidebar.show !== false
 		},
 
+		/**
+		 * Whether the board toolbar draws the Filter button as a menu: the
+		 * board look, `filterMenu` on, something to filter by, and no filter
+		 * sidebar (whose toggle is that button otherwise).
+		 *
+		 * @return {boolean}
+		 */
+		boardFilterMenu() {
+			return this.isBoardLook && this.filterMenu && !this.hasSidebar && this.filterableFields.length > 0
+		},
+
+		/**
+		 * Whether the funnel menu sits in the table header: `filterMenu` with
+		 * values to offer, unless the toolbar's Filter button is that menu.
+		 *
+		 * @return {boolean}
+		 */
+		showHeaderFilterMenu() {
+			return this.filterMenu && this.filterableFields.length > 0 && !this.boardFilterMenu
+		},
+
 		/** Search props forwarded to the embedded CnIndexSidebar (defaults applied per CnIndexSidebar). */
 		sidebarSearchProps() {
 			return (this.sidebar && this.sidebar.search) || {}
@@ -5558,6 +5781,14 @@ export default {
 			},
 		},
 
+		// The Active line names a referenced value, not its id.
+		activeFilterRefIds: {
+			deep: true,
+			handler() {
+				this.loadRefLabels()
+			},
+		},
+
 		countRequestKey: {
 			immediate: true,
 			/** @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-counts-on-filters-and-views */
@@ -5826,7 +6057,7 @@ export default {
 		 * @spec openspec/changes/index-ref-column-labels/tasks.md#task-2
 		 */
 		async loadRefLabels() {
-			const specs = this.refLabelSpecs
+			const specs = [...this.refLabelSpecs, ...this.activeFilterRefSpecs]
 			if (specs.length === 0) {
 				return
 			}
@@ -5841,7 +6072,8 @@ export default {
 			}
 			await Promise.all(specs.map(async (spec) => {
 				const known = this.refLabels[spec.key] || {}
-				const ids = (this.refLabelIds[spec.key] || []).filter((id) => !Object.hasOwn(known, id))
+				const wanted = new Set([...(this.refLabelIds[spec.key] || []), ...(this.activeFilterRefIds[spec.key] || [])])
+				const ids = [...wanted].filter((id) => !Object.hasOwn(known, id))
 				if (ids.length === 0) {
 					return
 				}
@@ -6525,6 +6757,11 @@ export default {
 		 * @return {void}
 		 */
 		onClearFilters() {
+			// "Clear all" on the Active line also undoes the quick filters it
+			// listed (a tab without an `activeLabel` is not a filter there).
+			for (const chip of this.quickFilterActiveChips) {
+				this.deselectQuickFilterChip(chip.quickFilterIndex)
+			}
 			// Clearing the view brings the person's own columns back.
 			this.appliedViewColumns = null
 			this.appliedSavedViewId = ''
@@ -6615,11 +6852,74 @@ export default {
 		 * @spec openspec/changes/screens-index-list-parity/specs/index-list-board-look/spec.md#requirement-the-toolbar-sits-on-the-ground-in-two-rows
 		 */
 		onRemoveActiveFilter(chip) {
+			if (chip && typeof chip.quickFilterIndex === 'number') {
+				this.deselectQuickFilterChip(chip.quickFilterIndex)
+				return
+			}
 			if (chip && typeof chip.key === 'string') {
 				this.onFilterEvent({ key: chip.key, values: [] })
 			}
 		},
 
+		/**
+		 * Undo a quick filter from the Active line. With several tabs selectable
+		 * the tab leaves the selection; with one, the page goes back to its
+		 * default tab when that tab names no active filter itself, and else to no
+		 * tab at all, so the chip does not come straight back.
+		 *
+		 * @param {number} index The tab index the chip stands for.
+		 * @return {void}
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-a-quick-filter-with-an-active-label-joins-the-active-line
+		 */
+		deselectQuickFilterChip(index) {
+			if (this.quickFilterMultiple) {
+				this.onQuickFilterMultiChange((this.selectedQuickFilterIndices || []).filter((i) => i !== index))
+				return
+			}
+			if (this.activeQuickFilterIndex !== index) {
+				return
+			}
+			const tabs = this.tabStripEntries || []
+			let fallback = tabs.findIndex((tab) => tab && tab.default === true)
+			if (fallback < 0 && tabs.length > 0) {
+				fallback = 0
+			}
+			const fallbackNamed = fallback >= 0 && typeof tabs[fallback].activeLabel === 'string' && tabs[fallback].activeLabel !== ''
+			this.onQuickFilterChange(fallback >= 0 && fallback !== index && !fallbackNamed ? fallback : null)
+		},
+
+		/**
+		 * The text an Active chip shows for one filter value: the referenced
+		 * object's label, the facet bucket's label, the schema's `oneOf` title,
+		 * else the value itself.
+		 *
+		 * @param {string} key The filter key.
+		 * @param {unknown} value One value of that filter.
+		 * @return {string} The label.
+		 * @spec openspec/changes/screens-active-filter-line-parity/specs/active-filter-line-board-look/spec.md#requirement-an-active-chip-names-the-value-not-its-id
+		 */
+		activeFilterValueLabel(key, value) {
+			const id = String(value)
+			const refs = this.refLabels[key]
+			if (refs && typeof refs[id] === 'string' && refs[id] !== '') {
+				return refs[id]
+			}
+			const facet = this.effectiveFacetData && this.effectiveFacetData[key]
+			const bucket = facet && Array.isArray(facet.values)
+				? facet.values.find((fv) => fv && typeof fv === 'object' && String(fv.value) === id)
+				: null
+			if (bucket && typeof bucket.label === 'string' && bucket.label !== '') {
+				return this.cnTranslate(bucket.label)
+			}
+			const prop = this.effectiveSchema?.properties?.[key]
+			const options = prop && Array.isArray(prop.oneOf) ? prop.oneOf : []
+			const option = options.find((o) => o && String(o.const) === id && typeof o.title === 'string')
+			if (option) {
+				return this.cnTranslate(option.title)
+			}
+			return id
+		},
+
 		/**
 		 * A header filter was applied or cleared. One column can own several
 		 * query parameters (a range is `key[gte]` and `key[lte]`), so they are

package/src/components/CnIndexPage/CnIndexPageWidgets.vue

@@ -0,0 +1,169 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+
+  CnIndexPageWidgets — the widgets an index page draws around its list
+  (screens-index-stat-row): the KPI tiles above it (`statRow`, an auto-fit row)
+  and the cards beside it (`sidePanel`, a column). Each entry is a dashboard
+  widget definition `{ id, type, title?, content, headerLink? }`, resolved like
+  a dashboard widget: the app's registry, then the dashboard catalog, then the
+  built-in widgets. Internal to CnIndexPage.
+-->
+<template>
+	<component
+		:is="variant === 'stat-row' ? 'CnKpiGrid' : 'aside'"
+		v-if="entries.length > 0"
+		:columns="variant === 'stat-row' ? 'auto' : undefined"
+		class="cn-index-page-widgets"
+		:class="['cn-index-page-widgets--' + variant]"
+		:data-testid="'cn-index-page-' + variant">
+		<div
+			v-for="entry in entries"
+			:key="entry.id"
+			class="cn-index-page-widgets__cell"
+			:data-testid="'cn-index-page-widget-' + entry.id">
+			<CnWidgetWrapper
+				:widgetId="entry.id"
+				:title="entry.title"
+				:showTitle="variant === 'side-panel' && entry.title !== ''"
+				:showActions="false"
+				:showRefresh="false"
+				:headerLink="entry.headerLink"
+				:flush="variant === 'stat-row'">
+				<component
+					:is="entry.renderer"
+					:widgetId="entry.id"
+					:content="entry.content"
+					v-bind="entry.content" />
+			</CnWidgetWrapper>
+		</div>
+	</component>
+</template>
+
+<script>
+import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
+import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
+import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
+import { BUILT_IN_WIDGETS } from '../CnWidgetGrid/builtInWidgets.js'
+import { getWidgetTypeEntry } from '../CnWidgetGrid/dashboardWidgetRegistry.js'
+
+// Populate the dashboard catalog (stat, table, people, …): an index page
+// may be the first surface that resolves a widget type.
+import '../CnWidgetGrid/registerDashboardWidgets.js'
+
+export default {
+	name: 'CnIndexPageWidgets',
+
+	components: {
+		CnKpiGrid,
+		CnWidgetWrapper,
+	},
+
+	inject: {
+		/** Consumer widget registry provided by CnAppRoot (custom over built-in). */
+		cnRegistry: { default: () => ({}) },
+		/** Host translate function provided by CnAppRoot. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * Widget definitions `{ id, type, title?, content?, headerLink? }`.
+		 * An entry without an id or with a type no layer resolves is skipped.
+		 */
+		widgets: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** Where the widgets sit: `stat-row` above the list, `side-panel` beside it. */
+		variant: {
+			type: String,
+			default: 'stat-row',
+			validator: (v) => ['stat-row', 'side-panel'].includes(v),
+		},
+	},
+
+	computed: {
+		/**
+		 * The renderable entries, in the listed order.
+		 *
+		 * @spec openspec/changes/screens-index-stat-row/specs/index-page/spec.md#requirement-an-index-page-can-draw-a-stat-row-above-the-list
+		 * @return {Array<{id: string, title: string, content: object, headerLink: (object|null), renderer: object}>}
+		 */
+		entries() {
+			const list = Array.isArray(this.widgets) ? this.widgets : []
+			const out = []
+			for (const def of list) {
+				if (!def || typeof def.id !== 'string' || def.id === '' || typeof def.type !== 'string') {
+					continue
+				}
+				const renderer = this.resolveRenderer(def.type)
+				if (!renderer) {
+					if (process.env.NODE_ENV !== 'production') {
+						// eslint-disable-next-line no-console
+						console.warn(`[CnIndexPage] ${this.variant} widget "${def.id}" has type "${def.type}", which no widget registry resolves; skipped.`)
+					}
+					continue
+				}
+				const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
+				out.push({
+					id: def.id,
+					title: typeof def.title === 'string' && def.title !== '' ? translate(def.title) : '',
+					content: (def.content && typeof def.content === 'object') ? def.content : {},
+					headerLink: (def.headerLink && typeof def.headerLink === 'object') ? def.headerLink : null,
+					renderer,
+				})
+			}
+			return out
+		},
+	},
+
+	methods: {
+		/**
+		 * Resolve a widget type: the consumer registry, then the dashboard
+		 * catalog (the type as written, then its alias), then the built-ins.
+		 *
+		 * @param {string} type The widget type.
+		 * @return {object|null} The component, or null.
+		 */
+		resolveRenderer(type) {
+			const consumer = (this.cnRegistry || {})[type]
+			if (consumer) {
+				return consumer.component ?? consumer
+			}
+			const entry = getWidgetTypeEntry(type) || getWidgetTypeEntry(canonicalWidgetType(type))
+			if (entry && entry.renderer) {
+				return entry.renderer
+			}
+			return BUILT_IN_WIDGETS[type] || BUILT_IN_WIDGETS[canonicalWidgetType(type)] || null
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-index-page-widgets--stat-row {
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+
+.cn-index-page-widgets__cell {
+	display: flex;
+	min-width: 0;
+}
+
+.cn-index-page-widgets__cell > * {
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+/* The side panel column (DqTeamwachtrij: 300px, 16px between cards). Its
+   place beside the toolbar and the list is set by CnIndexPage
+   (`cn-index-page--with-side-panel`, index-page.css). */
+.cn-index-page-widgets--side-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	min-width: 0;
+}
+</style>

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -270,7 +270,7 @@ import Pin from 'vue-material-design-icons/Pin.vue'
 import PinOutline from 'vue-material-design-icons/PinOutline.vue'
 import ViewColumnOutline from 'vue-material-design-icons/ViewColumnOutline.vue'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
-import { facetOptionLabel } from '../../utils/facets.js'
+import { facetOptions } from '../../utils/facets.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
 import { columnsFromSchema, filtersFromSchema } from '../../utils/schema.js'
 import { CnDateRangePicker, DEFAULT_DATE_RANGE_PRESETS } from '../CnDateRangePicker/index.js'
@@ -867,12 +867,12 @@ export default {
 		 * @param {object} filter Filter object
 		 */
 		getFilterOptions(filter) {
-			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
 			}
 			// A reference picker's rows come from another list, and neither a
 			// schema enum nor a facet bucket can carry them.

package/src/components/CnNextStepCard/CnNextStepWidget.vue

@@ -21,7 +21,7 @@ import { resolveNextStep } from '../../utils/detailActionModel.js'
  * Renders CnNextStepCard for the bound record's stage from
  * `content: { field?, stages: { <stage>: { title?, checklist, after? } } }`.
  * The checklist only: the page's own primary button stays where the page
- * puts it. Resolved by its registry key, not exported.
+ * puts it. Resolved by its registry key, and exported for an app that renders it itself.
  */
 export default {
 	name: 'CnNextStepWidget',