@conduction/nextcloud-vue 2.138.0 → 2.140.0

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -775,6 +775,7 @@ import CnIcon from '../CnIcon/CnIcon.vue'
 import { readUserPreference, writeUserPreference } from '../../composables/useUserPreferences.js'
 import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
+import { readPath } from '../../utils/readPath.js'
 import { isNewTabClick, isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
 import { ACTIONS_NEEDING_THE_FILES_PAGE, crumbsFor, hostActionApplies, joinPath } from './filesBrowser.js'
 import {
@@ -3049,7 +3050,7 @@ export default {
 				? { path: this.currentPath }
 				: { fileId: node.fileid, fileName: node.basename, path: node.path }
 			if (type === 'open-modal') {
-				wrapped = { ...action, props: { ...(action.props || {}), ...context } }
+				wrapped = { ...action, props: { ...(action.props || {}), ...context, ...this.rowPropsOf(action, node) } }
 			} else if (type === 'handler') {
 				wrapped = { ...action, args: [...(action.args || []), node ?? this.folder] }
 			}
@@ -3060,6 +3061,32 @@ export default {
 			dispatchAction(wrapped, { router: this.$router || null })
 		},
 
+		/**
+		 * The clicked file's row-data fields an action asks for as modal props
+		 * (`rowProps: { prop: field }`), or none.
+		 *
+		 * @param {object} action The declared action.
+		 * @param {object|null} node The file, or null for a New-menu entry.
+		 * @return {object} The props.
+		 * @spec openspec/changes/files-review-row-when/specs/files-review-row-when/spec.md#requirement-a-modal-action-can-carry-fields-of-the-clicked-files-row-data
+		 */
+		rowPropsOf(action, node) {
+			const wanted = action && action.rowProps
+			if (node === null || !wanted || typeof wanted !== 'object') {
+				return {}
+			}
+			const byId = this.resolvedRowData && typeof this.resolvedRowData === 'object' ? this.resolvedRowData : {}
+			const entry = byId[node.fileid] ?? byId[String(node.fileid)] ?? {}
+			const out = {}
+			for (const [prop, field] of Object.entries(wanted)) {
+				const value = readPath(entry, String(field))
+				if (value !== undefined && value !== null && value !== '') {
+					out[prop] = value
+				}
+			}
+			return out
+		},
+
 		/**
 		 * A click on a linked row opens the file where it lives.
 		 *
@@ -3278,6 +3305,17 @@ export default {
 	font-size: 14px;
 }
 
+/* Core's apps.css draws every dt/dd inline-block with a fixed, end-aligned dt.
+   @spec openspec/changes/files-side-facts-core-dl/specs/files-side-facts-core-dl/spec.md#requirement-a-file-side-cards-facts-are-not-drawn-by-cores-dl-rules */
+.cn-files-browser__side-facts dt,
+.cn-files-browser__side-facts dd {
+	display: block;
+	width: auto;
+	padding: 0;
+	text-align: start;
+	white-space: normal;
+}
+
 .cn-files-browser__side-facts dt {
 	color: var(--color-text-maxcontrast);
 }

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -285,13 +285,19 @@ export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
  * `visibleIf.extension` lists file extensions (no case, a leading dot is
  * allowed); `visibleIf.mime` lists mime types, where one ending in `/` or
  * `/*` names the whole family. Every condition named must hold. An action
- * without `visibleIf` is offered on every file, as before.
+ * without `visibleIf` is offered on every file, as before. An action with
+ * `when` is offered only while `when` is `true`.
  *
  * @param {object} action The declared action.
  * @param {object} node The file (`basename`, `mime`).
  * @return {boolean} True when the action belongs on this file.
  */
 export function hostActionApplies(action, node) {
+	// `when`: the action applies only while it is true (a case type flag).
+	// @spec openspec/changes/files-review-row-when/specs/files-review-row-when/spec.md#requirement-a-files-browser-entry-can-apply-only-when-a-condition-holds
+	if (action && typeof action === 'object' && 'when' in action && action.when !== true) {
+		return false
+	}
 	const condition = action && action.visibleIf
 	if (!condition || typeof condition !== 'object') {
 		return true

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -78,6 +78,11 @@ export function normaliseFileColumns(columns) {
 		if (!entry || typeof entry !== 'object' || typeof entry.key !== 'string' || entry.key === '') {
 			return
 		}
+		// `when`: the column applies only while it is true (a case type flag).
+		// @spec openspec/changes/files-review-row-when/specs/files-review-row-when/spec.md#requirement-a-files-browser-entry-can-apply-only-when-a-condition-holds
+		if ('when' in entry && entry.when !== true) {
+			return
+		}
 		if (isBuiltInFileColumn(entry.key) && entry.source === undefined) {
 			out.push({ ...BUILT_IN_FILE_COLUMNS[entry.key], ...entry, builtIn: true })
 			return

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="cn-index-page"
-		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel, 'cn-index-page--quick-filters-toolbar': effectiveQuickFilterPlacement === 'toolbar' }]"
+		:class="[lookClass, { 'cn-index-page--with-side-panel': hasSidePanel, 'cn-index-page--sidebar-open': sidebarPanelOpen, 'cn-index-page--quick-filters-toolbar': effectiveQuickFilterPlacement === 'toolbar' }]"
 		data-testid="cn-index-page"
 		@keydown="onListKeydown">
 		<!-- Header — overridable via #header slot. CnPageHeader ALWAYS renders:
@@ -172,7 +172,7 @@
 				:maxVisible="quickFilterMaxVisible"
 				:fit="false"
 				:multiple="quickFilterMultiple"
-				:activeIndex="activeQuickFilterIndex"
+				:activeIndex="shownQuickFilterIndex"
 				:selectedIndices="selectedQuickFilterIndices"
 				:counts="effectiveTabCounts"
 				@update:activeIndex="onQuickFilterChange"
@@ -2240,6 +2240,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: the count line while a saved view is applied (manifest
+		 * `config.savedViewCountText`), a template as `countText` that may name
+		 * the view's conditions as `{view}`: its description, else its filters
+		 * in words (DqFilterInMenu "3 van 48 lopende zaken · termijn binnen 7
+		 * dagen, van mij · gesorteerd op termijn"). A view's own `countText`
+		 * override and a scope's come first.
+		 *
+		 * @spec openspec/changes/applied-view-lights-its-lens/specs/applied-view-lights-its-lens/spec.md
+		 */
+		savedViewCountText: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Board look: a count line per view (manifest `config.countTextByView`),
 		 * `{ table?, cards?, list?, board?, map? }`, each a template as
@@ -4580,6 +4595,8 @@ export default {
 			savedViewCounts: null,
 			// The id (or slug) of the saved view that is applied; its chip shows selected under the board look.
 			appliedSavedViewId: '',
+			/** Whether the reader picked a lens chip after the applied view (then their chip shows). */
+			lensChosenByHand: false,
 			// The sort option the applied view's `overrides.sortOption` selected, so leaving the view can undo it.
 			viewSortOption: '',
 			// The applied view's filters as one comparable key, so the address keeps naming the view until they change.
@@ -4653,6 +4670,8 @@ export default {
 			savedViews: [],
 			savedViewsLoading: false,
 			showSaveViewDialog: false,
+			/** Whether the reader changed the view since it was opened or saved. */
+			viewChanged: false,
 			viewPendingDelete: null,
 			/** An `api-call` header action waiting on its confirmation, or null. */
 			headerApiCallPending: null,
@@ -6419,13 +6438,53 @@ export default {
 		 * @spec openspec/changes/working-list-row-actions/specs/index-page/spec.md
 		 */
 		/**
-		 * The chip the strip lights: the active tab, else the default tab of
-		 * tabs that arrived after setup (`quickFiltersFrom`), which is the
-		 * one the fetch applies.
+		 * The lens chip an applied saved view narrows within: the non-default
+		 * tab whose every condition the view's own conditions (its filters
+		 * over its locked filters, tokens as written) hold, the most specific
+		 * first (DqFilterInMenu: "Termijn deze week" lit for the view of that
+		 * name). Null without an applied view or a fitting tab.
+		 *
+		 * @return {number|null} The tab index.
+		 * @spec openspec/changes/applied-view-lights-its-lens/specs/applied-view-lights-its-lens/spec.md
+		 */
+		appliedViewLensIndex() {
+			const view = this.appliedSavedView
+			const tabs = Array.isArray(this.tabStripEntries) ? this.tabStripEntries : []
+			if (!view || tabs.length === 0) {
+				return null
+			}
+			const query = view.query && typeof view.query === 'object' ? view.query : {}
+			const locked = query.overrides && typeof query.overrides.lockedFilters === 'object' ? query.overrides.lockedFilters : {}
+			const conditions = { ...(locked || {}), ...(query.filters || view.filters || {}) }
+			const same = (a, b) => JSON.stringify(Array.isArray(a) ? a.map(String) : String(a)) === JSON.stringify(Array.isArray(b) ? b.map(String) : String(b))
+			let best = null
+			let bestSize = 0
+			tabs.forEach((tab, index) => {
+				const filter = tab && tab.filter && typeof tab.filter === 'object' ? tab.filter : {}
+				const keys = Object.keys(filter)
+				if (tab.default === true || keys.length === 0 || keys.length <= bestSize) {
+					return
+				}
+				if (keys.every((key) => Object.hasOwn(conditions, key) && same(conditions[key], filter[key]))) {
+					best = index
+					bestSize = keys.length
+				}
+			})
+			return best
+		},
+
+		/**
+		 * The chip the strip lights: the lens an applied saved view narrows
+		 * within (until the reader picks a chip), else the active tab, else
+		 * the default tab of tabs that arrived after setup
+		 * (`quickFiltersFrom`), which is the one the fetch applies.
 		 *
 		 * @return {number|null} The tab index, or null without tabs.
 		 */
 		shownQuickFilterIndex() {
+			if (!this.quickFilterMultiple && !this.lensChosenByHand && this.appliedViewLensIndex !== null) {
+				return this.appliedViewLensIndex
+			}
 			if (this.activeQuickFilterIndex !== null && this.activeQuickFilterIndex !== undefined) {
 				return this.activeQuickFilterIndex
 			}
@@ -8649,12 +8708,20 @@ export default {
 
 		/**
 		 * Whether the toolbar draws Save view: not when the page switches it
-		 * off (`savedViewSave: false`) or its header carries one.
+		 * off (`savedViewSave: false`) or its header carries one, and in the
+		 * board look only once the view has changed.
 		 *
+		 * @spec openspec/changes/board-save-view-only-when-changed/specs/saved-views/spec.md#requirement-the-board-look-offers-save-view-once-the-view-has-changed
 		 * @return {boolean}
 		 */
 		toolbarSavesView() {
-			return this.savedViewSave !== false && !this.headerSavesView
+			if (this.savedViewSave === false || this.headerSavesView) {
+				return false
+			}
+			// The board look offers it once the view differs from the one
+			// opened: changed by the reader, or, with no saved view open,
+			// filtered by the address.
+			return !this.isBoardLook || this.viewChanged || (!this.appliedSavedViewId && this.activeFilterChips.length > 0)
 		},
 
 		/**
@@ -8815,6 +8882,11 @@ export default {
 		 * @return {string}
 		 */
 		presentedCountText() {
+			const viewLine = this.savedViewCountText
+			const view = this.appliedSavedView
+			if (view && typeof viewLine === 'string' && viewLine !== '' && this.activeScopePresentation.countText === undefined && !savedViewOverrides(view)?.countText) {
+				return viewLine
+			}
 			if (this.activeScopePresentation.countText === undefined) {
 				const byView = this.countTextByView
 				const own = byView && typeof byView === 'object' ? byView[this.currentViewMode] : undefined
@@ -8825,6 +8897,23 @@ export default {
 			return this.presented('countText')
 		},
 
+		/**
+		 * The applied saved view's conditions for the count line's `{view}`:
+		 * its description, else its filters in words, starting lower case.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/applied-view-lights-its-lens/specs/applied-view-lights-its-lens/spec.md
+		 */
+		appliedViewConditionsText() {
+			const view = this.appliedSavedView
+			if (!view) {
+				return ''
+			}
+			const own = typeof view.description === 'string' ? view.description.trim() : ''
+			const text = own !== '' ? own : String(this.viewFilterSummary(view) || '')
+			return text.charAt(0).toLowerCase() + text.slice(1)
+		},
+
 		headerDescriptionBase() {
 			const total = this.effectivePagination?.total
 			// Board look: the count line is a template over the rows on this page
@@ -8848,6 +8937,7 @@ export default {
 						.replace('{shown}', String(shown))
 						.replace('{total}', String(total))
 						.replace(/\{term\}/g, this.sourceTerm)
+						.replace(/\{view\}/g, this.appliedViewConditionsText)
 				}
 				return this.countLine(this.countSubtitle, total, shown)
 			}
@@ -8913,6 +9003,17 @@ export default {
 			return !!this.resolvedSidebar.enabled && this.resolvedSidebar.show !== false
 		},
 
+		/**
+		 * Whether the page's side panel is open now; the board look then lays
+		 * the header out narrower (DqZakenSorteren).
+		 *
+		 * @spec openspec/changes/board-header-buttons-under-title-beside-side-panel/specs/board-header-buttons-under-title-beside-side-panel/spec.md#requirement-the-header-buttons-sit-under-the-title-while-the-side-panel-is-open
+		 * @return {boolean}
+		 */
+		sidebarPanelOpen() {
+			return Boolean(this.sidebarOpen && this.hasSidebar)
+		},
+
 		/**
 		 * Whether the board toolbar draws the Filter button as a menu: the
 		 * board look, `filterMenu` on, something to filter by, and no filter
@@ -8955,7 +9056,9 @@ export default {
 
 		/** Search props forwarded to the embedded CnIndexSidebar (defaults applied per CnIndexSidebar). */
 		sidebarSearchProps() {
-			return (this.sidebar && this.sidebar.search) || {}
+			// The page's own search hint, unless `sidebar.search` names one.
+			const own = this.shownSearchPlaceholder ? { searchPlaceholder: this.shownSearchPlaceholder } : {}
+			return { ...own, ...((this.sidebar && this.sidebar.search) || {}) }
 		},
 
 		/**
@@ -10756,6 +10859,7 @@ export default {
 		 * @return {void}
 		 */
 		onSearchEvent(value) {
+			this.viewChanged = true
 			if (this.namedSourceSearches) {
 				this.namedSearchTerm = value || ''
 			}
@@ -10775,9 +10879,11 @@ export default {
 		 * @return {void}
 		 */
 		onQuickFilterChange(index) {
+			this.viewChanged = true
 			// `activeQuickFilterIndex` is a setup-returned ref; the
 			// Vue 2 ref-unwrap proxy makes plain assignment work.
 			this.activeQuickFilterIndex = index
+			this.lensChosenByHand = true
 			this.$emit('quick-filter-change', index)
 		},
 
@@ -10790,6 +10896,7 @@ export default {
 		 * @return {void}
 		 */
 		onQuickFilterMultiChange(indices) {
+			this.viewChanged = true
 			this.selectedQuickFilterIndices = Array.isArray(indices) ? indices : []
 			this.$emit('quick-filter-change', this.selectedQuickFilterIndices)
 		},
@@ -10805,6 +10912,7 @@ export default {
 		 * @return {void}
 		 */
 		onSidebarSortChange(keys, value) {
+			this.viewChanged = true
 			if (value !== undefined && this.selectSortOption(value)) {
 				return
 			}
@@ -10884,6 +10992,7 @@ export default {
 		 * @return {void}
 		 */
 		onSortEvent(payload) {
+			this.viewChanged = true
 			// An order by keys (a column header, a field in the Sort section)
 			// leaves an endpoint-ranked order.
 			if (this.sortSource.value) {
@@ -11087,6 +11196,7 @@ export default {
 		 * @return {void}
 		 */
 		onClearFilters() {
+			this.viewChanged = true
 			// "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) {
@@ -11195,6 +11305,7 @@ export default {
 		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-a-board-can-switch-the-field-its-columns-come-from
 		 */
 		onBoardColumnFieldChange(field) {
+			this.viewChanged = true
 			this.boardColumnFieldChoice = field
 			/**
 			 * @event board-column-field-change The board's column switch picked another field. Payload: the field name.
@@ -11210,6 +11321,7 @@ export default {
 		 * @return {void}
 		 */
 		onBoardNarrowChange(value) {
+			this.viewChanged = true
 			this.onFilterEvent({ key: this.boardNarrow.field, values: value === '' ? [] : [value] })
 		},
 
@@ -11272,6 +11384,7 @@ export default {
 		 * @return {void}
 		 */
 		onFilterEvent(payload) {
+			this.viewChanged = true
 			if (this.isSelfFetchMode && typeof this.list.onFilterChange === 'function') {
 				this.list.onFilterChange(payload.key, payload.values)
 				this.persistViewStateToRoute(this.currentViewState())
@@ -11294,6 +11407,7 @@ 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) {
+			this.viewChanged = true
 			if (chip && chip.searchTerm === true) {
 				this.onSearchEvent('')
 				return
@@ -12262,6 +12376,7 @@ export default {
 		 * @return {void}
 		 */
 		onColumnsEvent(columns) {
+			this.viewChanged = true
 			if (this.isSelfFetchMode && this.list.visibleColumns) {
 				this.list.visibleColumns.value = columns
 			}
@@ -12309,6 +12424,7 @@ export default {
 		 * @return {void}
 		 */
 		onColumnsReorder(columns) {
+			this.viewChanged = true
 			this.onColumnsEvent(columns)
 		},
 
@@ -12319,6 +12435,7 @@ export default {
 		 * @return {void}
 		 */
 		onPinChange(count) {
+			this.viewChanged = true
 			if (!this.personalColumns || Array.isArray(this.appliedViewColumns)) {
 				return
 			}
@@ -13213,6 +13330,7 @@ export default {
 		 */
 		onApplySavedView(view, { keepSavedViewKey = false } = {}) {
 			this.appliedSavedViewId = view && (view.id || view.slug) ? String(view.id || view.slug) : ''
+			this.lensChosenByHand = false
 			const state = extractViewState(view)
 			// A view's filters may carry tokens (`@me`, `@myTeam`): resolved here,
 			// and an optional one that answers nothing (no team) is dropped. A
@@ -13221,6 +13339,10 @@ export default {
 				loadMyTeam().then(() => this.onApplySavedView(view, { keepSavedViewKey }))
 				return
 			}
+			// An opened view is unchanged until the reader changes it.
+			this.$nextTick(() => {
+				this.viewChanged = false
+			})
 			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
 			state.filters = dropOptionalUnresolved(resolveFilterTokens(state.filters, ctx))
 			this.appliedViewFiltersKey = this.viewFiltersKey(state.filters)
@@ -13346,6 +13468,7 @@ export default {
 				}
 				this.savedViews = [...this.savedViews, view]
 				this.showSaveViewDialog = false
+				this.viewChanged = false
 				this.sidebarActiveTab = 'filters-tab'
 				this.sidebarOpen = true
 				this.toastSavedView('success', t('nextcloud-vue', 'View "{name}" saved', { name }))

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -32,11 +32,17 @@
 				</div>
 
 				<div class="cn-index-sidebar__section">
+					<!-- The board look names the field by its hint, as the list's
+					     own search field, with the magnifier (DqZakenSorteren). -->
 					<NcTextField
 						:modelValue="searchValue || ''"
 						:placeholder="searchPlaceholder"
-						:label="searchLabel"
-						@update:modelValue="$emit('search', $event)" />
+						:label="isBoardLook ? searchPlaceholder : searchLabel"
+						@update:modelValue="$emit('search', $event)">
+						<template v-if="isBoardLook" #icon>
+							<Magnify :size="18" />
+						</template>
+					</NcTextField>
 				</div>
 
 				<!-- Sort (list, card and map views; the table sorts by its headers):
@@ -355,6 +361,7 @@ import DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import FilterRemoveOutline from 'vue-material-design-icons/FilterRemoveOutline.vue'
 import InformationOutline from 'vue-material-design-icons/InformationOutline.vue'
+import Magnify from 'vue-material-design-icons/Magnify.vue'
 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'
@@ -410,6 +417,7 @@ export default {
 		Pin,
 		PinOutline,
 		InformationOutline,
+		Magnify,
 	},
 
 	inject: {

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -720,6 +720,7 @@ export default {
 		 * - `hidden` (boolean) — Hide this property
 		 * - `editable` (boolean) — Override editability (default: based on schema readOnly)
 		 * - `label` (string) — Override the display label
+		 * - `emptyValue` (string) — Words shown, translated, for an empty or false value instead of a dash
 		 * - `widget` (string) — Override the widget type for editing
 		 * - `formatter` (string) — Display the value through the formatter
 		 *   registered under this id on CnAppRoot (`cnFormatters`), called as
@@ -739,7 +740,8 @@ export default {
 		},
 
 		/**
-		 * Number of grid columns.
+		 * Number of grid columns. The board look fits 200px columns instead,
+		 * except for one column, which it keeps.
 		 */
 		columns: {
 			type: Number,
@@ -1100,7 +1102,8 @@ export default {
 				// still showing the stored code — `submitted` under a Dutch
 				// label, beside a list that already read "Ingediend".
 				const enumLabel = this.enumDisplayLabel(field, raw)
-				values[field.key] = enumLabel !== null ? enumLabel : formatValue(raw, prop || {})
+				const empty = this.emptyValueFor(field, raw)
+				values[field.key] = empty !== null ? empty : (enumLabel !== null ? enumLabel : formatValue(raw, prop || {}))
 			}
 			return values
 		},
@@ -1116,8 +1119,12 @@ export default {
 		 * CSS grid template for the container.
 		 */
 		gridStyle() {
-			// The board look: as many 200px columns as the card has room for.
+			// The board look: as many 200px columns as the card has room for,
+			// unless the config asks for one column (a stacked list of pairs).
 			if (normalizeLook(this.cnLook) === 'board') {
+				if (this.columns === 1) {
+					return { 'grid-template-columns': 'minmax(0, 1fr)' }
+				}
 				return {
 					'grid-template-columns': 'repeat(auto-fit, minmax(200px, 1fr))',
 				}
@@ -1842,6 +1849,24 @@ export default {
 			return this.isPlainObject(raw)
 		},
 
+		/**
+		 * The words an override gives an empty or false value
+		 * (`overrides[key].emptyValue`, translated), or null to format it as usual.
+		 *
+		 * @param {object} field - Resolved field definition from resolvedFields
+		 * @param {*} raw - The field's value
+		 * @return {string|null}
+		 * @spec openspec/changes/data-widget-empty-value-one-column/specs/data-widget/spec.md
+		 */
+		emptyValueFor(field, raw) {
+			const override = this.resolvedOverrides[field.key]
+			const words = override && typeof override.emptyValue === 'string' ? override.emptyValue : ''
+			if (words === '' || !(raw === null || raw === undefined || raw === '' || raw === false)) {
+				return null
+			}
+			return this.cnTranslate(words)
+		},
+
 		/**
 		 * Check if a field is editable.
 		 *

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']) {
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary', 'colorMap', 'grow', 'cellClass']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}

package/src/components/CnRecordListWidget/CnRecordNoteRows.vue

@@ -117,6 +117,13 @@ import { readPath } from '../../utils/readPath.js'
 /** The bus channel every endpoint-bound widget on the page refetches on. */
 const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
 
+/**
+ * The document event a recorded note sends, so a row's leaf (humaniq's
+ * hours) can record what it holds for the same object at the same moment.
+ * `detail` is the row's leaf props plus `note`.
+ */
+const NOTE_RECORDED_EVENT = 'cn-record-notes:recorded'
+
 /**
  * The rows of a record list drawn as notes to record (`presentation:
  * "notes"`, DqDagAfsluiten "Nog open van vandaag"): per row its pill, title,
@@ -351,6 +358,9 @@ export default {
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
 				await axios.post(prefixUrl(url), { [this.action.bodyField || 'message']: text })
+				if (this.leaf) {
+					document.dispatchEvent(new CustomEvent(NOTE_RECORDED_EVENT, { detail: { ...this.leafProps(item.row), note: text } }))
+				}
 				const { [item.key]: done, ...rest } = this.drafts
 				this.drafts = rest
 				if (refresh) {

package/src/components/CnStackedBarWidget/CnStackedBarWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset }" data-testid="cn-stacked-bar">
+	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset, 'cn-stacked-bar--compact': compact }" data-testid="cn-stacked-bar">
 		<div v-if="isLoading" class="cn-stacked-bar__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span>{{ loadingLabel }}</span>
@@ -183,7 +183,7 @@ export default {
 		 * segments to the card (`header` event, `count`), for a chip after the
 		 * title or a `{count}` in it.
 		 *
-		 * @type {{inset?: boolean, headerCount?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
+		 * @type {{inset?: boolean, compact?: boolean, headerCount?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
 		 */
 		content: {
 			type: Object,
@@ -241,6 +241,17 @@ export default {
 			return Boolean(this.content && this.content.inset === true)
 		},
 
+		/**
+		 * Whether the widget is the compact summary box (`content.compact`):
+		 * a 15px heading, one thin bar and the legend on one line.
+		 *
+		 * @spec openspec/changes/stacked-bar-compact/specs/stacked-bar-compact/spec.md#requirement-a-stacked-bar-can-be-drawn-as-the-compact-summary-box
+		 * @return {boolean}
+		 */
+		compact() {
+			return Boolean(this.content && this.content.compact === true)
+		},
+
 		/**
 		 * The translate function in use.
 		 *
@@ -651,4 +662,59 @@ export default {
 	line-height: 1.2;
 	color: var(--color-main-text);
 }
+
+/* `content.compact: true`: the summary box (DqZaakDocumenten "4 van 7
+   beoordeeld"): the sunken ground, a 15px heading, one 8px bar of joined
+   segments and the legend on one line, each count beside its label. */
+.cn-stacked-bar--compact {
+	box-sizing: border-box;
+	gap: 10px;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--cn-board-sunken-ground, var(--color-background-hover));
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__heading {
+	flex-wrap: wrap;
+	gap: 8px;
+	font-size: 15px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__bar {
+	gap: 0;
+	height: 8px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__segment {
+	border-radius: 0;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__legend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 18px;
+	font-size: 14px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__legend-item {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__label {
+	color: var(--color-main-text);
+	font-size: 1em;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__dot {
+	border-radius: 50%;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__count {
+	font-size: 1em;
+	line-height: inherit;
+}
 </style>