@conduction/nextcloud-vue 2.110.0 → 2.112.0

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -147,6 +147,39 @@
 			hidden
 			data-testid="cn-detail-widget-props-pending" />
 
+		<!-- A mount-mode leaf whose descriptor asks for the library card
+		     (`chrome: "card"`): the host draws the card, its title with the
+		     count the leaf reports, the leaf's actions in the title row and the
+		     library empty state. The leaf reports them through the `onHeader`
+		     mount prop and renders only its rows. -->
+		<CnWidgetWrapper
+			v-else-if="wrapsMountLeaf"
+			:title="leafCardTitle"
+			titleIconPosition="left"
+			:showActions="false"
+			:showRefresh="false"
+			:showRequestFeature="false"
+			:headerLink="cardHeaderLink"
+			class="cn-detail-page__leaf-card"
+			data-testid="cn-detail-widget-leaf-card">
+			<template v-if="leafCardIcon" #title-icon>
+				<CnIcon :name="leafCardIcon" :size="20" />
+			</template>
+			<template v-if="rendererHeader.count !== null" #title-meta>
+				<span class="cn-detail-page__catalog-count" data-testid="cn-detail-widget-header-count">{{ rendererHeader.count }}</span>
+			</template>
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			</template>
+			<CnWidgetEmptyState
+				v-if="rendererHeader.empty"
+				:name="rendererHeader.empty.name"
+				:description="rendererHeader.empty.description" />
+			<CnLeafMountHost
+				:provider="integrationProvider"
+				:mountProps="integrationMountProps" />
+		</CnWidgetWrapper>
+
 		<CnLeafMountHost
 			v-else-if="isMountIntegration"
 			:provider="integrationProvider"
@@ -293,6 +326,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
 import CnDetailWidgetHeaderItems from './CnDetailWidgetHeaderItems.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
@@ -373,6 +407,7 @@ export default {
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
+		CnWidgetEmptyState,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -628,7 +663,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', actions: [], pill: null },
+			rendererHeader: { link: null, note: '', actions: [], pill: null, count: null, empty: null },
 		}
 	},
 
@@ -844,6 +879,34 @@ export default {
 				&& typeof provider.unmount === 'function'
 		},
 
+		/**
+		 * Whether a mount-mode leaf gets the library card: on a card surface,
+		 * grid cell included, when its descriptor asks for it (`chrome:
+		 * "card"`). Opt-in, because a leaf that draws its own card would
+		 * otherwise sit in two.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-mount-mode-leaf-can-take-the-library-card
+		 */
+		wrapsMountLeaf() {
+			return !this.isBare && this.isMountIntegration && this.integrationProvider.chrome === 'card'
+		},
+
+		/**
+		 * The leaf card's title: the manifest's, else the descriptor's label.
+		 *
+		 * @return {string} The title in the user's language.
+		 */
+		leafCardTitle() {
+			const title = widgetTitleOf(this.widget)
+			return title ? this.translateLabel(title) : (this.integrationProvider?.label || '')
+		},
+
+		/** @return {string} The leaf card's icon: the manifest's, else the descriptor's. */
+		leafCardIcon() {
+			return this.widget?.icon || this.integrationProvider?.icon || ''
+		},
+
 		/**
 		 * Whether this render is using a provider's widget as its bare surface.
 		 *
@@ -1017,6 +1080,8 @@ export default {
 				// one that reads `objectId`.
 				integrationContext: this.widgetIntegrationContext,
 				...this.resolvedWidgetProps,
+				// A carded leaf reports its title row and empty state here.
+				...(this.wrapsMountLeaf ? { onHeader: this.onRendererHeader } : {}),
 			}
 		},
 
@@ -1221,11 +1286,12 @@ export default {
 
 	methods: {
 		/**
-		 * Take the header a content-only renderer, or an app widget in the
-		 * titled card, reports.
+		 * Take the header a content-only renderer, an app widget in the
+		 * titled card, or a carded mount-mode leaf (`onHeader`) reports.
 		 *
-		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>}} header The header parts.
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>, count?: number, empty?: {name: string, description?: string}|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
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-carded-leaf-reports-its-count-actions-and-empty-state
 		 */
 		onRendererHeader(header) {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
@@ -1234,7 +1300,11 @@ export default {
 			// `action` (one) and `actions` (several) both count, `action` first.
 			const actions = [header && header.action, ...((header && Array.isArray(header.actions)) ? header.actions : [])].filter(usable)
 			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
-			this.rendererHeader = { link, note, actions, pill }
+			const count = header && Number.isFinite(header.count) ? header.count : null
+			const empty = header && header.empty && typeof header.empty.name === 'string' && header.empty.name !== ''
+				? { name: header.empty.name, description: typeof header.empty.description === 'string' ? header.empty.description : '' }
+				: null
+			this.rendererHeader = { link, note, actions, pill, count, empty }
 		},
 
 		/**
@@ -1372,6 +1442,31 @@ export default {
 	white-space: nowrap;
 }
 
+/* A leaf card in a narrow cell keeps its title and count: the title row
+   wraps and the actions move under it instead of squeezing the title out. */
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header) {
+	flex-wrap: wrap;
+}
+
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header-left) {
+	flex: 1 0 auto;
+}
+
+/* The count beside a card title: the grey 20px badge of the tab strip. */
+.cn-detail-page__catalog-count {
+	background-color: var(--color-border);
+	border-radius: 10px;
+	box-sizing: border-box;
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 20px;
+	min-width: 20px;
+	padding: 0 6px;
+	text-align: center;
+}
+
 .cn-detail-page__catalog-note {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -2,7 +2,7 @@
 	<CnDialog
 		:look="look"
 		:width="width"
-		defaultWidth="form"
+		:defaultWidth="columns === 2 ? 'wizard' : 'form'"
 		:eyebrow="eyebrow"
 		:subtitle="subtitle"
 		:name="resolvedTitle"

package/src/components/CnIndexPage/CnIndexPage.md

@@ -368,7 +368,7 @@ export default {
 | `showMassImport` | Boolean | `true` | Whether to show the mass Import action |
 | `showMassCopy` | Boolean | `true` | Whether to show the mass Copy action |
 | `allowExport` | Boolean | `false` | Opt-in flag for the native Export menu (CSV/Excel) next to the Add button. Renders only when `true` AND the resolved schema is flagged `exportable: true`; navigates to OpenRegister's export leaf (`GET /apps/openregister/api/objects/{register}/{schema}/export`), passing `$route.query` through as filters. Distinct from `showMassExport`, which exports the fetched/selected rows via a blob download. |
-| `allowSavedViews` | Boolean | `false` | Opt-in flag for the saved-views control (saved-views-ui): a Views dropdown listing the user's OpenRegister saved-search views (`GET /apps/openregister/api/views`). Applying one writes its stored filters/search/sort into the route query (`_search` and `_order` reserved keys + plain filter keys); "Save current view…" persists the current route-query state via POST and toasts either way, naming the view (a failure also keeps the dialog open with the reason); own views can be deleted after confirmation. Emits `apply-view`. |
+| `allowSavedViews` | Boolean | unset | Saved views (saved-views-ui). Unset, the sidebar's Views tab (save, apply, edit, share, add to menu, copy a default, delete) is on for every page with a sidebar and a source a view can be scoped to: register and schema, `entitySource` or `savedViewsScope`. `false` turns it off. `true` also forces the sidebar and adds the toolbar control: a Views dropdown listing the user's OpenRegister saved-search views (`GET /apps/openregister/api/views`). Applying one writes its stored filters/search/sort into the route query (`_search` and `_order` reserved keys + plain filter keys); "Save current view…" persists the current route-query state via POST and toasts either way, naming the view (a failure also keeps the dialog open with the reason); own views can be deleted after confirmation. Emits `apply-view`. |
 | `savedViewsScope` | String | `''` | Which pages share this page's saved views. By default a view is shared by every page over the same `register` and `schema` and shown on no other page, since a view is filters over one schema's fields. Set a name to share views across pages over different sources, or to keep two pages over one source apart. Written into the saved view's `query.scope` on save; views saved before scoping existed carry no scope and stay visible everywhere. |
 | `massActionNameField` | String | `'title'` | Property name used to display item names in dialogs |
 | `nameFormatter` | Function | `null` | Custom formatter for item names in dialogs; overrides `massActionNameField` |

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -947,7 +947,11 @@
 										<CnStatusBadge v-for="(pill, index) in item.pills"
 											:key="index"
 											:label="pill.label"
-											:variant="pill.variant" />
+											:variant="pill.variant">
+											<template v-if="pill.icon" #icon>
+												<CnIcon :name="pill.icon" :size="14" />
+											</template>
+										</CnStatusBadge>
 										<span v-if="item.due" class="cn-index-page__map-due">{{ item.due }}</span>
 									</span>
 								</div>
@@ -995,6 +999,7 @@
 					:swimlaneField="board.swimlaneField || ''"
 					:dueRule="board.dueRule || null"
 					:cardRoles="board.card || null"
+					:pillLooks="refLooks"
 					:colorField="board.colorField || ''"
 					:sumField="board.sumField || ''"
 					:sumFormat="boardSumFormat"
@@ -1047,7 +1052,7 @@
 					v-else-if="currentViewMode === 'list'"
 					:objects="displayObjects"
 					:schema="effectiveSchema"
-					:config="listConfig"
+					:config="renderedListConfig"
 					:selectable="selectable"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
@@ -1107,6 +1112,7 @@
 					:clickToView="rowClickOpens"
 					:cardFields="resolvedCardFields"
 					:cardLayout="cardLayout"
+					:pillLooks="refLooks"
 					:cardFieldColumns="cardFieldColumns"
 					:accentOf="cardAccent"
 					:selectedIds="internalSelectedIds"
@@ -1379,7 +1385,7 @@ import { isRowActionVisible, rowActionPayload } from '../../utils/rowActionItem.
 import { isNewTabClick, isNewTabHandled, isRowMiddleClick, markNewTabHandled, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { compileRowClass } from '../../utils/rowClassRules.js'
 import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
-import { buildRouteQueryFromViewState, buildViewCreatePayload, defaultFilterViews, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, schemaSlug, viewMatchesScope } from '../../utils/savedViewHelpers.js'
+import { buildRouteQueryFromViewState, buildViewCreatePayload, defaultFilterViews, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, pageOffersSavedViews, savedViewScope, schemaSlug, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { savedViewBadge, savedViewOverrides } from '../../utils/savedViewOverrides.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
@@ -1500,11 +1506,22 @@ function declaredFilterFields(props) {
  * @return {object} The `{ fieldKey: values }` map, empty when the link carries none.
  */
 function namedFiltersFromRoute(instance, props) {
+	const route = instance && instance.proxy && instance.proxy.$route
+	return namedFiltersFromQuery((route && route.query) || {}, props)
+}
+
+/**
+ * The named-source filters a query carries, as `namedFiltersFromRoute` reads them.
+ *
+ * @param {object} query The route query.
+ * @param {object} props The CnIndexPage props.
+ *
+ * @return {object} The `{ fieldKey: values }` map.
+ */
+function namedFiltersFromQuery(query, props) {
 	if (!props.entitySource) {
 		return {}
 	}
-	const route = instance && instance.proxy && instance.proxy.$route
-	const query = (route && route.query) || {}
 	const properties = declaredFilterFields(props)
 	const out = {}
 
@@ -1752,6 +1769,8 @@ export default {
 
 	inject: {
 		cnCustomComponents: { default: () => ({}) },
+		/** The app's named formatters, provided by CnAppRoot, for the map list's pills and template tokens. */
+		cnFormatters: { default: () => ({}) },
 		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
 		cnPermissions: { default: () => [] },
 		/** The app config an ancestor provides, for `@config.<key>` in quick-filter labels. */
@@ -2947,9 +2966,11 @@ export default {
 		},
 
 		/**
-		 * Opt-in flag for the saved-views control (saved-views-ui) rendered
-		 * in the toolbar. Defaults to `false` — an app must explicitly
-		 * enable it per page. When `true`, a Views dropdown lists the
+		 * Saved views (saved-views-ui). Unset, the sidebar's Views tab is on
+		 * for every page with a sidebar and a source a view can be scoped to
+		 * (register and schema, `entitySource` or `savedViewsScope`); `false`
+		 * turns it off. `true` also forces the sidebar and adds the toolbar
+		 * control, where a Views dropdown lists the
 		 * current user's OpenRegister saved-search views
 		 * (`GET /apps/openregister/api/views`); applying one writes its
 		 * stored filters/search/sort into the route query (reusing the
@@ -2961,7 +2982,7 @@ export default {
 		 */
 		allowSavedViews: {
 			type: Boolean,
-			default: false,
+			default: null,
 		},
 
 		/**
@@ -4108,6 +4129,8 @@ export default {
 			boardPrevPageSize: this.viewMode === 'board' ? ((this.pagination && this.pagination.limit) || 20) : null,
 			/** Resolved labels of reference columns: `{ [columnKey]: { [id]: label|null } }`. */
 			refLabels: {},
+			/** Colour and icon names of the records badge columns point at: `{ [columnKey]: { [id]: { color, icon } } }`. */
+			refLooks: {},
 			/** Count per tab-strip index, for the entries that asked for one; null = none. */
 			tabCounts: null,
 			// The counts of the `filterStrip` pills, by pill key ('all', 'v0', ...).
@@ -5523,7 +5546,7 @@ export default {
 		 * @spec openspec/changes/saved-views-manage-and-defaults/tasks.md#task-6
 		 */
 		savedViewsForSidebar() {
-			if (!this.allowSavedViews) {
+			if (!this.savedViewsOffered) {
 				return null
 			}
 			return {
@@ -6022,6 +6045,12 @@ export default {
 		 */
 		renderedColumns() {
 			let cols = this.tableColumns
+			if (this.refLookSpecs.length > 0) {
+				const lookKeys = new Set(this.refLookSpecs.map((spec) => spec.key))
+				cols = cols.map((col) => (col && typeof col === 'object' && lookKeys.has(col.key)
+					? { ...col, widgetProps: { ...(col.widgetProps || {}), looks: this.refLooks[col.key] || {} } }
+					: col))
+			}
 			if (this.refLabelSpecs.length > 0) {
 				const byKey = new Map(this.refLabelSpecs.map((s) => [s.key, s]))
 				cols = cols.map((col) => {
@@ -6092,6 +6121,108 @@ export default {
 		 *
 		 * @return {Object<string, string[]>} Distinct ids per column key.
 		 */
+		/**
+		 * The pills that take their tone and icon from the record they point at
+		 * (`resolve: { colorField?, iconField?, register?, schema? }`): badge
+		 * columns and the list view's leading and trailing cells
+		 * (`widgetProps.resolve`), the board card's pill (`board.card.resolve`)
+		 * and the record card's pills (`cardLayout` headPill, footerPill, chips).
+		 * Register and schema default to the field's reference in the schema.
+		 *
+		 * @return {Array<{key: string, register: string, schema: string, colorField: string, iconField: string}>} The specs.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		refLookSpecs() {
+			const list = this.listConfig || {}
+			const listCells = [list.leading, ...(Array.isArray(list.trailing) ? list.trailing : [list.trailing])]
+			const badgeSources = [...this.tableColumns, ...listCells]
+				.filter((c) => c && typeof c === 'object' && c.widget === 'badge' && c.widgetProps)
+				.map((c) => ({ key: c.key, resolve: c.widgetProps.resolve }))
+			// The board card's pill (`board.card.pill` with `board.card.resolve`)
+			// and the record card's pills (`cardLayout` headPill, footerPill,
+			// chips, each with its own `resolve`).
+			const card = this.board && this.board.card && typeof this.board.card === 'object' ? this.board.card : {}
+			const layout = this.cardLayout && typeof this.cardLayout === 'object' ? this.cardLayout : {}
+			const layoutPills = [layout.headPill, layout.footerPill, ...(Array.isArray(layout.chips) ? layout.chips : [])]
+				.filter((def) => def && typeof def === 'object')
+				.map((def) => ({ key: def.field, resolve: def.resolve }))
+			// The map list's pills (`mapConfig.list.pills`, each with its own `resolve`).
+			const mapListPills = (this.mapListEnabled && Array.isArray(this.mapConfig.list.pills) ? this.mapConfig.list.pills : [])
+				.filter((def) => def && typeof def === 'object')
+				.map((def) => ({ key: def.path, resolve: def.resolve }))
+			const seen = new Set()
+			const cols = [...badgeSources, { key: card.pill, resolve: card.resolve }, ...layoutPills, ...mapListPills].filter((c) => {
+				const wanted = typeof c.key === 'string' && c.key !== '' && c.resolve && typeof c.resolve === 'object'
+					&& (c.resolve.colorField || c.resolve.iconField) && !seen.has(c.key)
+				if (wanted) {
+					seen.add(c.key)
+				}
+				return wanted
+			})
+			if (cols.length === 0) {
+				return []
+			}
+			const fields = this.effectiveSchema ? fieldsFromSchema(this.effectiveSchema, { includeReadOnly: true }) : []
+			const specs = []
+			for (const col of cols) {
+				const resolve = col.resolve
+				const field = fields.find((f) => f.key === col.key)
+				const ref = (field && field.reference) || {}
+				const register = resolve.register || ref.register || (typeof this.register === 'string' ? this.register : '')
+				const schema = resolve.schema || (ref.schema !== undefined && ref.schema !== null ? String(ref.schema) : '')
+				if (!register || !schema) {
+					continue
+				}
+				specs.push({ key: col.key, register, schema, colorField: resolve.colorField || '', iconField: resolve.iconField || '' })
+			}
+			return specs
+		},
+
+		/**
+		 * `listConfig` with the referenced records' looks on its badge cells,
+		 * as `renderedColumns` does for the table.
+		 *
+		 * @return {object} The list view's config.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		renderedListConfig() {
+			const list = this.listConfig
+			if (!list || this.refLookSpecs.length === 0) {
+				return list
+			}
+			const lookKeys = new Set(this.refLookSpecs.map((spec) => spec.key))
+			const withLooks = (cell) => (cell && typeof cell === 'object' && lookKeys.has(cell.key)
+				? { ...cell, widgetProps: { ...(cell.widgetProps || {}), looks: this.refLooks[cell.key] || {} } }
+				: cell)
+			return {
+				...list,
+				...(list.leading ? { leading: withLooks(list.leading) } : {}),
+				...(list.trailing ? { trailing: Array.isArray(list.trailing) ? list.trailing.map(withLooks) : withLooks(list.trailing) } : {}),
+			}
+		},
+
+		/**
+		 * The ids each `refLookSpecs` column shows on screen.
+		 *
+		 * @return {{[key: string]: Array<string>}} Sorted ids by column key.
+		 */
+		refLookIds() {
+			const out = {}
+			for (const spec of this.refLookSpecs) {
+				const ids = new Set()
+				for (const row of this.displayObjects) {
+					const v = row ? row[spec.key] : undefined
+					;(Array.isArray(v) ? v : [v]).forEach((id) => {
+						if (id !== null && id !== undefined && id !== '' && typeof id !== 'object') {
+							ids.add(String(id))
+						}
+					})
+				}
+				out[spec.key] = [...ids].sort()
+			}
+			return out
+		},
+
 		refLabelIds() {
 			const out = {}
 			const facets = this.storeFacets || this.resolvedSidebar.facets || {}
@@ -6359,13 +6490,15 @@ export default {
 			const translated = {
 				...list,
 				title: this.cnTranslate(list.title),
-				sub: list.sub ? this.cnTranslate(list.sub) : '',
+				sub: Array.isArray(list.sub) ? list.sub.map((s) => this.cnTranslate(s)) : (list.sub ? this.cnTranslate(list.sub) : ''),
 				due: list.due ? this.cnTranslate(list.due) : '',
 			}
 			return mapListItems(this.displayObjects, translated, {
 				rowKey: this.rowKey,
 				located: (row) => Boolean(this.resolveRowGeometry(row)),
 				translate: (text) => this.cnTranslate(text),
+				formatters: this.cnFormatters,
+				looks: this.refLooks,
 			})
 		},
 
@@ -6664,7 +6797,16 @@ export default {
 		 * @return {{ scope: string, register: string, schema: object|string|null }} The page's source.
 		 */
 		savedViewsPage() {
-			return { scope: this.savedViewsScope, register: this.register, schema: this.schema }
+			return { scope: this.savedViewsScope, register: this.register, schema: this.schema, source: this.entitySource }
+		},
+
+		/**
+		 * Whether this page offers saved views in its sidebar.
+		 *
+		 * @return {boolean}
+		 */
+		savedViewsOffered() {
+			return pageOffersSavedViews(this)
 		},
 
 		/**
@@ -7980,6 +8122,15 @@ export default {
 			},
 		},
 
+		// Read the colour and icon of the records badge columns point at.
+		refLookIds: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.loadRefLooks()
+			},
+		},
+
 		// The Active line names a referenced value, not its id.
 		activeFilterRefIds: {
 			deep: true,
@@ -8237,7 +8388,7 @@ export default {
 	created() {
 		this.applyViewModeFromRoute()
 		this.pushAiContext()
-		if (this.allowSavedViews) {
+		if (this.savedViewsOffered) {
 			this.fetchSavedViews()
 		}
 		this.selfActions = createSelfModeActions({
@@ -8431,6 +8582,45 @@ export default {
 			}))
 		},
 
+		/**
+		 * Read the colour and icon names `refLookSpecs` columns need, for the
+		 * rows on screen, with the same resolver as the labels. A failure
+		 * leaves the badge as declared.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		async loadRefLooks() {
+			if (this.refLookSpecs.length === 0) {
+				return
+			}
+			if (!this._refLabelResolver) {
+				this._refLabelResolver = createRefLabelResolver(() => {
+					try {
+						return (this.list && this.list.objectStore) || useObjectStore()
+					} catch {
+						return null
+					}
+				})
+			}
+			const read = (spec, ids, name) => (name
+				? this._refLabelResolver.resolve(spec.register, spec.schema, ids, name, { strict: true }).catch(() => ({}))
+				: Promise.resolve({}))
+			await Promise.all(this.refLookSpecs.map(async (spec) => {
+				const known = this.refLooks[spec.key] || {}
+				const ids = (this.refLookIds[spec.key] || []).filter((id) => !Object.hasOwn(known, id))
+				if (ids.length === 0) {
+					return
+				}
+				const [colors, icons] = await Promise.all([read(spec, ids, spec.colorField), read(spec, ids, spec.iconField)])
+				const found = {}
+				ids.forEach((id) => {
+					found[id] = { color: (colors && colors[id]) || null, icon: (icons && icons[id]) || null }
+				})
+				this.refLooks = { ...this.refLooks, [spec.key]: { ...(this.refLooks[spec.key] || {}), ...found } }
+			}))
+		},
+
 		/**
 		 * Whether a saved view shows its record count (`viewCounts`).
 		 *
@@ -11345,8 +11535,8 @@ export default {
 
 		/**
 		 * Fetch the current user's saved views (own + public) from
-		 * OpenRegister's views API. Called from created() when
-		 * `allowSavedViews` is enabled.
+		 * OpenRegister's views API. Called from created() when the page
+		 * offers saved views.
 		 */
 		async fetchSavedViews() {
 			this.savedViewsLoading = true
@@ -11416,6 +11606,9 @@ export default {
 				query.savedView = this.appliedSavedViewId
 			}
 			const nav = this.$router.replace({ query })
+			if (this.isNamedSource) {
+				this.namedActiveFilters = namedFiltersFromQuery(query, this)
+			}
 			// Swallow the duplicate-navigation rejection (Vue Router 3)
 			// when the applied view matches the current query.
 			if (nav && typeof nav.catch === 'function') {
@@ -11589,7 +11782,7 @@ export default {
 				return
 			}
 			const badge = this.savedViewMenuBadge(view)
-			menu.toggle({ id: String(view.id || view.slug), page: this.savedViewPage, name: view.name, ...(badge ? { badge } : {}) })
+			menu.toggle({ id: String(view.id || view.slug), page: this.savedViewPage, name: view.name, ...(typeof view.icon === 'string' && view.icon !== '' ? { icon: view.icon } : {}), ...(badge ? { badge } : {}) })
 		},
 
 		/**
@@ -12124,7 +12317,9 @@ export default {
 			if (resultData && resultData.success && this._refLabelResolver) {
 				this._refLabelResolver.invalidate()
 				this.refLabels = {}
+				this.refLooks = {}
 				this.loadRefLabels()
+				this.loadRefLooks()
 			}
 		},
 

package/src/components/CnIndexSidebar/CnIndexSidebar.md

@@ -216,7 +216,7 @@ With admin-only filter control:
 | `propertiesGroupLabel` | String | `''` | Override label for the schema properties group. Falls back to `schema.title` |
 | `defaultTab` | String | `'search-tab'` | Tab id that is active when the sidebar opens. Built-in ids: `'search-tab'`, `'columns-tab'` |
 | `activeTab` | String | `''` | Switch to a tab while mounted, e.g. `'filters-tab'` |
-| `savedViews` | Object | `null` | The page's saved views, shown in a third tab, Filters (CnSavedViewsPanel); every intent comes back as one `saved-view` event `{ action, view }` |
+| `savedViews` | Object | `null` | The page's saved views, shown in a third tab, Views (`filters-tab`, CnSavedViewsPanel); every intent comes back as one `saved-view` event `{ action, view }` |
 | `userIsAdmin` | Boolean | `true` | When `false`, schema properties with `adminOnly: true` are hidden from filters |
 | `filterFields` | Object | `null` | Filter declarations for a page with no schema of its own. Wins over `schema`, and feeds the Search tab only |
 

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -287,11 +287,11 @@
 			</div>
 		</NcAppSidebarTab>
 
-		<!-- Filters Tab: the page's saved views (save, list, manage, add to menu). -->
+		<!-- Views tab (id filters-tab): the page's saved views (save, list, manage, add to menu). -->
 		<NcAppSidebarTab
 			v-if="savedViews"
 			id="filters-tab"
-			:name="t('nextcloud-vue', 'Filters')"
+			:name="t('nextcloud-vue', 'Views')"
 			:order="3">
 			<template #icon>
 				<BookmarkOutline :size="20" />

package/src/components/CnNcDashboardList/CnNcDashboardList.vue

@@ -32,6 +32,7 @@
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { fetchEndpointSource } from '../../composables/useEndpointSource.js'
+import { resolveDue } from '../../utils/dueText.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
 import { openRowTarget } from '../../utils/linkNavigation.js'
 import { readPath } from '../../utils/readPath.js'
@@ -70,6 +71,9 @@ function appUrl(url) {
  * - `itemsPath`: the rows' path in the response, when not `results`.
  * - `limit`: the most rows shown (default 7).
  * - `title`, `subtitle`: templates filled from a row (default `{title}`, none).
+ * - `due`: `{ field, ...dueText config }`: the trailing line says how a date
+ *   stands ("3 days overdue", "Due today", the date or the days left), in
+ *   place of `subtitle` (see `resolveDue`).
  * - `href`: a template for a row's page (`/apps/dossiq/cases/{id}`).
  * - `viewAll`: `{ href, label? }`.
  * - `emptyText`: text for an empty list.
@@ -125,7 +129,7 @@ export default {
 				return {
 					id: String(id),
 					mainText: this.fill(this.config.title || '{title}', item) || String(id),
-					subText: this.fill(this.config.subtitle, item),
+					subText: this.subtitleOf(item),
 					href: this.config.href ? appUrl(fillTemplate(this.config.href, { ...item, id })) : '',
 				}
 			})
@@ -155,6 +159,22 @@ export default {
 			return typeof value === 'string' && value !== '' ? this.cnTranslate(value) : ''
 		},
 
+		/**
+		 * A row's trailing line: how its due date stands, or the subtitle template.
+		 *
+		 * @spec openspec/changes/nc-dashboard-due/specs/nc-dashboard-widgets/spec.md#requirement-a-dashboard-row-says-how-its-date-stands
+		 * @param {object} item The row.
+		 * @return {string}
+		 */
+		subtitleOf(item) {
+			const due = this.config.due
+			if (due && typeof due === 'object' && due.field) {
+				const resolved = resolveDue(readPath(item, due.field), due, (text) => this.cnTranslate(text))
+				return resolved ? resolved.text : ''
+			}
+			return this.fill(this.config.subtitle, item)
+		},
+
 		/**
 		 * A template filled from a row, translated first.
 		 *

package/src/components/CnObjectCard/CnObjectCard.md

@@ -138,6 +138,7 @@ export default {
 |---|---|---|---|
 | `maxMetadata` | `Number` | `4` | Maximum number of schema properties to show in the metadata section. Properties are sorted by their `order` value before slicing |
 | `accent` | `Object` | `null` | Status accent `{ variant, icon?, label? }`: a colored start border and, with `icon`, a colored icon before the title. `variant` is `success`, `warning`, `error`, `info` or `primary`; `label` is the icon's tooltip and accessible name |
+| `pillLooks` | `Object` | `{}` | The referenced records' colour and icon names, by field and id (`{ [field]: { [id]: { color, icon } } }`, read by CnIndexPage). A record layout pill with `resolve: { colorField?, iconField? }` takes its record's tone and icon from here. |
 
 ## Slots