@conduction/nextcloud-vue 2.82.0 → 2.83.0

package/src/components/CnSettingsFormWidget/CnSettingsFormWidget.vue

@@ -52,18 +52,33 @@
 							{{ field.clearLabel }}
 						</NcButton>
 					</div>
-					<select
-						v-else-if="field.type === 'reference'"
-						:id="inputId(field)"
-						v-model="form[field.key]"
-						class="cn-settings-form__control"
-						:disabled="field.readOnly"
-						:aria-busy="referenceState[field.key] === 'loading' ? 'true' : null"
-						:data-testid="`cn-settings-form-reference-${field.key}`">
-						<option v-for="option in referenceChoices(field)" :key="option.value" :value="option.value">
-							{{ option.label }}
-						</option>
-					</select>
+					<div v-else-if="field.type === 'reference'" class="cn-settings-form__reference">
+						<select
+							:id="inputId(field)"
+							v-model="form[field.key]"
+							class="cn-settings-form__control"
+							:disabled="field.readOnly"
+							:aria-busy="referenceState[field.key] === 'loading' ? 'true' : null"
+							:data-testid="`cn-settings-form-reference-${field.key}`">
+							<option v-for="option in referenceChoices(field)" :key="option.value" :value="option.value">
+								{{ option.label }}
+							</option>
+						</select>
+						<!-- `free`: a typed value (a URL) besides picking an object. -->
+						<template v-if="field.free && !field.readOnly">
+							<label class="cn-settings-form__sublabel" :for="`${inputId(field)}-free`">{{ field.freeLabel }}</label>
+							<input
+								:id="`${inputId(field)}-free`"
+								class="cn-settings-form__control"
+								type="text"
+								inputmode="url"
+								:value="freeValue(field)"
+								:placeholder="field.freePlaceholder"
+								:aria-invalid="errors[field.key] ? 'true' : null"
+								:data-testid="`cn-settings-form-reference-free-${field.key}`"
+								@input="form[field.key] = $event.target.value.trim()">
+						</template>
+					</div>
 					<select
 						v-else-if="field.type === 'select'"
 						:id="inputId(field)"
@@ -97,7 +112,8 @@
 				<p v-if="errors[field.key]" class="cn-settings-form__error" role="alert">
 					{{ errors[field.key] }}
 				</p>
-				<p v-else-if="field.hint" class="cn-settings-form__hint">
+				<!-- A chips field prints its own hint (it gets it in chipsContent). -->
+				<p v-else-if="field.hint && field.type !== 'chips'" class="cn-settings-form__hint">
 					{{ field.hint }}
 				</p>
 			</div>
@@ -129,7 +145,9 @@ import { fillTemplate } from '../../utils/fillTemplate.js'
 import { prefixUrl } from '../../utils/headers.js'
 import { changedFields, objectUrlOf, writeFields } from '../../utils/objectWrite.js'
 import { readPath } from '../../utils/readPath.js'
+import { hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+import { switchIsOn, switchStoredValue } from '../../utils/switchValues.js'
 
 // The native file-picker modal ships its chrome styles here; without this the
 // spawned picker renders unstyled. Rules are scoped to the picker/dialog classes.
@@ -163,7 +181,7 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `fields` (required) — `[{ key, label, type?: 'text'|'textarea'|'select'|'switch'|'number'|'file'|'chips'|'reference', register?, schema?, labelField?, valueTemplate?, filter?, limit?, emptyLabel?, default?, minItems?, required?, minItemsMessage?, lowercase?, addLabel?, confirmLabel?, removeLabel?, picker?: { title?, mimeTypes?, startAt?, valueTemplate? }, chooseLabel?, clearLabel?, hint?, placeholder?, options?: [{ value, label }], required?, pattern?, patternMessage?, min?, max?, rows?, wide?, readOnly? }]`; `key` is a field of the object, a top-level name or a dot-path.
+		 * - `fields` (required) — `[{ key, label, type?: 'text'|'textarea'|'select'|'switch'|'number'|'file'|'chips'|'reference', register?, schema?, labelField?, valueTemplate?, filter?, limit?, emptyLabel?, free?, freeLabel?, freePlaceholder?, freePattern?, freePatternMessage?, default?, minItems?, required?, minItemsMessage?, values?: { on, off }, lowercase?, addLabel?, confirmLabel?, removeLabel?, picker?: { title?, mimeTypes?, startAt?, valueTemplate? }, chooseLabel?, clearLabel?, hint?, placeholder?, options?: [{ value, label }], required?, pattern?, patternMessage?, min?, max?, rows?, wide?, readOnly? }]`; `key` is a field of the object, a top-level name or a dot-path. A `reference` field's `filter` values may be `@objectId` and `@object.<field>` (the record being edited). A `switch` field's `values: { on, off }` reads and writes those values instead of true/false.
 		 * - `save` — `{ url, method?, payload? }`, write through an app endpoint (tokens `{value}`, `{field}`, `{changes}`, `{object.<path>}`).
 		 * - `columns` — 1 or 2 (default 2).
 		 * - `saveLabel`, `savedText`, `readOnly`.
@@ -212,6 +230,9 @@ export default {
 			// `reference` fields: the objects to choose from and the read's state (`loading`, `ready`, `error`), by field key.
 			referenceOptions: {},
 			referenceState: {},
+			// The query each `reference` field was last read with, by field key, so a
+			// new object re-reads only the fields whose filter changes with it.
+			referenceQuery: {},
 			errors: {},
 			saving: false,
 			notice: '',
@@ -236,6 +257,9 @@ export default {
 					hint: this.tr(field.hint || ''),
 					placeholder: this.tr(field.placeholder || ''),
 					chooseLabel: this.tr(field.chooseLabel || 'Choose a file'),
+					free: field.type === 'reference' && field.free === true,
+					freeLabel: this.tr(field.freeLabel || 'Or type a value'),
+					freePlaceholder: this.tr(field.freePlaceholder || ''),
 					clearLabel: this.tr(field.clearLabel || 'Remove'),
 					rows: field.rows || 3,
 					wide: field.wide === true || field.type === 'textarea',
@@ -269,6 +293,7 @@ export default {
 	watch: {
 		objectData() {
 			this.adopt()
+			this.loadReferences()
 		},
 	},
 
@@ -284,7 +309,14 @@ export default {
 		 * parameters, at most `limit`, 100 by default). A failed read leaves the
 		 * field with its stored value only, and says so in the hint's place.
 		 *
+		 * `filter` values may be `@objectId` and `@object.<field>`: the record
+		 * the form edits, so a list can be narrowed to it (the logos of this
+		 * portal). Until the record has that value the field is not read; it is
+		 * read again when the record changes the resolved query, never twice
+		 * for the same query.
+		 *
 		 * @spec openspec/changes/screens-settings-form-reference/specs/settings-form/spec.md#requirement-a-settings-form-field-can-pick-an-object
+		 * @spec openspec/changes/screens-settings-form-reference-object-filter/specs/settings-form/spec.md#requirement-a-reference-fields-filter-can-name-the-record-being-edited
 		 * @return {Promise<void>}
 		 */
 		async loadReferences() {
@@ -292,13 +324,35 @@ export default {
 			if (fields.length === 0) {
 				return
 			}
+			const ctx = { objectId: this.objectId || (this.objectData && this.objectData.id) || undefined, object: this.objectData || undefined }
+			const pending = []
+			for (const field of fields) {
+				const filter = resolveFilterTokens(field.filter && typeof field.filter === 'object' ? field.filter : {}, ctx)
+				if (hasUnresolvedTokens(filter)) {
+					// The record has no value for the token yet: nothing to read.
+					continue
+				}
+				const params = { ...filter, _limit: Number(field.limit) > 0 ? Number(field.limit) : 100 }
+				const query = JSON.stringify(params)
+				if (this.referenceQuery[field.key] === query) {
+					continue
+				}
+				this.referenceQuery = { ...this.referenceQuery, [field.key]: query }
+				pending.push({ field, params, query })
+			}
+			if (pending.length === 0) {
+				return
+			}
 			const { default: axios } = await import('@nextcloud/axios')
-			await Promise.all(fields.map(async (field) => {
+			await Promise.all(pending.map(async ({ field, params, query }) => {
 				this.referenceState = { ...this.referenceState, [field.key]: 'loading' }
 				try {
 					const url = `/apps/openregister/api/objects/${encodeURIComponent(field.register)}/${encodeURIComponent(field.schema)}`
-					const params = { ...(field.filter && typeof field.filter === 'object' ? field.filter : {}), _limit: Number(field.limit) > 0 ? Number(field.limit) : 100 }
 					const { data } = await axios.get(prefixUrl(url), { params })
+					if (this.referenceQuery[field.key] !== query) {
+						// A newer record asked for another list meanwhile.
+						return
+					}
 					const rows = Array.isArray(data) ? data : (Array.isArray(data?.results) ? data.results : [])
 					const options = []
 					for (const row of rows) {
@@ -340,6 +394,24 @@ export default {
 			return [...choices, ...options]
 		},
 
+		/**
+		 * The typed value of a `reference` field with `free`: the value the form
+		 * holds when it is not one of the objects to pick, else empty (picking
+		 * an object clears the typed value).
+		 *
+		 * @spec openspec/changes/screens-settings-form-reference-free-value/specs/settings-form/spec.md#requirement-a-reference-field-can-also-take-a-typed-value
+		 * @param {object} field The field.
+		 * @return {string}
+		 */
+		freeValue(field) {
+			const current = this.form[field.key]
+			if (typeof current !== 'string' || current === '') {
+				return ''
+			}
+			const options = this.referenceOptions[field.key] || []
+			return options.some((option) => option.value === current) ? '' : current
+		},
+
 		tr(text) {
 			if (typeof text !== 'string' || text === '') {
 				return ''
@@ -410,7 +482,7 @@ export default {
 		stored(field) {
 			const value = readPath(this.objectData || {}, field.key)
 			if (field.type === 'switch') {
-				return value === true
+				return switchIsOn(value, field.values)
 			}
 			if (field.type === 'chips') {
 				return Array.isArray(value) ? value.map((item) => String(item)) : []
@@ -534,6 +606,9 @@ export default {
 					if (Number.isNaN(value) || (field.min !== undefined && value < field.min) || (field.max !== undefined && value > field.max)) {
 						errors[field.key] = this.tr('This number is not valid.')
 					}
+				} else if (field.free && field.freePattern && this.freeValue(field) !== '' && !new RegExp(field.freePattern).test(String(value))) {
+					// A typed value (not one of the objects) answers to `freePattern`.
+					errors[field.key] = this.tr(field.freePatternMessage || 'This value is not valid.')
 				} else if (field.pattern && !new RegExp(field.pattern).test(String(value))) {
 					errors[field.key] = this.tr(field.patternMessage || 'This value is not valid.')
 				}
@@ -567,6 +642,12 @@ export default {
 				}
 			}
 			const patch = changedFields(compare, next)
+			// A switch with a value map (`values: { on, off }`) writes those values.
+			for (const field of this.fields) {
+				if (field.type === 'switch' && Object.hasOwn(patch, field.key)) {
+					patch[field.key] = switchStoredValue(patch[field.key], field.values)
+				}
+			}
 			this.saving = true
 			try {
 				if (Object.keys(patch).length > 0) {
@@ -578,7 +659,7 @@ export default {
 						const field = this.fields.find((candidate) => candidate.key === key)
 						const answered = readPath(data, key)
 						const written = answered !== undefined ? answered : patch[key]
-						baseline[key] = field.type === 'switch' ? written === true : (written === null ? (field.type === 'chips' ? [] : '') : written)
+						baseline[key] = field.type === 'switch' ? switchIsOn(written, field.values) : (written === null ? (field.type === 'chips' ? [] : '') : written)
 						form[key] = baseline[key]
 						loaded[key] = baseline[key]
 					}
@@ -639,6 +720,17 @@ export default {
 	color: var(--color-main-text);
 }
 
+.cn-settings-form__reference {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-settings-form__sublabel {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 .cn-settings-form__control {
 	width: 100%;
 	box-sizing: border-box;

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -163,6 +163,7 @@ import widgetLink from '../../mixins/widgetLink.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
 import { resolveObjectOpType } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { aggFilterParam } from '../../utils/fetchAggregate.js'
 import { fetchListTotal, needsListEndpoint } from '../../utils/fetchFilterCounts.js'
 import { formatMetricValue, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { dropOptionalUnresolved, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -1783,7 +1784,8 @@ export default {
 						target[`filter[${k}][${op}]`] = ov
 					}
 				} else if (v !== '' && v !== null && v !== undefined) {
-					target[`filter[${k}]`] = v
+					// `field[gte]` goes out as `filter[field][gte]`, not `filter[field[gte]]`.
+					target[aggFilterParam(k)] = v
 				}
 			}
 		},

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -17,10 +17,29 @@
 <template>
 	<div
 		class="cn-stats-block-widget"
-		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows, 'cn-stats-block-widget--rows': isRows }]">
+		:class="[iconClass, { 'cn-stats-block-widget--multi': hasEntries && !isRows && !isGrid, 'cn-stats-block-widget--rows': isRows, 'cn-stats-block-widget--grid': isGrid }]">
+		<!-- Grid layout: the `stats` (each a stat tile's content, so every
+		     source kind a stat takes: ratio, elapsed, computed...) in `columns`
+		     columns, inside this one card (the board's "Je week tot nu toe"
+		     card). The card's title is the widget wrapper's, as on every other
+		     card (`showTitle: true` on the widget): a heading drawn here took
+		     the page's h2 size under a theme. -->
+		<template v-if="isGrid">
+			<div
+				class="cn-stats-block-widget__grid"
+				:style="{ '--cn-stats-block-columns': gridColumns }"
+				data-testid="cn-stats-block-grid">
+				<CnStatWidget
+					v-for="(stat, index) in stats"
+					:key="stat.id || index"
+					class="cn-stats-block-widget__grid-stat"
+					:content="stat"
+					data-testid="cn-stats-block-grid-stat" />
+			</div>
+		</template>
 		<!-- Rows layout: a title and one label-left, number-right row per entry
 		     (the board's "Mijn Zuiddrecht nu" card). -->
-		<template v-if="isRows">
+		<template v-else-if="isRows">
 			<h2 v-if="title" class="cn-stats-block-widget__rows-title" data-testid="cn-stats-block-rows-title">
 				{{ tl(title) }}
 			</h2>
@@ -101,7 +120,9 @@
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import CnStatsBlock from '../CnStatsBlock/CnStatsBlock.vue'
+import CnStatWidget from '../CnStatWidget/CnStatWidget.vue'
 import { useDataSource } from '../../composables/useDataSource.js'
+import { aggFilterParam } from '../../utils/fetchAggregate.js'
 import { formatMetricValue, normalizeMetricFormat, unwrapAppConfig } from '../../utils/formatMetric.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { dropOptionalUnresolved, hasUnresolvedTokens, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
@@ -180,7 +201,7 @@ const PAGE_REFRESH_BUS_CHANNEL = 'cn:page:refresh'
 export default {
 	name: 'CnStatsBlockWidget',
 
-	components: { CnStatsBlock },
+	components: { CnStatsBlock, CnStatWidget },
 
 	inject: {
 		/**
@@ -241,6 +262,32 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * The tiles of the grid layout (`layout: "grid"`): each is a stat
+		 * tile's `content` (`label`, `caption`, `format`, `source` with any
+		 * kind a `type: "stat"` widget takes: aggregate, `ratio`, `elapsed`,
+		 * `computed`, `weighted`, `endpoint`). They share this one card; its
+		 * title is the widget wrapper's (`showTitle: true` on the widget).
+		 * Used instead of `dataSource` / `entries`.
+		 *
+		 * @type {Array<object>}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		stats: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Columns of the grid layout (1 to 4, default 2).
+		 *
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		columns: {
+			type: Number,
+			default: 2,
+		},
+
 		/**
 		 * How the single-source value is shown: a style name (`'currency'`,
 		 * `'number'`, `'percent'`, `'decimal'`, `'duration-hours'`) or
@@ -400,6 +447,28 @@ export default {
 			return this.layout === 'rows'
 		},
 
+		/**
+		 * Whether the widget draws its `stats` as tiles in a grid
+		 * (`layout: "grid"` with at least one stat).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		isGrid() {
+			return this.layout === 'grid' && Array.isArray(this.stats) && this.stats.length > 0
+		},
+
+		/**
+		 * The grid's column count, clamped to 1-4.
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/screens-stats-block-grid/specs/stats-block-grid/spec.md#requirement-a-stats-block-can-hold-stat-tiles-in-a-grid
+		 */
+		gridColumns() {
+			const n = Math.floor(Number(this.columns))
+			return Number.isFinite(n) ? Math.min(4, Math.max(1, n)) : 2
+		},
+
 		/**
 		 * The rows of the rows layout: one per entry, or a single row from the
 		 * `dataSource` (labelled by `countLabel`). A row is `{ key, label,
@@ -617,7 +686,8 @@ export default {
 		// the cross-prop rule lives here (and, for manifests, in
 		// validateManifestV2's post-schema check).
 		const hasDataSource = !!this.dataSource
-		if (hasDataSource === this.hasEntries) {
+		// A grid of stat tiles carries its sources in `stats`.
+		if (!this.isGrid && hasDataSource === this.hasEntries) {
 			// eslint-disable-next-line no-console
 			console.error('[CnStatsBlockWidget] Exactly one of `dataSource` / `entries` must be provided.')
 		}
@@ -764,7 +834,8 @@ export default {
 							params[`filter[${k}][${op}]`] = ov
 						}
 					} else if (v !== '' && v !== null && v !== undefined) {
-						params[`filter[${k}]`] = v
+						// `field[gte]` goes out as `filter[field][gte]`, not `filter[field[gte]]`.
+						params[aggFilterParam(k)] = v
 					}
 				}
 				const res = await axios.get(url, { params })
@@ -890,6 +961,22 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+.cn-stats-block-widget--grid {
+	padding: 4px 24px 20px;
+}
+
+.cn-stats-block-widget__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--cn-stats-block-columns, 2), minmax(0, 1fr));
+	gap: 16px 20px;
+}
+
+/* A tile in the grid is a part of the card, not a card: no box, no inset. */
+.cn-stats-block-widget__grid-stat {
+	padding: 0;
+	min-width: 0;
+}
+
 .cn-stats-block-widget__rows {
 	display: flex;
 	flex-direction: column;

package/src/components/CnSwitchRowsWidget/CnSwitchRowsWidget.vue

@@ -32,6 +32,7 @@ import { NcCheckboxRadioSwitch, NcNoteCard } from '@nextcloud/vue'
 import { objectUrlOf, writeFields } from '../../utils/objectWrite.js'
 import { readPath } from '../../utils/readPath.js'
 import { serverErrorMessage } from '../../utils/serverErrorMessage.js'
+import { switchIsOn, switchStoredValue } from '../../utils/switchValues.js'
 
 /**
  * CnSwitchRowsWidget — the `switch-rows` widget: a card of switches, each with
@@ -54,7 +55,8 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `rows` (required) — `[{ key, label, hint?, invert? }]`; `key` is a boolean field, a top-level name or a dot-path. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled").
+		 * - `rows` (required) — `[{ key, label, hint?, invert?, values? }]`; `key` is a boolean field, a top-level name or a dot-path. `invert` shows the switch on when the field is false (a stored `disabled` read as "enabled"). `values: { on, off }` reads and writes those values instead of true/false (an app config flag stored as `"1"`/`"0"`).
+		 * - `values` — `{ on, off }` for every row that declares none.
 		 * - `save` — `{ url, method?, payload? }`, write through an app endpoint (tokens `{value}`, `{field}`, `{changes}`, `{object.<path>}`).
 		 * - `readOnly`.
 		 *
@@ -137,11 +139,22 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * A row's value map: its own `values`, else the widget's.
+		 *
+		 * @spec openspec/changes/screens-switch-value-map/specs/switch-rows/spec.md#requirement-a-switch-can-read-and-write-a-value-map
+		 * @param {object} row The row.
+		 * @return {object|undefined} The declared `values`.
+		 */
+		valuesOf(row) {
+			return row.values !== undefined ? row.values : this.content.values
+		},
+
 		/** Read every switch off the object. */
 		adopt() {
 			const values = {}
 			for (const row of this.rows) {
-				const stored = readPath(this.objectData || {}, row.key) === true
+				const stored = switchIsOn(readPath(this.objectData || {}, row.key), this.valuesOf(row))
 				values[row.key] = row.invert ? !stored : stored
 			}
 			this.saved = values
@@ -165,10 +178,11 @@ export default {
 			this.busy = row.key
 			this.values = { ...this.values, [row.key]: on }
 			const stored = row.invert ? !on : on
+			const values = this.valuesOf(row)
 			try {
-				const data = await writeFields(this.objectUrl, { [row.key]: stored }, { save: this.content.save, object: this.objectData })
+				const data = await writeFields(this.objectUrl, { [row.key]: switchStoredValue(stored, values) }, { save: this.content.save, object: this.objectData })
 				const answered = readPath(data, row.key)
-				const written = answered !== undefined ? answered === true : stored
+				const written = answered !== undefined ? switchIsOn(answered, values) : stored
 				const shown = row.invert ? !written : written
 				this.saved = { ...this.saved, [row.key]: shown }
 				this.values = { ...this.values, [row.key]: shown }

package/src/css/index-page.css

@@ -10,6 +10,17 @@
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* A group heading in the header's Actions menu (`{ heading }` in items), as
+   the board's "Ga naar" and "Selectie": 12px bold capitals, muted. The menu
+   is a popover outside the page, so the class is not under the look class. */
+.cn-index-header-menu__heading {
+	font-size: 12px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--color-text-maxcontrast);
+}
+
 /* The board's header buttons (`headerButtons`) at the end of the title row,
    centred on the title and its count line. They wrap under the title on a
    narrow page. */

package/src/css/index.css

@@ -48,6 +48,7 @@
 @import './dashboard.css';
 @import './detail-page.css';
 @import './look-board-detail.css';
+@import './look-board-reports.css';
 @import './reference-preview.css';
 @import './CnSchemaFormDialog.css';
 @import './timeline-stages.css';

package/src/css/look-board-reports.css

@@ -0,0 +1,117 @@
+/*
+ * The reports page under the board look (screens-reports-page-board-look,
+ * board DcRapportages): a 28px title over a muted lead, one section per
+ * category headed at 18px, and two-up cards with an icon tile. Scoped under
+ * `.cn-look-board` with the page guard, so an app without the look renders as
+ * before.
+ */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) {
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: var(--cn-board-section-gap);
+	padding: var(--cn-board-content-padding);
+	max-width: var(--cn-board-content-max-width);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 4px 0 8px;
+}
+
+/* The 56px inset clears the navigation toggle only while the navigation is
+   closed, as on the other board pages. */
+.cn-look-board:has(.app-navigation--closed) .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header {
+	padding-inline-start: 56px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__title {
+	margin: 0;
+	font-size: 28px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__description {
+	margin: 0;
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	/* A host's own `section` rule (a width cap, a margin) does not reach it. */
+	max-width: none;
+	margin: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__section-title {
+	margin: 0;
+	font-size: 18px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__grid {
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 14px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card {
+	box-sizing: border-box;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 14px;
+	padding: 18px 20px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-board-card-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:hover,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card:focus-visible {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-icon {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: 10px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-text {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-title {
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card-description {
+	font-size: 14px;
+	line-height: 1.5;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The widgets under the cards sit in the page's own padding: the dashboard
+   inside draws no second frame. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	margin-top: 0;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
+	padding: 0;
+}

package/src/css/look-board.css

@@ -436,9 +436,20 @@
 	align-items: start;
 }
 
-/* The card: a section of the shell, or a CnSettingsCard of the page. */
+/* An app component that wraps its sections in one element (decidiq's
+   Settings.vue) takes no box of its own: its sections are grid items and
+   cards, as if the shell held them directly. Only an element whose own
+   children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
+	display: contents;
+}
+
+/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
 	box-sizing: border-box;
 	display: flex;
@@ -465,7 +476,12 @@
 	display: none;
 }
 
+/* NcSettingsSection draws its name `display: inline-flex; justify-content:
+   center`; in the card's flex column the name spans the card, so the title
+   sat centred. The board's card titles start at the left edge. */
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name {
+	justify-content: flex-start;
+	text-align: start;
 	margin: 0;
 	font-size: 19px;
 	font-weight: 700;
@@ -667,6 +683,21 @@
 	margin-inline-start: auto;
 }
 
+/* The title and meta take the room the pill and the date leave, and a long
+   title wraps inside it: the pill and the date stay on the title line, as the
+   board draws them. They drop under the text only when the card is too narrow
+   to hold 240px of text beside them (PqMijnWerk). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__main {
+	flex: 1 1 240px;
+}
+
+/* ---- Saved views on a dashboard card (PqMijnWerk) ------------------------ */
+/* The card body is flush, so the list and its empty line carry the card's
+   inset themselves, the same 24px at the sides as a record list. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-saved-views-widget {
+	padding: 4px 24px 20px;
+}
+
 /* The board draws no chevron after the pill and date. */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;